From e39b3716959e795fc1e0feb16de409e501f616a7 Mon Sep 17 00:00:00 2001 From: XPoet Date: Sat, 25 Apr 2020 21:45:45 +0800 Subject: [PATCH] refactor: fetch out 'back to top' module & modified its style --- layout/_partial/scripts.ejs | 7 ++- layout/_partial/tools.ejs | 1 + layout/page.ejs | 15 ++++-- source/css/layout/_partial/tools.styl | 13 ++--- source/css/layout/common/animated.styl | 3 +- source/css/layout/page.styl | 68 +++++++++++++++++++++++--- source/js/header-shrink.js | 16 ------ source/js/scroll-to-top.js | 44 ++++++++++++----- 8 files changed, 117 insertions(+), 50 deletions(-) diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index e453e88..3733c72 100644 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -1,10 +1,13 @@ <%- js([ 'js/main.js', 'js/header-shrink.js', - 'js/toggle-mode.js', - 'js/scroll-to-top.js' + 'js/toggle-mode.js' ]) %> +<% if (theme.back2top.enable) { %> + <%- js('js/scroll-to-top.js') %> +<% } %> + <% if (is_post()) { %> <% if (theme.codeblock.copy_button.enable) { %> diff --git a/layout/_partial/tools.ejs b/layout/_partial/tools.ejs index 679e956..8e4b414 100644 --- a/layout/_partial/tools.ejs +++ b/layout/_partial/tools.ejs @@ -11,6 +11,7 @@ <% if (theme.local_search.enable) { %>
  • +
    • <% } %> diff --git a/layout/page.ejs b/layout/page.ejs index b524f13..9bb5968 100644 --- a/layout/page.ejs +++ b/layout/page.ejs @@ -39,11 +39,16 @@ <%- partial('_partial/tools') %> -
    - - -
    - + <% if (theme.back2top.enable) { %> +
    + +
    + <% } %>
    diff --git a/source/css/layout/_partial/tools.styl b/source/css/layout/_partial/tools.styl index 0e8e443..0c8d71d 100644 --- a/source/css/layout/_partial/tools.styl +++ b/source/css/layout/_partial/tools.styl @@ -26,6 +26,13 @@ $li-margin-bottom = 10px; border: 1px solid var(--third-text-color); } + &:hover { + transition(); + color: var(--background-color); + background: var(--primary-color); + } + + &.rss { padding: 0; @@ -47,12 +54,6 @@ $li-margin-bottom = 10px; } - &:hover { - transition(); - color: var(--background-color); - background: var(--primary-color); - } - &:last-child { margin-bottom: 0; } diff --git a/source/css/layout/common/animated.styl b/source/css/layout/common/animated.styl index b2d4618..9cc2b01 100644 --- a/source/css/layout/common/animated.styl +++ b/source/css/layout/common/animated.styl @@ -37,7 +37,6 @@ the-transition-ease-out() { transform: translateY(0); } } - .title-hover-animation { display: inline-block; position: relative; @@ -64,4 +63,4 @@ the-transition-ease-out() { transform: scaleX(1); } -} +} \ No newline at end of file diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl index c13725d..564d712 100644 --- a/source/css/layout/page.styl +++ b/source/css/layout/page.styl @@ -58,12 +58,16 @@ $component-interspace = 30px; .sidebar-tools { position: fixed; top: $header-height + $component-interspace; - left: ((100% - $main-content-width) / 4); + if (hexo-config('side-tools.position') == left) { + left: ((100% - $main-content-width) / 4); + } else { + right: ((100% - $main-content-width) / 4); + } transition(); } - .scroll-to-top { + /*.scroll-to-top { display: none; position: fixed; right: ((100% - $main-content-width) / 4); @@ -82,6 +86,44 @@ $component-interspace = 30px; } } } +*/ + + .scroll-to-top { + display: none; + position: fixed; + + if (hexo-config('back2top.position') == left) { + left: ((100% - $main-content-width) / 4); + } else { + right: ((100% - $main-content-width) / 4); + } + bottom: $component-interspace; + + li { + cursor: pointer; + padding: 2px; + width: 32px; + height: 30px; + border-radius: 5px; + font-size: 0.9em; + display: flex; + align-items: center; + justify-content: center; + background: var(--background-color); + + if (hexo-config('magic.enable') == true) { + magic-style(1.1); + } else { + border: 1px solid var(--third-text-color); + } + + &:hover { + transition(); + color: var(--background-color); + background: var(--primary-color); + } + } + } } .page-bottom { @@ -111,16 +153,28 @@ $component-interspace = 30px; } .sidebar-tools { - left: 2% !important; - transform-origin: right top; + if (hexo-config('side-tools.position') == left) { + left: 2% !important; + transform-origin: left top; + } else { + right: 2% !important; + transform-origin: right top; + } transform: scale(0.8); } //.sidebar-toc { // right: 2% !important; //} - //.scroll-to-top { - // right: 2% !important; - //} + .scroll-to-top { + if (hexo-config('back2top.position') == left) { + left: 2% !important; + transform-origin: left bottom; + } else { + right: 2% !important; + transform-origin: right bottom; + } + transform: scale(0.8); + } } \ No newline at end of file diff --git a/source/js/header-shrink.js b/source/js/header-shrink.js index 6b7237f..a1584b3 100644 --- a/source/js/header-shrink.js +++ b/source/js/header-shrink.js @@ -3,7 +3,6 @@ const headerDom = document.querySelector('.header-wrapper'); const menuBarDom = document.querySelector('.menu-bar'); const windowMaskDom = document.querySelector('.window-mask'); const scrollPercentDom = document.querySelector('.scroll-percent'); -const scrollToTopDom = document.querySelector('.scroll-to-top'); let isHeaderShrink = false; const headerHeight = headerDom.getBoundingClientRect().height; @@ -19,21 +18,6 @@ window.addEventListener('scroll', function (_e) { headerDom.classList.remove('header-wrapper-shrink'); pageTemplateDom.classList.remove('page-top-shrink'); } - - // show scroll percent - 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); - - - if (percent === '0') { - scrollToTopDom.style.display = 'none'; - } else { - scrollToTopDom.style.display = 'block'; - scrollPercentDom.innerHTML = percent + '%'; - } - - }); diff --git a/source/js/scroll-to-top.js b/source/js/scroll-to-top.js index ef09e6a..77bc3b9 100644 --- a/source/js/scroll-to-top.js +++ b/source/js/scroll-to-top.js @@ -1,14 +1,34 @@ -scrollToTopDom.addEventListener('click', () => { - let scrollTopTimer = setInterval(function () { - let top = document.body.scrollTop || document.documentElement.scrollTop; - let speed = top / 3; - if (document.body.scrollTop !== 0) { - document.body.scrollTop -= speed; +(function () { + const scrollToTopDom = document.querySelector('.scroll-to-top'); + + scrollToTopDom.addEventListener('click', () => { + let scrollTopTimer = setInterval(function () { + let top = document.body.scrollTop || document.documentElement.scrollTop; + let speed = top / 2; + if (document.body.scrollTop !== 0) { + document.body.scrollTop -= speed; + } else { + document.documentElement.scrollTop -= speed; + } + if (top === 0) { + clearInterval(scrollTopTimer); + } + }, 30); + }); + + window.addEventListener('scroll', function (_e) { + // back to top + // show scroll percent + 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); + if (percent === '0') { + scrollToTopDom.style.display = 'none'; } else { - document.documentElement.scrollTop -= speed; + scrollToTopDom.style.display = 'block'; + scrollPercentDom.innerHTML = parseInt(percent) < 10 ? `0${percent}` : percent; } - if (top === 0) { - clearInterval(scrollTopTimer); - } - }, 30); -}); \ No newline at end of file + }); + +})(); \ No newline at end of file