feat: add scroll style settings in _config.yml

This commit is contained in:
XPoet 2021-01-10 23:49:25 +08:00
parent d563822005
commit 8ed99ba389
8 changed files with 158 additions and 79 deletions

View File

@ -37,9 +37,15 @@ style:
# First screen
first_screen:
enable: false
background_img: /images/bg.svg
background_img: /images/bg.svg # You can use local image or image external link
description: Keep writing and Keep loving.
scroll:
progress_bar:
enable: false
percent:
enable: false
# ---------------------------------------------------------------------------------------
# Social contact link

View File

@ -17,13 +17,12 @@
// scrollTo: true,
});
document.addEventListener('pjax:send', () => {
KEEP.utils.loadingProgressBarStart();
KEEP.utils.pjaxProgressBarStart();
});
document.addEventListener('pjax:complete', () => {
KEEP.utils.loadingProgressBarEnd();
KEEP.utils.pjaxProgressBarEnd();
pjax.executeScripts(document.querySelectorAll('script[data-pjax], .pjax script'));
KEEP.refresh();
});

View File

@ -1,5 +1,7 @@
<div class="progress-bar-container">
<% if (theme.style.scroll.progress_bar.enable === true) { %>
<span class="scroll-progress-bar"></span>
<% } %>
<% if (theme.pjax.enable === true) { %>
<span class="pjax-progress-bar"></span>

View File

@ -1,5 +1,4 @@
<div class="side-tools-container">
<ul class="side-tools-list">
<li class="tools-item tool-font-adjust-plus flex-center">
<i class="fas fa-search-plus"></i>
@ -29,18 +28,26 @@
</li>
<% } %>
<% if (theme.style.scroll.percent.enable !== true) { %>
<li class="tools-item tool-scroll-to-top flex-center">
<i class="fas fa-arrow-up"></i>
</li>
<% } %>
<li class="tools-item tool-scroll-to-bottom flex-center">
<i class="fas fa-arrow-down"></i>
</li>
</ul>
<ul>
<ul class="exposed-tools-list">
<li class="tools-item tool-toggle-show flex-center">
<i class="fas fa-cog fa-spin"></i>
</li>
<% if (theme.style.scroll.percent.enable === true) { %>
<li class="tools-item tool-scroll-to-top flex-center">
<i class="arrow-up fas fa-arrow-up"></i>
<span class="percent"></span>
</li>
<% } %>
</ul>
</div>

View File

@ -5,6 +5,8 @@
width: 100%;
z-index: $z-index-9;
if (hexo-config('pjax.enable') == true) {
.pjax-progress-bar {
position: absolute;
top: 0;
@ -49,6 +51,10 @@
}
}
if (hexo-config('style.scroll.progress_bar.enable') == true) {
.scroll-progress-bar {
position: absolute;
top: 0;
@ -61,8 +67,11 @@
z-index: $z-index-7;
&.hide {
transition: none;
visibility: hidden;
//transition: none;
display: none;
//visibility: hidden !important;
}
}
}
}

View File

@ -62,10 +62,45 @@ $tools-item-border-radius = 1px;
}
}
&.show {
opacity: 1;
transform: translateX(0);
}
}
.exposed-tools-list {
if (hexo-config('style.scroll.percent.enable') == true) {
.tool-scroll-to-top {
display: none;
&:hover {
transition();
.arrow-up {
display: flex;
}
.percent {
display: none;
}
}
.arrow-up {
display: none;
}
.percent {
display: flex;
font-size: 1rem;
}
}
}
}
}

View File

@ -4,7 +4,6 @@ KEEP.initBack2Top = () => {
...KEEP.utils,
back2TopButton_dom: document.querySelector('.tool-scroll-to-top'),
back2BottomButton_dom: document.querySelector('.tool-scroll-to-bottom'),
back2top() {

View File

@ -9,25 +9,39 @@ KEEP.initUtils = () => {
scrollProgressBar_dom: document.querySelector('.scroll-progress-bar'),
pjaxProgressBar_dom: document.querySelector('.pjax-progress-bar'),
pjaxProgressIcon_dom: document.querySelector('.pjax-progress-icon'),
back2TopButton_dom: document.querySelector('.tool-scroll-to-top'),
innerHeight: window.innerHeight,
loadingProgressBarTimer: null,
pjaxProgressBarTimer: null,
prevScrollValue: 0,
defaultFontSize: 0,
isHasScrollProgressBar: KEEP.theme_config.style.scroll.progress_bar.enable === true,
isHasScrollPercent: KEEP.theme_config.style.scroll.percent.enable === true,
// Scroll Style Handle
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);
if (this.scrollProgressBar_dom) {
if (this.isHasScrollProgressBar) {
const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
this.scrollProgressBar_dom.style.visibility = percent === '0' ? 'hidden' : 'visible';
this.scrollProgressBar_dom.style.width = `${ProgressPercent}%`;
}
if (this.isHasScrollPercent) {
const percent_dom = this.back2TopButton_dom.querySelector('.percent');
if (percent === '0') {
this.back2TopButton_dom.style.display = 'none';
} else {
this.back2TopButton_dom.style.display = 'flex';
percent_dom.innerHTML = percent;
}
}
// hide header handle
if (scrollTop > this.prevScrollValue && scrollTop > this.innerHeight) {
this.pageTop_dom.classList.add('hide');
@ -41,7 +55,9 @@ KEEP.initUtils = () => {
registerWindowScroll() {
window.addEventListener('scroll', () => {
// style handle when scroll
if (this.isHasScrollPercent || this.isHasScrollProgressBar) {
this.styleHandleWhenScroll();
}
// TOC scroll handle
if (KEEP.theme_config.toc.enable && KEEP.utils.hasOwnProperty('findActiveIndexByTOC')) {
@ -238,19 +254,22 @@ KEEP.initUtils = () => {
},
// loading progress bar start
loadingProgressBarStart() {
this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer);
this.pjaxProgressBar_dom.style.width = '0';
pjaxProgressBarStart() {
this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer);
if (this.isHasScrollProgressBar) {
this.scrollProgressBar_dom.classList.add('hide');
}
this.pjaxProgressBar_dom.style.width = '0';
this.pjaxProgressIcon_dom.classList.add('show');
let width = 5;
let width = 1;
const maxWidth = 99;
this.pjaxProgressBar_dom.classList.add('show');
this.pjaxProgressBar_dom.style.width = width + '%';
this.loadingProgressBarTimer = setInterval(() => {
this.pjaxProgressBarTimer = setInterval(() => {
width += 5;
if (width > maxWidth) width = maxWidth;
this.pjaxProgressBar_dom.style.width = width + '%';
@ -258,14 +277,17 @@ KEEP.initUtils = () => {
},
// loading progress bar end
loadingProgressBarEnd() {
this.loadingProgressBarTimer && clearInterval(this.loadingProgressBarTimer);
pjaxProgressBarEnd() {
this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer);
this.pjaxProgressBar_dom.style.width = '100%';
const tempTimeout = setTimeout(() => {
this.pjaxProgressBar_dom.classList.remove('show');
this.pjaxProgressIcon_dom.classList.remove('show');
if (this.isHasScrollProgressBar) {
this.scrollProgressBar_dom.classList.remove('hide');
}
clearTimeout(tempTimeout);
}, 200);
}