js patch for :has() css selector (support older chromium still used in anki)

2 files changed, 12 insertions, 3 deletions

diff --git a/anki-card-template/card.css b/anki-card-template/card.css
index bc82186..857fb8b 100644
--- a/anki-card-template/card.css
+++ b/anki-card-template/card.css
@@ -90,8 +90,8 @@ body {
 }
 
 /* increase contrast of highlighted word */
-#card #sentence:has(b) > * { opacity: var(--sentence-highlight-contrast); }
-#card #sentence > b { opacity: 100%; }
+#card #sentence.has-b > * { opacity: var(--sentence-highlight-contrast); }
+#card #sentence.has-b > b { opacity: 100%; }
 
 /* body margin */
 body {
@@ -338,7 +338,7 @@ rt { user-select: none; }
 	display: inline;
 }
 
-#card #target-word-translation .definitions:has(.script-latin) .definition-separator::after { content: ", "; }
+#card #target-word-translation.has-script-latin .definitions .definition-separator::after { content: ", "; }
 
 /* mobile definitions style */
 .mobile #card.vertical-layout #target-word-translation .definitions {
diff --git a/anki-card-template/card.js b/anki-card-template/card.js
index 53e2625..2f1dbfb 100644
--- a/anki-card-template/card.js
+++ b/anki-card-template/card.js
@@ -321,6 +321,13 @@ function parse(input, classes) {
 	return nodes;
 };
 
+HTMLElement.prototype.has = function(fn) {
+	if (fn(this)) return true;
+	for (var child of this.children)
+		if (child.has(fn)) return true;
+	return false;
+};
+
 HTMLElement.prototype.parse = function() {
 	if (this.classList.contains("parsed")) return; // ignore already parsed elements
 
@@ -334,6 +341,8 @@ HTMLElement.prototype.parse = function() {
 		return;
 	}
 	this.innerHTML = nodes.map(n => n.data).join("");
+	if (this.id == "sentence" && this.has(n => n.tagName == "B")) this.classList.add("has-b");
+	if (this.id == "target-word-translation" && this.has(n => n.classList.contains("script-latin"))) this.classList.add("has-script-latin");
 };
 
 function layout() {