From 8ed99ba389bbe23496e5b12ed19e7751175f2c5c Mon Sep 17 00:00:00 2001 From: XPoet Date: Sun, 10 Jan 2021 23:49:25 +0800 Subject: [PATCH] feat: add scroll style settings in _config.yml --- _config.yml | 8 +- layout/_partial/pjax/pjax.ejs | 5 +- layout/_partial/progress-bar.ejs | 4 +- layout/_partial/side-tools.ejs | 17 ++- source/css/layout/_partial/progress-bar.styl | 121 ++++++++++--------- source/css/layout/_partial/side-tools.styl | 35 ++++++ source/js/back2top.js | 1 - source/js/utils.js | 46 +++++-- 8 files changed, 158 insertions(+), 79 deletions(-) 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 @@
-
  • @@ -29,18 +28,26 @@
    • <% } %> -
  • - -
    • + <% if (theme.style.scroll.percent.enable !== true) { %> +
  • + +
    • + <% } %>
-
    +
      • + <% if (theme.style.scroll.percent.enable === true) { %> +
    • + + +
      • + <% } %>
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); }