✨ Feat: enhance auto toc feature (#104)

CHANGELOG.md

@@ -2,12 +2,12 @@
 All notable changes to this project will be documented in this file.
 <!-- Releases see https://github.com/Lruihao/FixIt/releases -->
 
-
 ## v0.2.15
 
 > Add hugo new features support.
 > Snapshot: 
 
+- :sparkles: Feat: enhance auto toc feature ([#104](https://github.com/Lruihao/FixIt/issues/104) [#136](https://github.com/Lruihao/FixIt/issues/136))
 - :bug: Fix: Giscus comments invalid config `inputPosition`
 - :art: Style: add scroll bar for auto toc ([#136](https://github.com/Lruihao/FixIt/issues/136))
 - :arrow_up: Chore: update some third-party libraries

assets/css/_partial/_single/_toc.scss

@@ -61,6 +61,7 @@
 
   .toc-title {
     margin: 0.5rem 0;
+    cursor: pointer;
 
     &::before {
       content: '|';
@@ -72,6 +73,15 @@
         color: $global-border-color-dark;
       }
     }
+
+    i.toc-icon {
+      @include transition(transform 0.2s ease);
+    }
+  }
+
+  &.toc-hidden i.toc-icon {
+    @include transform(rotate(-90deg));
+    @include transition(transform 0.2s ease);
   }
 
   .toc-content {

layouts/posts/single.html

@@ -8,7 +8,7 @@
     {{- /* Auto TOC */ -}}
     {{- $tocEmpty := eq .TableOfContents `<nav id="TableOfContents"></nav>` -}}
     {{- if (ne $toc.enable false) | and (ne $tocEmpty true) -}}
-      <h2 class="toc-title">{{ T "contents" }}</h2>
+      <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>
     {{- end -}}
   </aside>

src/js/theme.js

@@ -495,8 +495,12 @@ class Theme {
       });
     }
   }
-
-  initToc() {
+  /**
+   * init table of contents
+   * @param {Boolean} [onInit=false]
+   * @returns 
+   */
+  initToc(onInit = false) {
     const $tocCore = document.getElementById('TableOfContents');
     if ($tocCore === null) {
       return;
@@ -507,7 +511,7 @@ class Theme {
         $tocCore.parentElement.removeChild($tocCore);
         $tocContentStatic.appendChild($tocCore);
       }
-      if (this._tocOnScroll) this.scrollEventSet.delete(this._tocOnScroll);
+      this._tocOnScroll && this.scrollEventSet.delete(this._tocOnScroll);
     } else {
       const $tocContentAuto = document.getElementById('toc-content-auto');
       if ($tocCore.parentElement !== $tocContentAuto) {
@@ -556,6 +560,15 @@ class Theme {
       });
       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)
     }
   }
 
@@ -984,7 +997,7 @@ class Theme {
 
     window.setTimeout(() => {
       this.initComment();
-      this.initToc();
+      this.initToc(true);
 
       this.onScroll();
       this.onResize();