topbar: make buttons configurable #639

exampleSite/content/_index.en.md

@@ -69,7 +69,7 @@ To get support, feel free to open a new [discussion topic](https://github.com/Mc
 
 ## Contributions
 
-Feel free to contribute to this documentation by just clicking the {{% button style="transparent" icon="pen" %}}{{% /button %}} button displayed on top right of each page.
+Feel free to contribute to this documentation by just clicking the {{% button style="transparent" icon="pen" %}}{{% /button %}} _edit_ button displayed on top right of each page.
 
 You are most welcome to contribute bugfixes or new features by making pull requests to the [official repository](https://github.com/McShelby/hugo-theme-relearn). Check the [contribution guidelines]({{%relref "dev/contributing" %}}) first before starting.
 

exampleSite/content/basics/migration/_index.en.md

@@ -20,9 +20,9 @@ This document shows you what's new in the latest release. For a detailed list of
 
 ## 5.21.0 (2023-09-03) {#5210}
 
-- {{% badge style="note" title=" " %}}Change{{% /badge %}} We made changes to the menu footer. If you have your `menu-footer.html` [partial overridden]({{%relref "basics/customization" %}}), you may have to review the styling (eg. margins/paddings) in your partial.
+- {{% badge style="note" title=" " %}}Change{{% /badge %}} We made changes to the menu footer improve alignment with the menu items in most cases. Care was taken not to break your existing overwritten footer. Anyways, if you have your `menu-footer.html` [partial overridden]({{%relref "basics/customization" %}}), you may want to review the styling (eg. margins/paddings) of your partial.
 
-  This change was made to simplify common use cases. Care was taken not to break your existing overwritten footer.
+- {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} This release comes with an awesome new feature, that allows you to customize your topbar buttons, change behavior, reorder them or define entirely new ones, unique to your installation. See [the documentation]({{%relref "basics/topbar" %}}) for further details.
 
 ---
 

exampleSite/content/basics/topbar/_index.en.md

@@ -0,0 +1,147 @@
++++
+title = "Topbar Modification"
+weight = 27
++++
+
+The theme comes with a reasonably configured topbar.
+
+![Topbar on mobile devices](topbar-closed.png)
+
+Nevertheless, your requirements may differ from this configuration. Luckily the theme got you covered as the themebar, its buttons and the functionality behind these buttons is fully configurable by you.
+
+## Areas
+
+The default configuration comes with three predefined areas that may contain an arbitrary set of buttons.
+
+![Topbar with default areas marked](topbar-areas.png)
+
+- **start**: shown between menu and breadcrumb
+- **end**: shown on the opposite breadcrumb side in comparison to the _start_ area
+- **more**: shown when pressing the {{% button style="transparent" icon="ellipsis-v" %}}{{% /button %}} _more_ button in the topbar
+
+While you can not add additional areas in the topbar, you are free to configure addtional buttons that behave like the _more_ button, providing further user defined areas.
+
+## Buttons
+
+The theme ships with the following predefined buttons (from left to right in the screenshot)
+
+- {{% button style="transparent" icon="bars" %}}{{% /button %}} **sidebar**: opens the sidebar flyout if in mobile layout
+- {{% button style="transparent" icon="list-alt" %}}{{% /button %}} **toc**: opens the table of contents in an overlay
+- {{% button style="transparent" icon="pen" %}}{{% /button %}} **edit**: browses to the editable page if the `editURL` [parameter is set]({{% relref "/basics/configuration/#global-site-parameters" %}})
+- {{% button style="transparent" icon="print" %}}{{% /button %}} **print**: browses to the chapters printable page if [print support]({{% relref "/basics/configuration/#activate-print-support" %}}) was activated
+- {{% button style="transparent" icon="chevron-left" %}}{{% /button %}} **prev**: browses to the previous page if there is one
+- {{% button style="transparent" icon="chevron-right" %}}{{% /button %}} **next**: browses to the next page if there is one
+- {{% button style="transparent" icon="ellipsis-v" %}}{{% /button %}} **more**: opens the overlay for the _more_ area
+
+Not all buttons are displayed at every given time. This is configurable (see below if interested).
+
+## Redefining Areas
+
+Each predefined area and button comes in their own file. By that it is easy for you to overwrite an area file in your installation reusing only the buttons you like.
+
+Eg. you can redefine the predefined _end_ area by adding the file `layouts/partials/topbar/area/end.html` in your installtion (not in the theme itself) to remove all but the _more_ button.
+
+````go
+{{ partial "topbar/button/more.html" (dict
+    "page" .
+)}}
+````
+
+## Defining own Buttons
+
+### Button Types
+
+The theme distingushies between two types of buttons:
+
+- **button**: a clickable button that either browses to another site or triggers a user defined script
+- **area-button**: the template for the {{% button style="transparent" icon="ellipsis-v" %}}{{% /button %}} _more_ button, to define your own area overlay buttons
+
+### Button Parameter
+
+#### Screen Widths and Actions
+
+Depending on the screen width you can configure how the button should behave. Screen width is divided into three classes:
+
+- **s**: (controlled by the `onwidths` parameter) mobile layout where the menu sidebar is hidden
+- **m**: (controlled by the `onwidthm` parameter) desktop layout with visible sidebar while the content area width still resizes
+- **l**: (controlled by the `onwidthl` parameter) desktop layout with visible sidebar once the content area reached its maximum width
+
+For each width class, you can configure one of the following actions:
+
+- **show**: the button is displayed in its configured area
+- **hide**: the button is hidden
+- **area-XXX**: the button is moved from its configured area into the area `XXX`; eg. this is used to move buttons to the _more_ area in the mobile layout
+
+#### Hiding and Disabling Stuff
+
+While hiding a button dependend on the screen size can be configured with the above described _hide_ action, you may want to hide the button on certain other conditions aswell.
+
+For example, the _print_ button in its default configuration should only be displayed if print support was configured. This is done in your button template by checking the conditions first before displaying the button (see `layouts/partials/topbar/button/print.html`).
+
+Another prefered condition for hiding a button is, if the displayed overlay is empty. This is the case for the _toc_ (see `layouts/partials/topbar/button/toc.html`) aswell as the _more_ button (see `layouts/partials/topbar/button/more.html`) and controlled by the parameter `onempty`.
+
+This parameter can have one of the following values:
+
+- **hide**: the button is hidden if the overlay is empty
+- **disable**: the button is disabled if the overlay is empty
+
+If you want to disable a button containing _no overlay_, this can be achieved by an empty `href` parameter. An example can be seen in the _prev_ button (see `layouts/partials/topbar/button/prev.html`) where the URL for the previous site may be empty.
+
+## Reference
+
+### Button
+
+Contains the basic button functionality and is used as a base implementation for all other buttons (`layouts/partials/topbar/func/button.html`). Call this from your own button templates if you want to implement a button with _no overlay_ area.
+
+#### Parameter
+
+| Name                  | Default         | Notes       |
+|-----------------------|-----------------|-------------|
+| **page**              | _<empty>_ | Mandatory reference to the page. |
+| **class**             | _<empty>_ | Mandatory unique class name for this button. Displaying two buttons with the same value for **class** is undefined. |
+| **href**              | _&lt;empty&gt;_ | Either the destination URL for the button or JavaScript code to be executed on click.<br><br>- if starting with `javascript:` all following text will be executed in your browser<br>- every other string will be interpreted as URL<br><br>If this parameter is not set, the button will be displayed<br><br>- as disabled if no **content** is specified<br>- according to **onempty** if any **content** is given. |
+| **icon**              | _&lt;empty&gt;_ | Mandatory [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}). |
+| **onempty**           | `disable`       | Defines what to do with the button if its content overlay is empty:<br><br>- `disable`: The button is displayed in disabled state.<br>- `hide`: The button is not displayed. The next button will move into the gap. |
+| **onwidths**          | `show`          | The action, that should be executed if the site is displayed in the given width:<br><br>- `show`: The button is displayed in its configured area<br>- `hide`: The button is hidden.<br>- `area-XXX`: The button is moved from its configured area into the area `XXX`. |
+| **onwidthm**          | `show`          | See above. |
+| **onwidthl**          | `show`          | See above. |
+| **title**             | _&lt;empty&gt;_ | Arbitrary text for title, displayed in the tooltip. |
+| **content**           | see notes       | Arbitrary HTML to put into the content overlay. This parameter may be empty. In this case no overlay will be generated. |
+
+### Area-Button
+
+Contains the basic functionality to display area overlay buttons (`layouts/partials/topbar/func/area-button.html`). Call this from your own button templates if you want to implement a button with an overlay area like the _more_ button.
+
+| Name                  | Default         | Notes       |
+|-----------------------|-----------------|-------------|
+| **page**              | _&lt;empty&gt;_ | Mandatory reference to the page. |
+| **area**              | _&lt;empty&gt;_ | Mandatory unique area name for this area. Displaying two areas with the same value for **area** is undefined. |
+| **icon**              | _&lt;empty&gt;_ | Mandatory [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}). |
+| **onempty**           | `disable`       | Defines what to do with the button if its content overlay is empty:<br><br>- `disable`: The button is displayed in disabled state.<br>- `hide`: The button is not displayed. The next button will move into the gap. |
+| **onwidths**          | `show`          | The action, that should be executed if the site is displayed in the given width:<br><br>- `show`: The button is displayed in its configured area<br>- `hide`: The button is hidden.<br>- `area-XXX`: The button is moved from its configured area into the area `XXX`. |
+| **onwidthm**          | `show`          | See above. |
+| **onwidthl**          | `show`          | See above. |
+| **title**             | _&lt;empty&gt;_ | Arbitrary text for title, displayed in the tooltip. |
+
+### Predefined Buttons
+
+The predefined buttons by the theme (all other buttons besides the _more_ and _toc_ button in `layouts/partials/topbar/button`). Call these from your own redefined area templates if you want to offer some of the default button behavior.
+
+| Name                  | Default           | Notes       |
+|-----------------------|-------------------|-------------|
+| **page**              | _&lt;empty&gt;_   | Mandatory reference to the page. |
+| **onwidths**          | _&lt;varying&gt;_ | The action, that should be executed if the site is displayed in the given width:<br><br>- `show`: The button is displayed in its configured area<br>- `hide_&lt;varying&gt;_ is hidden.<br>- `area-XXX`: The button is moved from its configured area into the area `XXX`. |
+| **onwidthm**          | _&lt;varying&gt;_ | See above. |
+| **onwidthl**          | _&lt;varying&gt;_ | See above. |
+
+### Predefined Overlay-Buttons
+
+The predefined buttons by the theme that open an overlay (the _more_ and _toc_ button in `layouts/partials/topbar/button`). Call these from your own redefined area templates if you want to offer some of the default area button behavior.
+
+| Name                  | Default           | Notes       |
+|-----------------------|-------------------|-------------|
+| **page**              | _&lt;empty&gt;_   | Mandatory reference to the page. |
+| **onempty**           | _&lt;varying&gt;_ | Defines what to do with the button if its content overlay is empty:<br><br>- `disable`: The button is displayed in disabled state.<br>- `hide`: The button is not displayed. The next button will move into the gap. |
+| **onwidths**          | _&lt;varying&gt;_ | The action, that should be executed if the site is displayed in the given width:<br><br>- `show`: The button is displayed in its configured area<br>- `hide`: The button is hidden.<br>- `area-XXX`: The button is moved from its configured area into the area `XXX`. |
+| **onwidthm**          | _&lt;varying&gt;_ | See above. |
+| **onwidthl**          | _&lt;varying&gt;_ | See above. |

exampleSite/content/basics/topbar/_index.pir.md

@@ -0,0 +1,5 @@
++++
+title = "Topbarrr modificat'n"
+weight = 27
++++
+{{< piratify >}}

i18n/ar.toml

@@ -37,6 +37,9 @@ other = "حرر"
 [Print-this-chapter]
 other = "طباعة الفصل بأكمله"
 
+[More-action]
+other = "المزيد"
+
 [Shortcuts-Title]
 other = "المزيد"
 

i18n/cs.toml

@@ -37,6 +37,9 @@ other = "Upravit"
 [Print-this-chapter]
 other = "Vytisknout kapitolu"
 
+[More-action]
+other = "Více"
+
 [Shortcuts-Title]
 other = "Více"
 

i18n/de.toml

@@ -37,6 +37,9 @@ other = "Bearbeiten"
 [Print-this-chapter]
 other = "Ganzes Kapitel drucken"
 
+[More-action]
+other = "Mehr"
+
 [Shortcuts-Title]
 other = "Mehr"
 

i18n/en.toml

@@ -37,6 +37,9 @@ other = "Edit"
 [Print-this-chapter]
 other = "Print whole chapter"
 
+[More-action]
+other = "More"
+
 [Shortcuts-Title]
 other = "More"
 

i18n/es.toml

@@ -37,6 +37,9 @@ other = "Editar"
 [Print-this-chapter]
 other = "Imprimir todo el capítulo"
 
+[More-action]
+other = "Más"
+
 [Shortcuts-Title]
 other = "Más"
 

i18n/fi.toml

@@ -37,6 +37,9 @@ other = "Muokkaa"
 [Print-this-chapter]
 other = "Tulosta koko luku"
 
+[More-action]
+other = "Lisää"
+
 [Shortcuts-Title]
 other = "Lisää"
 

i18n/fr.toml

@@ -37,6 +37,9 @@ other = "Éditer"
 [Print-this-chapter]
 other = "Imprimer le chapitre entier"
 
+[More-action]
+other = "Aller plus loin"
+
 [Shortcuts-Title]
 other = "Aller plus loin"
 

i18n/hi.toml

@@ -37,6 +37,9 @@ other = "संपादन करना"
 [Print-this-chapter]
 other = "पूरा अध्याय मुद्रित करें"
 
+[More-action]
+other = "अधिक सामग्री दिखाएं"
+
 [Shortcuts-Title]
 other = "अधिक सामग्री दिखाएं"
 

i18n/hu.toml

@@ -37,6 +37,9 @@ other = "Szerkesztés"
 [Print-this-chapter]
 other = "Teljes fejezet nyomtatása"
 
+[More-action]
+other = "Egyebek"
+
 [Shortcuts-Title]
 other = "Egyebek"
 

i18n/id.toml

@@ -37,6 +37,9 @@ other = "Mengedit"
 [Print-this-chapter]
 other = "Mencetak seluruh bab"
 
+[More-action]
+other = "Lainnya"
+
 [Shortcuts-Title]
 other = "Lainnya"
 

i18n/it.toml

@@ -37,6 +37,9 @@ other = "Modifica"
 [Print-this-chapter]
 other = "Stampa l'intero capitolo"
 
+[More-action]
+other = "Altro"
+
 [Shortcuts-Title]
 other = "Altro"
 

i18n/ja.toml

@@ -37,6 +37,9 @@ other = "編集"
 [Print-this-chapter]
 other = "章全体を印刷する"
 
+[More-action]
+other = "更に"
+
 [Shortcuts-Title]
 other = "更に"
 

i18n/ko.toml

@@ -37,6 +37,9 @@ other = "편집"
 [Print-this-chapter]
 other = "전체 장 인쇄"
 
+[More-action]
+other = "외부 링크"
+
 [Shortcuts-Title]
 other = "외부 링크"
 

i18n/nl.toml

@@ -37,6 +37,9 @@ other = "Bewerken"
 [Print-this-chapter]
 other = "Het hele hoofdstuk afdrukken"
 
+[More-action]
+other = "Snelkoppelingen"
+
 [Shortcuts-Title]
 other = "Snelkoppelingen"
 

i18n/pir.toml

@@ -37,6 +37,9 @@ other = "Edit"
 [Print-this-chapter]
 other = "Prrrint whole chapterrr"
 
+[More-action]
+other = "Morrre"
+
 [Shortcuts-Title]
 other = "Morrre"
 

i18n/pl.toml

@@ -37,6 +37,9 @@ other = "Edycja"
 [Print-this-chapter]
 other = "Drukowanie całego rozdziału"
 
+[More-action]
+other = "Więcej"
+
 [Shortcuts-Title]
 other = "Więcej"
 

i18n/pt.toml

@@ -37,6 +37,9 @@ other = "Editar"
 [Print-this-chapter]
 other = "Imprimir capítulo inteiro"
 
+[More-action]
+other = "Mais"
+
 [Shortcuts-Title]
 other = "Mais"
 

i18n/ru.toml

@@ -37,6 +37,9 @@ other = "редактировать"
 [Print-this-chapter]
 other = "Печать всей главы"
 
+[More-action]
+other = "Еще"
+
 [Shortcuts-Title]
 other = "Еще"
 

i18n/tr.toml

@@ -37,6 +37,9 @@ other = "Düzenlemek"
 [Print-this-chapter]
 other = "Bölümün tamamını yazdır"
 
+[More-action]
+other = "Dahası Var"
+
 [Shortcuts-Title]
 other = "Dahası Var"
 

i18n/vi.toml

@@ -37,6 +37,9 @@ other = "Biên tập"
 [Print-this-chapter]
 other = "In toàn bộ chương"
 
+[More-action]
+other = "Nội dung khác"
+
 [Shortcuts-Title]
 other = "Nội dung khác"
 

i18n/zh-cn.toml

@@ -37,6 +37,9 @@ other = "编辑"
 [Print-this-chapter]
 other = "打印整章"
 
+[More-action]
+other = "更多"
+
 [Shortcuts-Title]
 other = "更多"
 

i18n/zh-tw.toml

@@ -37,6 +37,9 @@ other = "編輯網頁"
 [Print-this-chapter]
 other = "列印整章"
 
+[More-action]
+other = "更多"
+
 [Shortcuts-Title]
 other = "更多"
 

i18n/zh.toml

@@ -37,6 +37,9 @@ other = "编辑"
 [Print-this-chapter]
 other = "打印整章"
 
+[More-action]
+other = "更多"
+
 [Shortcuts-Title]
 other = "更多"
 

layouts/partials/header.html

@@ -69,31 +69,10 @@
     <div id="body" class="default-animation">
       <div id="body-overlay"></div>
       <nav id="topbar">
-        <div>
+        <div class="topbar-wrapper">
           <div class="topbar-sidebar-divider"></div>
-          <div class="topbar-left">
+          <div class="topbar-area topbar-area-start" data-area="start">
-            {{- partial "topbar-button.html" (dict
+            {{- partial "topbar/area/start.html" . }}
-              "page" $page
-              "class" "topbar-sidebar"
-              "href" "javascript:toggleNav()"
-              "icon" "bars"
-              "title" (printf "%s (CTRL+ALT+n)" (T "Navigation-toggle"))
-            )}}
-            {{- $defaultDisableToc := .Site.Params.disableToc | default false }}
-            {{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }}
-            {{- $toc_content := partial "toc-class.html" . }}
-            {{- $hastoc := not (eq 0 (int (len (trim ($toc_content | plainify) "\n\r\t ")))) }}
-            {{- $toc := and $hastoc (not $currentDisableToc) (eq $outputFormat "html") }}
-            {{- if $toc }}
-              {{- partial "topbar-button.html" (dict
-                "page" $page
-                "class" "topbar-toc"
-                "href" "javascript:toggleTopbarFlyout(this)"
-                "icon" "list-alt"
-                "title" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle"))
-                "content" $toc_content
-              )}}
-            {{- end }}
           </div>
           {{- $showBreadcrumb := (and (not .Params.disableBreadcrumb) (not .Site.Params.disableBreadcrumb)) }}
           {{- if $showBreadcrumb }}
@@ -105,64 +84,8 @@
             {{ .Title }}
           </span>
           {{- end }}
-          <div class="topbar-right">
+          <div class="topbar-area topbar-area-end" data-area="end">
-            {{- with and (eq $outputFormat "html") .Site.Params.editURL $.File }}
+            {{- partial "topbar/area/end.html" . }}
-              {{- partial "topbar-button.html" (dict
-                "page" $page
-                "class" "topbar-edit"
-                "href" (printf "%s%s%s" $.Site.Params.editURL (strings.TrimLeft "/" (replace .Dir "\\" "/")) .LogicalName)
-                "icon" "pen"
-                "title" (printf "%s (CTRL+ALT+w)" (T "Edit-this-page"))
-              )}}
-            {{- end }}
-            {{- with and (eq $outputFormat "html") (.OutputFormats.Get "PRINT") }}
-              {{- partial "topbar-button.html" (dict
-                "page" $page
-                "class" "topbar-print"
-                "href" .RelPermalink
-                "icon" "print"
-                "title" (printf "%s (CTRL+ALT+p)" (T "Print-this-chapter"))
-              )}}
-            {{- end -}}
-            {{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
-            {{- if and (or (eq $outputFormat "html") (eq $outputFormat "searchpage")) $showPrevNext }}
-              {{- $startarrow := "🡐" }}
-              {{- $endarrow := "🡒" }}
-              {{- if eq (T "Reading-direction" | default "ltr") "rtl" }}
-                {{- $startarrow = "🡒" }}
-                {{- $endarrow = "🡐" }}
-              {{- end }}
-              {{- $ispublished := true }}
-              {{- with .Parent }}
-                {{- $ispublished = gt (int (len .Permalink)) 0 }}
-              {{- end }}
-              {{- $prev := "" }}
-              {{- if and (eq .RelPermalink .Site.Home.RelPermalink) (eq $outputFormat "html") }}
-              {{- else if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") }}
-                {{- $prev = .Site.Home }}
-              {{- else }}
-                {{- $prev = $.Scratch.Get "relearnPrevPage" }}
-              {{- end}}
-              {{- partial "topbar-button.html" (dict
-                "page" $page
-                "class" "topbar-prev"
-                "href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $prev))
-                "icon" "chevron-left"
-                "title" (printf "%s (%s)" ($prev | default $page).Title ($startarrow | safeHTML))
-              )}}
-              {{- $next := "" }}
-              {{- if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnNextPage"))) }}
-              {{- else }}
-                {{- $next = $.Scratch.Get "relearnNextPage" }}
-              {{- end }}
-              {{- partial "topbar-button.html" (dict
-                "page" $page
-                "class" "topbar-next"
-                "href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $next))
-                "icon" "chevron-right"
-                "title" (printf "%s (%s)" ($next | default $page).Title ($endarrow | safeHTML))
-              )}}
-            {{- end }}
           </div>
         </div>
       </nav>

layouts/partials/topbar/area/end.html

@@ -0,0 +1,15 @@
+{{- partial "topbar/button/edit.html" (dict
+	"page" .
+)}}
+{{- partial "topbar/button/print.html" (dict
+	"page" .
+)}}
+{{- partial "topbar/button/prev.html" (dict
+	"page" .
+)}}
+{{- partial "topbar/button/next.html" (dict
+	"page" .
+)}}
+{{- partial "topbar/button/more.html" (dict
+	"page" .
+)}}

layouts/partials/topbar/area/start.html

@@ -0,0 +1,6 @@
+{{- partial "topbar/button/sidebar.html" (dict
+	"page" .
+)}}
+{{- partial "topbar/button/toc.html" (dict
+	"page" .
+)}}

layouts/partials/topbar/button/edit.html

@@ -0,0 +1,20 @@
+{{- $onwidths := cond (isset . "onwidths") .onwidths "area-more" }}
+{{- $onwidthm := cond (isset . "onwidthm") .onwidthm "show" }}
+{{- $onwidthl := cond (isset . "onwidthl") .onwidthl "show" }}
+{{- with .page }}
+	{{- $format := partial "get-format.hugo" . }}
+	{{- $outputFormat := partial "output-format.hugo" (dict "page" . "format" $format) }}
+	{{- $editURL := .Site.Params.editURL | default "" }}
+	{{- if and (eq $outputFormat "html") $editURL .File }}
+		{{- partial "topbar/func/button.html" (dict
+			"page" .
+			"class" "topbar-button-edit"
+			"href" (printf "%s%s%s" $editURL (strings.TrimLeft "/" (replace .File.Dir "\\" "/")) .File.LogicalName)
+			"icon" "pen"
+			"onwidths" $onwidths
+			"onwidthm" $onwidthm
+			"onwidthl" $onwidthl
+			"title" (printf "%s (CTRL+ALT+w)" (T "Edit-this-page"))
+		)}}
+	{{- end }}
+{{- end }}

layouts/partials/topbar/button/more.html

@@ -0,0 +1,14 @@
+{{- $onempty := cond (isset . "onempty") .onempty "hide" }}
+{{- $onwidths := cond (isset . "onwidths") .onwidths "show" }}
+{{- $onwidthm := cond (isset . "onwidthm") .onwidthm "show" }}
+{{- $onwidthl := cond (isset . "onwidthl") .onwidthl "show" }}
+{{- partial "topbar/func/area-button.html" (dict
+	"page" .page
+	"area" "more"
+	"icon" "ellipsis-v"
+	"onempty" $onempty
+	"onwidths" $onwidths
+	"onwidthm" $onwidthm
+	"onwidthl" $onwidthl
+	"title" (printf "%s" (T "More-action"))
+)}}

layouts/partials/topbar/button/next.html

@@ -0,0 +1,33 @@
+{{- $onwidths := cond (isset . "onwidths") .onwidths "show" }}
+{{- $onwidthm := cond (isset . "onwidthm") .onwidthm "show" }}
+{{- $onwidthl := cond (isset . "onwidthl") .onwidthl "show" }}
+{{- with .page }}
+	{{- $format := partial "get-format.hugo" . }}
+	{{- $outputFormat := partial "output-format.hugo" (dict "page" . "format" $format) }}
+	{{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
+	{{- if and (or (eq $outputFormat "html") (eq $outputFormat "searchpage")) $showPrevNext }}
+		{{- $endarrow := "🡒" }}
+		{{- if eq (T "Reading-direction" | default "ltr") "rtl" }}
+			{{- $endarrow = "🡐" }}
+		{{- end }}
+		{{- $ispublished := true }}
+		{{- with .Parent }}
+			{{- $ispublished = gt (int (len .Permalink)) 0 }}
+		{{- end }}
+		{{- $next := "" }}
+		{{- if or (ne $outputFormat "html") (not (and $ispublished (.Scratch.Get "relearnNextPage"))) }}
+		{{- else }}
+			{{- $next = .Scratch.Get "relearnNextPage" }}
+		{{- end }}
+		{{- partial "topbar/func/button.html" (dict
+			"page" .
+			"class" "topbar-button-next"
+			"href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $next))
+			"icon" "chevron-right"
+			"onwidths" $onwidths
+			"onwidthm" $onwidthm
+			"onwidthl" $onwidthl
+			"title" (printf "%s (%s)" ($next | default .).Title ($endarrow | safeHTML))
+		)}}
+	{{- end }}
+{{- end }}

layouts/partials/topbar/button/prev.html

@@ -0,0 +1,35 @@
+{{- $onwidths := cond (isset . "onwidths") .onwidths "show" }}
+{{- $onwidthm := cond (isset . "onwidthm") .onwidthm "show" }}
+{{- $onwidthl := cond (isset . "onwidthl") .onwidthl "show" }}
+{{- with .page }}
+	{{- $format := partial "get-format.hugo" . }}
+	{{- $outputFormat := partial "output-format.hugo" (dict "page" . "format" $format) }}
+	{{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
+	{{- if and (or (eq $outputFormat "html") (eq $outputFormat "searchpage")) $showPrevNext }}
+		{{- $startarrow := "🡐" }}
+		{{- if eq (T "Reading-direction" | default "ltr") "rtl" }}
+			{{- $startarrow = "🡒" }}
+		{{- end }}
+		{{- $ispublished := true }}
+		{{- with .Parent }}
+			{{- $ispublished = gt (int (len .Permalink)) 0 }}
+		{{- end }}
+		{{- $prev := "" }}
+		{{- if and (eq .RelPermalink .Site.Home.RelPermalink) (eq $outputFormat "html") }}
+		{{- else if or (ne $outputFormat "html") (not (and $ispublished (.Scratch.Get "relearnPrevPage"))) (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") }}
+			{{- $prev = .Site.Home }}
+		{{- else }}
+			{{- $prev = .Scratch.Get "relearnPrevPage" }}
+		{{- end}}
+		{{- partial "topbar/func/button.html" (dict
+			"page" .
+			"class" "topbar-button-prev"
+			"href" (partial "relLangPrettyUglyURL.hugo" (dict "to" $prev))
+			"icon" "chevron-left"
+			"onwidths" $onwidths
+			"onwidthm" $onwidthm
+			"onwidthl" $onwidthl
+			"title" (printf "%s (%s)" ($prev | default .).Title ($startarrow | safeHTML))
+		)}}
+	{{- end }}
+{{- end }}

layouts/partials/topbar/button/print.html

@@ -0,0 +1,20 @@
+{{- $onwidths := cond (isset . "onwidths") .onwidths "area-more" }}
+{{- $onwidthm := cond (isset . "onwidthm") .onwidthm "show" }}
+{{- $onwidthl := cond (isset . "onwidthl") .onwidthl "show" }}
+{{- with .page }}
+	{{- $format := partial "get-format.hugo" . }}
+	{{- $outputFormat := partial "output-format.hugo" (dict "page" . "format" $format) }}
+	{{- $printFormat := .OutputFormats.Get "PRINT" }}
+	{{- if and (eq $outputFormat "html") $printFormat }}
+		{{- partial "topbar/func/button.html" (dict
+			"page" .
+			"class" "topbar-button-print"
+			"href" $printFormat.RelPermalink
+			"icon" "print"
+			"onwidths" $onwidths
+			"onwidthm" $onwidthm
+			"onwidthl" $onwidthl
+			"title" (printf "%s (CTRL+ALT+p)" (T "Print-this-chapter"))
+		)}}
+	{{- end }}
+{{- end }}

layouts/partials/topbar/button/sidebar.html

@@ -0,0 +1,15 @@
+{{- $onwidths := cond (isset . "onwidths") .onwidths "show" }}
+{{- $onwidthm := cond (isset . "onwidthm") .onwidthm "hide" }}
+{{- $onwidthl := cond (isset . "onwidthl") .onwidthl "hide" }}
+{{- with .page }}
+	{{- partial "topbar/func/button.html" (dict
+		"page" .
+		"class" "topbar-button-sidebar"
+		"href" "javascript:toggleNav()"
+		"icon" "bars"
+		"onwidths" $onwidths
+		"onwidthm" $onwidthm
+		"onwidthl" $onwidthl
+		"title" (printf "%s (CTRL+ALT+n)" (T "Navigation-toggle"))
+	)}}
+{{- end }}

layouts/partials/topbar/button/toc.html

@@ -0,0 +1,29 @@
+{{- $onempty := cond (isset . "onempty") .onempty "hide" }}
+{{- $onwidths := cond (isset . "onwidths") .onwidths "show" }}
+{{- $onwidthm := cond (isset . "onwidthm") .onwidthm "show" }}
+{{- $onwidthl := cond (isset . "onwidthl") .onwidthl "show" }}
+{{- with .page }}
+	{{- $format := partial "get-format.hugo" . }}
+	{{- $outputFormat := partial "output-format.hugo" (dict "page" . "format" $format) }}
+	{{- $defaultDisableToc := .Site.Params.disableToc | default false }}
+	{{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }}
+	{{- if and (eq $outputFormat "html") (not $currentDisableToc) }}
+		{{- $content := partial "toc-class.html" . }}
+		{{- $hascontent := not (eq 0 (int (len (trim ($content | plainify) "\n\r\t ")))) }}
+		{{- if not $hascontent }}
+			{{- $content = " " }}
+		{{- end }}
+		{{- partial "topbar/func/button.html" (dict
+			"page" .
+			"class" "topbar-button-toc"
+			"href" "javascript:toggleTopbarFlyout(this)"
+			"icon" "list-alt"
+			"onempty" $onempty
+			"onwidths" $onwidths
+			"onwidthm" $onwidthm
+			"onwidthl" $onwidthl
+			"title" (printf "%s (CTRL+ALT+t)" (T "Toc-toggle"))
+			"content" $content
+		)}}
+	{{- end }}
+{{- end }}

layouts/partials/topbar/func/area-button.html

@@ -0,0 +1,26 @@
+{{- $area := .area }}
+{{- $icon := .icon }}
+{{- $title := .title }}
+{{- $onempty := cond (isset . "onempty") .onempty "disable" }}
+{{- $onwidths := cond (isset . "onwidths") .onwidths "show" }}
+{{- $onwidthm := cond (isset . "onwidthm") .onwidthm "show" }}
+{{- $onwidthl := cond (isset . "onwidthl") .onwidthl "show" }}
+{{- with .page }}
+	{{- $format := partial "get-format.hugo" . }}
+	{{- $outputFormat := partial "output-format.hugo" (dict "page" . "format" $format) }}
+	{{- if and (eq $outputFormat "html") }}
+		{{- $content := printf "\n                  <div class=\"topbar-area topbar-area-%s\" data-area=\"%s\">%s\n                  </div>" $area $area (partial (printf "topbar/area/%s.html" $area) .) | safeHTML }}
+		{{- partial "topbar/func/button.html" (dict
+			"page" .
+			"class" (printf "topbar-button-%s" $area)
+			"href" "javascript:toggleTopbarFlyout(this)"
+			"icon" $icon
+			"onempty" $onempty
+			"onwidths" $onwidths
+			"onwidthm" $onwidthm
+			"onwidthl" $onwidthl
+			"title" $title
+			"content" $content
+		)}}
+	{{- end }}
+{{- end }}

layouts/partials/topbar/func/button.html

@@ -1,6 +1,10 @@
 {{- $page := .page }}
 {{- $class := .class | default "" }}
 {{- $href := (trim .href " ") | default "" }}
+{{- $onempty := cond (isset . "onempty") .onempty "disable" }}
+{{- $onwidths := cond (isset . "onwidths") .onwidths "show" }}
+{{- $onwidthm := cond (isset . "onwidthm") .onwidthm "show" }}
+{{- $onwidthl := cond (isset . "onwidthl") .onwidthl "show" }}
 {{- $target := .target | default "" }}
 {{- $type := .type | default "" }}
 {{- $isDisabled := not $href }}
@@ -23,13 +27,13 @@
   {{- $icon = printf "fa-fw fas fa-%s" $icon }}
 {{- end }}
 {{- $content := .content }}
-            <div class="topbar-button {{ $class }}">
+            <div class="topbar-button {{ $class }}" data-content-empty="{{ $onempty }}" data-width-s="{{ $onwidths }}" data-width-m="{{ $onwidthm }}" data-width-l="{{ $onwidthl }}">
 {{- if $isDisabled }}
-              <span class="topbar-button-control">
+              <span class="topbar-control">
 {{- else if $isButton }}
-              <button class="topbar-button-control"{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $title }}">
+              <button class="topbar-control"{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $title }}">
 {{- else }}
-              <a class="topbar-button-control"{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $title }}">
+              <a class="topbar-control"{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $title }}">
 {{- end }}
                 <i class="{{ $icon }}"></i>
 {{- if $isDisabled }}
@@ -40,8 +44,8 @@
               </a>
 {{- end }}
 {{- if $content }}
-              <div class="topbar-button-flyout">
+              <div class="topbar-content">
-                <div class="topbar-button-flyout-wrapper">
+                <div class="topbar-content-wrapper">
                   {{- $content }}
                 </div>
               </div>

static/css/format-print.css

@@ -122,10 +122,10 @@ body,
     /* the header is sticky which is not suitable for print; */
     position: inherit; /* IE11 doesn't know "initial" here */
 }
-#topbar > div {
+#topbar > .topbar-wrapper {
     background-color: rgba( 255, 255, 255, 1 ); /* IE11 doesn't know "initial" here */
 }
-#body .topbar-left {
+#body .topbar-sidebar-divider {
     border-width: 0;
 }
 .tags {

static/css/ie.css

@@ -70,10 +70,10 @@
 		border-top-right-radius: 0;
 		border-right-width: 0;
 	}
-	.topbar-left .topbar-button > .topbar-button-control {
+	.topbar-wrapper > .topbar-area-start > .topbar-button > .topbar-control {
 		border-right: 1px solid rgba( 134, 134, 134, .333 );
 	}
-	.topbar-right .topbar-button > .topbar-button-control {
+	.topbar-wrapper > .topbar-area-end > .topbar-button > .topbar-control {
 		border-left: 1px solid rgba( 134, 134, 134, .333 );
 	}
 	#body .topbar-sidebar-divider {
@@ -81,11 +81,11 @@
 		border-left-width: 1px;
 		margin-right: -1px;
 	}
-	html[dir="rtl"] .topbar-prev i,
+	html[dir="rtl"] .topbar-button-prev i,
-	html[dir="rtl"] .topbar-next i {
+	html[dir="rtl"] .topbar-button-next i {
 		transform: scaleX(1);
 	}
-	.topbar-button-flyout {
+	.topbar-content {
 		left: 1rem;
 	}
 	@media screen and (max-width: 60rem) {
@@ -223,7 +223,7 @@
 	}
 
 	#body .topbar-sidebar-divider {
-		border-left-color: transparent; /* var(--MENU-TOPBAR-SEPARATOR-color) */
+		border-left-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-TOPBAR-SEPARATOR-color) */
 	}
 	@media screen and (max-width: 48rem) {
 		#body .topbar-sidebar-divider {
@@ -515,10 +515,6 @@
 		background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */
 	}
 
-	#body .topbar-left {
-		border-left-color: rgba( 125, 201, 3, 1 ); /* var(--INTERNAL-MENU-TOPBAR-SEPARATOR-color) */
-	}
-
 	#body a[aria-disabled="true"],
 	#searchresults .autocomplete-suggestion > .context {
 		color: rgba( 16, 16, 16, 1 ); /* var(--MAIN-TEXT-color) - inherit is not processed correctly in Chrome */
@@ -567,7 +563,7 @@
 		border-color: rgba( 125, 201, 3, 1 ); /* var(--MENU-HEADER-SEPARATOR-color) */
 	}
 
-	.topbar-button-flyout {
+	.topbar-content {
 		background-color: rgba( 255, 255, 255, 1 ); /* var(--MAIN-BG-color) */
 	}
 

static/css/theme.css

@@ -401,9 +401,9 @@ dd {
 .topbar-breadcrumbs a:hover *,
 .topbar-breadcrumbs a:active *,
 .topbar-breadcrumbs a:focus *,
-.topbar-button-flyout a:hover,
+.topbar-content a:hover,
-.topbar-button-flyout a:active,
+.topbar-content a:active,
-.topbar-button-flyout a:focus,
+.topbar-content a:focus,
 article a:hover,
 article a:active,
 article a:focus {
@@ -975,7 +975,7 @@ td {
     z-index: 170;
 }
 
-#topbar > div {
+#topbar > .topbar-wrapper {
     align-items: center;
     background-color: rgba( 134, 134, 134, .066 );
     display: flex;
@@ -988,20 +988,24 @@ td {
     display: inline-block;
     position: relative;
 }
+.topbar-button:not([data-origin]) {
+    display: none;
+}
 
-.topbar-button > .topbar-button-control {
+.topbar-button > .topbar-control {
     display: inline-block;
     padding-left: 1rem;
     padding-right: 1rem;
 }
-.topbar-left .topbar-button > .topbar-button-control {
+.topbar-wrapper > .topbar-area-start > .topbar-button > .topbar-control {
     border-inline-end: 1px solid rgba( 134, 134, 134, .333 );
 }
-.topbar-right .topbar-button > .topbar-button-control {
+.topbar-wrapper > .topbar-area-end > .topbar-button > .topbar-control {
     border-inline-start: 1px solid rgba( 134, 134, 134, .333 );
 }
 
-.topbar-button span i{
+.topbar-button > button:disabled i,
+.topbar-button > span i {
     color: rgba( 134, 134, 134, .333 );
 }
 .topbar-button button{
@@ -1024,39 +1028,38 @@ td {
         border-inline-start-color: transparent;
     }
 }
-.topbar-left {
+.topbar-wrapper > .topbar-area-start {
     display: flex;
     flex-direction: row;
     flex-shrink: 0;
 }
-.topbar-right {
+.topbar-wrapper > .topbar-area-end {
     display: flex;
     flex-direction: row;
     flex-shrink: 0;
 }
-
+.topbar-wrapper > .topbar-hidden {
-html[dir="rtl"] .topbar-prev i,
-html[dir="rtl"] .topbar-next i {
-    transform: scaleX(-1);
-}
-.topbar-sidebar {
     display: none;
 }
-@media screen and (max-width: 48rem) {
+
-    .mobile-support .topbar-sidebar {
+html[dir="rtl"] .topbar-button-prev i,
-        display: inline-block;
+html[dir="rtl"] .topbar-button-next i {
-    }
+    transform: scaleX(-1);
 }
 
-.topbar-button-flyout {
+.topbar-content {
     top: .75rem;
 }
-.topbar-left .topbar-button-flyout {
+.topbar-wrapper > .topbar-area-start .topbar-content {
     inset-inline-start: 1.5rem;
 }
-.topbar-right .topbar-button-flyout {
+.topbar-wrapper > .topbar-area-end .topbar-content {
     inset-inline-end: 1.5rem;
 }
+.topbar-content .topbar-content{
+    /* we don't allow flyouts in flyouts; come on, don't get funny... */
+    display: none;
+}
 
 .topbar-breadcrumbs {
     flex-grow: 1;
@@ -1370,7 +1373,7 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
     z-index: 160;
 }
 
-.topbar-button-flyout {
+.topbar-content {
     border: 0 solid rgba( 134, 134, 134, .166 );
     box-shadow: 1px 2px 5px 1px rgba( 134, 134, 134, .2 );
     height: 0;
@@ -1381,25 +1384,34 @@ html[dir="rtl"] .expand > .expand-label > i.fa-chevron-right {
     z-index: 180;
 }
 
-.topbar-button.topbar-flyout .topbar-button-flyout {
+.topbar-button.topbar-flyout .topbar-content {
     border-width: 1px;
     height: auto;
     opacity: 1;
     width: auto;
 }
 
-.topbar-button-flyout .topbar-button-flyout-wrapper {
+.topbar-content .topbar-content-wrapper {
     background-color: rgba( 134, 134, 134, .066 );
 }
 
-.topbar-button-flyout-wrapper {
+.topbar-content-wrapper {
     --ps-rail-hover-color: rgba( 176, 176, 176, .25 );
     max-height: 90vh;
     overflow: hidden;
-    padding: 1rem 1rem;
+    padding: .5rem 1rem;
     position: relative; /* PS */
 }
 
+.topbar-content .topbar-button .topbar-control {
+    border-width: 0;
+    padding: 0;
+}
+.topbar-content .topbar-button .topbar-control {
+    border-width: 0;
+    padding: .5rem 0;
+}
+
 #TableOfContents,
 .TableOfContents {
     font-size: .8125rem;

static/css/variant.css

@@ -318,7 +318,7 @@ pre .copy-to-clipboard-button:hover {
     border-color: var(--INTERNAL-MENU-HEADER-SEPARATOR-color);
 }
 
-.topbar-button-flyout {
+.topbar-content {
     background-color: var(--INTERNAL-MAIN-BG-color);
 }
 

static/js/theme.js

@@ -644,9 +644,9 @@ function initArrowNav(){
     }
 
     // button navigation
-    var prev = document.querySelector( '.topbar-prev a' );
+    var prev = document.querySelector( '.topbar-button-prev a' );
     prev && prev.addEventListener( 'click', navPrev );
-    var next = document.querySelector( '.topbar-next a' );
+    var next = document.querySelector( '.topbar-button-next a' );
     next && next.addEventListener( 'click', navNext );
 
     // keyboard navigation
@@ -709,7 +709,7 @@ function initMenuScrollbar(){
     }
 
     var elm = document.querySelector('#content-wrapper');
-    var elt = document.querySelector('.topbar-button.topbar-flyout .topbar-button-flyout-wrapper');
+    var elt = document.querySelector('.topbar-button.topbar-flyout .topbar-content-wrapper');
 
     var autofocus = true;
     document.addEventListener('keydown', function(event){
@@ -757,7 +757,7 @@ function initMenuScrollbar(){
     // PSC removed for #242 #243 #244
     // psc = elc && new PerfectScrollbar('#body-inner');
     psm = elm && new PerfectScrollbar('#content-wrapper');
-    document.querySelectorAll('.topbar-button .topbar-button-flyout-wrapper').forEach( function( e ){
+    document.querySelectorAll('.topbar-button .topbar-content-wrapper').forEach( function( e ){
         var button = getTopbarButtonParent( e );
         if( !button ){
             return;
@@ -914,7 +914,7 @@ function openTopbarButtonFlyout( button ){
     var psb = pst.get( button );
     psb && setTimeout( function(){ psb.update(); }, 10 );
     psb && psb.scrollbarY.focus();
-    var a = button.querySelector( '.topbar-button-flyout-wrapper a' );
+    var a = button.querySelector( '.topbar-content-wrapper a' );
     if( a ){
         a.focus();
     }
@@ -951,8 +951,8 @@ function toggleTopbarFlyout( e ){
 }
 
 function toggleTopbarFlyoutEvent( event ){
-    if( event.target.classList.contains( 'topbar-button-flyout' )
+    if( event.target.classList.contains( 'topbar-content' )
-        || event.target.classList.contains( 'topbar-button-flyout-wrapper' )
+        || event.target.classList.contains( 'topbar-content-wrapper' )
         || event.target.classList.contains( 'ps__rail-x' )
         || event.target.classList.contains( 'ps__rail-y' )
         || event.target.classList.contains( 'ps__thumb-x' )
@@ -971,30 +971,30 @@ function topbarFlyoutEscapeHandler( event ){
 }
 
 function toggleToc(){
-    toggleTopbarButtonFlyout( document.querySelector( '.topbar-toc' ) );
+    toggleTopbarButtonFlyout( document.querySelector( '.topbar-button-toc' ) );
 }
 
 function showEdit(){
-    var l = document.querySelector( '.topbar-edit a' );
+    var l = document.querySelector( '.topbar-button-edit a' );
     if( l ){
         l.click();
     }
 }
 
 function showPrint(){
-    var l = document.querySelector( '.topbar-print a' );
+    var l = document.querySelector( '.topbar-button-print a' );
     if( l ){
         l.click();
     }
 }
 
 function navPrev(){
-    var e = document.querySelector( '.topbar-prev a' );
+    var e = document.querySelector( '.topbar-button-prev a' );
     location.href = e && e.getAttribute( 'href' );
 };
 
 function navNext(){
-    var e = document.querySelector( '.topbar-next a' );
+    var e = document.querySelector( '.topbar-button-next a' );
     location.href = e && e.getAttribute( 'href' );
 };
 
@@ -1426,25 +1426,6 @@ function updateTheme( detail ){
     }));
 }
 
-ready( function(){
-    initArrowNav();
-    initMermaid();
-    initOpenapi();
-    initMenuScrollbar();
-    initToc();
-    initAnchorClipboard();
-    initCodeClipboard();
-    fixCodeTabs();
-    restoreTabSelections();
-    initSwipeHandler();
-    initHistory();
-    initSearch();
-    initImage();
-    initExpand();
-    initScrollPositionSaver();
-    scrollToPositions();
-});
-
 function useMermaid( config ){
     if( !Object.assign ){
         // We don't support Mermaid for IE11 anyways, so bail out early
@@ -1471,3 +1452,164 @@ function useOpenapi( config ){
 if( window.themeUseOpenapi ){
     useOpenapi( window.themeUseOpenapi );
 }
+
+ready( function(){
+    initArrowNav();
+    initMermaid();
+    initOpenapi();
+    initMenuScrollbar();
+    initToc();
+    initAnchorClipboard();
+    initCodeClipboard();
+    fixCodeTabs();
+    restoreTabSelections();
+    initSwipeHandler();
+    initHistory();
+    initSearch();
+    initImage();
+    initExpand();
+    initScrollPositionSaver();
+    scrollToPositions();
+});
+
+(function(){
+    var body = document.querySelector( 'body' );
+    var topbar = document.querySelector( '#topbar' );
+    function addTopbarButtonInfos(){
+        // initially add some management infos to buttons and areas
+        var areas = body.querySelectorAll( '.topbar-area' );
+        areas.forEach( function( area ){
+            area.dataset.area = 'area-' + area.dataset.area;
+            var buttons = area.querySelectorAll( ':scope > .topbar-button' );
+            buttons.forEach( function( button ){
+                button.dataset.origin = area.dataset.area;
+                button.dataset.action = 'show';
+                var placeholder = document.createElement( 'div' );
+                placeholder.classList.add( 'topbar-placeholder' );
+                placeholder.dataset.action = 'show';
+                button.insertAdjacentElement( 'afterend', placeholder );
+            });
+            var placeholder = document.createElement( 'div' );
+            area.insertAdjacentElement( 'beforeend', placeholder );
+            var hidden = document.createElement( 'div' );
+            hidden.classList.add( 'topbar-hidden' );
+            hidden.dataset.area = area.dataset.area;
+            var hplaceholder = document.createElement( 'div' );
+            hidden.insertAdjacentElement( 'beforeend', hplaceholder );
+            area.insertAdjacentElement( 'afterend', hidden );
+        });
+    }
+    function moveAreaTopbarButtons( width ){
+        topbar.querySelectorAll( '.topbar-hidden .topbar-button' ).forEach( function( button ){
+            // move hidden to origins area
+            var placeholder = button.parentNode.parentNode.querySelector( ':scope > .topbar-area .topbar-placeholder[data-action="hide"]' );
+            placeholder.dataset.action = 'show';
+            button.dataset.action = 'show';
+            placeholder.insertAdjacentElement( 'beforebegin', button );
+        });
+        topbar.querySelectorAll( '.topbar-area .topbar-button' ).forEach( function( button ){
+            var current_area = button.dataset.action;
+            var origin_area = button.dataset.origin;
+            if( current_area != 'show' && origin_area != current_area ){
+                // move moved to origins area
+                var placeholder = topbar.querySelector( '.topbar-area[data-area="' + origin_area + '"] > .topbar-placeholder[data-action="' + current_area + '"]' );
+                placeholder.dataset.action = 'show';
+                button.dataset.action = 'show';
+                placeholder.insertAdjacentElement( 'beforebegin', button );
+            }
+        });
+        Array.from( topbar.querySelectorAll( '.topbar-area .topbar-button' ) ).reverse().forEach( function( button ){
+            var parent = button.parentElement;
+            var current_area = parent.dataset.area;
+            var action = button.dataset[ 'width' + width.toUpperCase() ];
+            if( action == 'show' ){
+            }
+            else if( action == 'hide' ){
+                // move to origins hidden
+                var hidden = button.parentNode.parentNode.querySelector( ':scope > .topbar-hidden > *' );
+                var placeholder = button.nextSibling;
+                placeholder.dataset.action = action;
+                button.dataset.action = action;
+                hidden.insertAdjacentElement( 'beforebegin', button );
+            }
+            else if( action != current_area ){
+                // move to action area
+                var dest = button.parentNode.parentNode.querySelector( '.topbar-area[data-area="' + action + '"] > *' );
+                if( dest ){
+                    var placeholder = button.nextSibling;
+                    placeholder.dataset.action = action;
+                    button.dataset.action = action;
+                    dest.insertAdjacentElement( 'beforebegin', button );
+                }
+            }
+        });
+    }
+    function moveTopbarButtons(){
+        var isS = body.classList.contains( 'width-s' );
+        var isM = body.classList.contains( 'width-m' );
+        var isL = body.classList.contains( 'width-l' );
+        // move buttons once, width has a distinct value
+        if( isS && !isM && !isL ){
+            moveAreaTopbarButtons( 's' )
+        }
+        else if( !isS && isM && !isL ){
+            moveAreaTopbarButtons( 'm' )
+        }
+        else if( !isS && !isM && isL ){
+            moveAreaTopbarButtons( 'l' )
+        }
+    }
+    function adjustEmptyTopbarContents(){
+        var buttons = Array.from( document.querySelectorAll( '.topbar-button > .topbar-content > .topbar-content-wrapper' ) );
+        // we have to reverse order to make sure to handle innermost areas first
+        buttons.reverse().forEach( function( wrapper ){
+            var button = getTopbarButtonParent( wrapper );
+            if( button ){
+                var isEmpty = true;
+                var area = wrapper.querySelector( ':scope > .topbar-area');
+                if( area ){
+                    // if it's an area, we have to check each contained button
+                    // manually for its display property
+                    var areabuttons = area.querySelectorAll( ':scope > .topbar-button' );
+                    isEmpty = true;
+                    areabuttons.forEach( function( ab ){
+                        if( ab.style.display != 'none' ){
+                            isEmpty = false;
+                        }
+                    })
+                }
+                else{
+                    var clone = wrapper.cloneNode( true );
+                    var irrelevant = clone.querySelectorAll( "div.ps__rail-x, div.ps__rail-y" );
+                    irrelevant.forEach(function( e ) {
+                        e.parentNode.removeChild( e );
+                    });
+                    isEmpty = !clone.innerHTML.trim();
+                }
+                button.querySelector( 'button' ).disabled = isEmpty;
+                button.style.display = isEmpty && button.dataset.contentEmpty == 'hide' ? 'none' : 'inline-block';
+            }
+        })
+    }
+    function setWidthS(e){ body.classList[ e.matches ? "add" : "remove" ]( 'width-s' ); }
+    function setWidthM(e){ body.classList[ e.matches ? "add" : "remove" ]( 'width-m' ); }
+    function setWidthL(e){ body.classList[ e.matches ? "add" : "remove" ]( 'width-l' ); }
+    function onWidthChange( setWidth, e ){
+        setWidth( e );
+        moveTopbarButtons();
+        adjustEmptyTopbarContents();
+    }
+    var mqs = window.matchMedia( 'only screen and (max-width: 48rem)' );
+    mqs.addEventListener( 'change', onWidthChange.bind( null, setWidthS ) );
+    var mqm = window.matchMedia( 'only screen and (min-width: 48rem) and (max-width: 60rem)' );
+    mqm.addEventListener( 'change', onWidthChange.bind( null, setWidthM ) );
+    var mql = window.matchMedia( 'only screen and (min-width: 60rem)' );
+    mql.addEventListener( 'change', onWidthChange.bind( null, setWidthL ) );
+
+    addTopbarButtonInfos();
+    setWidthS( mqs );
+    setWidthM( mqm );
+    setWidthL( mql );
+    moveTopbarButtons();
+    adjustEmptyTopbarContents();
+})();