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 @@
{{ $fadeinout := resources.Get "js/helper/fadeinout.js" | resources.Minify }}
+{{ $throttle := resources.Get "js/helper/throttle.js" | resources.Minify }}
+
{{ if in .Params.Libraries "d3" }}
@@ -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);
+ // =================================================================