From d961331b065877f74df197ae79132032bbd1e1fb Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Thu, 20 Oct 2022 14:37:32 +0800
Subject: [PATCH] perf(post-tools): optimize post tools position when toggle
 toc

---
 source/css/common/code-block/code-block.styl |  1 -
 source/css/layout/page.styl                  |  2 +-
 source/js/post-helper.js                     | 15 ++++++++++-----
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/source/css/common/code-block/code-block.styl b/source/css/common/code-block/code-block.styl
index feba4d1..00fea68 100644
--- a/source/css/common/code-block/code-block.styl
+++ b/source/css/common/code-block/code-block.styl
@@ -124,5 +124,4 @@
       height 0
     }
   }
-
 }
diff --git a/source/css/layout/page.styl b/source/css/layout/page.styl
index da7fb07..70e3d1e 100644
--- a/source/css/layout/page.styl
+++ b/source/css/layout/page.styl
@@ -137,7 +137,7 @@
     top $header-height + $component-spacing-value
     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")
+    transition-t("top, transform, opacity, left", "0, 0, 0.2, 0", "0.2, 0.2, 0.2, 0.2", "ease, ease, ease, ease")
 
     .header-shrink & {
       top $header-shrink-height + $component-spacing-value
diff --git a/source/js/post-helper.js b/source/js/post-helper.js
index 412927e..5a98f77 100644
--- a/source/js/post-helper.js
+++ b/source/js/post-helper.js
@@ -29,6 +29,10 @@ function initToggleShowToc() {
         this.postPageContainerDom.classList.remove('show-toc')
         document.body.classList.remove('has-toc')
       }
+
+      setTimeout(() => {
+        this.setPostToolsLeft()
+      }, 120)
     },
 
     hasToc(isOpen) {
@@ -37,17 +41,18 @@ function initToggleShowToc() {
       this.handleToggleToc(isOpen)
     },
 
-    setPostToolsLeft() {
-      const winWidth = window.innerWidth
-      const mcWidth = this.mainContentDom.getBoundingClientRect().width.toFixed(0)
+    setPostToolsLeft(mcw) {
+      const mainContainerWidth = mcw
+        ? mcw
+        : this.mainContentDom.getBoundingClientRect().width.toFixed(0)
       let offsetX = 5
 
-      if (winWidth <= 800) {
+      if (window.innerWidth <= 800) {
         offsetX = 3
       }
 
       this.postToolsDom.style.opacity = `1`
-      this.postToolsDom.style.left = `calc((100vw - ${mcWidth}px) / 2 - ${offsetX}rem)`
+      this.postToolsDom.style.left = `calc((100vw - ${mainContainerWidth}px) / 2 - ${offsetX}rem)`
     },
 
     initSetPostToolsLeft() {