aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--back-template.m48
-rw-r--r--card/card.css14
-rw-r--r--card/card.html8
-rw-r--r--card/card.js24
-rw-r--r--front-template.m42
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>