2020-11-20 12:02:22 +08:00
|
|
|
KEEP.utils = {
|
2020-10-28 19:33:43 +08:00
|
|
|
|
2020-11-24 20:06:08 +08:00
|
|
|
headerProgress_dom: document.querySelector('.header-progress'),
|
|
|
|
pageTop_dom: document.querySelector('.page-main-content-top'),
|
|
|
|
firstScreen_dom: document.querySelector('.first-screen-container'),
|
2020-10-28 19:33:43 +08:00
|
|
|
|
2020-10-21 19:36:38 +08:00
|
|
|
printThemeInfo() {
|
2020-11-24 20:06:08 +08:00
|
|
|
const themeInfo = `${KEEP.themeInfo.name} v${KEEP.themeInfo.version}`;
|
|
|
|
console.info(themeInfo + '\n' + KEEP.themeInfo.repository);
|
2020-10-28 19:33:43 +08:00
|
|
|
const footThemeInfoDom = document.querySelector('.footer .info-container .theme-info a.theme-version');
|
|
|
|
if (footThemeInfoDom) {
|
2020-11-24 20:06:08 +08:00
|
|
|
footThemeInfoDom.setAttribute('href', KEEP.themeInfo.repository);
|
2020-10-28 19:33:43 +08:00
|
|
|
footThemeInfoDom.innerHTML = themeInfo;
|
|
|
|
}
|
2020-11-24 20:06:08 +08:00
|
|
|
},
|
2020-10-21 19:36:38 +08:00
|
|
|
|
|
|
|
// Scroll Style Handle
|
|
|
|
prevScrollValue: 0,
|
|
|
|
styleHandleWhenScroll() {
|
|
|
|
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
|
|
|
|
const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
|
|
|
|
const clientHeight = window.innerHeight || document.documentElement.clientHeight;
|
|
|
|
const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
|
|
|
|
const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
|
|
|
|
|
2020-10-26 16:37:09 +08:00
|
|
|
if (this.headerProgress_dom) {
|
|
|
|
this.headerProgress_dom.style.visibility = percent === '0' ? 'hidden' : 'visible';
|
|
|
|
this.headerProgress_dom.style.width = `${ProgressPercent}%`;
|
2020-10-21 19:36:38 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// hide header handle
|
2020-10-26 16:37:09 +08:00
|
|
|
if (scrollTop > this.prevScrollValue && scrollTop > 500) {
|
2020-10-27 18:11:10 +08:00
|
|
|
this.pageTop_dom.style.transform = 'translateY(-100%)';
|
2020-10-21 19:36:38 +08:00
|
|
|
} else {
|
2020-10-27 18:11:10 +08:00
|
|
|
this.pageTop_dom.style.transform = 'translateY(0)';
|
2020-10-21 19:36:38 +08:00
|
|
|
}
|
2020-10-26 16:37:09 +08:00
|
|
|
this.prevScrollValue = scrollTop;
|
2020-10-21 19:36:38 +08:00
|
|
|
},
|
|
|
|
|
2020-10-25 10:48:07 +08:00
|
|
|
// register window scroll event
|
|
|
|
registerWindowScroll() {
|
2020-10-26 16:37:09 +08:00
|
|
|
window.addEventListener('scroll', () => {
|
2020-10-21 19:36:38 +08:00
|
|
|
// style handle when scroll
|
2020-10-26 16:37:09 +08:00
|
|
|
this.styleHandleWhenScroll();
|
2020-10-21 19:36:38 +08:00
|
|
|
|
|
|
|
// TOC scroll handle
|
2020-11-24 20:06:08 +08:00
|
|
|
if (KEEP.theme_config.toc.enable && KEEP.utils.hasOwnProperty('findActiveIndexByTOC')) {
|
2020-11-20 12:02:22 +08:00
|
|
|
KEEP.utils.findActiveIndexByTOC();
|
2020-10-21 19:36:38 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
// header shrink
|
2020-11-20 12:02:22 +08:00
|
|
|
KEEP.utils.headerShrink.headerShrink();
|
2020-10-21 19:36:38 +08:00
|
|
|
});
|
|
|
|
},
|
2020-10-25 10:48:07 +08:00
|
|
|
|
|
|
|
// tools
|
|
|
|
registerToolsButtonClick() {
|
2020-11-24 20:06:08 +08:00
|
|
|
if (!KEEP.theme_config.side_tools.enable) return;
|
2020-10-25 10:48:07 +08:00
|
|
|
|
2020-11-09 10:02:41 +08:00
|
|
|
let isOpen = false;
|
2020-10-25 10:48:07 +08:00
|
|
|
this.toolsMenuButton_dom = document.querySelector('.tools-button');
|
|
|
|
this.toolsWrapperList_dom = document.querySelectorAll('.tools-wrapper li');
|
|
|
|
|
2020-11-09 10:02:41 +08:00
|
|
|
this.toolsMenuButton_dom.addEventListener('click', e => {
|
2020-10-25 10:48:07 +08:00
|
|
|
isOpen = !isOpen;
|
|
|
|
|
|
|
|
const toolsMenuButtonIcon = this.toolsMenuButton_dom.querySelector('i');
|
|
|
|
if (isOpen) {
|
|
|
|
toolsMenuButtonIcon.classList.add('fa-minus');
|
|
|
|
toolsMenuButtonIcon.classList.remove('fa-plus');
|
|
|
|
} else {
|
|
|
|
toolsMenuButtonIcon.classList.add('fa-plus');
|
|
|
|
toolsMenuButtonIcon.classList.remove('fa-minus');
|
|
|
|
}
|
|
|
|
this.toolsWrapperList_dom.forEach((li, index) => {
|
|
|
|
|
|
|
|
if (isOpen) {
|
|
|
|
li.style.transform = `translate3d(0, -${138 * (index + 1)}%, 0)`;
|
|
|
|
li.style.opacity = '1';
|
|
|
|
} else {
|
|
|
|
li.style.opacity = '0';
|
|
|
|
li.style.transform = 'translate3d(0, 0, 0)';
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
// go comment
|
|
|
|
goComment() {
|
|
|
|
this.goComment_dom = document.querySelector('.go-comment');
|
|
|
|
if (this.goComment_dom) {
|
|
|
|
this.goComment_dom.addEventListener('click', () => {
|
|
|
|
document.querySelector('#comment-anchor').scrollIntoView();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
|
2020-10-26 12:23:55 +08:00
|
|
|
// get dom element height
|
|
|
|
getElementHeight(selectors) {
|
|
|
|
const dom = document.querySelector(selectors);
|
|
|
|
return dom ? dom.getBoundingClientRect().height : 0;
|
|
|
|
},
|
|
|
|
|
2020-11-20 14:41:03 +08:00
|
|
|
// init first screen height
|
|
|
|
initFirstScreenHeight() {
|
|
|
|
this.firstScreen_dom && (this.firstScreen_dom.style.height = window.innerHeight + 'px');
|
|
|
|
},
|
|
|
|
|
2020-11-16 19:04:24 +08:00
|
|
|
// init page height handle
|
2020-10-26 12:23:55 +08:00
|
|
|
initPageHeightHandle() {
|
2020-11-20 14:41:03 +08:00
|
|
|
if (this.firstScreen_dom) return;
|
|
|
|
|
|
|
|
const temp_h1 = this.getElementHeight('.header-progress');
|
|
|
|
const temp_h2 = this.getElementHeight('.page-main-content-top');
|
|
|
|
const temp_h3 = this.getElementHeight('.page-main-content-middle');
|
|
|
|
const temp_h4 = this.getElementHeight('.page-main-content-bottom');
|
|
|
|
const allDomHeight = temp_h1 + temp_h2 + temp_h3 + temp_h4;
|
2020-10-26 12:23:55 +08:00
|
|
|
const innerHeight = window.innerHeight;
|
|
|
|
const pb_dom = document.querySelector('.page-main-content-bottom');
|
|
|
|
if (allDomHeight < innerHeight) {
|
|
|
|
pb_dom.style.marginTop = (innerHeight - allDomHeight) + 'px';
|
|
|
|
}
|
|
|
|
},
|
2020-11-13 14:43:22 +08:00
|
|
|
|
2020-11-16 19:04:24 +08:00
|
|
|
// big image viewer
|
|
|
|
imageViewer() {
|
|
|
|
let isBigImage = false;
|
|
|
|
|
|
|
|
const showHandle = (dom, isShow) => {
|
|
|
|
document.body.style.overflow = isShow ? 'hidden' : 'auto';
|
|
|
|
dom.style.display = isShow ? 'flex' : 'none';
|
|
|
|
}
|
|
|
|
|
|
|
|
const imageViewerDom = document.querySelector('.image-viewer-container');
|
|
|
|
const targetImg = document.querySelector('.image-viewer-container img');
|
|
|
|
imageViewerDom && imageViewerDom.addEventListener('click', () => {
|
|
|
|
isBigImage = false;
|
|
|
|
showHandle(imageViewerDom, isBigImage);
|
|
|
|
});
|
|
|
|
|
|
|
|
const imgDoms = document.querySelectorAll('.markdown-body img');
|
|
|
|
imgDoms && imgDoms.forEach(img => {
|
|
|
|
|
|
|
|
img.addEventListener('click', () => {
|
|
|
|
isBigImage = true;
|
|
|
|
showHandle(imageViewerDom, isBigImage);
|
|
|
|
targetImg.setAttribute('src', img.getAttribute('src'))
|
|
|
|
});
|
|
|
|
});
|
2020-11-24 20:06:08 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
setLanguage(p1, p2) {
|
|
|
|
return p2.replace(/%s/g, p1)
|
|
|
|
},
|
|
|
|
|
|
|
|
getHowLongAgo(timestamp) {
|
|
|
|
|
|
|
|
let l = KEEP.language
|
|
|
|
|
|
|
|
timestamp /= 1000;
|
|
|
|
|
|
|
|
const __Y = Math.floor(timestamp / (60 * 60 * 24 * 30) / 12)
|
|
|
|
const __M = Math.floor(timestamp / (60 * 60 * 24 * 30))
|
|
|
|
const __W = Math.floor(timestamp / (60 * 60 * 24) / 7)
|
|
|
|
const __d = Math.floor(timestamp / (60 * 60 * 24))
|
|
|
|
const __h = Math.floor(timestamp / (60 * 60) % 24)
|
|
|
|
const __m = Math.floor(timestamp / 60 % 60)
|
|
|
|
const __s = Math.floor(timestamp % 60)
|
|
|
|
|
|
|
|
if (__Y > 0) {
|
|
|
|
return this.setLanguage(__Y, l.ago.year)
|
|
|
|
|
|
|
|
} else if (__M > 0) {
|
|
|
|
return this.setLanguage(__M, l.ago.month)
|
|
|
|
|
|
|
|
} else if (__W > 0) {
|
|
|
|
return this.setLanguage(__W, l.ago.week)
|
|
|
|
|
|
|
|
} else if (__d > 0) {
|
|
|
|
return this.setLanguage(__d, l.ago.day)
|
|
|
|
|
|
|
|
} else if (__h > 0) {
|
|
|
|
return this.setLanguage(__h, l.ago.hour)
|
|
|
|
|
|
|
|
} else if (__m > 0) {
|
|
|
|
return this.setLanguage(__m, l.ago.minute)
|
|
|
|
|
|
|
|
} else if (__s > 0) {
|
|
|
|
return this.setLanguage(__s, l.ago.second)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
setHowLongAgoInHome() {
|
|
|
|
const post = document.querySelectorAll('.home-article-meta-info .home-article-date');
|
|
|
|
post && post.forEach(v => {
|
|
|
|
v.innerHTML = this.getHowLongAgo(Date.now() - new Date(v.dataset.date).getTime())
|
|
|
|
})
|
2020-11-16 19:04:24 +08:00
|
|
|
}
|
2020-10-21 19:36:38 +08:00
|
|
|
}
|