hugo-theme-relearn/layouts/partials/menu.html
Sören Weber 0505b36141
theme: fix flash of non-default variant, part I #757
implements the first part, working for configured variants;

for that, loading of stylesheets was overhauled by now
merging all configured variants into one big stylesheet for
each output format and loading this instead of one stylesheet
per configured variant;

previously @media print styles were applied on top of @media screen
styles; this is now strictly isolated, which doesn't require styles
like neon to revert styles for print anymore;

this change was also used to implement the minify parameter, to shrink
those generated stylesheets, making them shrink to 66% of their
unminified size for the exampleSite;

the theme switcher functionality is now completely independend of
variant.js; the switch is now handled by in-page javascript which
avoids waiting for external scripts to load, so switching can happen
as early as possible;

switching of themes is now implemented by just setting a data attribute
to the html element, were previously a complex mechanism of dynamically
loading of variant CSS files was implemented;

the call for variant.js was removed in this changeset, making the
generator broken and useless; this will be fixed with the next patch;
2024-12-06 07:38:05 +01:00

351 lines
No EOL
21 KiB
HTML

{{- $showvisitedlinks := .Site.Params.showVisitedLinks }}
<aside id="R-sidebar" class="default-animation{{ if $showvisitedlinks }} showVisitedLinks{{ end }}">
{{- $currentNode := . }}
<div id="R-header-topbar" class="default-animation"></div>
<div id="R-header-wrapper" class="default-animation">
<div id="R-header" class="default-animation">
{{ partial "logo.html" . }}
</div>{{ partial "search.html" . }}
</div>
<div id="R-homelinks" class="default-animation{{ if not .Site.Params.disableLandingPageButton }} homelinks{{ end }}">
{{- if not .Site.Params.disableLandingPageButton }}
{{- if (ne .Site.Params.landingPageURL nil) }}
{{- warnf "UNSUPPORTED usage of 'landingPageURL' config parameter found, remove it and optionally overwrite the `logo.html` partial to provide a link if it should not point to the project's home page; see https://mcshelby.github.io/hugo-theme-relearn/introduction/releasenotes/4/#4-2-0" }}
{{- end }}
<ul>
<li><a class="padding" href="{{ partial "permalink.gotmpl" (dict "to" .Site.Home) }}">{{ .Site.Params.landingPageName | default `<i class="fa-fw fas fa-home"></i> Home` | safeHTML }}</a></li>
</ul>
{{- end }}
<hr class="padding">
</div>
<div id="R-content-wrapper" class="highlightable">
{{- $menuconfigs := .Params.sidebarmenus | default site.Params.sidebarmenus | default (slice
(dict "type" "page" "identifier" "home")
(dict "type" "menu" "identifier" "shortcuts")
) }}
{{- range $menuconfigs }}
{{- $config := . }}
{{- if eq $config.type "page" }}
{{- partial "partials/inline/page-tree" (dict "currentnode" $currentNode "config" $config "showvisitedlinks" $showvisitedlinks) }}
{{- else if eq $config.type "menu" }}
{{- partial "partials/inline/menu-tree" (dict "currentnode" $currentNode "config" $config "showvisitedlinks" $showvisitedlinks) }}
{{- else }}
{{- warnf "WARNING: unknown menu type '%s' found in parameter 'sidebarmenus' for menu '%s'; use either 'page' or 'menu'" $config.type $config.identifier }}
{{- end }}
{{- end }}
{{- $siteLanguages := .Site.Languages }}
{{- $showlangswitch := and hugo.IsMultilingual (not .Site.Params.disableLanguageSwitchingButton) (gt (int (len $siteLanguages)) 1) }}
{{- $themevariants := partialCached "_relearn/themeVariants.gotmpl" . }}
{{- $showvariantswitch := gt (int (len $themevariants)) 1 }}
{{- $footer := partial "menu-footer.html" . }}
{{- $showfooter := not (eq 0 (int (len ($footer | plainify)))) }}
<div class="padding footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}"></div>
<div id="R-menu-footer">
<hr class="padding default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}{{if $showfooter}} showFooter{{end}}">
<div id="R-prefooter" class="footerLangSwitch footerVariantSwitch footerVisitedLinks{{if $showlangswitch}} showLangSwitch{{end}}{{if $showvariantswitch}} showVariantSwitch{{end}}{{if $showvisitedlinks}} showVisitedLinks{{end}}">
<ul>
<li id="R-select-language-container" class="footerLangSwitch{{if $showlangswitch}} showLangSwitch{{end}}">
<div class="padding menu-control">
<i class="fa-fw fas fa-language"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="R-select-language">{{ T "Language" }}</label>
<select id="R-select-language" onchange="location = this.querySelector( this.value ).dataset.url;">
{{- $page := .Page }}
{{- $pageLang := .Page.Language.Lang }}
{{- range .Page.AllTranslations }}
<option id="R-select-language-{{ .Language.Lang }}" value="#R-select-language-{{ .Language.Lang }}" data-url="{{ partial "permalink.gotmpl" (dict "to" .) }}" lang="{{ .Language.LanguageCode }}"{{ if eq $pageLang .Language.Lang }} selected{{ end }}>{{ .Language.LanguageName }}</option>
{{- end }}
</select>
</div>
<div class="clear"></div>
</div>
</li>
<li id="R-select-variant-container" class="footerVariantSwitch{{if $showvariantswitch}} showVariantSwitch{{end}}">
<div class="padding menu-control">
<i class="fa-fw fas fa-paint-brush"></i>
<span>&nbsp;</span>
<div class="control-style">
<label class="a11y-only" for="R-select-variant">{{ T "Theme" }}</label>
<select id="R-select-variant" onchange="window.relearn.changeVariant( this.value );">
{{- $firstvariant := true }}
{{- range $themevariants }}
{{- $themevariant := . }}
<option id="R-select-variant-{{ $themevariant.identifier }}" value="{{ $themevariant.identifier }}"{{- if $firstvariant }} selected{{ end }}>{{ $themevariant.name }}</option>
{{- $firstvariant = false }}
{{- end }}
</select>
</div>
<div class="clear"></div>
</div>
<script>window.relearn.initVariant();</script>
</li>
<li class="footerVisitedLinks{{if $showvisitedlinks}} showVisitedLinks{{end}}">
<div class="padding menu-control">
<i class="fa-fw fas fa-history"></i>
<span>&nbsp;</span>
<div class="control-style">
<button onclick="clearHistory();">{{ T "Clear-History" }}</button>
</div>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
<div id="R-footer" class="footerFooter{{if $showfooter}} showFooter{{end}}">
{{- $footer }}
</div>
</div>
</div>
</aside>
{{- define "partials/inline/page-tree" }}
{{- $currentNode := .currentnode }}
{{- $config := .config }}
{{- $showvisitedlinks := .showvisitedlinks }}
<div id="R-shortcutmenu-{{ $config.identifier }}" class="R-sidebarmenu">
{{- with site.Home.GetPage ($config.pageRef | default "") }}
{{- $entry := . }}
{{- $entries := partialCached "_relearn/pages.gotmpl" (dict "page" $entry) $entry.Path }}
{{- $title := "" }}
{{- if not ($config.disableTitle | default true) }}
{{ $title = $entry.Params.menuTitle | default (T (print $config.identifier "-menuTitle")) }}
{{- end }}
{{- with $title }}
<div class="nav-title padding">{{ . }}</div>
{{- end }}
{{- $classes := "space " }}
{{- if ($config.main | default true) }}
{{- $classes = "enlarge morespace " }}
{{- end }}
<ul class="{{ $classes }}collapsible-menu">
{{- $defaultAlwaysopen := site.Params.alwaysopen | default false }}
{{- range $entries }}
{{- $isSubSelf := eq . $currentNode }}
{{- $isSubAncestor := and (not $isSubSelf) (.IsAncestor $currentNode) }}
{{- $isSubHidden := or (.Params.hidden) (eq .Title "") }}
{{- $isSubCollapsible := .Params.collapsibleMenu | default site.Params.collapsibleMenu }}
{{- if or $isSubSelf $isSubAncestor }}
{{- partial "partials/inline/page-walker" (dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen "isSelf" $isSubSelf "isAncestor" $isSubAncestor "isHidden" $isSubHidden) }}
{{- else if and (not $isSubHidden) (or $isSubCollapsible (not $entry.RelPermalink) (eq $entry $currentNode) ($entry.IsAncestor $currentNode)) }}
{{- $id := md5 .Path }}
{{- partialCached "partials/inline/page-walker" (dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen "isSelf" $isSubSelf "isAncestor" $isSubAncestor "isHidden" $isSubHidden) $id }}
{{- end }}
{{- end }}
</ul>
</div>
{{- else }}
{{- warnf "WARNING: page '%s' not found for sidebar menu '%s'" ($config.pageRef | default "") $config.identifier }}
{{- end }}
{{- end }}
{{- define "partials/inline/page-walker" }}
{{- $currentNode := .currentnode }}
{{- $showvisitedlinks := .showvisitedlinks }}
{{- $alwaysopen := .alwaysopen }}
{{- $isSelf := .isSelf }}
{{- $isAncestor := .isAncestor }}
{{- $isHidden := .isHidden }}
{{- with .sect }}
{{- $isActive := $isSelf }}
{{- $entry := . }}
{{- $entries := partialCached "_relearn/pages.gotmpl" (dict "page" .) .Path }}
{{- $hasVisibleChildren := false }}
{{- range $entries }}
{{- $isSubSelf := eq . $currentNode }}
{{- $isSubAncestor := and (not $isSubSelf) (.IsAncestor $currentNode) }}
{{- $isSubHidden := or (.Params.hidden) (eq .Title "") }}
{{- if or $isSubAncestor $isSubSelf (not $isSubHidden) }}
{{- $hasVisibleChildren = true }}
{{- break }}
{{- end }}
{{- end }}
{{- $title := partial "title.gotmpl" (dict "page" . "linkTitle" true) }}
{{- $url := partial "permalink.gotmpl" (dict "to" .) }}
{{- $isCrosslink := false }}
{{- $target := "" }}
{{- if .Params.menuPageRef }}
{{- with site.Home.GetPage (.Params.menuPageRef) }}
{{- $url = partial "permalink.gotmpl" (dict "to" .) }}
{{- $isCrosslink = true }}
{{- end }}
{{- else if .Params.menuUrl }}
{{- $url = .Params.menuUrl }}
{{- $isCrosslink = true }}
{{- $u := urls.Parse $url }}
{{- if $u.IsAbs }}
{{- $target = "_blank" }}
{{- if isset site.Params "externallinktarget" }}
{{- $target = site.Params.externalLinkTarget }}
{{- end }}
{{- end }}
{{- end }}
{{- $pre := partial "menu-pre.html" . }}
{{- $post := partial "menu-post.html" . }}
{{- if and $hasVisibleChildren (not $isCrosslink) }}
{{- $isCollapsible := .Params.collapsibleMenu | default site.Params.collapsibleMenu }}
{{- $currentAlwaysopen := .Params.alwaysopen | default $alwaysopen }}
{{- if and (not $url) (not $isCollapsible) }}
{{- $currentAlwaysopen = true }}
{{- end }}
{{- $entryId := md5 .Path }}
{{- $isOpen := or $currentAlwaysopen $isSelf $isAncestor }}
<li class="{{if $isActive }}active {{end}}{{if (or $isSelf $isAncestor) }}parent {{end}}{{if $isHidden }}hidden {{end}}{{if not $url }}headless {{end}}{{if $currentAlwaysopen}}alwaysopen {{end}}" data-nav-id="{{ $url }}">
{{- if $isCollapsible }}<input type="checkbox" id="R-section-{{ $entryId }}" aria-controls="R-subsections-{{ $entryId }}"{{ if $isOpen }} checked{{ end }}><label for="R-section-{{ $entryId }}"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">{{ T "Submenu" $title }}</span></label>{{ end }}
{{- if $url }}<a class="padding" href="{{ $url }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}>{{ else }}<span class="padding">{{ end }}
{{- $pre }}{{ $title }}{{ $post }}
{{- if $url }}{{ if $showvisitedlinks }}<i class="fa-fw fas fa-check read-icon"></i>{{ end }}</a>{{ else }}</span>{{ end }}<ul id="R-subsections-{{ $entryId }}" class="collapsible-menu">
{{- $defaultAlwaysopen := site.Params.alwaysopen | default true }}
{{- range $entries }}
{{- $isSubSelf := eq . $currentNode }}
{{- $isSubAncestor := and (not $isSubSelf) (.IsAncestor $currentNode) }}
{{- $isSubHidden := or (.Params.hidden) (eq .Title "") }}
{{- $isSubCollapsible := .Params.collapsibleMenu | default site.Params.collapsibleMenu }}
{{- if or $isSubSelf $isSubAncestor }}
{{- partial "partials/inline/page-walker" (dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen "isSelf" $isSubSelf "isAncestor" $isSubAncestor "isHidden" $isSubHidden) }}
{{- else if and (not $isSubHidden) (or $isSubCollapsible (not $entry.RelPermalink) (eq $entry $currentNode) ($entry.IsAncestor $currentNode)) }}
{{- $id := md5 .Path }}
{{- partialCached "partials/inline/page-walker" (dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen "isSelf" $isSubSelf "isAncestor" $isSubAncestor "isHidden" $isSubHidden) $id }}
{{- end }}
{{- end }}</ul></li>
{{- else if $url }}
<li class="{{if $isActive }}active {{end}}{{if $isHidden }}hidden {{end}}{{if not $url }}headless {{end}}{{if $isCrosslink }}crosslink {{end}}" data-nav-id="{{ $url }}">
{{- if $url }}<a class="padding" href="{{ $url }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}>{{ else }}<span class="padding">{{ end }}
{{- $pre }}{{ $title }}{{ $post }}
{{- if $url }}{{ if $showvisitedlinks }}<i class="fa-fw fas fa-check read-icon"></i>{{ end }}</a>{{ else }}</span>{{ end }}</li>
{{- end }}
{{- end }}
{{- end }}
{{- define "partials/inline/menu-tree" }}
{{- $currentNode := .currentnode }}
{{- $config := .config }}
{{- $showvisitedlinks := .showvisitedlinks }}
{{- with index site.Menus $config.identifier }}
<div id="R-shortcutmenu-{{ $config.identifier }}" class="R-sidebarmenu">
{{- $entry := "" }}
{{- $entries := . }}
{{- if eq (len $entries) 1 }}
{{- with index $entries 0 }}
{{- if not (partial "menupermalink.gotmpl" .) }}
{{- /* because in Hugo menus can not have parameter but menu entries can,
we can flag a single top level menu entry as a container; this container
entry carrys just meta information and parameter, uses its children
to build the "real" menu, and has no own `url` or `pageRef` */}}
{{- $entry = . }}
{{- $entries = .Children }}
{{- end }}
{{- end }}
{{- end }}
{{- $title := "" }}
{{- if not ($config.disableTitle | default false) }}
{{- if $entry }}
{{- $title = partial "menutitle.gotmpl" $entry }}
{{- else if eq $config.identifier "shortcuts" }}
{{- if not site.Params.DisableShortcutsTitle }}
{{- $title = T (print $config.identifier "-menuTitle") }}
{{- end }}
{{- else }}
{{- $title = T (print $config.identifier "-menuTitle") }}
{{- end }}
{{- end }}
{{- with $title }}
<div class="nav-title padding">{{ . }}</div>
{{- end }}
{{- $classes := "space " }}
{{- if ($config.main | default false) }}
{{- $classes = "enlarge morespace " }}
{{- end }}
<ul class="{{ $classes }}collapsible-menu">
{{- $root := or $entry site }}
{{- $defaultAlwaysopen := site.Params.alwaysopen | default false }}
{{- range $entries }}
{{- $isSubSelf := eq .Page $currentNode }}
{{- $isSubAncestor := and (not $isSubSelf) ($currentNode.HasMenuCurrent .Menu .) }}
{{- $isSubHidden := or (.Params.hidden) (eq (partial "menutitle.gotmpl" .) "") }}
{{- $isSubCollapsible := .Params.collapsibleMenu | default $root.Params.collapsibleMenu | default site.Params.collapsibleMenu }}
{{- if or $isSubSelf $isSubAncestor }}
{{- partial "partials/inline/menu-walker" (dict "menu" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen "isSelf" $isSubSelf "isAncestor" $isSubAncestor "isHidden" $isSubHidden "root" $root) }}
{{- else if and (not $isSubHidden) (or $isSubCollapsible (not (partial "menupermalink.gotmpl" $entry)) (and $entry (eq $entry.Page $currentNode)) (and $entry ($currentNode.HasMenuCurrent $entry.Menu $entry))) }}
{{- $id := md5 (print .) }}
{{- partialCached "partials/inline/menu-walker" (dict "menu" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen "isSelf" $isSubSelf "isAncestor" $isSubAncestor "isHidden" $isSubHidden "root" $root) $id }}
{{- end }}
{{- end }}
</ul>
</div>
{{- else }}
{{ if ne $config.identifier "shortcuts" }}
{{- warnf "WARNING: menu '%s' not found for sidebar menu '%s'" $config.identifier $config.identifier }}
{{- end }}
{{- end }}
{{- end }}
{{- define "partials/inline/menu-walker" }}
{{- $currentNode := .currentnode }}
{{- $showvisitedlinks := .showvisitedlinks }}
{{- $alwaysopen := .alwaysopen }}
{{- $isSelf := .isSelf }}
{{- $isAncestor := .isAncestor }}
{{- $isHidden := .isHidden }}
{{- $root := .root }}
{{- with .menu }}
{{- $isActive := $isSelf }}
{{- $entry := . }}
{{- $entries := .Children }}
{{- $hasVisibleChildren := false }}
{{- range $entries }}
{{- $isSubSelf := eq .Page $currentNode }}
{{- $isSubAncestor := and (not $isSubSelf) ($currentNode.HasMenuCurrent .Menu .) }}
{{- $isSubHidden := or (.Params.hidden) (eq (partial "menutitle.gotmpl" .) "") }}
{{- if or $isSubAncestor $isSubSelf (not $isSubHidden) }}
{{- $hasVisibleChildren = true }}
{{- break }}
{{- end }}
{{- end }}
{{- $title := partial "menutitle.gotmpl" . }}
{{- $url := partial "menupermalink.gotmpl" . }}
{{- $target := "" }}
{{- $u := urls.Parse $url }}
{{- if $u.IsAbs }}
{{- $target = "_blank" }}
{{- if isset site.Params "externallinktarget" }}
{{- $target = site.Params.externalLinkTarget }}
{{- end }}
{{- end }}
{{- $pre := .Pre }}
{{- $post := .Post }}
{{- with .Page }}
{{- $pre = or $pre (partial "menu-pre.html" .) }}
{{- $post = or $post (partial "menu-post.html" .) }}
{{- end }}
{{- if $hasVisibleChildren }}
{{- $isCollapsible := .Params.collapsibleMenu | default $root.Params.collapsibleMenu | default site.Params.collapsibleMenu }}
{{- $currentAlwaysopen := .Params.alwaysopen | default $root.Params.alwaysopen | default $alwaysopen }}
{{- if and (not $url) (not $isCollapsible) }}
{{- $currentAlwaysopen = true }}
{{- end }}
{{- $entryId := md5 (print .) }}
{{- $isOpen := or $currentAlwaysopen $isSelf $isAncestor }}
<li class="{{if $isActive }}active {{end}}{{if (or $isSelf $isAncestor) }}parent {{end}}{{if $isHidden }}hidden {{end}}{{if not $url }}headless {{end}}{{if $currentAlwaysopen}}alwaysopen {{end}}" data-nav-id="{{ $url }}">
{{- if $isCollapsible }}<input type="checkbox" id="R-section-{{ $entryId }}" aria-controls="R-subsections-{{ $entryId }}"{{ if $isOpen }} checked{{ end }}><label for="R-section-{{ $entryId }}"><i class="fa-fw fas fa-chevron-right"></i><span class="a11y-only">{{ T "Submenu" $title }}</span></label>{{ end }}
{{- if $url }}<a class="padding" href="{{ $url }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}>{{ else }}<span class="padding">{{ end }}
{{- $pre }}{{ $title }}{{ $post }}
{{- if $url }}{{ if $showvisitedlinks }}<i class="fa-fw fas fa-check read-icon"></i>{{ end }}</a>{{ else }}</span>{{ end }}<ul id="R-subsections-{{ $entryId }}" class="collapsible-menu">
{{- $defaultAlwaysopen := site.Params.alwaysopen | default true }}
{{- range $entries }}
{{- $isSubSelf := eq .Page $currentNode }}
{{- $isSubAncestor := and (not $isSubSelf) ($currentNode.HasMenuCurrent .Menu .) }}
{{- $isSubHidden := or (.Params.hidden) (eq (partial "menutitle.gotmpl" .) "") }}
{{- $isSubCollapsible := .Params.collapsibleMenu | default $root.Params.collapsibleMenu | default site.Params.collapsibleMenu }}
{{- if or $isSubSelf $isSubAncestor }}
{{- partial "partials/inline/menu-walker" (dict "menu" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen "isSelf" $isSubSelf "isAncestor" $isSubAncestor "isHidden" $isSubHidden "root" $root) }}
{{- else if and (not $isSubHidden) (or $isSubCollapsible (not (partial "menupermalink.gotmpl" $entry)) (eq $entry.Page $currentNode) ($currentNode.HasMenuCurrent $entry.Menu $entry)) }}
{{- $id := md5 (print .) }}
{{- partialCached "partials/inline/menu-walker" (dict "menu" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "alwaysopen" $defaultAlwaysopen "isSelf" $isSubSelf "isAncestor" $isSubAncestor "isHidden" $isSubHidden "root" $root) $id }}
{{- end }}
{{- end }}</ul></li>
{{- else if $url }}
<li class="{{if $isActive }}active {{end}}{{if $isHidden }}hidden {{end}}{{if not $url }}headless {{end}}" data-nav-id="{{ $url }}">
{{- if $url }}<a class="padding" href="{{ $url }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}>{{ else }}<span class="padding">{{ end }}
{{- $pre }}{{ $title }}{{ $post }}
{{- if $url }}{{ if $showvisitedlinks }}<i class="fa-fw fas fa-check read-icon"></i>{{ end }}</a>{{ else }}</span>{{ end }}</li>
{{- end }}
{{- end }}
{{- end }}