Add support for displaying pitch accents

This commit is contained in:
toasted-nutbread 2020-03-01 14:15:28 -05:00
parent 2d7214ce60
commit 97a520cc15
5 changed files with 277 additions and 5 deletions

View File

@ -59,12 +59,14 @@ h2 { border-bottom-color: #2f2f2f; }
color: #666666; color: #666666;
} }
.term-definition-container, .term-definition-list,
.kanji-glossary-container { .term-pitch-accent-group-list,
.kanji-glossary-list {
color: #888888; color: #888888;
} }
.term-glossary, .term-glossary,
.term-pitch-accent,
.kanji-glossary { .kanji-glossary {
color: #d4d4d4; color: #d4d4d4;
} }
@ -74,3 +76,5 @@ h2 { border-bottom-color: #2f2f2f; }
background-color: #d4d4d4; background-color: #d4d4d4;
color: #1e1e1e; color: #1e1e1e;
} }
.term-pitch-accent-character:before { border-color: #ffffff; }

View File

@ -59,12 +59,14 @@ h2 { border-bottom-color: #eeeeee; }
color: #999999; color: #999999;
} }
.term-definition-container, .term-definition-list,
.kanji-glossary-container { .term-pitch-accent-group-list,
.kanji-glossary-list {
color: #777777; color: #777777;
} }
.term-glossary, .term-glossary,
.term-pitch-accent,
.kanji-glossary { .kanji-glossary {
color: #000000; color: #000000;
} }
@ -74,3 +76,5 @@ h2 { border-bottom-color: #eeeeee; }
background-color: #333333; background-color: #333333;
color: #ffffff; color: #ffffff;
} }
.term-pitch-accent-character:before { border-color: #000000; }

View File

@ -436,6 +436,107 @@ button.action-button {
} }
/*
* Pitch accent styles
*/
.term-pitch-accent-group-list {
margin: 0;
padding: 0;
list-style-type: none;
}
.term-pitch-accent-group-list:not([data-count="0"]):not([data-count="1"]) {
padding-left: 1.4em;
list-style-type: decimal;
}
.term-pitch-accent-list {
margin: 0;
padding: 0;
list-style-type: none;
display: inline;
}
.term-pitch-accent-list:not([data-count="0"]):not([data-count="1"]) {
padding-left: 1.4em;
list-style-type: circle;
display: block;
}
.term-pitch-accent {
display: inline;
line-height: 1.5em;
}
.term-pitch-accent-list:not([data-count="0"]):not([data-count="1"])>.term-pitch-accent {
display: list-item;
}
.term-pitch-accent-group-tag-list {
margin-right: 0.375em;
}
.entry[data-unique-expression-count="1"] .term-pitch-accent-expression-list {
display: none;
}
.term-pitch-accent-expression:not(:last-of-type):after {
content: "\3001";
}
.term-pitch-accent-expression:last-of-type:after {
content: "\FF1A";
}
.term-pitch-accent-tag-list:not([data-count="0"]) {
margin-right: 0.375em;
}
.term-special-tags>.pitches {
display: inline;
}
.term-pitch-accent-character {
display: inline-block;
position: relative;
}
.term-pitch-accent-character[data-pitch='high']:before {
content: "";
display: block;
user-select: none;
pointer-events: none;
position: absolute;
top: 0.1em;
left: 0;
right: 0;
height: 0;
border-top-width: 0.1em;
border-top-style: solid;
}
.term-pitch-accent-character[data-pitch='high'][data-pitch-next='low']:before {
right: -0.1em;
height: 0.4em;
border-right-width: 0.1em;
border-right-style: solid;
}
.term-pitch-accent-character[data-pitch='high'][data-pitch-next='low'] {
padding-right: 0.1em;
margin-right: 0.1em;
}
.term-pitch-accent-position:before {
content: " [";
}
.term-pitch-accent-position:after {
content: "]";
}
.term-pitch-accent-details {
display: inline-block;
height: 0;
padding: 0 0.25em;
vertical-align: middle;
}
/* /*
* Kanji * Kanji
*/ */

View File

@ -19,6 +19,7 @@
</div> </div>
<div class="term-entry-body"> <div class="term-entry-body">
<div class="term-entry-body-section term-pitch-accent-container"><h2 class="term-entry-body-section-header term-pitch-accent-header">Pitch Accents</h2><ol class="term-entry-body-section-content term-pitch-accent-group-list"></ol></div> <div class="term-entry-body-section term-pitch-accent-container"><h2 class="term-entry-body-section-header term-pitch-accent-header">Pitch Accents</h2><ol class="term-entry-body-section-content term-pitch-accent-group-list"></ol></div>
<div class="term-entry-body-section term-definition-container"><h2 class="term-entry-body-section-header term-definition-header">Definitions</h2><ol class="term-entry-body-section-content term-definition-list"></ol></div>
</div> </div>
<pre class="debug-info"></pre> <pre class="debug-info"></pre>
</div></template> </div></template>
@ -36,6 +37,11 @@
<template id="term-glossary-item-template"><li class="term-glossary-item"><span class="term-glossary-separator"> </span><span class="term-glossary"></span></li></template> <template id="term-glossary-item-template"><li class="term-glossary-item"><span class="term-glossary-separator"> </span><span class="term-glossary"></span></li></template>
<template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></template> <template id="term-reason-template"><span class="term-reason"></span><span class="term-reason-separator"> </span></template>
<template id="term-pitch-accent-group-template"><li class="term-pitch-accent-group"><span class="term-pitch-accent-group-tag-list tag-list"></span><ul class="term-pitch-accent-list"></ul></li></template>
<template id="term-pitch-accent-expression-template"><span class="term-pitch-accent-expression"></span></template>
<template id="term-pitch-accent-template"><li class="term-pitch-accent"><span class="term-pitch-accent-tag-list tag-list"></span><span class="term-pitch-accent-expression-list"></span><span class="term-pitch-accent-characters"></span><span class="term-pitch-accent-position"></span></li></template>
<template id="term-pitch-accent-character-template"><span class="term-pitch-accent-character"><span class="term-pitch-accent-character-inner"></span></span></template>
<template id="kanji-entry-template"><div class="entry" data-type="kanji"> <template id="kanji-entry-template"><div class="entry" data-type="kanji">
<div class="entry-header1"> <div class="entry-header1">
<div class="entry-header2"> <div class="entry-header2">

View File

@ -37,9 +37,14 @@ class DisplayGenerator {
const expressionsContainer = node.querySelector('.term-expression-list'); const expressionsContainer = node.querySelector('.term-expression-list');
const reasonsContainer = node.querySelector('.term-reasons'); const reasonsContainer = node.querySelector('.term-reasons');
const pitchesContainer = node.querySelector('.term-pitch-accent-group-list');
const frequenciesContainer = node.querySelector('.frequencies'); const frequenciesContainer = node.querySelector('.frequencies');
const definitionsContainer = node.querySelector('.term-definition-list'); const definitionsContainer = node.querySelector('.term-definition-list');
const debugInfoContainer = node.querySelector('.debug-info'); const debugInfoContainer = node.querySelector('.debug-info');
const bodyContainer = node.querySelector('.term-entry-body');
const pitches = DisplayGenerator._getPitchInfos(details);
const pitchCount = pitches.reduce((i, v) => i + v[1].length, 0);
const expressionMulti = Array.isArray(details.expressions); const expressionMulti = Array.isArray(details.expressions);
const definitionMulti = Array.isArray(details.definitions); const definitionMulti = Array.isArray(details.definitions);
@ -52,9 +57,12 @@ class DisplayGenerator {
node.dataset.expressionCount = `${expressionCount}`; node.dataset.expressionCount = `${expressionCount}`;
node.dataset.definitionCount = `${definitionCount}`; node.dataset.definitionCount = `${definitionCount}`;
node.dataset.uniqueExpressionCount = `${uniqueExpressionCount}`; node.dataset.uniqueExpressionCount = `${uniqueExpressionCount}`;
node.dataset.pitchAccentDictionaryCount = `${pitches.length}`;
node.dataset.pitchAccentCount = `${pitchCount}`;
bodyContainer.dataset.sectionCount = `${ bodyContainer.dataset.sectionCount = `${
(definitionCount > 0 ? 1 : 0) (definitionCount > 0 ? 1 : 0) +
(pitches.length > 0 ? 1 : 0)
}`; }`;
const termTags = details.termTags; const termTags = details.termTags;
@ -64,6 +72,7 @@ class DisplayGenerator {
DisplayGenerator._appendMultiple(expressionsContainer, this.createTermExpression.bind(this), expressions, [[details, termTags]]); DisplayGenerator._appendMultiple(expressionsContainer, this.createTermExpression.bind(this), expressions, [[details, termTags]]);
DisplayGenerator._appendMultiple(reasonsContainer, this.createTermReason.bind(this), details.reasons); DisplayGenerator._appendMultiple(reasonsContainer, this.createTermReason.bind(this), details.reasons);
DisplayGenerator._appendMultiple(frequenciesContainer, this.createFrequencyTag.bind(this), details.frequencies); DisplayGenerator._appendMultiple(frequenciesContainer, this.createFrequencyTag.bind(this), details.frequencies);
DisplayGenerator._appendMultiple(pitchesContainer, this.createPitches.bind(this), pitches);
DisplayGenerator._appendMultiple(definitionsContainer, this.createTermDefinitionItem.bind(this), details.definitions, [details]); DisplayGenerator._appendMultiple(definitionsContainer, this.createTermDefinitionItem.bind(this), details.definitions, [details]);
if (debugInfoContainer !== null) { if (debugInfoContainer !== null) {
@ -270,6 +279,73 @@ class DisplayGenerator {
return node; return node;
} }
createPitches(details) {
if (!this._termPitchAccentStaticTemplateIsSetup) {
this._termPitchAccentStaticTemplateIsSetup = true;
const t = this._templateHandler.instantiate('term-pitch-accent-static');
document.head.appendChild(t);
}
const [dictionary, dictionaryPitches] = details;
const node = this._templateHandler.instantiate('term-pitch-accent-group');
node.dataset.dictionary = dictionary;
node.dataset.pitchesMulti = 'true';
node.dataset.pitchesCount = `${dictionaryPitches.length}`;
const tag = this.createTag({notes: '', name: dictionary, category: 'dictionary'});
node.querySelector('.term-pitch-accent-group-tag-list').appendChild(tag);
const n = node.querySelector('.term-pitch-accent-list');
DisplayGenerator._appendMultiple(n, this.createPitch.bind(this), dictionaryPitches);
return node;
}
createPitch(details) {
const {expressions, reading, position, tags} = details;
const morae = DisplayGenerator._jpGetKanaMorae(reading);
const node = this._templateHandler.instantiate('term-pitch-accent');
node.dataset.pitchAccentPosition = `${position}`;
node.dataset.tagCount = `${tags.length}`;
let n = node.querySelector('.term-pitch-accent-position');
n.textContent = `${position}`;
n = node.querySelector('.term-pitch-accent-tag-list');
DisplayGenerator._appendMultiple(n, this.createTag.bind(this), tags);
n = node.querySelector('.term-pitch-accent-expression-list');
DisplayGenerator._appendMultiple(n, this.createPitchExpression.bind(this), expressions);
n = node.querySelector('.term-pitch-accent-characters');
for (let i = 0, ii = morae.length; i < ii; ++i) {
const mora = morae[i];
const highPitch = DisplayGenerator._jpIsMoraPitchHigh(i, position);
const highPitchNext = DisplayGenerator._jpIsMoraPitchHigh(i + 1, position);
const n1 = this._templateHandler.instantiate('term-pitch-accent-character');
const n2 = n1.querySelector('.term-pitch-accent-character-inner');
n1.dataset.position = `${i}`;
n1.dataset.pitch = highPitch ? 'high' : 'low';
n1.dataset.pitchNext = highPitchNext ? 'high' : 'low';
n2.textContent = mora;
n.appendChild(n1);
}
return node;
}
createPitchExpression(expression) {
const node = this._templateHandler.instantiate('term-pitch-accent-expression');
node.textContent = expression;
return node;
}
createFrequencyTag(details) { createFrequencyTag(details) {
const node = this._templateHandler.instantiate('tag-frequency'); const node = this._templateHandler.instantiate('tag-frequency');
@ -356,4 +432,85 @@ class DisplayGenerator {
container.appendChild(document.createTextNode(parts[i])); container.appendChild(document.createTextNode(parts[i]));
} }
} }
static _getPitchInfos(definition) {
const results = new Map();
const expressions = definition.expressions;
const sources = Array.isArray(expressions) ? expressions : [definition];
for (const {pitches: expressionPitches, expression} of sources) {
for (const {reading, pitches, dictionary} of expressionPitches) {
let dictionaryResults = results.get(dictionary);
if (typeof dictionaryResults === 'undefined') {
dictionaryResults = [];
results.set(dictionary, dictionaryResults);
}
for (const {position, tags} of pitches) {
let pitchInfo = DisplayGenerator._findExistingPitchInfo(reading, position, tags, dictionaryResults);
if (pitchInfo === null) {
pitchInfo = {expressions: new Set(), reading, position, tags};
dictionaryResults.push(pitchInfo);
}
pitchInfo.expressions.add(expression);
}
}
}
return [...results.entries()];
}
static _findExistingPitchInfo(reading, position, tags, pitchInfoList) {
for (const pitchInfo of pitchInfoList) {
if (
pitchInfo.reading === reading &&
pitchInfo.position === position &&
DisplayGenerator._areTagListsEqual(pitchInfo.tags, tags)
) {
return pitchInfo;
}
}
return null;
}
static _areTagListsEqual(tagList1, tagList2) {
const ii = tagList1.length;
if (tagList2.length !== ii) { return false; }
for (let i = 0; i < ii; ++i) {
const tag1 = tagList1[i];
const tag2 = tagList2[i];
if (tag1.name !== tag2.name || tag1.dictionary !== tag2.dictionary) {
return false;
}
}
return true;
}
static _jpGetKanaMorae(text) {
// This function splits Japanese kana reading into its individual mora
// components. It is assumed that the text is well-formed.
const smallKanaSet = DisplayGenerator._smallKanaSet;
const morae = [];
let i;
for (const c of text) {
if (smallKanaSet.has(c) && (i = morae.length) > 0) {
morae[i - 1] += c;
} else {
morae.push(c);
}
}
return morae;
}
static _jpCreateSmallKanaSet() {
return new Set(Array.from('ぁぃぅぇぉゃゅょゎァィゥェォャュョヮ'));
}
static _jpIsMoraPitchHigh(moraIndex, pitchAccentPosition) {
return pitchAccentPosition === 0 ? (moraIndex > 0) : (moraIndex < pitchAccentPosition);
}
} }
DisplayGenerator._smallKanaSet = DisplayGenerator._jpCreateSmallKanaSet();