From 28a568f7481b20602d0ea37236e130a471cf2fac Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Mon, 25 Jan 2021 10:08:52 +0800
Subject: [PATCH] perf: optimize left side page toggle

---
 source/js/left-side-toggle.js | 46 +++++++++++++++++------------------
 source/js/toc.js              | 11 ++++++---
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/source/js/left-side-toggle.js b/source/js/left-side-toggle.js
index 0132efa..e6c34e5 100644
--- a/source/js/left-side-toggle.js
+++ b/source/js/left-side-toggle.js
@@ -1,43 +1,43 @@
+/* global KEEP */
+
 function initLeftSideToggle() {
   KEEP.utils.leftSideToggle = {
 
-    init() {
-      this.toggleBar = document.querySelector('.page-aside-toggle');
-      this.pageTopDom = document.querySelector('.page-main-content-top');
-      this.containerDom = document.querySelector('.page-container');
-      this.leftAsideDom = document.querySelector('.page-aside');
-      this.isOpenPageAside = false;
-    },
+    toggleBar: document.querySelector('.page-aside-toggle'),
+    pageTopDom: document.querySelector('.page-main-content-top'),
+    containerDom: document.querySelector('.page-container'),
+    leftAsideDom: document.querySelector('.page-aside'),
+    toggleBarIcon: document.querySelector('.page-aside-toggle i'),
+
+    isOpenPageAside: false,
 
     initToggleBarButton() {
-      if (this.toggleBar) {
-        const toggleBarIcon = this.toggleBar.querySelector('i');
-        this.toggleBar.addEventListener('click', () => {
-          this.isOpenPageAside = !this.isOpenPageAside;
-          if (this.isOpenPageAside) {
-            toggleBarIcon.classList.add('fa-outdent');
-            toggleBarIcon.classList.remove('fa-indent');
-          } else {
-            toggleBarIcon.classList.add('fa-indent');
-            toggleBarIcon.classList.remove('fa-outdent');
-          }
-          this.changePageLayoutWhenOpenToggle(this.isOpenPageAside);
-        })
-      }
+      this.toggleBar && this.toggleBar.addEventListener('click', () => {
+        this.isOpenPageAside = !this.isOpenPageAside;
+        KEEP.styleStatus.isOpenPageAside = this.isOpenPageAside;
+        KEEP.setStyleStatus();
+        this.changePageLayoutWhenOpenToggle(this.isOpenPageAside);
+      });
     },
 
     changePageLayoutWhenOpenToggle(isOpen) {
+      this.toggleBarIcon && (this.toggleBarIcon.className = isOpen ? 'fas fa-outdent' : 'fas fa-indent');
       const pageAsideWidth = KEEP.theme_config.style.left_side_width || '260px';
       this.containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
       this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
       this.leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`;
     },
+
+    pageAsideHandleOfTOC(isOpen) {
+      this.toggleBar.style.display = 'flex';
+      this.isOpenPageAside = isOpen;
+      this.changePageLayoutWhenOpenToggle(isOpen);
+    }
   }
-  KEEP.utils.leftSideToggle.init();
   KEEP.utils.leftSideToggle.initToggleBarButton();
 }
 
-if (KEEP.theme_config.pjax.enable === true  && KEEP.utils) {
+if (KEEP.theme_config.pjax.enable === true && KEEP.utils) {
   initLeftSideToggle();
 } else {
   window.addEventListener('DOMContentLoaded', initLeftSideToggle);
diff --git a/source/js/toc.js b/source/js/toc.js
index 6a00d8d..fbbc66f 100644
--- a/source/js/toc.js
+++ b/source/js/toc.js
@@ -1,3 +1,4 @@
+/* global KEEP */
 function initTOC() {
   KEEP.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li');
 
@@ -66,9 +67,13 @@ function initTOC() {
       },
 
       showPageAsideWhenHasTOC() {
-        KEEP.utils.leftSideToggle.toggleBar.style.display = 'flex';
-        KEEP.utils.leftSideToggle.isOpenPageAside = true;
-        KEEP.utils.leftSideToggle.changePageLayoutWhenOpenToggle(KEEP.utils.leftSideToggle.isOpenPageAside);
+        const styleStatus = KEEP.getStyleStatus();
+        const key = 'isOpenPageAside';
+        if (styleStatus && styleStatus.hasOwnProperty(key)) {
+          KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(styleStatus[key]);
+        } else {
+          KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(true);
+        }
       }
     }