parse note from parenthesis

3 files changed, 31 insertions, 5 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index a904f38..0f76b82 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -119,12 +119,17 @@ body {
 	margin: 2em 0.5em 0.5em 0.5em;
 	max-width: unset;
 	padding: 10px;
+	opacity: 60%;
+	transition: opacity 0.3s;
 }
 
 /* tag style */
-#card #back #tags .tag { background-color: hsl(calc(1deg * var(--tag-hue)), 70%, 75%); }
+#card #back #tags .tag { background-color: hsl(calc(1deg * var(--tag-hue)), 60%, 20%); }
 .nightMode #card #back #tags .tag,
 .night_mode #card #back #tags .tag { background-color: hsl(calc(1deg * var(--tag-hue)), 65%, 80%); }
+#card #back #tags .tag .inner { color: white; }
+.nightMode #card #back #tags .tag .inner,
+.night_mode #card #back #tags .tag .inner { color: black; }
 #card #back #tags .tag {
 	--tag-hue: 0;
 	padding: 4px;
@@ -145,7 +150,6 @@ body {
 	transition-duration: 0.3s;
 	transition-property: opacity, transform;
 	white-space: nowrap;
-	color: black;
 	min-height: 0;
 	min-width: 0;
 	user-select: none;
@@ -153,6 +157,10 @@ body {
 }
 
 /* tag hover/hold expand */
+#card #back #tags:active,
+#card #back #tags:hover {
+	opacity: 1;
+}
 #card #back #tags:active .tag .inner,
 #card #back #tags:hover .tag .inner {
 	transform: translate(0%, 0%);
diff --git a/anki-card-template/card.html b/anki-card-template/card.html
index 63f900a..4c509e7 100644
--- a/anki-card-template/card.html
+++ b/anki-card-template/card.html
@@ -26,7 +26,7 @@
 </div>
 <hr id="separator">
 <div id="back">
-<span id="target-word-reading" class="parse parse-format parse-brackets foreign">予期しない【よ・き・しない】<span class="note">uk</span></span>
+	<span id="target-word-reading" class="parse parse-format parse-brackets foreign">予期しない【よ・き・しない】(uk)</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>
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index beffd78..7e44b2e 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -12,6 +12,8 @@ HTMLElement.prototype.parse = function() {
 	var italic = false; // currently italic
 	var mode = "normal"; // normal, kanji, reading
 	var out = ""; // output html
+	var note_head = 0;
+	var note_tail = 0;
 
 	var alwaysvisisble = false; // if furigana is always visible (on front of card)
 	var kanji = ""; // current kanji
@@ -52,10 +54,26 @@ HTMLElement.prototype.parse = function() {
 		}
 
 		if (this.classList.contains("parse-brackets")) {
-			if (i == 0) { out += `<span class="kanji">`; }
+			if (i == 0) {
+				var match = input.match(/\((.+?)\)/);
+				// display "(note)" before kanji
+				if (match) {
+					out += `<span class="note">${match[1]}</span>`;
+					note_head = match.index;
+					note_tail = note_head + match[0].length;
+				}
+				// start kanji reading
+				out += `<span class="kanji">`;
+				continue;
+			}
+			// ignore note if parsed
+			if (i == note_head) { i += note_tail - 1; continue; }
+			// reading open bracket
 			if (input[i] == '\u3010') { out += `</span><span class="reading"><span class="bracket">${input[i]}</span><span class="syllable">`; continue; }
-			if (input[i] == '\u30fb') { out += `</span><span class="syllable-separator">${input[i]}</span><span class="syllable">`; continue; }
+			// reading closing bracket
 			if (input[i] == '\u3011') { out += `</span><span class="bracket">${input[i]}</span></span>`; continue; }
+			// interpunct (syllable separator)
+			if (input[i] == '\u30fb') { out += `</span><span class="syllable-separator">${input[i]}</span><span class="syllable">`; continue; }
 		}
 
 		if (this.classList.contains("parse-tags")) {