mirror of
https://github.com/torappinfo/uweb.git
synced 2024-08-14 23:54:59 +00:00
349 lines
11 KiB
JavaScript
349 lines
11 KiB
JavaScript
|
/**
|
|||
|
|
* 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()
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|