From bef1accd201da3e7c9834030d541d2bc0ab7390a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Tue, 12 Sep 2023 00:10:03 +0200
Subject: [PATCH] topbar: modularize buttons #639

---
 layouts/partials/header.html               | 83 +++++++++++-----------
 layouts/partials/relLangPrettyUglyURL.hugo |  1 +
 layouts/partials/topbar-button.html        | 41 +++++++++++
 static/css/format-print.css                |  4 +-
 static/css/ie.css                          | 11 ++-
 static/css/theme.css                       | 28 +++-----
 static/js/theme.js                         | 14 ++--
 7 files changed, 106 insertions(+), 76 deletions(-)
 create mode 100644 layouts/partials/topbar-button.html

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 5ee33e8739..9c0095193f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -71,59 +71,62 @@
       <div id="toc-overlay"></div>
       <nav id="topbar" class="highlightable">
         <div>
-        {{- $File := .File }}
-        {{- $Site := .Site }}
         {{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
         {{- if and (or (eq $outputFormat "html") (eq $outputFormat "searchpage")) $showPrevNext }}
-          {{- $parent := .Parent }}
-          {{- $ispublished := true }}
-          {{- if $parent }}
-            {{- $ispublished = gt (int (len $parent.Permalink)) 0 }}
-          {{- end }}
-          {{- $startarrow := "&#129104;" }}
-          {{- $endarrow := "&#129106;" }}
+          {{- $startarrow := "🡐" }}
+          {{- $endarrow := "🡒" }}
           {{- if eq (T "Reading-direction" | default "ltr") "rtl" }}
-            {{- $startarrow = "&#129106;" }}
-            {{- $endarrow = "&#129104;" }}
+            {{- $startarrow = "🡒" }}
+            {{- $endarrow = "🡐" }}
           {{- end }}
-          <div class="navigation">
+          {{- $ispublished := true }}
+          {{- with .Parent }}
+            {{- $ispublished = gt (int (len .Permalink)) 0 }}
+          {{- end }}
+          {{- $next := "" }}
           {{- if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnNextPage"))) }}
-            <span class="nav nav-next topbar-link"><i class="fa fa-chevron-right fa-fw"></i></span>
           {{- else }}
-            {{- with ($.Scratch.Get "relearnNextPage") }}
-            <a class="nav nav-next topbar-link" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" title="{{.Title}} ({{ $endarrow | safeHTML }})"><i class="fas fa-chevron-right fa-fw"></i></a>
-            {{- end }}
+            {{- $next = $.Scratch.Get "relearnNextPage" }}
           {{- end }}
-          </div>
-          <div class="navigation">
+          {{- 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))
+          )}}
+          {{- $prev := "" }}
           {{- if and (eq .RelPermalink .Site.Home.RelPermalink) (eq $outputFormat "html") }}
-            <span class="nav nav-prev topbar-link"><i class="fa fa-chevron-left fa-fw"></i></span>
-          {{- else if or (ne $outputFormat "html") (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) }}
-            {{- with .Site.Home }}
-            <a class="nav nav-prev topbar-link" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" title="{{.Title}} ({{ $startarrow | safeHTML }})"><i class="fas fa-chevron-left fa-fw"></i></a>
-            {{- end }}
+          {{- else if or (ne $outputFormat "html") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") }}
+            {{- $prev = .Site.Home }}
           {{- else }}
-            {{- with ($.Scratch.Get "relearnPrevPage") }}
-            <a class="nav nav-prev topbar-link" href="{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}" title="{{.Title}} ({{ $startarrow | safeHTML }})"><i class="fas fa-chevron-left fa-fw"></i></a>
-            {{- end}}
+            {{- $prev = $.Scratch.Get "relearnPrevPage" }}
           {{- end}}
-          </div>
+          {{- 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))
+          )}}
         {{- end }}
         {{- with and (eq $outputFormat "html") (.OutputFormats.Get "PRINT") }}
-          <div id="top-print-link">
-            <a class="print-link topbar-link" title='{{ T "Print-this-chapter" }} (CTRL+ALT+p)' href="{{ .RelPermalink }}">
-              <i class="fas fa-print fa-fw"></i>
-            </a>
-          </div>
+          {{- 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 -}}
-        {{- if and (eq $outputFormat "html") .Site.Params.editURL $File }}
-          {{- with $File.Path }}
-          <div id="top-github-link">
-            <a class="github-link topbar-link" title='{{ T "Edit-this-page" }} (CTRL+ALT+w)' href="{{ $Site.Params.editURL }}{{ strings.TrimLeft "/" (replace $File.Dir "\\" "/") }}{{ $File.LogicalName }}" target="_blank">
-              <i class="fas fa-pen fa-fw"></i>
-            </a>
-          </div>
-          {{- end }}
+        {{- with and (eq $outputFormat "html") .Site.Params.editURL $.File }}
+          {{- 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 }}
         {{- $defaultDisableToc := .Site.Params.disableToc | default false }}
         {{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }}
diff --git a/layouts/partials/relLangPrettyUglyURL.hugo b/layouts/partials/relLangPrettyUglyURL.hugo
index 6d797b1b63..0844fe12d7 100644
--- a/layouts/partials/relLangPrettyUglyURL.hugo
+++ b/layouts/partials/relLangPrettyUglyURL.hugo
@@ -4,6 +4,7 @@
 {{- $link := "" }}
 {{- if isset . "link" }}
 	{{- $link = .link }}
+{{- else if not $to }}
 {{- else if $abs }}
 	{{- $link = $to.Permalink }}
 {{- else }}
diff --git a/layouts/partials/topbar-button.html b/layouts/partials/topbar-button.html
new file mode 100644
index 0000000000..764a7f026e
--- /dev/null
+++ b/layouts/partials/topbar-button.html
@@ -0,0 +1,41 @@
+{{- $page := .page }}
+{{- $class := .class | default "" }}
+{{- $href := (trim .href " ") | default "" }}
+{{- $target := .target | default "" }}
+{{- $type := .type | default "" }}
+{{- $isDisabled := not $href }}
+{{- $isButton := false }}
+{{- if or (not $href) (strings.HasPrefix $href "javascript:") }}
+  {{- $isButton = true }}
+  {{- $href = substr $href (len "javascript:") }}
+  {{- if not $type }}
+    {{- $type = "button" }}
+  {{- end }}
+{{- else if and (eq (len $target) 0) (or (strings.HasPrefix $href "http://") (strings.HasPrefix $href "https://") ) }}
+  {{- $target = "_blank" }}
+  {{- if isset $page.Site.Params "externallinktarget" }}
+    {{- $target = $page.Site.Params.externalLinkTarget }}
+  {{- end }}
+{{- end }}
+{{- $title := (trim .title " ") | default "" }}
+{{- $icon := (trim .icon " ") | default "" }}
+{{- if and $icon (not (findRE ".*?\\bfa-\\w.*?" $icon)) }}
+  {{- $icon = printf "fa-fw fas fa-%s" $icon }}
+{{- end }}
+<div class="topbar-button {{ $class }}">
+{{- if $isDisabled }}
+	<span>
+{{- else if $isButton }}
+	<button{{ if $href }} onclick="{{ $href | safeJS }}"{{ end }}{{ if gt (len $type) 0 }} type="{{ $type }}"{{ end }} title="{{ $title }}">
+{{- else }}
+	<a{{ if $href }} href="{{ $href }}"{{ if gt (len $target) 0 }} target="{{ $target }}"{{ end }}{{ end }} title="{{ $title }}">
+{{- end }}
+	  	<i class="{{ $icon }}"></i>
+{{- if $isDisabled }}
+	</span>
+{{- else if $isButton }}
+	</button>
+{{- else }}
+	</a>
+{{- end }}
+</div>
\ No newline at end of file
diff --git a/static/css/format-print.css b/static/css/format-print.css
index ed964431e3..88fd3f4068 100644
--- a/static/css/format-print.css
+++ b/static/css/format-print.css
@@ -35,9 +35,7 @@ pre {
     padding-left: 0; /* for print, we want to align with the footer to ease the layout */
     padding-right: 0;
 }
-.navigation,
-#top-print-link,
-#top-github-link {
+.topbar-button {
     /* we don't need this while printing */
     display: none;
 }
diff --git a/static/css/ie.css b/static/css/ie.css
index d5eea23c27..c1a4bab005 100644
--- a/static/css/ie.css
+++ b/static/css/ie.css
@@ -70,17 +70,14 @@
 		border-top-right-radius: 0;
 		border-right-width: 0;
 	}
-	html[dir="rtl"] .navigation,
-	html[dir="rtl"] #top-print-link,
-	html[dir="rtl"] #top-github-link {
+	html[dir="rtl"] .topbar-button {
 		float: right;
 	}
-	.nav,
-	.print-link,
-	.github-link {
+	.topbar-button > * {
 		border-left: thin solid rgba( 134, 134, 134, .333 );
 	}
-	html[dir="rtl"] .nav i {
+	html[dir="rtl"] .topbar-prev i,
+	html[dir="rtl"] .topbar-next i {
 		transform: scaleX(1);
 	}
 	#toc-menu,
diff --git a/static/css/theme.css b/static/css/theme.css
index 47f8dacf6f..834a658966 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -980,40 +980,30 @@ td {
     height: 100%;
 }
 
-.navigation,
-#top-print-link,
-#top-github-link {
+.topbar-button {
     display: block;
     float: right;
+    position: relative;
+    top: 50%;
+    transform: translateY(-50%);
 }
-html[dir="rtl"] .navigation,
-html[dir="rtl"] #top-print-link,
-html[dir="rtl"] #top-github-link {
+html[dir="rtl"] .topbar-button {
     float: left;
 }
 
-.nav,
-.print-link,
-.github-link {
+.topbar-button > * {
     border-inline-start: thin solid rgba( 134, 134, 134, .333 );
     padding-left: 1rem;
     padding-right: 1rem;
 }
-html[dir="rtl"] .nav i {
+html[dir="rtl"] .topbar-prev i,
+html[dir="rtl"] .topbar-next i {
     transform: scaleX(-1);
 }
-span.nav i{
+.topbar-button span i{
     color: rgba( 134, 134, 134, .333 );
 }
 
-.navigation,
-#top-print-link,
-#top-github-link {
-    position: relative;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
 #toc-menu{
     cursor: pointer;
 }
diff --git a/static/js/theme.js b/static/js/theme.js
index ca0f61a90a..a17927237d 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -644,9 +644,9 @@ function initArrowNav(){
     }
 
     // button navigation
-    var prev = document.querySelector( 'a.nav-prev' );
+    var prev = document.querySelector( '.topbar-prev a' );
     prev && prev.addEventListener( 'click', navPrev );
-    var next = document.querySelector( 'a.nav-next' );
+    var next = document.querySelector( '.topbar-next a' );
     next && next.addEventListener( 'click', navNext );
 
     // keyboard navigation
@@ -906,26 +906,26 @@ function showToc(){
 }
 
 function showEdit(){
-    var l = document.querySelector( '#top-github-link a' );
+    var l = document.querySelector( '.topbar-edit a' );
     if( l ){
         l.click();
     }
 }
 
 function showPrint(){
-    var l = document.querySelector( '#top-print-link a' );
+    var l = document.querySelector( '.topbar-print a' );
     if( l ){
         l.click();
     }
 }
 
 function navPrev(){
-    var e = document.querySelector( 'a.nav-prev' );
+    var e = document.querySelector( '.topbar-prev a' );
     location.href = e && e.getAttribute( 'href' );
 };
 
 function navNext(){
-    var e = document.querySelector( 'a.nav-next' );
+    var e = document.querySelector( '.topbar-next a' );
     location.href = e && e.getAttribute( 'href' );
 };
 
@@ -1116,7 +1116,7 @@ function scrollToPositions() {
 
 function mark() {
 	// mark some additional stuff as searchable
-	var topbarLinks = document.querySelectorAll( '#topbar a:not(.topbar-link):not(.btn)' );
+	var topbarLinks = document.querySelectorAll( '#topbar :not(.topbar-button) a' );
 	for( var i = 0; i < topbarLinks.length; i++ ){
 		topbarLinks[i].classList.add( 'highlight' );
 	}