fix long toc issue

4 files changed, 113 insertions, 67 deletions

diff --git a/archetypes/default.md b/archetypes/default.md
index e082fd7..1e1f5ac 100644
--- a/archetypes/default.md
+++ b/archetypes/default.md
@@ -6,6 +6,7 @@ draft: false
 hideToc: false
 enableToc: true
 enableTocContent: false
+tocFolding: false
 tocPosition: inner
 tocLevels: ["h2", "h3", "h4"]
 tags:
diff --git a/assets/js/helper/throttle.js b/assets/js/helper/throttle.js
new file mode 100644
index 0000000..859d356
--- /dev/null
+++ b/assets/js/helper/throttle.js
@@ -0,0 +1,12 @@
+function throttle(callback, limit) {
+  var waiting = false;
+  return function () {
+    if (!waiting) {
+      callback.apply(this, arguments);
+      waiting = true;
+      setTimeout(function () {
+        waiting = false;
+      }, limit);
+    }
+  };
+}
diff --git a/assets/sass/components/_toc.scss b/assets/sass/components/_toc.scss
index eb268cc..45053de 100644
--- a/assets/sass/components/_toc.scss
+++ b/assets/sass/components/_toc.scss
@@ -2,17 +2,32 @@
   width: 100%;
   max-width: $sidebar-width;
   position: fixed;
+  overflow-y: auto;
   top: 7rem;
   font-size: 0.85rem;
-  padding-left: 0.5rem;
-  z-index: z('toc');
+  z-index: z("toc");
+
+  @include themify($themes) {
+    @include webkit-scrollbars(
+      themed("custom-scrollbar-foreground-color"),
+      themed("custom-scrollbar-background-color")
+    );
+    @include moz-scrollbars(themed("custom-scrollbar-foreground-color"), themed("custom-scrollbar-background-color"));
+  }
+
+  &[data-dir="rtl"] {
+    padding-right: 0.5rem;
+  }
+  &[data-dir="ltr"] {
+    padding-left: 0.5rem;
+  }
 
   &[data-ani="true"] {
-    @include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
+    @include animation("slide-in-down-little .2s .3s 1 ease-in backwards");
   }
 
   @include no-select;
-  
+
   #TableOfContents {
     position: relative;
   }
@@ -40,13 +55,13 @@
     top: 4.2rem;
     left: 1rem;
     position: absolute;
-    
+
     @media only screen and (max-width: 1300px) {
       display: none;
     }
 
     &[data-ani="true"] {
-      @include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
+      @include animation("slide-in-down-little .2s .3s 1 ease-in backwards");
     }
   }
 
@@ -70,11 +85,11 @@
     margin-top: 0.5rem;
 
     &[data-ani="true"] {
-      @include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
+      @include animation("slide-in-down-little .2s .3s 1 ease-in backwards");
     }
-    
+
     @include themify($themes) {
-      color: themed('toc-label-color');
+      color: themed("toc-label-color");
     }
 
     &--outer {
@@ -85,127 +100,126 @@
   }
 
   &[data-dir="ltr"] {
-    &[data-folding=true] {
+    &[data-folding="true"] {
       @include themify($themes) {
         a {
-          color: themed('toc-vertical-line');
+          color: themed("toc-vertical-line");
           position: relative;
+          padding-left: 0.25rem;
 
           &::before {
-            content: '';
+            content: "";
             height: 100%;
-            left: -1rem;
-            margin-top: -1px;
+            left: -0.5rem;
             position: absolute;
-            width: 2px;            
-            background-color: themed('toc-vertical-line');
+            width: 2px;
+            background-color: themed("toc-vertical-line");
             &:last-child {
               background-color: transparent;
             }
           }
         }
-          
+
         .active {
-          color: themed('toc-vertical-line-active');
+          color: themed("toc-vertical-line-active");
           font-weight: 700;
           &::before {
-            background-color: themed('toc-vertical-line-active');
+            background-color: themed("toc-vertical-line-active");
           }
         }
       }
     }
 
-    &[data-folding=false] {
+    &[data-folding="false"] {
       @include themify($themes) {
         a {
-          color: themed('toc-vertical-line');
+          color: themed("toc-vertical-line");
 
           &.active {
-            color: themed('toc-vertical-line-active');
-            
+            color: themed("toc-vertical-line-active");
+
             &::before {
-              background-color: themed('toc-vertical-line-active');
-              content: '';
+              background-color: themed("toc-vertical-line-active");
+              content: "";
               height: 0.95rem;
-              left: -1rem;
+              left: -0.5rem;
               margin-top: 2px;
               position: absolute;
-              width: 2px;            
+              width: 2px;
               &:last-child {
                 background-color: transparent;
               }
             }
           }
-        }   
+        }
       }
     }
 
     ul {
       @include themify($themes) {
-        li {        
+        li {
           li {
             margin-left: 1rem;
-            color: themed('sidebar-li-color');      
-          }  
+            color: themed("sidebar-li-color");
+          }
         }
       }
     }
   }
 
   &[data-dir="rtl"] {
-    &[data-folding=true] {
-      a {
-        color: inherit;
-        position: relative;
-        &::before {
-          @include themify($themes) {        
-            background-color: themed('toc-vertical-line');
-          }      
-          content: '';
-          height: 100%;
-          right: -1rem;
-          margin-top: -1px;
-          position: absolute;
-          width: 2px;            
-          &:last-child {
-            background-color: transparent;
+    &[data-folding="true"] {
+      @include themify($themes) {
+        a {
+          color: themed("toc-vertical-line");
+          position: relative;
+          padding-right: 0.25rem;
+
+          &::before {
+            content: "";
+            height: 100%;
+            right: -0.5rem;
+            position: absolute;
+            width: 2px;
+            background-color: themed("toc-vertical-line");
+            &:last-child {
+              background-color: transparent;
+            }
           }
         }
-      }
 
-      .active {
-        @include themify($themes) {
-          color: themed('link-hover');
+        .active {
+          color: themed("toc-vertical-line-active");
           font-weight: 700;
-          &::before {        
-            background-color: themed('toc-vertical-line-active');
+          &::before {
+            background-color: themed("toc-vertical-line-active");
           }
         }
       }
     }
 
-    &[data-folding=false] {
+    &[data-folding="false"] {
       @include themify($themes) {
         a {
-          color: themed('toc-vertical-line');
+          color: themed("toc-vertical-line");
 
           &.active {
-            color: themed('toc-vertical-line-active');
-            
+            color: themed("toc-vertical-line-active");
+
             &::before {
-              background-color: themed('toc-vertical-line-active');
-              content: '';
+              background-color: themed("toc-vertical-line-active");
+              content: "";
               height: 0.95rem;
-              right: -1rem;
+              right: -0.5rem;
               margin-top: 2px;
               position: absolute;
-              width: 2px;            
+              width: 2px;
               &:last-child {
                 background-color: transparent;
               }
             }
           }
-        }   
+        }
       }
     }
 
@@ -214,8 +228,8 @@
         li {
           li {
             margin-right: 1rem;
-            color: themed('sidebar-li-color');      
-          }  
+            color: themed("sidebar-li-color");
+          }
         }
       }
     }
@@ -224,9 +238,9 @@
   ul {
     @include themify($themes) {
       a {
-        color: themed('toc-title-color');        
+        color: themed("toc-title-color");
         &.active {
-          color: themed('toc-vertical-line-active');
+          color: themed("toc-vertical-line-active");
         }
       }
     }
@@ -249,4 +263,4 @@
       list-style-type: circle;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/layouts/partials/script/single-script.html b/layouts/partials/script/single-script.html
index 26c905f..456f2cf 100644
--- a/layouts/partials/script/single-script.html
+++ b/layouts/partials/script/single-script.html
@@ -12,6 +12,8 @@
 <script defer src="{{ $prop.RelPermalink }}"></script>
 {{ $fadeinout := resources.Get "js/helper/fadeinout.js" | resources.Minify }}
 <script defer src="{{ $fadeinout.RelPermalink }}"></script>
+{{ $throttle := resources.Get "js/helper/throttle.js" | resources.Minify }}
+<script defer src="{{ $throttle.RelPermalink }}"></script>
 
 {{ if in .Params.Libraries "d3" }}
   <script defer src="{{ $d3.d3.url }}" integrity="{{ $d3.d3.sri }}" crossorigin="anonymous"></script>
@@ -336,6 +338,23 @@
       }) : null;
     }
     // =================================================================
+    
+    
+    
+    // ======================== TOC height calc ========================
+    var topOffset = 120;
+    var botOffset = 70;
+    var handleWindowResize = function () {
+      if (tocElem) {
+        tocElem.style.maxHeight = (window.innerHeight - topOffset - botOffset) + 'px';
+      }
+    }
+    var throttledWindowResize = throttle(handleWindowResize, 300);
+    throttledWindowResize()
+
+    
+    window.addEventListener('resize', throttledWindowResize);
+    // =================================================================