diff options
| -rw-r--r-- | src/templates/language.html.tmpl | 33 |
1 files changed, 12 insertions, 21 deletions
diff --git a/src/templates/language.html.tmpl b/src/templates/language.html.tmpl index 8c86e11..e3b6fcd 100644 --- a/src/templates/language.html.tmpl +++ b/src/templates/language.html.tmpl @@ -11,7 +11,7 @@ <script> (() => { - let i = 0; + let i = -1; let nodes; const Δt = 5000; /* Total time a text is shown */ const Δf = 1000; /* Fade duration */ @@ -31,32 +31,23 @@ {{ end }} ]; - const updateTexts = () => { - nodes.forEach((n, j) => { - const [lang, ...strs] = texts[i]; - n.lang = lang; - n.textContent = strs[j]; - n.classList.remove("hide"); - }); - }; - const change = () => { nodes.forEach(n => n.classList.add("hide")); setTimeout(() => { i = (i + 1) % texts.length; - updateTexts(); + 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'); - updateTexts(); - /* When you first do a page load there is no fade-in for the initial - text, so we want to trigger a fade-out Δf milliseconds earlier */ - setTimeout(() => { - change(); - setInterval(change, Δt); - }, Δt - Δf); + change(); + setInterval(change, Δt); }); })(); </script> @@ -67,18 +58,18 @@ {{ template "navbar" . }} <h1> {{ .Get "Select Your Language" }} - <br><span class="lang-fade-in-out translation"></span> + <br><span class="lang-fade-in-out translation"> </span> </h1> </header> <main> <h2> {{ .Get "Eurozone Languages" }} - <br><span class="lang-fade-in-out translation"></span> + <br><span class="lang-fade-in-out translation"> </span> </h2> {{ template "langgrid" true }} <h2> {{ .Get "Other Languages" }} - <br><span class="lang-fade-in-out translation"></span> + <br><span class="lang-fade-in-out translation"> </span> </h2> {{ template "langgrid" false }} </main> |