tags in card

4 files changed, 80 insertions, 1 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index 24c6f0a..2c5309a 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -33,7 +33,8 @@ body {
 
 /* separator color */
 #separator { background-color: black; }
-.nightMode #separator { background-color: white; }
+.nightMode #separator,
+.night_mode #separator { background-color: white; }
 
 /* separator size */
 #card.horizontal-layout #separator { height: 10px; }
@@ -105,3 +106,64 @@ body {
 /* display kana reading below kanji in vertical layout */
 #card.vertical-layout #target-word-reading .reading { display: block; }
 
+/* tag container */
+#card #back #tags {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 4px;
+	margin: 2em 0.5em 0.5em 0.5em;
+	max-width: unset;
+	padding: 10px;
+}
+
+/* tag style */
+#card #back #tags .tag { background-color: hsl(calc(1deg * var(--tag-hue)), 70%, 75%); }
+.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 {
+	--tag-hue: 0;
+	padding: 4px;
+	border-radius: 999px;
+	margin: 0;
+	transition-property: padding, grid-template-rows, grid-template-columns;
+	transition-duration: 0.3s;
+	overflow: hidden;
+	position: relative;
+	display: grid;
+	grid-template-rows: 0fr;
+	grid-template-columns: 0fr;
+}
+#card #back #tags .tag .inner {
+	position: relative;
+	opacity: 0;
+	transform: translate(-50%, -50%);
+	transition-duration: 0.3s;
+	transition-property: opacity, transform;
+	white-space: nowrap;
+	color: black;
+	min-height: 0;
+	min-width: 0;
+	user-select: none;
+	cursor: default;
+}
+
+/* tag hover/hold expand */
+#card #back #tags:active .tag .inner,
+#card #back #tags:hover .tag .inner {
+	transform: translate(0%, 0%);
+	opacity: 1;
+}
+#card #back #tags:active .tag,
+#card #back #tags:hover .tag {
+	grid-template-rows: 1fr;
+	grid-template-columns: 1fr;
+	padding: 4px 12px;
+}
+
+/* display tags vertically on mobile */
+.mobile #card.vertical-layout #back #tags { flex-direction: column; }
+.mobile #card.vertical-layout #back #tags .tag { max-width: max-content; }
+
+.parse.empty { display: none !important; }
diff --git a/anki-card-template/card.html b/anki-card-template/card.html
index 7c7c085..2c7909b 100644
--- a/anki-card-template/card.html
+++ b/anki-card-template/card.html
@@ -29,6 +29,7 @@
 <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>
 </div>
 </div>
 
@@ -36,6 +37,7 @@
 <button onclick="document.getElementById('card').classList.toggle('back'); document.getElementById('card').classList.toggle('front')">toggle view</button>
 <button onclick="document.getElementById('card').classList.toggle('horizontal-layout'); document.getElementById('card').classList.toggle('vertical-layout')">toggle layout</button>
 <button onclick="document.body.classList.toggle('nightMode')">toggle dark</button>
+<button onclick="document.body.classList.toggle('mobile')">toggle mobile</button>
 </div>
 
 </span>
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index 7ec981d..eebe6d1 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -1,3 +1,10 @@
+function calculateTagHue(input) {
+	var out = 0;
+	for (var i = 0; i < input.length; i++)
+		out ^= input.charCodeAt(i);
+	return Math.floor((out * 12) % 360);
+}
+
 HTMLElement.prototype.parse = function() {
 	if (this.classList.contains("parsed")) return; // ignore already parsed elements
 	var input = this.innerHTML;
@@ -50,6 +57,12 @@ HTMLElement.prototype.parse = function() {
 			if (input[i] == '\u3011') { out += `${input[i]}</span>`; 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];
@@ -58,6 +71,7 @@ HTMLElement.prototype.parse = function() {
 
 	this.innerHTML = out;
 	this.classList.add("parsed");
+	if (input.length == 0) this.classList.add("empty");
 };
 
 function layout() {
diff --git a/anki-card-template/template.m4 b/anki-card-template/template.m4
index 477e797..01240ef 100644
--- a/anki-card-template/template.m4
+++ b/anki-card-template/template.m4
@@ -7,6 +7,7 @@
 <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="sentence-translation" class="parse parse-format native spoiler hidden">{{Complete sentence translation}}</span>
+<span id="tags" class="parse parse-tags">{{Tags}}</span>
 </div>
 </div>