nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

topbar: modularize buttons #639

Browse source
This commit is contained in:
Sören Weber 2023-09-12 00:10:03 +02:00
parent 196188b7f3
commit bef1accd20
No known key found for this signature in database
GPG key ID: BEC6D55545451B6D
7 changed files with 106 additions and 76 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
layouts/partials/header.html
View file

@ -71,59 +71,62 @@
<div id="toc-overlay"></div> <div id="toc-overlay"></div>
<nav id="topbar" class="highlightable"> <nav id="topbar" class="highlightable">
<div> <div>
{{- $File := .File }}
{{- $Site := .Site }}
{{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }} {{- $showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev)) }}
{{- if and (or (eq $outputFormat "html") (eq $outputFormat "searchpage")) $showPrevNext }} {{- if and (or (eq $outputFormat "html") (eq $outputFormat "searchpage")) $showPrevNext }}
{{- $parent := .Parent }} {{- $startarrow := "🡐" }}
{{- $ispublished := true }} {{- $endarrow := "🡒" }}
{{- if $parent }}
{{- $ispublished = gt (int (len $parent.Permalink)) 0 }}
{{- end }}
{{- $startarrow := "&#129104;" }}
{{- $endarrow := "&#129106;" }}
{{- if eq (T "Reading-direction" | default "ltr") "rtl" }} {{- if eq (T "Reading-direction" | default "ltr") "rtl" }}
{{- $startarrow = "&#129106;" }} {{- $startarrow = "🡒" }}
{{- $endarrow = "&#129104;" }} {{- $endarrow = "🡐" }}
{{- end }} {{- 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"))) }} {{- 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 }} {{- else }}
{{- with ($.Scratch.Get "relearnNextPage") }} {{- $next = $.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 }}
{{- end }} {{- end }}
</div> {{- partial "topbar-button.html" (dict
<div class="navigation"> "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") }} {{- 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") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") }}
{{- else if or (ne $outputFormat "html") (eq .Page.Kind "taxonomy") (eq .Page.Kind "term") (not (and $ispublished ($.Scratch.Get "relearnPrevPage"))) }} {{- $prev = .Site.Home }}
{{- 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 }} {{- else }}
{{- with ($.Scratch.Get "relearnPrevPage") }} {{- $prev = $.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}}
{{- end}} {{- 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 }} {{- end }}
{{- with and (eq $outputFormat "html") (.OutputFormats.Get "PRINT") }} {{- with and (eq $outputFormat "html") (.OutputFormats.Get "PRINT") }}
<div id="top-print-link"> {{- partial "topbar-button.html" (dict
<a class="print-link topbar-link" title='{{ T "Print-this-chapter" }} (CTRL+ALT+p)' href="{{ .RelPermalink }}"> "page" $page
<i class="fas fa-print fa-fw"></i> "class" "topbar-print"
</a> "href" .RelPermalink
</div> "icon" "print"
"title" (printf "%s (CTRL+ALT+p)" (T "Print-this-chapter"))
)}}
{{- end -}} {{- end -}}
{{- if and (eq $outputFormat "html") .Site.Params.editURL $File }} {{- with and (eq $outputFormat "html") .Site.Params.editURL $.File }}
{{- with $File.Path }} {{- partial "topbar-button.html" (dict
<div id="top-github-link"> "page" $page
<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"> "class" "topbar-edit"
<i class="fas fa-pen fa-fw"></i> "href" (printf "%s%s%s" $.Site.Params.editURL (strings.TrimLeft "/" (replace .Dir "\\" "/")) .LogicalName)
</a> "icon" "pen"
</div> "title" (printf "%s (CTRL+ALT+w)" (T "Edit-this-page"))
{{- end }} )}}
{{- end }} {{- end }}
{{- $defaultDisableToc := .Site.Params.disableToc | default false }} {{- $defaultDisableToc := .Site.Params.disableToc | default false }}
{{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }} {{- $currentDisableToc := .Params.disableToc | default $defaultDisableToc }}

1
layouts/partials/relLangPrettyUglyURL.hugo
View file

@ -4,6 +4,7 @@
{{- $link := "" }} {{- $link := "" }}
{{- if isset . "link" }} {{- if isset . "link" }}
{{- $link = .link }} {{- $link = .link }}
{{- else if not $to }}
{{- else if $abs }} {{- else if $abs }}
{{- $link = $to.Permalink }} {{- $link = $to.Permalink }}
{{- else }} {{- else }}

41
layouts/partials/topbar-button.html Normal file
View file

@ -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>

4
static/css/format-print.css
View file

@ -35,9 +35,7 @@ pre {
padding-left: 0; /* for print, we want to align with the footer to ease the layout */ padding-left: 0; /* for print, we want to align with the footer to ease the layout */
padding-right: 0; padding-right: 0;
} }
.navigation, .topbar-button {
#top-print-link,
#top-github-link {
/* we don't need this while printing */ /* we don't need this while printing */
display: none; display: none;
} }

11
static/css/ie.css
View file

@ -70,17 +70,14 @@
border-top-right-radius: 0; border-top-right-radius: 0;
border-right-width: 0; border-right-width: 0;
} }
html[dir="rtl"] .navigation, html[dir="rtl"] .topbar-button {
html[dir="rtl"] #top-print-link,
html[dir="rtl"] #top-github-link {
float: right; float: right;
} }
.nav, .topbar-button > * {
.print-link,
.github-link {
border-left: thin solid rgba( 134, 134, 134, .333 ); 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); transform: scaleX(1);
} }
#toc-menu, #toc-menu,

28
static/css/theme.css
View file

@ -980,40 +980,30 @@ td {
height: 100%; height: 100%;
} }
.navigation, .topbar-button {
#top-print-link,
#top-github-link {
display: block; display: block;
float: right; float: right;
position: relative;
top: 50%;
transform: translateY(-50%);
} }
html[dir="rtl"] .navigation, html[dir="rtl"] .topbar-button {
html[dir="rtl"] #top-print-link,
html[dir="rtl"] #top-github-link {
float: left; float: left;
} }
.nav, .topbar-button > * {
.print-link,
.github-link {
border-inline-start: thin solid rgba( 134, 134, 134, .333 ); border-inline-start: thin solid rgba( 134, 134, 134, .333 );
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
html[dir="rtl"] .nav i { html[dir="rtl"] .topbar-prev i,
html[dir="rtl"] .topbar-next i {
transform: scaleX(-1); transform: scaleX(-1);
} }
span.nav i{ .topbar-button span i{
color: rgba( 134, 134, 134, .333 ); color: rgba( 134, 134, 134, .333 );
} }
.navigation,
#top-print-link,
#top-github-link {
position: relative;
top: 50%;
transform: translateY(-50%);
}
#toc-menu{ #toc-menu{
cursor: pointer; cursor: pointer;
} }

14
static/js/theme.js
View file

@ -644,9 +644,9 @@ function initArrowNav(){
} }
// button navigation // button navigation
var prev = document.querySelector( 'a.nav-prev' ); var prev = document.querySelector( '.topbar-prev a' );
prev && prev.addEventListener( 'click', navPrev ); prev && prev.addEventListener( 'click', navPrev );
var next = document.querySelector( 'a.nav-next' ); var next = document.querySelector( '.topbar-next a' );
next && next.addEventListener( 'click', navNext ); next && next.addEventListener( 'click', navNext );
// keyboard navigation // keyboard navigation
@ -906,26 +906,26 @@ function showToc(){
} }
function showEdit(){ function showEdit(){
var l = document.querySelector( '#top-github-link a' ); var l = document.querySelector( '.topbar-edit a' );
if( l ){ if( l ){
l.click(); l.click();
} }
} }
function showPrint(){ function showPrint(){
var l = document.querySelector( '#top-print-link a' ); var l = document.querySelector( '.topbar-print a' );
if( l ){ if( l ){
l.click(); l.click();
} }
} }
function navPrev(){ function navPrev(){
var e = document.querySelector( 'a.nav-prev' ); var e = document.querySelector( '.topbar-prev a' );
location.href = e && e.getAttribute( 'href' ); location.href = e && e.getAttribute( 'href' );
}; };
function navNext(){ function navNext(){
var e = document.querySelector( 'a.nav-next' ); var e = document.querySelector( '.topbar-next a' );
location.href = e && e.getAttribute( 'href' ); location.href = e && e.getAttribute( 'href' );
}; };
@ -1116,7 +1116,7 @@ function scrollToPositions() {
function mark() { function mark() {
// mark some additional stuff as searchable // 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++ ){ for( var i = 0; i < topbarLinks.length; i++ ){
topbarLinks[i].classList.add( 'highlight' ); topbarLinks[i].classList.add( 'highlight' );
} }