mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-23 07:47:54 +00:00
topbar: modularize buttons #639
This commit is contained in:
Sören Weber
parent
196188b7f3
commit
bef1accd20
7 changed files with 106 additions and 76 deletions
|
|
@ -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 := "🡐" }}
|
||||
{{- $endarrow := "🡒" }}
|
||||
{{- $startarrow := "🡐" }}
|
||||
{{- $endarrow := "🡒" }}
|
||||
{{- if eq (T "Reading-direction" | default "ltr") "rtl" }}
|
||||
{{- $startarrow = "🡒" }}
|
||||
{{- $endarrow = "🡐" }}
|
||||
{{- $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>
|
||||
{{- $next = $.Scratch.Get "relearnNextPage" }}
|
||||
{{- end }}
|
||||
{{- 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>
|
||||
{{- $prev = $.Scratch.Get "relearnPrevPage" }}
|
||||
{{- 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 }}
|
||||
{{- 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 }}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
{{- $link := "" }}
|
||||
{{- if isset . "link" }}
|
||||
{{- $link = .link }}
|
||||
{{- else if not $to }}
|
||||
{{- else if $abs }}
|
||||
{{- $link = $to.Permalink }}
|
||||
{{- else }}
|
||||
|
|
|
|||
41
layouts/partials/topbar-button.html
Normal file
41
layouts/partials/topbar-button.html
Normal 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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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' );
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue