hashirama/AnkiNoteTemplate
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

update japanese sentences

Browse source
This commit is contained in:
Ren Tatsumoto 2023-07-26 22:44:37 +03:00
parent 448b60242a
commit a2cbfb9301
3 changed files with 187 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
templates/Japanese sentences/Recognition/back.html
View file

@ -11,26 +11,31 @@
{{/SentEng}} {{/SentEng}}
</div> </div>
<div class="vocab">
{{VocabAudio}}{{SentAudio}}
<div class="reading" id="pitchpattern">{{VocabPitchPattern}}{{^VocabPitchPattern}}{{text:kana:VocabFurigana}}{{/VocabPitchPattern}}</div>
{{#VocabPitchNum}}<span class="tags" id="pitchnum">{{text:VocabPitchNum}}</span>{{/VocabPitchNum}}
{{#VocabKanji}}<div class="target_word">{{text:kanji:VocabKanji}}</div>{{/VocabKanji}}
</div>
{{#VocabDef}} {{#VocabDef}}
<div class="definitions">{{edit:furigana:VocabDef}}</div> <section class="headword_section">
<div class="vocab">
<span id="vocab-audio">{{VocabAudio}}</span>
<span id="sent-audio">{{SentAudio}}</span>
<div class="reading" id="pitchpattern">{{VocabPitchPattern}}{{^VocabPitchPattern}}{{text:kana:VocabFurigana}}{{/VocabPitchPattern}}</div>
{{#VocabPitchNum}}<span class="tags" id="pitchnum">{{text:VocabPitchNum}}</span>{{/VocabPitchNum}}
{{#VocabKanji}}<div class="target_word">{{text:kanji:VocabKanji}}</div>{{/VocabKanji}}
</div>
<div class="definitions">{{edit:furigana:VocabDef}}</div>
</section>
{{/VocabDef}} {{/VocabDef}}
{{#Notes}} {{#Notes}}
<div class="notes"> <details open class="notes">
<div class="tags">Notes</div> <summary>Notes</summary>
<div>{{furigana:Notes}}</div> <div>{{furigana:Notes}}</div>
</div> </details>
{{/Notes}} {{/Notes}}
{{#Image}} {{#Image}}
<div class="images">{{Image}}</div> <details class="images-details">
<summary>Image</summary>
<div class="images">{{Image}}</div>
</details>
{{/Image}} {{/Image}}
<hr> <hr>
@ -79,9 +84,18 @@
} }
} }
function removeAudioIfMarkedX() {
const pr = document.getElementById("vocab-audio");
if (pr && pr.innerText.match(/^[x×]/i)) {
pr.style.display = "none";
}
}
markPitch(); markPitch();
removePitchBrackets(); removePitchBrackets();
tweakRevealText(); tweakRevealText();
removeNoPitchAccentDataText(); removeNoPitchAccentDataText();
reformatMultiFurigana(); reformatMultiFurigana();
removeAudioIfMarkedX();
toggleImageDetails();
</script> </script>

65
templates/Japanese sentences/Recognition/front.html
View file

@ -1,6 +1,6 @@
<!-- <!--
mpvacious cards, version 15.0 mpvacious cards, version 15.0
Sun Mar 5 12:08:06 AM UTC 2023 Fri Jul 7 06:33:50 PM UTC 2023
--> -->
<div class="wrap"> <div class="wrap">
@ -14,7 +14,7 @@ Sun Mar 5 12:08:06 AM UTC 2023
</header> </header>
<div class="sent-center"> <div class="sent-center">
<div class="jpsentence on-front" lang="ja"> <div class="jpsentence" lang="ja">
{{edit:furigana:SentKanji}} {{edit:furigana:SentKanji}}
{{^SentKanji}} {{^SentKanji}}
<nokana>{{edit:kanji:SentFurigana}}</nokana> <nokana>{{edit:kanji:SentFurigana}}</nokana>
@ -22,7 +22,12 @@ Sun Mar 5 12:08:06 AM UTC 2023
</div> </div>
</div> </div>
{{#Image}}<div class="images on-front">{{Image}}</div>{{/Image}} {{#Image}}
<details class="images-on-front images-details">
<summary>Image</summary>
<div class="images">{{Image}}</div>
</details>
{{/Image}}
</div> <!-- /wrap --> </div> <!-- /wrap -->
<div style="display:none;"> <div style="display:none;">
@ -107,14 +112,6 @@ Sun Mar 5 12:08:06 AM UTC 2023
} }
} }
function setImageOnFront() {
const tags = `{{Tags}}`.split(" ");
const front_img = document.querySelector("div.images.on-front");
if (front_img && tags.includes("imageonfront")) {
front_img.classList.toggle("on-front");
}
}
function formatNewRuby(kanji, readings) { function formatNewRuby(kanji, readings) {
if (readings.length > 1) { if (readings.length > 1) {
return `<ruby>${formatNewRuby(kanji, readings.slice(0, -1))}</ruby><rt>${readings.slice(-1)}</rt>` return `<ruby>${formatNewRuby(kanji, readings.slice(0, -1))}</ruby><rt>${readings.slice(-1)}</rt>`
@ -125,15 +122,25 @@ Sun Mar 5 12:08:06 AM UTC 2023
function reformatMultiFurigana() { function reformatMultiFurigana() {
const separators = /[\s;,.、・。]+/iu; const separators = /[\s;,.、・。]+/iu;
document.querySelectorAll("ruby").forEach(ruby => { const max_inline = 2;
document.querySelectorAll("ruby:not(ruby ruby)").forEach(ruby => {
try { try {
const kanji = (ruby.querySelector("rb") || ruby.firstChild).textContent.trim() const kanji = (ruby.querySelector("rb") || ruby.firstChild).textContent.trim();
const readings = ruby.querySelector("rt").textContent const readings = ruby.querySelector("rt").textContent
.split(separators) .split(separators)
.map(str => str.trim()) .map(str => str.trim())
.filter(str => str.length) .filter(str => str.length);
if (readings.length > 1) { if (readings.length > 1) {
ruby.innerHTML = formatNewRuby(kanji, readings) ruby.innerHTML = formatNewRuby(kanji, readings.slice(0, max_inline));
}
if (readings.length > max_inline) {
const sequence = readings.map(reading => `<span class="tooltip-reading">${reading}</span>`).join('');
const wrapper = document.createElement("span");
wrapper.classList.add("tooltip");
wrapper.innerHTML += `<span class="tooltip-text">${sequence}</span>`;
ruby.replaceWith(wrapper);
wrapper.appendChild(ruby);
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
@ -141,8 +148,32 @@ Sun Mar 5 12:08:06 AM UTC 2023
}) })
} }
function isMobile() {
return document
.getElementsByTagName("html")[0]
.classList
.contains("mobile");
}
/* If a card has the "imageonfront" tag set, show images on the front side. */
function setVisibleImageOnFront() {
if (`{{Tags}}`.split(" ").includes("imageonfront")) {
for (const frontImg of document.querySelectorAll(".images-on-front")) {
frontImg.setAttribute("visible", true);
}
}
}
/* Hide images on mobile devices. */
function toggleImageDetails() {
for (const detailsElement of document.querySelectorAll(".images-details")) {
detailsElement.toggleAttribute("open", !isMobile());
}
}
markPitch(); markPitch();
splitTagDiv(); splitTagDiv();
setImageOnFront();
reformatMultiFurigana(); reformatMultiFurigana();
</script> setVisibleImageOnFront();
toggleImageDetails();
</script>

139
templates/Japanese sentences/template.css
View file

@ -48,6 +48,7 @@ b,
strong { strong {
font-weight: 600; font-weight: 600;
} }
.jpsentence b, .jpsentence b,
.jpsentence strong { .jpsentence strong {
color: #f026cb; color: #f026cb;
@ -181,7 +182,9 @@ header>div:not(:last-child) {
/* Hide front side when the back is shown. */ /* Hide front side when the back is shown. */
.fside .jpsentence, .fside .jpsentence,
.fside .images { .fside .sent-center,
.fside .images,
.fside .images-details {
display: none; display: none;
} }
@ -191,15 +194,15 @@ div.ensentence>a.hint {
color: #555; color: #555;
font-size: 14px; font-size: 14px;
display: block; display: block;
border: 1px solid #ccc; border: 1px solid hsl(0deg 80% 50% / 15%);
border-radius: 2.2px; border-radius: 2.2px;
padding: 2px 10px; padding: 2px 10px;
margin: 4px 0; margin: 0.4rem 0;
} }
div.ensentence>a.hint:hover { div.ensentence>a.hint:hover {
color: #111; color: hsl(20deg 100% 20% / 80%);
background-color: rgba(0, 0, 0, 0.03); background-color: hsl(0deg 80% 50% / 3%);
} }
/* Definition */ /* Definition */
@ -322,7 +325,7 @@ footer>a:not(:last-child)::after {
.vocab { .vocab {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
margin-top: 16px; margin-top: 2px;
align-items: center; align-items: center;
gap: 5px; gap: 5px;
} }
@ -394,7 +397,7 @@ footer>a:not(:last-child)::after {
/* Images on front, toggled by JavaScript if "imageonfront" tag is set. */ /* Images on front, toggled by JavaScript if "imageonfront" tag is set. */
.images.on-front { .images-on-front:not([visible="true"]) {
display: none; display: none;
} }
@ -466,6 +469,61 @@ ol {
content: ""; content: "";
} }
/* Fix: Don't select furigana */
ruby rt {
user-select: none;
}
.jpsentence {
position: relative;
}
.jpsentence>.overlay {
position: absolute;
/* Some versions of Anki don't understand inset. */
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.jpsentence>.background,
.jpsentence>.overlay ruby rt {
visibility: hidden;
}
.jpsentence>.background ruby rt {
visibility: visible;
}
/* Outline editable fields */
div[contenteditable="true"] {
background-color: white;
border: 1px solid gray;
padding: 3px;
box-shadow: 10px 5px 5px gray;
}
/* Details */
details,
.headword_section {
background-color: hsl(0deg 80% 50% / 3%);
border-radius: 4px;
padding: 3px;
margin-block-end: 0.4rem;
border: 1px solid hsl(0deg 80% 50% / 15%);
;
}
summary {
font-size: 18px;
color: hsl(0 80% 10% / 70%);
font-weight: 500;
}
/* Night Mode */ /* Night Mode */
.nightMode.card { .nightMode.card {
@ -475,6 +533,7 @@ ol {
.nightMode .wrap { .nightMode .wrap {
color: #ffffff; color: #ffffff;
background-color: inherit; background-color: inherit;
border-color: #6d6868;
} }
.nightMode .tags { .nightMode .tags {
@ -522,39 +581,67 @@ ol {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
} }
/* Fix: Don't select furigana */ .nightMode summary {
color: hsl(0 80% 100% / 70%);
ruby rt {
user-select: none;
} }
.jpsentence { /* Tooltips */
.tooltip {
position: relative; position: relative;
display: inline-block;
} }
.jpsentence>.overlay { .tooltip::after {
content: "";
display: block;
position: absolute; position: absolute;
/* Some versions of Anki don't understand inset. */ bottom: 5px;
top: 0;
right: 0; right: 0;
bottom: 0;
left: 0; left: 0;
border-bottom: 2px dotted hsl(0 80% 40% / 20%);
} }
.jpsentence>.background, .tooltip>.tooltip-text {
.jpsentence>.overlay ruby rt { font-weight: 500;
font-size: 18px;
visibility: hidden; visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: left;
border-radius: 6px;
padding: 0 2px;
position: absolute;
z-index: 999;
top: calc(100% + 6px);
left: 50%;
margin-left: -60px;
word-break: keep-all;
} }
.jpsentence>.background ruby rt { .tooltip .tooltip-text::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
.tooltip:hover .tooltip-text {
visibility: visible; visibility: visible;
} }
/* Outline editable fields */ .tooltip>.tags {
position: absolute;
div[contenteditable="true"] { top: 0px;
background-color: white; right: -9px;
border: 1px solid gray; }
padding: 3px;
box-shadow: 10px 5px 5px gray; .tooltip-text>.tooltip-reading:not(:last-child)::after {
content: "; ";
color: #f6a192;
} }