kienan
/
hugo-theme-zzo
mirror of https://github.com/zzossig/hugo-theme-zzo.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix long toc issue

This commit is contained in:
zzossig 2020-12-09 05:12:03 +09:00
parent 69e72bd144
commit 621c83a392
4 changed files with 113 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
archetypes/default.md
View File

@ -6,6 +6,7 @@ draft: false
hideToc: false hideToc: false
enableToc: true enableToc: true
enableTocContent: false enableTocContent: false
tocFolding: false
tocPosition: inner tocPosition: inner
tocLevels: ["h2", "h3", "h4"] tocLevels: ["h2", "h3", "h4"]
tags: tags:

12
assets/js/helper/throttle.js Normal file
View File

@ -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);
}
};
}

148
assets/sass/components/_toc.scss
View File

@ -2,17 +2,32 @@
width: 100%; width: 100%;
max-width: $sidebar-width; max-width: $sidebar-width;
position: fixed; position: fixed;
overflow-y: auto;
top: 7rem; top: 7rem;
font-size: 0.85rem; 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"] { &[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; @include no-select;
#TableOfContents { #TableOfContents {
position: relative; position: relative;
} }
@ -40,13 +55,13 @@
top: 4.2rem; top: 4.2rem;
left: 1rem; left: 1rem;
position: absolute; position: absolute;
@media only screen and (max-width: 1300px) { @media only screen and (max-width: 1300px) {
display: none; display: none;
} }
&[data-ani="true"] { &[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; margin-top: 0.5rem;
&[data-ani="true"] { &[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) { @include themify($themes) {
color: themed('toc-label-color'); color: themed("toc-label-color");
} }
&--outer { &--outer {
@ -85,127 +100,126 @@
} }
&[data-dir="ltr"] { &[data-dir="ltr"] {
&[data-folding=true] { &[data-folding="true"] {
@include themify($themes) { @include themify($themes) {
a { a {
color: themed('toc-vertical-line'); color: themed("toc-vertical-line");
position: relative; position: relative;
padding-left: 0.25rem;
&::before { &::before {
content: ''; content: "";
height: 100%; height: 100%;
left: -1rem; left: -0.5rem;
margin-top: -1px;
position: absolute; position: absolute;
width: 2px; width: 2px;
background-color: themed('toc-vertical-line'); background-color: themed("toc-vertical-line");
&:last-child { &:last-child {
background-color: transparent; background-color: transparent;
} }
} }
} }
.active { .active {
color: themed('toc-vertical-line-active'); color: themed("toc-vertical-line-active");
font-weight: 700; font-weight: 700;
&::before { &::before {
background-color: themed('toc-vertical-line-active'); background-color: themed("toc-vertical-line-active");
} }
} }
} }
} }
&[data-folding=false] { &[data-folding="false"] {
@include themify($themes) { @include themify($themes) {
a { a {
color: themed('toc-vertical-line'); color: themed("toc-vertical-line");
&.active { &.active {
color: themed('toc-vertical-line-active'); color: themed("toc-vertical-line-active");
&::before { &::before {
background-color: themed('toc-vertical-line-active'); background-color: themed("toc-vertical-line-active");
content: ''; content: "";
height: 0.95rem; height: 0.95rem;
left: -1rem; left: -0.5rem;
margin-top: 2px; margin-top: 2px;
position: absolute; position: absolute;
width: 2px; width: 2px;
&:last-child { &:last-child {
background-color: transparent; background-color: transparent;
} }
} }
} }
} }
} }
} }
ul { ul {
@include themify($themes) { @include themify($themes) {
li { li {
li { li {
margin-left: 1rem; margin-left: 1rem;
color: themed('sidebar-li-color'); color: themed("sidebar-li-color");
} }
} }
} }
} }
} }
&[data-dir="rtl"] { &[data-dir="rtl"] {
&[data-folding=true] { &[data-folding="true"] {
a { @include themify($themes) {
color: inherit; a {
position: relative; color: themed("toc-vertical-line");
&::before { position: relative;
@include themify($themes) { padding-right: 0.25rem;
background-color: themed('toc-vertical-line');
} &::before {
content: ''; content: "";
height: 100%; height: 100%;
right: -1rem; right: -0.5rem;
margin-top: -1px; position: absolute;
position: absolute; width: 2px;
width: 2px; background-color: themed("toc-vertical-line");
&:last-child { &:last-child {
background-color: transparent; background-color: transparent;
}
} }
} }
}
.active { .active {
@include themify($themes) { color: themed("toc-vertical-line-active");
color: themed('link-hover');
font-weight: 700; font-weight: 700;
&::before { &::before {
background-color: themed('toc-vertical-line-active'); background-color: themed("toc-vertical-line-active");
} }
} }
} }
} }
&[data-folding=false] { &[data-folding="false"] {
@include themify($themes) { @include themify($themes) {
a { a {
color: themed('toc-vertical-line'); color: themed("toc-vertical-line");
&.active { &.active {
color: themed('toc-vertical-line-active'); color: themed("toc-vertical-line-active");
&::before { &::before {
background-color: themed('toc-vertical-line-active'); background-color: themed("toc-vertical-line-active");
content: ''; content: "";
height: 0.95rem; height: 0.95rem;
right: -1rem; right: -0.5rem;
margin-top: 2px; margin-top: 2px;
position: absolute; position: absolute;
width: 2px; width: 2px;
&:last-child { &:last-child {
background-color: transparent; background-color: transparent;
} }
} }
} }
} }
} }
} }
@ -214,8 +228,8 @@
li { li {
li { li {
margin-right: 1rem; margin-right: 1rem;
color: themed('sidebar-li-color'); color: themed("sidebar-li-color");
} }
} }
} }
} }
@ -224,9 +238,9 @@
ul { ul {
@include themify($themes) { @include themify($themes) {
a { a {
color: themed('toc-title-color'); color: themed("toc-title-color");
&.active { &.active {
color: themed('toc-vertical-line-active'); color: themed("toc-vertical-line-active");
} }
} }
} }
@ -249,4 +263,4 @@
list-style-type: circle; list-style-type: circle;
} }
} }
} }

19
layouts/partials/script/single-script.html
View File

@ -12,6 +12,8 @@
<script defer src="{{ $prop.RelPermalink }}"></script> <script defer src="{{ $prop.RelPermalink }}"></script>
{{ $fadeinout := resources.Get "js/helper/fadeinout.js" | resources.Minify }} {{ $fadeinout := resources.Get "js/helper/fadeinout.js" | resources.Minify }}
<script defer src="{{ $fadeinout.RelPermalink }}"></script> <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" }} {{ if in .Params.Libraries "d3" }}
<script defer src="{{ $d3.d3.url }}" integrity="{{ $d3.d3.sri }}" crossorigin="anonymous"></script> <script defer src="{{ $d3.d3.url }}" integrity="{{ $d3.d3.sri }}" crossorigin="anonymous"></script>
@ -336,6 +338,23 @@
}) : null; }) : 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);
// =================================================================