From 11261345744b06d81f1aadc33f288100265ecd2f Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Wed, 25 Jan 2023 18:34:35 +0100
Subject: better separator on vertical mobile + better definition separator
 parser

---
 anki-card-template/card.css  | 21 ++++++++++---------
 anki-card-template/card.html |  2 +-
 anki-card-template/card.js   | 48 +++++++++++++++++++++++++++++++++++++-------
 3 files changed, 53 insertions(+), 18 deletions(-)

(limited to 'anki-card-template')

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index c3505f4..627c4e3 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -14,7 +14,9 @@
 	--reading-kana-font-size: 1rem; /* font size of kana in reading field */
 	--native-font-size: 1.0rem; /* font size for generic native (latin) text */
 	--foreign-font-size: 1.5rem; /* font size for generic foreign (japanese) text */
-	--definition-marker-width: 2px; /* definition marker width (mobile vertical only) */
+	--definition-spacing: 0.75em; /* definition spacing (mobile vertical only) */
+	--definition-marker-width: 2em; /* definition marker width (mobile vertical only) */
+	--definition-marker-height: 2px; /* definition marker height (mobile vertical only) */
 	--definition-marker-opacity: 50%; /* definition marker opacity (mobile vertical only) */
 }
 .mobile #card {
@@ -255,28 +257,27 @@ body {
 }
 
 /* mobile definitions style */
-#card #target-word-translation .definitions .definition-separator::after {
-	content: ", ";
-}
+#card #target-word-translation .definitions .definition-separator::after { content: ", "; }
 .mobile #card.vertical-layout #target-word-translation .definitions .definition-separator { display: none; }
 .mobile #card.vertical-layout #target-word-translation .definitions .definition {
 	position: relative;
 	display: block;
 	max-width: max-content;
-	margin: 0 auto;
+	margin: var(--definition-spacing) auto;
 }
+.mobile #card.vertical-layout #target-word-translation .definitions .definition:last-child::before { display: none; }
 .mobile #card.vertical-layout #target-word-translation .definitions .definition::before {
 	content: "";
 	position: absolute;
-	left: -0.25em;
-	top: 0px;
-	bottom: 0px;
+	bottom: calc(-0.5 * var(--definition-spacing));
+	left: 50%;
+	right: 0px;
+	height: var(--definition-marker-height);
 	width: var(--definition-marker-width);
 	opacity: var(--definition-marker-opacity);
-	margin: 5px 0;
 	border-radius: 999px;
 	background-color: currentColor;
-	transform: translateX(-100%);
+	transform: translate(-50%, 50%);
 }
 
 /* indicator (pitch accent or word type) */
diff --git a/anki-card-template/card.html b/anki-card-template/card.html
index 8559b58..61e396c 100644
--- a/anki-card-template/card.html
+++ b/anki-card-template/card.html
@@ -27,7 +27,7 @@
 <hr id="separator">
 <div id="back">
 <span id="target-word-reading" class="parse parse-format parse-reading parse-indicators parse-script foreign">見舞われる[0]【み・まわれる】(note)</span>
-<span id="target-word-translation" class="parse parse-format parse-definitions parse-indicators parse-script native">[verb] To experi\ence {crisis}, to undergo, to suffer {testテストtest}</span>
+<span id="target-word-translation" class="parse parse-format parse-definitions parse-indicators parse-script native">[verb] To experi\ence {crisis}, to undergo, to suffer {test,テスト,test} (this is, a single item)\, and still is here, but not here</span>
 <span id="sentence-translation" class="parse parse-format native spoiler parse-script 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>
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index a2d12c4..2b04ca3 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -192,13 +192,47 @@ function parseTags(nodes) {
 }
 
 function parseDefinitions(nodes) {
-	out = `<ul class="definitions">`;
-	out += nodes.map(n => n.data).join("").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>`;
+	out = `<ul class="definitions"><li class="definition">`;
+	var subtile = false; // current text is subtile
+	var parenthesis = false; // current text is surrounded by parenthesis
+
+	for (var node of nodes) {
+		if (node.type == "html") {
+			out += node.data;
+			continue;
+		}
+
+		var input = node.data;
+		for (var i = 0; i < input.length; i++) {
+			// escape characters preceded by \
+			if (input[i] == "\\") {
+				var escaped = input[i+1];
+				if (escaped == "{") { out += "{"; i++; continue; }
+				if (escaped == "}") { out += "}"; i++; continue; }
+				if (escaped == ",") { out += ","; i++; continue; }
+				if (escaped == "(") { out += "("; i++; continue; }
+				if (escaped == ")") { out += ")"; i++; continue; }
+			}
+
+			// subtile brackets
+			if (input[i] == "{") { subtile = true; out += `<span class="subtile">`; continue; }
+			if (input[i] == "}" && subtile) { subtile = false; out += `</span>`; continue; }
+
+			// definition separator
+			if (input[i] == "," && !subtile && !parenthesis) {
+				out += `</li><li class="definition-separator"></li><li class="definition">`;
+				continue;
+			}
+
+			// ignore comma's starting new definition in parenthesis
+			if (input[i] == "(") parenthesis = true;
+			if (input[i] == ")") parenthesis = false;
+
+			out += input[i];
+		}
+	}
+
+	out += `</li></ul>`;
 	return HTMLtoParseArr(out);
 }
 
-- 
cgit v1.2.3