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
bac9b1ae1c
commit
19d3ab7aff
107 changed files with 29967 additions and 0 deletions
3757
js/gitment.js
3757
js/gitment.js
File diff suppressed because it is too large
Load diff
348
js/index.js
348
js/index.js
|
|
@ -0,0 +1,348 @@
|
|||
/**
|
||||
* 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()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue