diff options
| author | lonkaars <loek@pipeframe.xyz> | 2022-12-27 16:00:54 +0100 |
|---|---|---|
| committer | lonkaars <loek@pipeframe.xyz> | 2022-12-27 16:00:54 +0100 |
| commit | c0f41dd4c74ca4a12252103da0e6de296533e269 (patch) | |
| tree | d81194f4b4f3818b71e3773325b0a5ad3478f510 | |
| parent | 2cf87d7baeb0ec2b0221e2349989fd0b0967d26b (diff) | |
add spoiler class for hiding sentence by default
| -rw-r--r-- | back-template.m4 | 8 | ||||
| -rw-r--r-- | card/card.css | 14 | ||||
| -rw-r--r-- | card/card.html | 8 | ||||
| -rw-r--r-- | card/card.js | 24 | ||||
| -rw-r--r-- | front-template.m4 | 2 |
5 files changed, 37 insertions, 19 deletions
diff --git a/back-template.m4 b/back-template.m4 index d948b80..1a0607d 100644 --- a/back-template.m4 +++ b/back-template.m4 @@ -1,9 +1,9 @@ <div class="card back"> -<span class="parse sentence foreign">{{Complete sentence}}</span> +<span id="sentence" class="parse foreign">{{Complete sentence}}</span> <hr class="split"> -<span class="target-word-reading foreign">{{Target word reading}}</span> -<span class="target-word-translation native">{{Target word translation}}</span> -<span class="sentence-translation native">{{Complete sentence translation}}</span> +<span id="target-word-reading" class="foreign">{{Target word reading}}</span> +<span id="target-word-translation" class="native">{{Target word translation}}</span> +<span id="sentence-translation" class="native spoiler hidden">{{Complete sentence translation}}</span> </div> <style>undivert(`card.min.css')</style> diff --git a/card/card.css b/card/card.css index b37234c..8c2b0d0 100644 --- a/card/card.css +++ b/card/card.css @@ -15,13 +15,19 @@ hr { hr { background-color: black; } .nightMode hr { background-color: white; } -.card.front .target-word-reading, -.card.front .target-word-translation, -.card.front .sentence-translation, +.card.front #target-word-reading, +.card.front #target-word-translation, +.card.front #sentence-translation, .card.front hr, .card.front ruby rt.hidden { display: none; } -.sentence-translation { margin-top: 1em; } +#sentence-translation { margin-top: 1em; } +.spoiler { + transition: filter 300ms; + cursor: pointer; +} +.spoiler.hidden { filter: blur(0.3rem); } +.spoiler.visible { filter: blur(0rem); } diff --git a/card/card.html b/card/card.html index 908be68..71ca300 100644 --- a/card/card.html +++ b/card/card.html @@ -9,11 +9,11 @@ <body> <div class="card back"> -<span class="parse sentence foreign">[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (<i>test</i>)</span> +<span id="sentence" class="parse foreign">[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (<i>test</i>)</span> <hr class="split"> -<span class="target-word-reading foreign">立つ【た・つ】</span> -<span class="target-word-translation native">To stand</span> -<span class="sentence-translation native">Before my eyes stood Alice, butt-naked.</span> +<span id="target-word-reading" class="foreign">立つ【た・つ】</span> +<span id="target-word-translation" class="native">To stand</span> +<span id="sentence-translation" class="native spoiler hidden">Before my eyes stood Alice, butt-naked.</span> </div> <button onclick="document.getElementsByClassName('card')[0].classList.toggle('back'); document.getElementsByClassName('card')[0].classList.toggle('front')">toggle view</button> diff --git a/card/card.js b/card/card.js index 347a44c..0509c3e 100644 --- a/card/card.js +++ b/card/card.js @@ -44,14 +44,26 @@ function parseSentence(input) { } function run() { - var input = document.getElementsByClassName("parse"); - - for (var el of input) { - if (el.classList.contains("parsed")) continue; - el.innerHTML = parseSentence(el.innerHTML); - el.classList.remove("parse"); + // parse all elements with class parse + for (var el of document.getElementsByClassName("parse")) { + if (el.classList.contains("parsed")) continue; // ignore already parsed elements + el.innerHTML = parseSentence(el.innerHTML); // parse + el.classList.remove("parse"); // mark as parsed el.classList.add("parsed"); } + + // toggle spoiler by clicking + for (var el of document.getElementsByClassName("spoiler")) { + el.onclick = function () { + this.classList.toggle("hidden"); + this.classList.toggle("visible"); + }; + } + + // remove spoiler from sentence translation if word reading field is empty + if(document.getElementById("target-word-reading").innerText.length == 0) { + document.getElementById("sentence-translation").classList.remove("hidden"); + } } run(); diff --git a/front-template.m4 b/front-template.m4 index 03acab0..bb1fdb9 100644 --- a/front-template.m4 +++ b/front-template.m4 @@ -1,5 +1,5 @@ <div class="card front"> -<span class="parse sentence foreign">{{Complete sentence}}</span> +<span id="sentence" class="parse foreign">{{Complete sentence}}</span> </div> <style>undivert(`card.min.css')</style> |