update japanese sentences

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

View file

@ -11,26 +11,31 @@
{{/SentEng}}
</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}}
<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}}
{{#Notes}}
<div class="notes">
<div class="tags">Notes</div>
<details open class="notes">
<summary>Notes</summary>
<div>{{furigana:Notes}}</div>
</div>
</details>
{{/Notes}}
{{#Image}}
<div class="images">{{Image}}</div>
<details class="images-details">
<summary>Image</summary>
<div class="images">{{Image}}</div>
</details>
{{/Image}}
<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();
removePitchBrackets();
tweakRevealText();
removeNoPitchAccentDataText();
reformatMultiFurigana();
removeAudioIfMarkedX();
toggleImageDetails();
</script>

View file

@ -1,6 +1,6 @@
<!--
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">
@ -14,7 +14,7 @@ Sun Mar 5 12:08:06 AM UTC 2023
</header>
<div class="sent-center">
<div class="jpsentence on-front" lang="ja">
<div class="jpsentence" lang="ja">
{{edit:furigana:SentKanji}}
{{^SentKanji}}
<nokana>{{edit:kanji:SentFurigana}}</nokana>
@ -22,7 +22,12 @@ Sun Mar 5 12:08:06 AM UTC 2023
</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 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) {
if (readings.length > 1) {
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() {
const separators = /[\s;,.、・。]+/iu;
document.querySelectorAll("ruby").forEach(ruby => {
const max_inline = 2;
document.querySelectorAll("ruby:not(ruby ruby)").forEach(ruby => {
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
.split(separators)
.map(str => str.trim())
.filter(str => str.length)
.filter(str => str.length);
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) {
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();
splitTagDiv();
setImageOnFront();
reformatMultiFurigana();
setVisibleImageOnFront();
toggleImageDetails();
</script>

View file

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