🚧 Feat: hide toc before decrypting in encrypted pages (#123)

assets/css/_partial/_single/_toc.scss

@@ -132,6 +132,9 @@
   &[kept='true'] {
     display: block;
   }
+  &.d-none {
+    display: none;
+  }
 
   .toc-title {
     display: flex;

exampleSite/content/tests/encryption.md

@@ -9,8 +9,8 @@ message: password is 1212
 
 lightgallery: true
 
-toc:
-  auto: false
+math:
+  enable: true
 
 tags:
 - Test
@@ -39,11 +39,9 @@ I was shy, so I hid.
 
 [Hugo]^(An open-source static site generator)
 
-<!-- TODO -->
+$$ \ce{CO2 + C -> 2 CO} $$
 
-<!-- $$ \ce{CO2 + C -> 2 CO} $$
-
-$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$ -->
+$$ \ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-} $$
 
 ## Shortcodes in Encrypted Content
 
@@ -181,9 +179,9 @@ series:
           - 1320
 {{< /echarts >}}
 
-### 7 mapbox TODO
+### 7 mapbox
 
-<!-- TODO {{< mapbox 113.953277 22.559102 11 >}} -->
+{{< mapbox 113.953277 22.559102 11 >}}
 
 ### 8 music
 
@@ -193,14 +191,23 @@ series:
 
 {{< bilibili BV1Sx411T7QQ >}}
 
-### 10 typeit TODO
-<!-- TODO -->
+### 10 typeit
+
+{{< typeit code=javascript >}}
+console.log('before decrypting');
+
+document.addEventListener('DOMContentLoaded', () => {
+  fixit.decryptor.addEventListener('decrypted', function() {
+    console.log('after decrypting')
+  })
+});
+{{< /typeit >}}
 
 ### 11 script
 
 ```go-html-template
 {{</* script */>}}
-console.log('before decrypting!');
+console.log('before decrypting');
 
 document.addEventListener('DOMContentLoaded', () => {
   fixit.theme.decryptor.addEventListener('decrypted', function() {
@@ -213,7 +220,7 @@ document.addEventListener('DOMContentLoaded', () => {
 You can see the output in the console of the developer tool.
 
 {{< script >}}
-console.log('before decrypting!');
+console.log('before decrypting');
 
 document.addEventListener('DOMContentLoaded', () => {
   fixit.decryptor.addEventListener('decrypted', function() {

layouts/posts/single.html

@@ -8,8 +8,8 @@
     {{- /* Auto TOC */ -}}
     {{- $tocEmpty := eq .TableOfContents `<nav id="TableOfContents"></nav>` -}}
     {{- if (ne $toc.enable false) | and (ne $tocEmpty true) -}}
-      <h2 class="toc-title">{{ T "contents" }} <i class="toc-icon fa-solid fa-angle-down fa-fw"></i></h2>
-      <div class="toc-content{{ if eq $toc.auto false }} always-active{{ end }}" id="toc-content-auto"></div>
+      <h2 class="toc-title{{ with $params.password }} d-none{{ end }}">{{ T "contents" }} <i class="toc-icon fa-solid fa-angle-down fa-fw"></i></h2>
+      <div class="toc-content{{ if eq $toc.auto false }} always-active{{ end }}{{ with $params.password }} d-none{{ end }}" id="toc-content-auto"></div>
     {{- end -}}
   </aside>
 
@@ -117,7 +117,7 @@
 
     {{- /* Static TOC */ -}}
     {{- if (ne $toc.enable false) | and (ne $tocEmpty true) -}}
-      <div class="details toc" id="toc-static" kept="{{ if $toc.keepStatic }}true{{ else }}false{{ end }}">
+      <div class="details toc{{ with $params.password }} d-none{{ end }}" id="toc-static" kept="{{ if $toc.keepStatic }}true{{ else }}false{{ end }}">
         <div class="details-summary toc-title">
           <span>{{ T "contents" }}</span>
           <span><i class="details-icon fa-solid fa-angle-right"></i></span>

src/js/theme.js

@@ -499,10 +499,8 @@ class FixIt {
   }
   /**
    * init table of contents
-   * @param {Boolean} [onInit=false]
-   * @returns 
    */
-  initToc(onInit = false) {
+  initToc() {
     const $tocCore = document.getElementById('TableOfContents');
     if ($tocCore === null) {
       return;
@@ -562,18 +560,22 @@ class FixIt {
       });
       this._tocOnScroll();
       this.scrollEventSet.add(this._tocOnScroll);
-      // only addEventListener once
-      onInit && document.querySelector('#toc-auto>.toc-title').addEventListener('click', () => {
-        const animation = ['animate__faster']
-        const tocHidden = $toc.classList.contains('toc-hidden');
-        animation.push(tocHidden ? 'animate__fadeIn' : 'animate__fadeOut');
-        $tocContentAuto.classList.remove(tocHidden ? 'animate__fadeOut' : 'animate__fadeIn');
-        this.util.animateCSS($tocContentAuto, animation, true);
-        $toc.classList.toggle('toc-hidden');
-      }, false)
     }
   }
 
+  initTocListener() {
+    const $toc = document.getElementById('toc-auto');
+    const $tocContentAuto = document.getElementById('toc-content-auto');
+    document.querySelector('#toc-auto>.toc-title')?.addEventListener('click', () => {
+      const animation = ['animate__faster']
+      const tocHidden = $toc.classList.contains('toc-hidden');
+      animation.push(tocHidden ? 'animate__fadeIn' : 'animate__fadeOut');
+      $tocContentAuto.classList.remove(tocHidden ? 'animate__fadeOut' : 'animate__fadeIn');
+      this.util.animateCSS($tocContentAuto, animation, true);
+      $toc.classList.toggle('toc-hidden');
+    }, false)
+  }
+
   initMath() {
     if (this.config.math) {
       renderMathInElement(document.body, this.config.math);
@@ -902,15 +904,19 @@ class FixIt {
       ondecrypted: () => {
         this.initDetails();
         this.initLightGallery();
-        // this.initLightGallery('.decrypted-content');
         this.initHighlight();
         this.initTable();
-        this.initHeaderLink(); // TODO
-        // this.initMath(); // TODO
+        this.initHeaderLink();
+        this.initMath();
         this.initMermaid();
         this.initEcharts();
-        // this.initTypeit(); // TODO
-        // this.initMapbox(); // TODO 
+        this.initTypeit();
+        this.initMapbox();
+        this.util.forEach(document.querySelectorAll('#toc-auto>.d-none, #toc-static.d-none'), ($element) => {
+          $element.classList.remove('d-none');
+        });
+        this.initToc();
+        this.initTocListener();
         // this.initPangu(); // TODO 中文转码有 BUG
       }
     });
@@ -975,7 +981,9 @@ class FixIt {
       if (!this._resizeTimeout) {
         this._resizeTimeout = window.setTimeout(() => {
           this._resizeTimeout = null;
-          for (let event of this.resizeEventSet) event();
+          for (let event of this.resizeEventSet) {
+            event();
+          }
           this.initToc();
           this.initMermaid();
           this.initSearch();
@@ -1018,18 +1026,20 @@ class FixIt {
         this.initMapbox();
         this.initPangu();
       }
+      window.setTimeout(() => {
+        this.initComment();
+        if (!this.#encrypted) {
+          this.initToc();
+          this.initTocListener();
+        }
+
+        this.onScroll();
+        this.onResize();
+        this.onClickMask();
+      }, 100);
     } catch (err) {
       console.error(err);
     }
-
-    window.setTimeout(() => {
-      this.initComment();
-      this.initToc(true);
-
-      this.onScroll();
-      this.onResize();
-      this.onClickMask();
-    }, 100);
   }
 }