diff options
| -rw-r--r-- | anki-card-template/card.css | 20 | ||||
| -rw-r--r-- | anki-card-template/card.js | 33 |
2 files changed, 27 insertions, 26 deletions
diff --git a/anki-card-template/card.css b/anki-card-template/card.css index 2d86e39..2f6edaa 100644 --- a/anki-card-template/card.css +++ b/anki-card-template/card.css @@ -501,45 +501,41 @@ body { opacity: 0; border-radius: 8px; } - -.extra-writings { - position: relative; - display: inline-flex; -} .extra-count { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } - #back .kanji .extra-writings { + position: relative; + display: inline-flex; border-radius: 8px; padding: 0 20px; } +/* multiple writings hover/hold expand */ #back #target-word-reading:hover .kanji .extra-writings .writing, #back #target-word-reading:hover .kanji .extra-writings .writing-separator { grid-template-columns: 1fr; } #back #target-word-reading:hover .kanji .extra-writings .extra-count { opacity: 0; } #back #target-word-reading:hover .kanji .extra-writings .writing .inner, #back #target-word-reading:hover .kanji .extra-writings .writing-separator .inner { opacity: 1; } #back #target-word-reading:hover .kanji .extra-writings { padding: 0; } -#back #target-word-reading:hover .kanji .extra-writings { gap: var(--writing-margin); } #back #target-word-reading:hover .kanji .extra-writings::after { width: 100%; height: 100%; opacity: 0; } +/* multiple writings as tags (vertical mobile layout only) */ .mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings .writing::after { opacity: 20%; } .mobile #card.vertical-layout #back .kanji, -.mobile #card.vertical-layout #back .kanji .extra-writings { - flex-direction: column; - padding: 0.5em 0; -} +.mobile #card.vertical-layout #back .kanji .extra-writings { flex-direction: column; } +.mobile #card.vertical-layout #back .kanji { padding-top: 0.5em; } +.mobile #card.vertical-layout #back .kanji .extra-writings { padding: 0.5em 0; } .mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings { padding: 0; } .mobile #card.vertical-layout #back .kanji .extra-writings .writing { grid-template-rows: 0fr; } .mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings .writing { grid-template-rows: 1fr; } - .mobile #card.vertical-layout #back .kanji .writing-separator { display: none; } .mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings .writing { padding: 0 var(--writing-padding); } +.mobile #card.vertical-layout #back #target-word-reading:hover .kanji .extra-writings { gap: var(--writing-margin); } diff --git a/anki-card-template/card.js b/anki-card-template/card.js index 42a982e..3b94d2d 100644 --- a/anki-card-template/card.js +++ b/anki-card-template/card.js @@ -291,28 +291,33 @@ function setSpoiler(nodes) { return HTMLtoParseArr(`<span class="outer"><span class="inner">` + nodes.map(n => n.data).join("") + "</span></span>"); } -HTMLElement.prototype.parse = function() { - if (this.classList.contains("parsed")) return; // ignore already parsed elements - var input = this.innerHTML; // get raw data from anki field +function parse(input, classes) { var nodes = HTMLtoParseArr(input); // seperate user text from html formatting (keep html intact) // parsers - if (this.classList.contains("parse-format")) nodes = parseFormat(nodes); - if (this.classList.contains("parse-furigana")) nodes = parseFurigana(nodes); - if (this.classList.contains("parse-reading")) nodes = parseReading(nodes); - if (this.classList.contains("parse-indicators")) nodes = parseIndicators(nodes); - if (this.classList.contains("parse-tags")) nodes = parseTags(nodes); - if (this.classList.contains("parse-definitions")) nodes = parseDefinitions(nodes); - if (this.classList.contains("parse-script")) nodes = parseScript(nodes); - if (this.classList.contains("spoiler")) nodes = setSpoiler(nodes); - - // join parsed text with unmodified html + if (classes.includes("parse-format")) nodes = parseFormat(nodes); + if (classes.includes("parse-furigana")) nodes = parseFurigana(nodes); + if (classes.includes("parse-reading")) nodes = parseReading(nodes); + if (classes.includes("parse-indicators")) nodes = parseIndicators(nodes); + if (classes.includes("parse-tags")) nodes = parseTags(nodes); + if (classes.includes("parse-definitions")) nodes = parseDefinitions(nodes); + if (classes.includes("parse-script")) nodes = parseScript(nodes); + if (classes.includes("spoiler")) nodes = setSpoiler(nodes); + + return nodes; +}; + +HTMLElement.prototype.parse = function() { + if (this.classList.contains("parsed")) return; // ignore already parsed elements + + var nodes = parse(this.innerHTML, Array.from(this.classList)); + var out = nodes.map(n => n.data).join(""); this.innerHTML = out; this.classList.add("parsed"); if (nodes.reduce((current, n) => current + (n.type == "text" ? n.data.length : 0), 0) == 0) this.classList.add("empty"); // if innerHTML only contains empty html (no 'user' text) -}; +} function layout() { // set vertical layout on vertical displays (primarily mobile screens) |