mirror of
https://github.com/torappinfo/uweb.git
synced 2024-08-14 23:54:59 +00:00
blog update
This commit is contained in:
parent
0c5d4e3473
commit
ddd22288fa
36 changed files with 8033 additions and 6455 deletions
3757
js/gitment.js
Normal file
3757
js/gitment.js
Normal file
File diff suppressed because it is too large
Load diff
367
js/index.js
Normal file
367
js/index.js
Normal file
|
|
@ -0,0 +1,367 @@
|
|||
/**
|
||||
* Created by Xiaotao.Nie on 09/04/2018.
|
||||
* All right reserved
|
||||
* IF you have any question please email onlythen@yeah.net
|
||||
*/
|
||||
|
||||
// Global functions and listeners
|
||||
window.onresize = () => {
|
||||
// when window resize , we show remove some class that me be added
|
||||
// often for debug
|
||||
if(window.document.documentElement.clientWidth > 680){
|
||||
let aboutContent = document.getElementById('nav-content')
|
||||
aboutContent.classList.remove('hide-block')
|
||||
aboutContent.classList.remove('show-block');
|
||||
}
|
||||
// if(window.isPost){
|
||||
// reLayout()
|
||||
// }
|
||||
|
||||
reHeightToc();
|
||||
};
|
||||
|
||||
// Nav switch function on mobile
|
||||
/*****************************************************************************/
|
||||
const navToggle = document.getElementById('site-nav-toggle');
|
||||
navToggle.addEventListener('click', () => {
|
||||
let aboutContent = document.getElementById('nav-content')
|
||||
if (!aboutContent.classList.contains('show-block')) {
|
||||
aboutContent.classList.add('show-block');
|
||||
aboutContent.classList.remove('hide-block')
|
||||
} else {
|
||||
aboutContent.classList.add('hide-block')
|
||||
aboutContent.classList.remove('show-block');
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
// global search
|
||||
/*****************************************************************************/
|
||||
|
||||
const searchButton = document.getElementById('search')
|
||||
const searchField = document.getElementById('search-field')
|
||||
const searchInput = document.getElementById('search-input')
|
||||
const searchResultContainer = document.getElementById('search-result-container')
|
||||
const escSearch = document.getElementById('esc-search')
|
||||
const beginSearch = document.getElementById('begin-search')
|
||||
|
||||
searchField.addEventListener('mousewheel',(e) => {
|
||||
// e.preventDefault()
|
||||
e.stopPropagation()
|
||||
return false
|
||||
}, false)
|
||||
|
||||
var searchJson;
|
||||
var caseSensitive = false
|
||||
|
||||
searchButton.addEventListener('click', () => {
|
||||
search()
|
||||
});
|
||||
|
||||
escSearch.addEventListener('click',() => {
|
||||
hideSearchField()
|
||||
})
|
||||
|
||||
beginSearch.addEventListener('click',() => {
|
||||
let keyword = searchInput.value;
|
||||
if(keyword){
|
||||
searchFromKeyWord(keyword)
|
||||
}
|
||||
})
|
||||
|
||||
function toggleSeachField(){
|
||||
if (!searchField.classList.contains('show-flex-fade')) {
|
||||
showSearchField()
|
||||
} else {
|
||||
hideSearchField()
|
||||
}
|
||||
}
|
||||
|
||||
function showSearchField() {
|
||||
searchInput.focus()
|
||||
searchField.classList.add('show-flex-fade');
|
||||
searchField.classList.remove('hide-flex-fade');
|
||||
}
|
||||
|
||||
function hideSearchField(){
|
||||
window.onkeydown = null;
|
||||
searchField.classList.add('hide-flex-fade');
|
||||
searchField.classList.remove('show-flex-fade');
|
||||
}
|
||||
|
||||
function searchFromKeyWord(keyword = ""){
|
||||
let result = [];
|
||||
|
||||
let sildeWindowSize = 100;
|
||||
|
||||
let handleKeyword = keyword
|
||||
|
||||
if(!caseSensitive){
|
||||
handleKeyword = keyword.toLowerCase()
|
||||
}
|
||||
if(!searchJson) return -1;
|
||||
else {
|
||||
searchJson.forEach((item) => {
|
||||
|
||||
if(!item.title || !item.content) return 0; // break
|
||||
|
||||
let title = item.title
|
||||
let content = item.content.trim().replace(/<[^>]+>/g,"").replace(/[`#\n]/g,"");
|
||||
|
||||
let lowerTitle = title,lowerContent = content;
|
||||
|
||||
if(!caseSensitive){
|
||||
lowerTitle = title.toLowerCase();
|
||||
lowerContent = content.toLowerCase();
|
||||
}
|
||||
|
||||
|
||||
if(lowerTitle.indexOf(handleKeyword) !== -1 || lowerContent.indexOf(handleKeyword) !== -1){
|
||||
let resultItem = {}
|
||||
resultItem.title = title.replace(keyword, "<span class='red'>" + keyword + '</span>');
|
||||
resultItem.url = item.url;
|
||||
|
||||
resultItem.content = [];
|
||||
|
||||
let lastend = 0
|
||||
|
||||
while(lowerContent.indexOf(handleKeyword) !== -1){
|
||||
let begin = lowerContent.indexOf(handleKeyword) - sildeWindowSize / 2 < 0 ? 0 : lowerContent.indexOf(handleKeyword) - sildeWindowSize / 2
|
||||
let end = begin + sildeWindowSize;
|
||||
let reg = caseSensitive ? new RegExp('('+keyword+')','g') : new RegExp('('+keyword+')','ig')
|
||||
resultItem.content.push("..." + content.slice(lastend + begin, lastend + end).replace(reg, "<span class='red'>$1</span>") + "...")
|
||||
lowerContent = lowerContent.slice(end, lowerContent.length)
|
||||
lastend = end
|
||||
}
|
||||
// resultItem.title = title.replace(keyword, "<span class='red'>" + keyword + '</span>');
|
||||
result.push(resultItem)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if(!result.length){
|
||||
searchResultContainer.innerHTML = `
|
||||
<div class="no-search-result">No Result</div>
|
||||
`
|
||||
return;
|
||||
}
|
||||
|
||||
let searchFragment = document.createElement('ul')
|
||||
|
||||
for(let item of result){
|
||||
let searchItem = document.createElement('li');
|
||||
let searchTitle = document.createElement('a');
|
||||
searchTitle.href = item.url
|
||||
searchTitle.innerHTML = item.title;
|
||||
searchItem.appendChild(searchTitle)
|
||||
if(item.content.length) {
|
||||
let searchContentLiContainer = document.createElement('ul')
|
||||
for (let citem of item.content) {
|
||||
let searchContentFragment = document.createElement('li')
|
||||
searchContentFragment.innerHTML = citem;
|
||||
searchContentLiContainer.appendChild(searchContentFragment)
|
||||
}
|
||||
searchItem.appendChild(searchContentLiContainer)
|
||||
}
|
||||
searchFragment.appendChild(searchItem)
|
||||
}
|
||||
while(searchResultContainer.firstChild){
|
||||
searchResultContainer.removeChild(searchResultContainer.firstChild)
|
||||
}
|
||||
searchResultContainer.appendChild(searchFragment)
|
||||
}
|
||||
|
||||
function search(){
|
||||
|
||||
toggleSeachField()
|
||||
|
||||
window.onkeydown = (e) => {
|
||||
if (e.which === 27) {
|
||||
/** 这里编写当ESC按下时的处理逻辑！ */
|
||||
toggleSeachField()
|
||||
} else if(e.which === 13){
|
||||
// 回车按下
|
||||
let keyword = searchInput.value;
|
||||
if(keyword){
|
||||
searchFromKeyWord(keyword)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
if(!searchJson){
|
||||
let isXml;
|
||||
let search_path = window.hexo_search_path;
|
||||
if (search_path.length === 0) {
|
||||
search_path = "search.json";
|
||||
} else if (/json$/i.test(search_path)) {
|
||||
isXml = false;
|
||||
}
|
||||
let path = window.hexo_root+ search_path;
|
||||
$.ajax({
|
||||
url: path,
|
||||
dataType: isXml ? "xml" : "json",
|
||||
async: true,
|
||||
success: function (res) {
|
||||
searchJson = isXml ? $("entry", res).map(function() {
|
||||
return {
|
||||
title: $("title", this).text(),
|
||||
content: $("content",this).text(),
|
||||
url: $("url" , this).text()
|
||||
};
|
||||
}).get() : res;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// directory function in post pages
|
||||
/*****************************************************************************/
|
||||
function getDistanceOfLeft(obj) {
|
||||
let left = 0;
|
||||
let top = 0;
|
||||
while (obj) {
|
||||
left += obj.offsetLeft;
|
||||
top += obj.offsetTop;
|
||||
obj = obj.offsetParent;
|
||||
}
|
||||
return {
|
||||
left:left,
|
||||
top:top
|
||||
};
|
||||
}
|
||||
|
||||
var toc = document.getElementById('toc')
|
||||
|
||||
var tocToTop = getDistanceOfLeft(toc).top;
|
||||
|
||||
function reHeightToc(){
|
||||
if(toc) { // resize toc height
|
||||
toc.style.height = ( document.documentElement.clientHeight - 10 ) + 'px';
|
||||
toc.style.overflowY = 'scroll';
|
||||
}
|
||||
}
|
||||
|
||||
reHeightToc();
|
||||
|
||||
if(window.isPost){
|
||||
var result = []
|
||||
|
||||
var nameSet = new Set();
|
||||
|
||||
if(!toc || !toc.children || !toc.children[0]){
|
||||
// do nothing
|
||||
}
|
||||
else {
|
||||
if (toc.children[0].nodeName === "OL") {
|
||||
let ol = Array.from(toc.children[0].children)
|
||||
|
||||
function getArrayFromOl(ol) {
|
||||
let result = []
|
||||
|
||||
// let escape = function (item) {
|
||||
// return item.replace(/<[^>]+>/g, "").replace(/^\s\s*/, '').replace(/\s\s*$/, '').replace(/[\. _]/g, '-')
|
||||
// }
|
||||
|
||||
ol.forEach((item) => {
|
||||
if (item.children.length === 1) {
|
||||
// TODO: need change
|
||||
let value = item.children[0].getAttribute('href').replace(/^#/,"")
|
||||
result.push({
|
||||
value: [value],
|
||||
dom: item
|
||||
})
|
||||
nameSet.add(value)
|
||||
}
|
||||
else {
|
||||
let concatArray = getArrayFromOl(Array.from(item.children[1].children))
|
||||
nameSet.add(item.children[0].getAttribute('href').replace(/^#/,""))
|
||||
result.push({
|
||||
value: [item.children[0].getAttribute('href').replace(/^#/,"")].concat(concatArray.reduce((p, n) => {
|
||||
p = p.concat(n.value)
|
||||
return p;
|
||||
}, [])),
|
||||
dom: item
|
||||
})
|
||||
result = result.concat(concatArray)
|
||||
}
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
result = getArrayFromOl(ol)
|
||||
}
|
||||
|
||||
var nameArray = Array.from(nameSet)
|
||||
|
||||
function reLayout() {
|
||||
let scrollToTop = document.documentElement.scrollTop || window.pageYOffset // Safari is special
|
||||
if(tocToTop === 0) {
|
||||
// Fix bug that when resize window the toc layout may be wrong
|
||||
toc = document.getElementById('toc')
|
||||
toc.classList.remove('toc-fixed')
|
||||
tocToTop = getDistanceOfLeft(toc).top;
|
||||
}
|
||||
if (tocToTop <= scrollToTop + 10) {
|
||||
if (!toc.classList.contains('toc-fixed'))
|
||||
toc.classList.add('toc-fixed')
|
||||
} else {
|
||||
if (toc.classList.contains('toc-fixed'))
|
||||
toc.classList.remove('toc-fixed')
|
||||
}
|
||||
|
||||
let minTop = 9999;
|
||||
let minTopsValue = ""
|
||||
|
||||
for (let item of nameArray) {
|
||||
let dom = document.getElementById(item) || document.getElementById(item.replace(/\s/g, ''))
|
||||
if (!dom) continue
|
||||
let toTop = getDistanceOfLeft(dom).top - scrollToTop;
|
||||
|
||||
if (Math.abs(toTop) < minTop) {
|
||||
minTop = Math.abs(toTop)
|
||||
minTopsValue = item
|
||||
}
|
||||
|
||||
// console.log(minTopsValue, minTop)
|
||||
}
|
||||
|
||||
if (minTopsValue) {
|
||||
for (let item of result) {
|
||||
if (item.value.indexOf(minTopsValue) !== -1) {
|
||||
item.dom.classList.add("active")
|
||||
} else {
|
||||
item.dom.classList.remove("active")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
reLayout()
|
||||
|
||||
window.addEventListener('scroll', (e) => {
|
||||
reLayout()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// donate
|
||||
/*****************************************************************************/
|
||||
const donateButton = document.getElementById('donate-button')
|
||||
const donateImgContainer = document.getElementById('donate-img-container')
|
||||
const donateImg = document.getElementById('donate-img')
|
||||
|
||||
if(donateButton) {
|
||||
donateButton.addEventListener('click', () => {
|
||||
if (donateImgContainer.classList.contains('hide')) {
|
||||
donateImgContainer.classList.remove('hide')
|
||||
} else {
|
||||
donateImgContainer.classList.add('hide')
|
||||
}
|
||||
})
|
||||
|
||||
donateImg.src = donateImg.dataset.src
|
||||
}
|
||||
|
||||
137
js/script.js
137
js/script.js
|
|
@ -1,137 +0,0 @@
|
|||
(function($){
|
||||
// Search
|
||||
var $searchWrap = $('#search-form-wrap'),
|
||||
isSearchAnim = false,
|
||||
searchAnimDuration = 200;
|
||||
|
||||
var startSearchAnim = function(){
|
||||
isSearchAnim = true;
|
||||
};
|
||||
|
||||
var stopSearchAnim = function(callback){
|
||||
setTimeout(function(){
|
||||
isSearchAnim = false;
|
||||
callback && callback();
|
||||
}, searchAnimDuration);
|
||||
};
|
||||
|
||||
$('#nav-search-btn').on('click', function(){
|
||||
if (isSearchAnim) return;
|
||||
|
||||
startSearchAnim();
|
||||
$searchWrap.addClass('on');
|
||||
stopSearchAnim(function(){
|
||||
$('.search-form-input').focus();
|
||||
});
|
||||
});
|
||||
|
||||
$('.search-form-input').on('blur', function(){
|
||||
startSearchAnim();
|
||||
$searchWrap.removeClass('on');
|
||||
stopSearchAnim();
|
||||
});
|
||||
|
||||
// Share
|
||||
$('body').on('click', function(){
|
||||
$('.article-share-box.on').removeClass('on');
|
||||
}).on('click', '.article-share-link', function(e){
|
||||
e.stopPropagation();
|
||||
|
||||
var $this = $(this),
|
||||
url = $this.attr('data-url'),
|
||||
encodedUrl = encodeURIComponent(url),
|
||||
id = 'article-share-box-' + $this.attr('data-id'),
|
||||
offset = $this.offset();
|
||||
|
||||
if ($('#' + id).length){
|
||||
var box = $('#' + id);
|
||||
|
||||
if (box.hasClass('on')){
|
||||
box.removeClass('on');
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
var html = [
|
||||
'<div id="' + id + '" class="article-share-box">',
|
||||
'<input class="article-share-input" value="' + url + '">',
|
||||
'<div class="article-share-links">',
|
||||
'<a href="https://twitter.com/intent/tweet?url=' + encodedUrl + '" class="article-share-twitter" target="_blank" title="Twitter"></a>',
|
||||
'<a href="https://www.facebook.com/sharer.php?u=' + encodedUrl + '" class="article-share-facebook" target="_blank" title="Facebook"></a>',
|
||||
'<a href="http://pinterest.com/pin/create/button/?url=' + encodedUrl + '" class="article-share-pinterest" target="_blank" title="Pinterest"></a>',
|
||||
'<a href="https://plus.google.com/share?url=' + encodedUrl + '" class="article-share-google" target="_blank" title="Google+"></a>',
|
||||
'</div>',
|
||||
'</div>'
|
||||
].join('');
|
||||
|
||||
var box = $(html);
|
||||
|
||||
$('body').append(box);
|
||||
}
|
||||
|
||||
$('.article-share-box.on').hide();
|
||||
|
||||
box.css({
|
||||
top: offset.top + 25,
|
||||
left: offset.left
|
||||
}).addClass('on');
|
||||
}).on('click', '.article-share-box', function(e){
|
||||
e.stopPropagation();
|
||||
}).on('click', '.article-share-box-input', function(){
|
||||
$(this).select();
|
||||
}).on('click', '.article-share-box-link', function(e){
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
window.open(this.href, 'article-share-box-window-' + Date.now(), 'width=500,height=450');
|
||||
});
|
||||
|
||||
// Caption
|
||||
$('.article-entry').each(function(i){
|
||||
$(this).find('img').each(function(){
|
||||
if ($(this).parent().hasClass('fancybox')) return;
|
||||
|
||||
var alt = this.alt;
|
||||
|
||||
if (alt) $(this).after('<span class="caption">' + alt + '</span>');
|
||||
|
||||
$(this).wrap('<a href="' + this.src + '" title="' + alt + '" class="fancybox"></a>');
|
||||
});
|
||||
|
||||
$(this).find('.fancybox').each(function(){
|
||||
$(this).attr('rel', 'article' + i);
|
||||
});
|
||||
});
|
||||
|
||||
if ($.fancybox){
|
||||
$('.fancybox').fancybox();
|
||||
}
|
||||
|
||||
// Mobile nav
|
||||
var $container = $('#container'),
|
||||
isMobileNavAnim = false,
|
||||
mobileNavAnimDuration = 200;
|
||||
|
||||
var startMobileNavAnim = function(){
|
||||
isMobileNavAnim = true;
|
||||
};
|
||||
|
||||
var stopMobileNavAnim = function(){
|
||||
setTimeout(function(){
|
||||
isMobileNavAnim = false;
|
||||
}, mobileNavAnimDuration);
|
||||
}
|
||||
|
||||
$('#main-nav-toggle').on('click', function(){
|
||||
if (isMobileNavAnim) return;
|
||||
|
||||
startMobileNavAnim();
|
||||
$container.toggleClass('mobile-nav-on');
|
||||
stopMobileNavAnim();
|
||||
});
|
||||
|
||||
$('#wrap').on('click', function(){
|
||||
if (isMobileNavAnim || !$container.hasClass('mobile-nav-on')) return;
|
||||
|
||||
$container.removeClass('mobile-nav-on');
|
||||
});
|
||||
})(jQuery);
|
||||
Loading…
Add table
Add a link
Reference in a new issue