mirror of https://github.com/torappinfo/uweb.git
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()
|
||
})
|
||
}
|
||
}
|
||
|