From 2ed915a36f64e15cc313cbfbb5205e6ca2ee18b2 Mon Sep 17 00:00:00 2001 From: XPoet Date: Wed, 12 Oct 2022 15:55:47 +0800 Subject: [PATCH] perf(post-tools): optimize post tools position --- layout/_partial/scripts.ejs | 2 +- source/css/common/variables.styl | 2 +- source/css/layout/_partial/post-tools.styl | 3 ++ source/css/layout/page.styl | 15 ++------ .../js/{toggle-show-toc.js => post-helper.js} | 38 ++++++++++++++++--- source/js/toc.js | 8 ++-- source/js/utils.js | 2 +- 7 files changed, 45 insertions(+), 25 deletions(-) rename source/js/{toggle-show-toc.js => post-helper.js} (53%) diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index 3935e67..f9e69b0 100644 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -32,7 +32,7 @@ const {
<% if (t_toc?.enable === true && is_post()) { %> <%- __js([ - 'js/toggle-show-toc.js', + 'js/post-helper.js', 'js/toc.js', 'js/libs/anime.min.js' ]) %> diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl index fea67d9..d537e61 100644 --- a/source/css/common/variables.styl +++ b/source/css/common/variables.styl @@ -28,7 +28,7 @@ $has-fs-content-max-width = $content-max-width * 1.2 // ============================================================================================== // media query // ============================================================================================== -$media-max-width = 780px // media query max width (tablet) +$media-max-width = 800px // media query max width (tablet) $media-max-width-mobile = 500px // media query max width (mobile) keep-tablet() { diff --git a/source/css/layout/_partial/post-tools.styl b/source/css/layout/_partial/post-tools.styl index bda9b6f..412cb94 100644 --- a/source/css/layout/_partial/post-tools.styl +++ b/source/css/layout/_partial/post-tools.styl @@ -2,6 +2,9 @@ $li-border-radius = 0.4rem $li-margin-bottom = 0.8rem .post-tools-container { + position relative + box-sizing border-box + padding-top 2rem .tools-list { diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl index 4e0e8e3..df24edb 100644 --- a/source/css/layout/page.styl +++ b/source/css/layout/page.styl @@ -135,8 +135,9 @@ .post-tools { position fixed top $header-height + $component-spacing-value - right $component-spacing-value - transition-t("top", "0", "0.2", "ease") + left 'calc((100vw - %s / 2) - 5rem)' % $content-max-width + opacity 0 + transition-t("top, transform, opacity", "0, 0, 0.2", "0.2, 0.2, 0.2", "ease, ease, ease") .header-shrink & { top $header-shrink-height + $component-spacing-value @@ -144,25 +145,17 @@ +keep-tablet() { top $header-shrink-height * 0.9 + $component-spacing-value } - - +keep-mobile() { - top $header-shrink-height * 0.8 + $component-spacing-value - } } +keep-tablet() { top $header-height * 0.9 + $component-spacing-value - right 10px transform scale(0.82) - transform-origin right top } +keep-mobile() { - top $header-height * 0.8 + $component-spacing-value - right 5px - transform scale(0.72) + display none } } diff --git a/source/js/toggle-show-toc.js b/source/js/post-helper.js similarity index 53% rename from source/js/toggle-show-toc.js rename to source/js/post-helper.js index e0e91ed..088d5c3 100644 --- a/source/js/toggle-show-toc.js +++ b/source/js/post-helper.js @@ -1,23 +1,25 @@ /* global KEEP */ function initToggleShowToc() { - KEEP.utils.toggleShowTocHandler = { + KEEP.utils.postHelper = { postPageContainerDom: document.querySelector('.post-page-container'), toggleShowTocBtnDom: document.querySelector('.toggle-show-toc'), toggleShowTocIcon: document.querySelector('.toggle-show-toc i'), + mainContentDom: document.querySelector('.main-content'), + postToolsDom: document.querySelector('.page-container .post-tools'), isShowToc: false, - initToggle() { + initToggleToc() { this.toggleShowTocBtnDom && this.toggleShowTocBtnDom.addEventListener('click', () => { this.isShowToc = !this.isShowToc KEEP.styleStatus.isShowToc = this.isShowToc KEEP.setStyleStatus() - this.handleToggle(this.isShowToc) + this.handleToggleToc(this.isShowToc) }) }, - handleToggle(isOpen) { + handleToggleToc(isOpen) { if (isOpen) { this.postPageContainerDom.classList.add('show-toc') document.body.classList.add('has-toc') @@ -30,10 +32,34 @@ function initToggleShowToc() { hasToc(isOpen) { this.toggleShowTocBtnDom.style.display = 'flex' this.isShowToc = isOpen - this.handleToggle(isOpen) + this.handleToggleToc(isOpen) + }, + + setPostToolsLeft() { + const winWidth = window.innerWidth + const mcWidth = this.mainContentDom.getBoundingClientRect().width.toFixed(0) + let offsetX = 5 + + if (winWidth <= 800) { + offsetX = 3 + } + + this.postToolsDom.style.opacity = `1` + this.postToolsDom.style.left = `calc((100vw - ${mcWidth}px) / 2 - ${offsetX}rem)` + }, + + initSetPostToolsLeft() { + setTimeout(() => { + this.setPostToolsLeft() + }, 150) + + window.addEventListener('resize', () => { + this.setPostToolsLeft() + }) } } - KEEP.utils.toggleShowTocHandler.initToggle() + KEEP.utils.postHelper.initToggleToc() + KEEP.utils.postHelper.initSetPostToolsLeft() } if (KEEP.theme_config.pjax.enable === true && KEEP.utils) { diff --git a/source/js/toc.js b/source/js/toc.js index 65f60de..cee2c1d 100644 --- a/source/js/toc.js +++ b/source/js/toc.js @@ -82,18 +82,16 @@ function initTOC() { const styleStatus = KEEP.getStyleStatus() const key = 'isShowToc' if (styleStatus && styleStatus.hasOwnProperty(key)) { - KEEP.utils.toggleShowTocHandler.hasToc(styleStatus[key]) + KEEP.utils.postHelper.hasToc(styleStatus[key]) } else { - KEEP.utils.toggleShowTocHandler.hasToc(true) + KEEP.utils.postHelper.hasToc(true) } } const initOpenKey = 'init_open' if (KEEP.theme_config.toc.hasOwnProperty(initOpenKey)) { - KEEP.theme_config.toc[initOpenKey] - ? openHandle() - : KEEP.utils.toggleShowTocHandler.hasToc(false) + KEEP.theme_config.toc[initOpenKey] ? openHandle() : KEEP.utils.postHelper.hasToc(false) } else { openHandle() } diff --git a/source/js/utils.js b/source/js/utils.js index d6c2820..34f21ac 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -216,7 +216,7 @@ KEEP.initUtils = () => { const w = document.body.offsetWidth if (w <= 500) { SIDE_GAP = 10 - } else if (w <= 780) { + } else if (w <= 800) { SIDE_GAP = 20 } else { SIDE_GAP = 40