add new page parameter GeekdocCollapseSection

This commit is contained in:
Robert Kaussow 2020-11-16 22:47:50 +01:00
parent 8a297918e8
commit 5df0ba4b35
No known key found for this signature in database
GPG key ID: 65362AE74AF98B61
12 changed files with 101 additions and 5 deletions

View file

@ -0,0 +1,5 @@
---
geekdocCollapseSection: true
---
Demo foldable menu entries

View file

@ -0,0 +1,7 @@
Level 1
<!-- spellchecker-disable -->
{{< toc-tree >}}
<!-- spellchecker-enable -->

View file

@ -0,0 +1,5 @@
---
title: Level 1.1
---
Level 1.1

View file

@ -0,0 +1,5 @@
---
title: Level 1.2
---
Level 1.2

View file

@ -0,0 +1,5 @@
---
geekdocCollapseSection: true
---
Level-2

View file

@ -0,0 +1,5 @@
---
title: Level 2.1
---
Level 2.1

View file

@ -0,0 +1,5 @@
---
title: Level 2.2
---
Level 2.2

View file

@ -0,0 +1,3 @@
---
weight: -10
---

View file

@ -1,4 +1,3 @@
--- ---
title: Usage weight: -20
weight: -10
--- ---

View file

@ -207,6 +207,9 @@ geekdocHidden = true
# NOTE: Only applies when 'geekdocHidden = true'. # NOTE: Only applies when 'geekdocHidden = true'.
geekdocHiddenTocTree = true geekdocHiddenTocTree = true
# Set to true to make a section foldable in side menu (file-tree menu only)
geekdocCollapseSection = true
# Add an anchor link to headlines # Add an anchor link to headlines
geekdocAnchor = true geekdocAnchor = true
``` ```
@ -251,6 +254,9 @@ geekdocHidden: true
# NOTE: Only applies when 'geekdocHidden: true'. # NOTE: Only applies when 'geekdocHidden: true'.
geekdocHiddenTocTree: true geekdocHiddenTocTree: true
# Set to true to make a section foldable in side menu (file-tree menu only)
geekdocCollapseSection: true
# Add an anchor link to headlines # Add an anchor link to headlines
geekdocAnchor: true geekdocAnchor: true
``` ```

View file

@ -9,7 +9,18 @@
{{ range .sect.GroupBy "Weight" }} {{ range .sect.GroupBy "Weight" }}
{{ range .ByTitle }} {{ range .ByTitle }}
{{ if not .Params.GeekdocHidden }} {{ if not .Params.GeekdocHidden }}
{{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
{{ $isParent := and (ne $numberOfPages 0) (not .Params.GeekdocFlatSection) }}
{{ $isCurrent := eq $current . }}
{{ $isAncestor := .IsAncestor $current }}
{{ $id := substr (sha1 .Permalink) 0 8 }}
<li> <li>
{{ if and $isParent .Params.GeekdocCollapseSection }}
<input type="checkbox" id="{{ printf "navtree-%s" $id }}" class="gdoc-nav__toggle" {{ if or $isCurrent $isAncestor }}checked{{ end }}>
<label for="{{ printf "navtree-%s" $id }}" class="flex justify-between">
{{ end }}
{{ if or .Content .Params.GeekdocFlatSection }} {{ if or .Content .Params.GeekdocFlatSection }}
<span class="flex"> <span class="flex">
<a href="{{ .RelPermalink }}" class="gdoc-nav__entry {{ if eq $current . }}is-active{{ end }}"> <a href="{{ .RelPermalink }}" class="gdoc-nav__entry {{ if eq $current . }}is-active{{ end }}">
@ -19,9 +30,13 @@
{{ else }} {{ else }}
<span class="flex">{{ partial "title" . }}</span> <span class="flex">{{ partial "title" . }}</span>
{{ end }} {{ end }}
{{ if and $isParent .Params.GeekdocCollapseSection }}
<svg class="icon keyborad_arrow_left"><use xlink:href="#keyborad_arrow_left"></use></svg>
<svg class="icon keyborad_arrow_down hidden"><use xlink:href="#keyborad_arrow_down"></use></svg>
</label>
{{ end }}
{{ $numberOfPages := (add (len .Pages) (len .Sections)) }} {{ if $isParent }}
{{ if and (ne $numberOfPages 0) (not .Params.GeekdocFlatSection) }}
{{ template "tree-nav" dict "sect" .Pages "current" $current}} {{ template "tree-nav" dict "sect" .Pages "current" $current}}
{{ end }} {{ end }}
</li> </li>

View file

@ -155,6 +155,7 @@ img {
margin: 0; margin: 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
user-select: none;
ul { ul {
padding-left: $padding-16; padding-left: $padding-16;
@ -169,6 +170,39 @@ img {
} }
} }
&__toggle {
display: none;
& ~ label {
cursor: pointer;
.icon {
font-size: 0.7rem;
}
}
&:not(:checked) {
& ~ ul,
& ~ label .icon.keyborad_arrow_down {
display: none;
}
& ~ label .icon.keyborad_arrow_left {
display: block;
}
}
&:checked {
& ~ ul,
& ~ label .icon.keyborad_arrow_down {
display: block;
}
& ~ label .icon.keyborad_arrow_left {
display: none;
}
}
}
&__entry { &__entry {
flex: 1; flex: 1;
color: $body-font-color; color: $body-font-color;
@ -185,7 +219,9 @@ img {
} }
&--main > ul > li > span, &--main > ul > li > span,
&--main > ul > li > span > a { &--main > ul > li > span > a,
&--main > ul > li > label,
&--main > ul > li > label > a {
font-weight: bold; font-weight: bold;
} }