diff options
| -rw-r--r-- | anki-card-template/card.css | 97 | ||||
| -rw-r--r-- | anki-card-template/card.html | 8 | ||||
| -rw-r--r-- | 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 @@ <div id="card" class="back vertical-layout"> <div id="front"> -<span id="sentence" class="parse parse-furigana parse-format foreign">[実](じつ)は[今](いま)、この[里](さと)は[水](みず)の{神}(しん){獣}(じゅう)ヴァ・ルッタのせいで[存亡](そんぼう)の[危機](きき)に*[見舞](みま)われておる*ゾヨ\n\*escape\* (<i>test</i>)</span> +<span id="sentence" class="parse parse-furigana parse-format foreign"></span> </div> <hr id="separator"> <div id="back"> -<span id="target-word-reading" class="parse parse-format parse-reading parse-indicators parse-script foreign">見舞われる【み・まわれる】[0] (note)</span> -<span id="target-word-translation" class="parse parse-format parse-definitions parse-indicators parse-script native">[verb] To experi\ence {crisis}, [な-adj] to <span class="inline spoiler hidden parse">undergo</span>, [テスト] to suffer {test,テスト,test} (this is, a single item)\, and still is here, [ば\-test] but not here</span> -<span id="sentence-translation" class="parse parse-format native spoiler parse-script hidden">This village is now in danger of *extinction* because of _Vah Ruta_, the water divine beast.</span> +<span id="target-word-reading" class="parse parse-format parse-reading parse-indicators parse-script foreign">書き方１、書き方２,書き方３【よみ・かた】[0] (note)</span> +<span id="target-word-translation" class="parse parse-format parse-definitions parse-indicators parse-script native"></span> +<span id="sentence-translation" class="parse parse-format native spoiler parse-script hidden"></span> <span id="tags" class="parse parse-tags">ゼルダの伝説 ブレス・オブ・ザ・ワイルド</span> </div> 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 += `</span><span class="reading"><span class="bracket">${input[i]}</span><span class="syllable">`; continue; } + if (mode == "writing" && input[i] == '\u3010') { + mode = "reading"; + for(let i = 0; i < writings.length; i++) { + if (i == 1) out += `<span class="extra-writings">`; + if (i > 0) out += `<span class="writing-separator">\u3001</span>`; + var classes = ["writing"]; + if (i == 0) classes.push("first") + out += `<span class="${classes.join(' ')}"><span class="inner">${writings[i].trim()}</span></span>`; + if (writings.length > 1 && i == writings.length - 1) out += `<span class="extra-count">+${writings.length - 1}</span></span>`; + } + writings = []; writingIndex = 0; + out += `</span><span class="reading"><span class="bracket">${input[i]}</span><span class="syllable">`; + continue; + } // reading closing bracket - if (input[i] == '\u3011') { out += `</span><span class="bracket">${input[i]}</span></span>`; continue; } + if (mode == "reading" && 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 (mode == "reading" && input[i] == '\u30fb') { out += `</span><span class="syllable-separator">${input[i]}</span><span class="syllable">`; 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; }); |