From 0e03be56a167c5266d4407594b7481cee327273c Mon Sep 17 00:00:00 2001 From: lonkaars Date: Tue, 31 Jan 2023 18:19:30 +0100 Subject: WIP multiple writings support --- anki-card-template/card.css | 97 +++++++++++++++++++++++++++++++++++++++++++- anki-card-template/card.html | 8 ++-- anki-card-template/card.js | 27 ++++++++++-- 3 files changed, 122 insertions(+), 10 deletions(-) diff --git a/anki-card-template/card.css b/anki-card-template/card.css index 0fc84ad..c7feb72 100644 --- a/anki-card-template/card.css +++ b/anki-card-template/card.css @@ -23,6 +23,7 @@ --global-transition-scale: 1.0; /* transition duration multiplier */ --indicator-opacity: 50%; /* opacity of indicators in translations (word type) */ --pitch-accent-opacity: 70%; /* opacity of pitch accent indicator in reading field */ + --reading-expand-transition: calc(300ms * var(--global-transition-scale)); /* hover expand transition duration for multiple readings */ } .mobile #card { --text-block-padding: 0.5em; @@ -299,8 +300,9 @@ body { /* make sure to hide empty fields */ .parse.empty { display: none !important; } -/* don't break syllables in the reading field on vertical mobile */ -.mobile #card.vertical-layout #back #target-word-reading .reading .syllable { white-space: nowrap; } +/* don't break syllables in the reading field */ +#card #back #target-word-reading .kanji .writing, +#card #back #target-word-reading .reading .syllable { white-space: nowrap; } /* subtile style */ .subtile { @@ -431,3 +433,94 @@ body { #target-word-translation .indicator .stamp::before, #target-word-translation .indicator > *:not(.stamp), #target-word-translation .indicator::after { opacity: var(--indicator-opacity); } + +/* collapse kanji with multiple writings */ +#back .kanji { + display: inline-flex; + --writing-padding: 4px; + --writing-margin: 4px; +} +#back .kanji .writing-separator { + display: none; +} +#back .kanji .extra-writings .extra-count { + transition-property: opacity; + transition-duration: var(--reading-expand-transition); + opacity: 1; + color: white; + font-size: 75%; + font-weight: bold; +} +#back .kanji .extra-writings { + transition-property: padding; + transition-duration: var(--reading-expand-transition); + position: relative; + padding: 0 20px; +} +#back .kanji .extra-writings::after { + content: ""; + position: absolute; + border-radius: 8px; + background-color: currentColor; + transition-property: inset, opacity; + transition-duration: var(--reading-expand-transition); + opacity: 80%; + inset: 4px 4px; + z-index: -1; +} +#back .kanji .extra-writings .writing { + margin: 0; + position: relative; + overflow: hidden; + transition-property: padding, margin, grid-template-rows, grid-template-columns; + transition-duration: var(--reading-expand-transition); + display: grid; + grid-template-rows: 1fr; + grid-template-columns: 0fr; +} +#back .kanji .extra-writings .writing .inner { + min-height: 0; + min-width: 0; + position: relative; + transition: opacity var(--reading-expand-transition); + opacity: 0; + left: 50%; + transform: translate(-50%, 0%); +} +#back .kanji .extra-writings .writing::after { + content: ""; + position: absolute; + inset: 0; + background-color: currentColor; + transition: opacity var(--reading-expand-transition); + 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 { + border-radius: 8px; + padding: 0 20px; +} + +#back #target-word-reading:hover .kanji .extra-writings .writing { + grid-template-columns: 1fr; + margin: 0 var(--writing-margin); + padding: 0 var(--writing-padding); +} +#back #target-word-reading:hover .kanji .extra-writings .writing .inner { opacity: 1; } +#back #target-word-reading:hover .kanji .extra-writings .extra-count { opacity: 0; } +#back #target-word-reading:hover .kanji .extra-writings { padding: 0; } +#back #target-word-reading:hover .kanji .extra-writings::after { inset: 0px 4px; } +#back #target-word-reading:hover .kanji .extra-writings::after { opacity: 0; } +#back #target-word-reading:hover .kanji .extra-writings .writing::after { opacity: 20%; } diff --git a/anki-card-template/card.html b/anki-card-template/card.html index dbc6028..a3bb81a 100644 --- a/anki-card-template/card.html +++ b/anki-card-template/card.html @@ -22,13 +22,13 @@
-[実](じつ)は[今](いま)、この[里](さと)は[水](みず)の{神}(しん){獣}(じゅう)ヴァ・ルッタのせいで[存亡](そんぼう)の[危機](きき)に*[見舞](みま)われておる*ゾヨ\n\*escape\* (test) +
-見舞われる【み・まわれる】[0] (note) -[verb] To experi\ence {crisis}, [な-adj] to , [テスト] to suffer {test,テスト,test} (this is, a single item)\, and still is here, [ば\-test] but not here - +書き方１、書き方２,書き方３【よみ・かた】[0] (note) + + ゼルダの伝説 ブレス・オブ・ザ・ワイルド
diff --git a/anki-card-template/card.js b/anki-card-template/card.js index 3cc7bee..5e10a6c 100644 --- a/anki-card-template/card.js +++ b/anki-card-template/card.js @@ -165,6 +165,9 @@ function parseReading(nodes) { var note_head = 0; var note_tail = 0; var out = ""; // output html + var writings = [""]; + var writingIndex = 0; + var mode = "writing"; // parsing mode ("writing" or "reading") for (var i = 0; i < input.length; i++) { if (i == 0) { @@ -182,13 +185,29 @@ function parseReading(nodes) { // ignore note if parsed else if (i == note_head) { i = note_tail - 1; continue; } // reading open bracket - if (input[i] == '\u3010') { out += `${input[i]}`; continue; } + if (mode == "writing" && input[i] == '\u3010') { + mode = "reading"; + for(let i = 0; i < writings.length; i++) { + if (i == 1) out += ``; + if (i > 0) out += `\u3001`; + var classes = ["writing"]; + if (i == 0) classes.push("first") + out += `${writings[i].trim()}`; + if (writings.length > 1 && i == writings.length - 1) out += `+${writings.length - 1}`; + } + writings = []; writingIndex = 0; + out += `${input[i]}`; + continue; + } // reading closing bracket - if (input[i] == '\u3011') { out += `${input[i]}`; continue; } + if (mode == "reading" && input[i] == '\u3011') { out += `${input[i]}`; continue; } // interpunct (syllable separator) - if (input[i] == '\u30fb') { out += `${input[i]}`; continue; } + if (mode == "reading" && input[i] == '\u30fb') { out += `${input[i]}`; continue; } + // comma (writing separator) + if (mode == "writing" && (input[i] == ',' || input[i] == "\u3001")) { writings[++writingIndex] = ""; continue; } - out += input[i]; + if (mode == "writing") writings[writingIndex] += input[i]; + else out += input[i]; } return out; }); -- cgit v1.2.3