perf(post-tools): optimize post tools position

layout/_partial/scripts.ejs

@@ -32,7 +32,7 @@ const {
 <div class="post-scripts<%= theme.pjax?.enable === true ? ' pjax' : '' %>">
     <% 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'
         ]) %>

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() {

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 {
 

source/css/layout/page.styl

@@ -135,8 +135,9 @@
   .post-tools {
     position fixed
     top $header-height + $component-spacing-value
-    right $component-spacing-value
+    left 'calc((100vw - %s / 2) - 5rem)' % $content-max-width
-    transition-t("top", "0", "0.2", "ease")
+    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
+      display none
-      right 5px
-      transform scale(0.72)
     }
   }
 

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) {

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]
+          KEEP.theme_config.toc[initOpenKey] ? openHandle() : KEEP.utils.postHelper.hasToc(false)
-            ? openHandle()
-            : KEEP.utils.toggleShowTocHandler.hasToc(false)
         } else {
           openHandle()
         }

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