diff --git a/_config.yml b/_config.yml
index 00beb7f..a976fca 100644
--- a/_config.yml
+++ b/_config.yml
@@ -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
diff --git a/layout/_partial/pjax/pjax.ejs b/layout/_partial/pjax/pjax.ejs
index f177c1b..d67d306 100644
--- a/layout/_partial/pjax/pjax.ejs
+++ b/layout/_partial/pjax/pjax.ejs
@@ -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();
});
diff --git a/layout/_partial/progress-bar.ejs b/layout/_partial/progress-bar.ejs
index e09ce8f..cf191f9 100644
--- a/layout/_partial/progress-bar.ejs
+++ b/layout/_partial/progress-bar.ejs
@@ -1,5 +1,7 @@
-
+ <% if (theme.style.scroll.progress_bar.enable === true) { %>
+
+ <% } %>
<% if (theme.pjax.enable === true) { %>
diff --git a/layout/_partial/side-tools.ejs b/layout/_partial/side-tools.ejs
index ce2cc23..c9014e5 100644
--- a/layout/_partial/side-tools.ejs
+++ b/layout/_partial/side-tools.ejs
@@ -1,5 +1,4 @@
diff --git a/source/css/layout/_partial/progress-bar.styl b/source/css/layout/_partial/progress-bar.styl
index f567ac5..35df570 100644
--- a/source/css/layout/_partial/progress-bar.styl
+++ b/source/css/layout/_partial/progress-bar.styl
@@ -5,64 +5,73 @@
width: 100%;
z-index: $z-index-9;
- .pjax-progress-bar {
- position: absolute;
- top: 0;
- left: 0;
- height: 2px;
- width: 0;
- background: var(--pjax-progress-bar-color);
- visibility: hidden;
- opacity: 0;
- z-index: $z-index-8;
- transition();
+ if (hexo-config('pjax.enable') == true) {
- &.show {
- transition();
- opacity: 1;
- visibility: visible;
- }
- }
-
-
- .pjax-progress-icon {
- position: absolute;
- top: 0;
- right: 0;
- z-index: $z-index-8;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 8px 8px 0 0;
- color: var(--default-text-color);
- visibility: hidden;
- transition();
-
- &.show {
- transition: visibility 0.1s linear;
- visibility: visible;
- }
-
- i {
- font-size: 1.12rem;
- }
- }
-
-
- .scroll-progress-bar {
- position: absolute;
- top: 0;
- left: 0;
- width: 0;
- height: $scroll-progress-bar-height;
- visibility: hidden;
- background: var(--primary-color);
- transition: all 0.1s ease;
- z-index: $z-index-7;
-
- &.hide {
- transition: none;
+ .pjax-progress-bar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 2px;
+ width: 0;
+ background: var(--pjax-progress-bar-color);
visibility: hidden;
+ opacity: 0;
+ z-index: $z-index-8;
+ transition();
+
+ &.show {
+ transition();
+ opacity: 1;
+ visibility: visible;
+ }
}
+
+
+ .pjax-progress-icon {
+ position: absolute;
+ top: 0;
+ right: 0;
+ z-index: $z-index-8;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 8px 0 0;
+ color: var(--default-text-color);
+ visibility: hidden;
+ transition();
+
+ &.show {
+ transition: visibility 0.1s linear;
+ visibility: visible;
+ }
+
+ i {
+ font-size: 1.12rem;
+ }
+ }
+
+
+ }
+
+ if (hexo-config('style.scroll.progress_bar.enable') == true) {
+
+ .scroll-progress-bar {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 0;
+ height: $scroll-progress-bar-height;
+ visibility: hidden;
+ background: var(--primary-color);
+ transition: all 0.1s ease;
+ z-index: $z-index-7;
+
+ &.hide {
+ //transition: none;
+ display: none;
+ //visibility: hidden !important;
+ }
+ }
+
}
}
diff --git a/source/css/layout/_partial/side-tools.styl b/source/css/layout/_partial/side-tools.styl
index ef0ced3..8a1c0a8 100644
--- a/source/css/layout/_partial/side-tools.styl
+++ b/source/css/layout/_partial/side-tools.styl
@@ -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;
+ }
+
+ }
+
+ }
+ }
}
diff --git a/source/js/back2top.js b/source/js/back2top.js
index e93be65..af85d15 100644
--- a/source/js/back2top.js
+++ b/source/js/back2top.js
@@ -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() {
diff --git a/source/js/utils.js b/source/js/utils.js
index 7e2633c..c312916 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -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
- this.styleHandleWhenScroll();
+ 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);
+ pjaxProgressBarStart() {
+ this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer);
+ if (this.isHasScrollProgressBar) {
+ this.scrollProgressBar_dom.classList.add('hide');
+ }
+
this.pjaxProgressBar_dom.style.width = '0';
- this.scrollProgressBar_dom.classList.add('hide');
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');
- this.scrollProgressBar_dom.classList.remove('hide');
+
+ if (this.isHasScrollProgressBar) {
+ this.scrollProgressBar_dom.classList.remove('hide');
+ }
clearTimeout(tempTimeout);
}, 200);
}