From c0f41dd4c74ca4a12252103da0e6de296533e269 Mon Sep 17 00:00:00 2001 From: lonkaars Date: Tue, 27 Dec 2022 16:00:54 +0100 Subject: add spoiler class for hiding sentence by default --- back-template.m4 | 8 ++++---- card/card.css | 14 ++++++++++---- card/card.html | 8 ++++---- card/card.js | 24 ++++++++++++++++++------ 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 @@

-{{Complete sentence}} +{{Complete sentence}}

-{{Target word reading}} -{{Target word translation}} -{{Complete sentence translation}} +{{Target word reading}} +{{Target word translation}} +

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

-[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (test) +[俺](おれ)の[目](め)の[前](まえ)に{全}(ぜん)[裸](はだか)のアリスが*[立](た)っていた*。\n\*escape\* (test)

-立つ【た・つ】 -To stand -Before my eyes stood Alice, butt-naked. +立つ【た・つ】 +To stand +

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

-{{Complete sentence}} +{{Complete sentence}}

-- cgit v1.2.3