parse word translation definitions1.4.0

4 files changed, 58 insertions, 19 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 9616e77..02a6428 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -179,14 +179,17 @@ body {
 /* don't break syllables in the reading field on vertical mobile */
 .mobile #card.vertical-layout #back #target-word-reading .reading .syllable { white-space: nowrap; }
 
-/* word note style */
-#card #target-word-reading .kanji { position: relative; }
-#card #target-word-reading .note {
-	position: absolute;
+/* subtile style */
+.subtile {
 	font-style: italic;
 	opacity: 50%;
-	font-size: 0.75em;
+	font-size: 75%;
+	vertical-align: baseline;
 }
+
+/* word note style */
+#card #target-word-reading .kanji { position: relative; }
+#card #target-word-reading .note { position: absolute; }
 #card #target-word-reading .note {
 	left: -0.25em;
 	top: 50%;
@@ -197,3 +200,21 @@ body {
 	left: 50%;
 	transform: translate(-50%, -100%);
 }
+
+/* definitions */
+#card #target-word-translation .definitions {
+	display: inline;
+	padding: 0;
+}
+#card #target-word-translation .definitions .definition,
+#card #target-word-translation .definitions .definition-separator {
+	list-style: none;
+	display: inline;
+}
+
+/* mobile definitions style */
+.mobile #card.vertical-layout #target-word-translation .definitions .definition-separator { display: none; }
+.mobile #card.vertical-layout #target-word-translation .definitions .definition {
+	display: list-item;
+	list-style: disc inside;
+}
diff --git a/anki-card-template/card.html b/anki-card-template/card.html
index 9154665..59c0044 100644
--- a/anki-card-template/card.html
+++ b/anki-card-template/card.html
@@ -22,14 +22,14 @@
 
 <div id="card" class="back vertical-layout">
 <div id="front">
-<span id="sentence" class="parse parse-furigana parse-format foreign">[辞書](じしょ)が*[予期](よき)しない*[理由](りゆう)で[終了](しゅうりょう)しました。\n\*escape\* (<i>test</i>)</span>
+<span id="sentence" class="parse parse-furigana parse-format foreign">[実](じつ)は[今](いま)、この[里](さと)は[水](みず)の[神](しん)[獣](じゅう)ヴァ・ルッタのせいで[存亡](そんぼう)の[危機](きき)に*[見舞](みま)われておる*ゾヨ\n\*escape\* (<i>test</i>)</span>
 </div>
 <hr id="separator">
 <div id="back">
-<span id="target-word-reading" class="parse parse-format parse-brackets foreign">予期しない【よ・き・しない】</span>
-<span id="target-word-translation" class="parse parse-format native">Unexpected</span>
-<span id="sentence-translation" class="parse parse-format native spoiler hidden">"Dictionary" has quit unexpectedly</span>
-<span id="tags" class="parse parse-tags">tag1 tag2 tag example-long-tag-here</span>
+<span id="target-word-reading" class="parse parse-format parse-brackets foreign">見舞われる【み・まわれる】(note)</span>
+<span id="target-word-translation" class="parse parse-format parse-definitions native">To experience {crisis}, to undergo, to suffer</span>
+<span id="sentence-translation" class="parse parse-format native spoiler hidden">This village is now in danger of extinction because of Vah Ruta, the water divine beast.</span>
+<span id="tags" class="parse parse-tags">ゼルダの伝説 ブレス・オブ・ザ・ワイルド</span>
 </div>
 </div>
 
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index f8dbcac..e1e2a03 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -61,7 +61,7 @@ HTMLElement.prototype.parse = function() {
 				var match = input.match(/\((.+?)\)/);
 				// display "(note)" before kanji
 				if (match) {
-					out += `<span class="note">${match[1]}</span>`;
+					out += `<span class="note subtile">${match[1]}</span>`;
 					note_head = match.index;
 					note_tail = note_head + match[0].length;
 				}
@@ -76,18 +76,36 @@ HTMLElement.prototype.parse = function() {
 			if (input[i] == '\u30fb') { out += `</span><span class="syllable-separator">${input[i]}</span><span class="syllable">`; continue; }
 		}
 
-		if (this.classList.contains("parse-tags")) {
-			for (var tag of input.split(" "))
-				out += `<span class="tag" style="--tag-hue: ${calculateTagHue(tag)};"><span class="inner">${tag}</span></span>`;
-			break;
-		}
-
 		// add current character to selected mode buffer
 		if (mode == "normal") out += input[i];
 		if (mode == "kanji") kanji += input[i];
 		if (mode == "reading") reading += input[i];
 	}
 
+	// oneshot parsers down below
+	input = out;
+	out = "";
+
+	// tags (separated by space)
+	if (this.classList.contains("parse-tags")) {
+		for (var tag of input.split(" "))
+			out += `<span class="tag" style="--tag-hue: ${calculateTagHue(tag)};"><span class="inner">${tag}</span></span>`;
+	}
+
+	// definitions (separated by comma)
+	else if (this.classList.contains("parse-definitions")) {
+		out += `<ul class="definitions">`;
+		out += input.split(",")
+			.map(s => s.trim())
+			.map(s => s.replace(/{(.+)}/g, `<span class="subtile">$1</span>`)) // {note}
+			.map(s => `<li class="definition">${s}</li>`)
+			.join(`<li class="definition-separator">, </li>`);
+		out += `</ul>`;
+	}
+
+	// no oneshot parser used
+	else out = input;
+
 	this.innerHTML = out;
 	this.classList.add("parsed");
 	if (input.length == 0) this.classList.add("empty");
diff --git a/anki-card-template/template.m4 b/anki-card-template/template.m4
index 01240ef..85ed66f 100644
--- a/anki-card-template/template.m4
+++ b/anki-card-template/template.m4
@@ -1,11 +1,11 @@
-<div id="card" class="CARD_SIDE() horizontal-layout">
+<div id="card" class="CARD_SIDE() vertical-layout">
 <div id="front">
 <span id="sentence" class="parse parse-furigana parse-format foreign">{{Complete sentence}}</span>
 </div>
 <hr id="separator">
 <div id="back">
 <span id="target-word-reading" class="parse parse-format parse-brackets foreign">{{Target word reading}}</span>
-<span id="target-word-translation" class="parse parse-format native">{{Target word translation}}</span>
+<span id="target-word-translation" class="parse parse-format parse-definitions native">{{Target word translation}}</span>
 <span id="sentence-translation" class="parse parse-format native spoiler hidden">{{Complete sentence translation}}</span>
 <span id="tags" class="parse parse-tags">{{Tags}}</span>
 </div>