diff options
Diffstat (limited to 'src/templates/language.html.tmpl')
| -rw-r--r-- | src/templates/language.html.tmpl | 74 |
1 files changed, 67 insertions, 7 deletions
diff --git a/src/templates/language.html.tmpl b/src/templates/language.html.tmpl index 13a8e85..e3b6fcd 100644 --- a/src/templates/language.html.tmpl +++ b/src/templates/language.html.tmpl @@ -1,16 +1,76 @@ +{{ define "header" }} +<style> + .lang-fade-in-out { + transition: opacity 1s; + + &.hide { + opacity: 0; + } + } +</style> + +<script> + (() => { + let i = -1; + let nodes; + const Δt = 5000; /* Total time a text is shown */ + const Δf = 1000; /* Fade duration */ + const texts = [ + {{ $save := . }} + {{ $ps := .Printers }} + {{ range locales }} + {{ if (and .Enabled (ne .Bcp $save.Printer.Bcp)) }} + [ + "{{ .Bcp }}", + {{ $p := (index $ps .Bcp) }} + "{{ $p.Get `Select Your Language` }}", + "{{ $p.Get `Eurozone Languages` }}", + "{{ $p.Get `Other Languages` }}", + ], + {{ end }} + {{ end }} + ]; + + const change = () => { + nodes.forEach(n => n.classList.add("hide")); + setTimeout(() => { + i = (i + 1) % texts.length; + nodes.forEach((n, j) => { + const [lang, ...strs] = texts[i]; + n.lang = lang; + n.textContent = strs[j]; + n.classList.remove("hide"); + }); + }, Δf); + }; + + document.addEventListener("DOMContentLoaded", _ => { + nodes = $$('.lang-fade-in-out'); + change(); + setInterval(change, Δt); + }); + })(); +</script> +{{ end }} + {{ define "content" }} <header> {{ template "navbar" . }} - <h1>{{ .Get "Select Your Language" }}</h1> + <h1> + {{ .Get "Select Your Language" }} + <br><span class="lang-fade-in-out translation"> </span> + </h1> </header> <main> - <p> - {{ .Get "Select your preferred language to use on the site." }} - </p> - <hr /> - <h2>{{ .Get "Eurozone Languages" }}</h2> + <h2> + {{ .Get "Eurozone Languages" }} + <br><span class="lang-fade-in-out translation"> </span> + </h2> {{ template "langgrid" true }} - <h2>{{ .Get "Other Languages" }}</h2> + <h2> + {{ .Get "Other Languages" }} + <br><span class="lang-fade-in-out translation"> </span> + </h2> {{ template "langgrid" false }} </main> {{ end }} |