diff --git a/themes/tegakituesday.com/layouts/challenges/single.html b/themes/tegakituesday.com/layouts/challenges/single.html index 7c41bca..21752e0 100644 --- a/themes/tegakituesday.com/layouts/challenges/single.html +++ b/themes/tegakituesday.com/layouts/challenges/single.html @@ -14,19 +14,22 @@ + {{ if .Params.english }} + + {{ end }}

Tegaki Tuesday #{{- $current -}}

()()きの()(よう)()#{{- $current -}}・
{{ if .Params.english }} -
+ -
{{ end }}
diff --git a/themes/tegakituesday.com/static/js/toggle.js b/themes/tegakituesday.com/static/js/toggle.js index 932d638..a988f02 100644 --- a/themes/tegakituesday.com/static/js/toggle.js +++ b/themes/tegakituesday.com/static/js/toggle.js @@ -4,6 +4,7 @@ const kyujitai = [["万","萬"],["与","與"],["両","兩"],["並","竝"],["乗" const challenge = document.getElementById("challenge"); const defaultHeight = challenge.scrollHeight + "px"; +let verticalHeight; challenge.style.height = defaultHeight; const vocab = document.getElementById("challenge-vocab"); @@ -58,6 +59,7 @@ directionButton.addEventListener("click", function() { texts.forEach(text => text.classList.add("vertical")); this.innerHTML = "↔"; challenge.style.height = challenge.scrollHeight + "px"; + verticalHeight = challenge.style.height; } else { texts.forEach(text => text.classList.remove("vertical")); this.innerHTML = "↕"; @@ -66,6 +68,22 @@ directionButton.addEventListener("click", function() { }); directionButton.click(); +const englishButton = document.getElementById("english"); +const challengeEnglish = document.getElementById("challenge-english"); +if (englishButton) { + englishButton.addEventListener("click", function() { + if (this.innerHTML == "Show translation") { + challengeEnglish.style.removeProperty("display"); + this.innerHTML = "Hide translation"; + challenge.style.height = challenge.scrollHeight + "px"; + } else { + challengeEnglish.style.display = "none"; + this.innerHTML = "Show translation"; + challenge.style.height = directionButton.innerHTML == "↕" ? defaultHeight : verticalHeight; + } + }); +} + document.getElementById("highlight").addEventListener("click", function() { if (this.innerHTML === "漢字") { vocab.style.display = "none";