tegakituesday/tegakituesday.com
tegakituesday/tegakituesday.com
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Hide translation by default, add toggle button

Browse source
This commit is contained in:
Elnu 2022-12-13 12:55:14 -08:00
parent c5e2b01da6
commit 00541ccfff
2 changed files with 23 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
themes/tegakituesday.com/layouts/challenges/single.html
View file

@ -14,19 +14,22 @@
<button id="direction" title="Text direction">↕</button>
<button lang="ja" id="highlight" title="Vocab/kanji links">漢字</button>
<button lang="ja" id="kyujitai" title="Shinjitai/kyujitai">旧字体</button>
{{ if .Params.english }}
<button id="english" title="Show/hide translation">Show translation</button>
{{ end }}
<a id="kyujitai-info" target="_blank" class="clickable-icon" href="https://en.wikipedia.org/wiki/Ky%C5%ABjitai"><i class="fa-solid fa-circle-question"></i></a>
<header>
<h3>Tegaki Tuesday #{{- $current -}}</h3>
<small><ruby>手<rp>(</rp><rt>て</rt><rp>)</rp></ruby><ruby>書<rp>(</rp><rt>が</rt><rp>)</rp></ruby>きの<ruby>火<rp>(</rp><rt>か</rt><rp>)</rp></ruby><ruby>曜<rp>(</rp><rt>よう</rt><rp>)</rp></ruby><ruby>日<rp>(</rp><rt>び</rt><rp>)</rp></ruby>＃{{- $current -}}・<time datetime="{{- .Date.Format " 2006-01-02T15:04:05Z07:00" -}}">{{- .Date.Format "2006年01月02日" -}}</time></small>
</header>
{{ if .Params.english }}
<div id="challenge-english">
<div id="challenge-english" style="display: none">
<!-- English view -->
{{- range.Params.english -}}
<p>{{- $.RenderString . -}}</p>
{{- end -}}
<br>
</div>
<br>
{{ end }}
<div id="challenge-vocab" lang="ja">
<!-- Vocab view -->

18
themes/tegakituesday.com/static/js/toggle.js
View file

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