Merge pull request #438 from toasted-nutbread/display-generator-refactoring
Display generator refactoring
This commit is contained in:
commit
82f8397000
@ -297,13 +297,13 @@ button.action-button {
|
|||||||
content: "\3001";
|
content: "\3001";
|
||||||
}
|
}
|
||||||
|
|
||||||
.term-expression-list[data-multi=true]>.term-expression:last-of-type:after {
|
.entry[data-expression-multi=true] .term-expression-list>.term-expression:last-of-type:after {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
content: "\3000";
|
content: "\3000";
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.term-expression-list[data-multi=true] .term-expression-details {
|
.entry[data-expression-multi=true] .term-expression-list .term-expression-details {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 0;
|
width: 0;
|
||||||
@ -312,21 +312,21 @@ button.action-button {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.term-expression-list[data-multi=true] .term-expression:hover .term-expression-details {
|
.entry[data-expression-multi=true] .term-expression:hover .term-expression-details {
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.term-expression-list[data-multi=true] .term-expression-details>.action-play-audio {
|
.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.action-play-audio {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
bottom: 0.5em;
|
bottom: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.term-expression-list:not([data-multi=true]) .term-expression-details>.action-play-audio {
|
.entry:not([data-expression-multi=true]) .term-expression-list .term-expression-details>.action-play-audio {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.term-expression-list[data-multi=true] .term-expression-details>.tags {
|
.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.tags {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -334,7 +334,7 @@ button.action-button {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.term-expression-list[data-multi=true] .term-expression-details>.frequencies {
|
.entry[data-expression-multi=true] .term-expression-list .term-expression-details>.frequencies {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -364,19 +364,19 @@ button.action-button {
|
|||||||
list-style-type: circle;
|
list-style-type: circle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.term-definition-only-list[data-count="0"] {
|
.term-definition-disambiguation-list[data-count="0"] {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.term-definition-only-list:before {
|
.term-definition-disambiguation-list:before {
|
||||||
content: "(";
|
content: "(";
|
||||||
}
|
}
|
||||||
|
|
||||||
.term-definition-only-list:after {
|
.term-definition-disambiguation-list:after {
|
||||||
content: " only)";
|
content: " only)";
|
||||||
}
|
}
|
||||||
|
|
||||||
.term-definition-only+.term-definition-only:before {
|
.term-definition-disambiguation+.term-definition-disambiguation:before {
|
||||||
content: ", ";
|
content: ", ";
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -398,7 +398,7 @@ button.action-button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
:root[data-compact-glossaries=true] .term-definition-tag-list,
|
:root[data-compact-glossaries=true] .term-definition-tag-list,
|
||||||
:root[data-compact-glossaries=true] .term-definition-only-list:not([data-count="0"]) {
|
:root[data-compact-glossaries=true] .term-definition-disambiguation-list:not([data-count="0"]) {
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -30,10 +30,10 @@
|
|||||||
</div></div></template>
|
</div></div></template>
|
||||||
<template id="term-definition-item-template"><li class="term-definition-item">
|
<template id="term-definition-item-template"><li class="term-definition-item">
|
||||||
<div class="term-definition-tag-list tag-list"></div>
|
<div class="term-definition-tag-list tag-list"></div>
|
||||||
<div class="term-definition-only-list"></div>
|
<div class="term-definition-disambiguation-list"></div>
|
||||||
<ul class="term-glossary-list"></ul>
|
<ul class="term-glossary-list"></ul>
|
||||||
</li></template>
|
</li></template>
|
||||||
<template id="term-definition-only-template"><span class="term-definition-only"></span></template>
|
<template id="term-definition-disambiguation-template"><span class="term-definition-disambiguation"></span></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-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>
|
||||||
|
|
||||||
|
@ -43,13 +43,15 @@ class DisplayGenerator {
|
|||||||
const debugInfoContainer = node.querySelector('.debug-info');
|
const debugInfoContainer = node.querySelector('.debug-info');
|
||||||
const bodyContainer = node.querySelector('.term-entry-body');
|
const bodyContainer = node.querySelector('.term-entry-body');
|
||||||
|
|
||||||
const pitches = DisplayGenerator._getPitchInfos(details);
|
const {termTags, expressions, definitions} = details;
|
||||||
|
|
||||||
|
const pitches = this._getPitchInfos(details);
|
||||||
const pitchCount = pitches.reduce((i, v) => i + v[1].length, 0);
|
const pitchCount = pitches.reduce((i, v) => i + v[1].length, 0);
|
||||||
|
|
||||||
const expressionMulti = Array.isArray(details.expressions);
|
const expressionMulti = Array.isArray(expressions);
|
||||||
const definitionMulti = Array.isArray(details.definitions);
|
const definitionMulti = Array.isArray(definitions);
|
||||||
const expressionCount = expressionMulti ? details.expressions.length : 1;
|
const expressionCount = expressionMulti ? expressions.length : 1;
|
||||||
const definitionCount = definitionMulti ? details.definitions.length : 1;
|
const definitionCount = definitionMulti ? definitions.length : 1;
|
||||||
const uniqueExpressionCount = Array.isArray(details.expression) ? new Set(details.expression).size : 1;
|
const uniqueExpressionCount = Array.isArray(details.expression) ? new Set(details.expression).size : 1;
|
||||||
|
|
||||||
node.dataset.expressionMulti = `${expressionMulti}`;
|
node.dataset.expressionMulti = `${expressionMulti}`;
|
||||||
@ -65,15 +67,11 @@ class DisplayGenerator {
|
|||||||
(pitches.length > 0 ? 1 : 0)
|
(pitches.length > 0 ? 1 : 0)
|
||||||
}`;
|
}`;
|
||||||
|
|
||||||
const termTags = details.termTags;
|
this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressionMulti ? expressions : [details], termTags);
|
||||||
let expressions = details.expressions;
|
this._appendMultiple(reasonsContainer, this._createTermReason.bind(this), details.reasons);
|
||||||
expressions = Array.isArray(expressions) ? expressions.map((e) => [e, termTags]) : null;
|
this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), details.frequencies);
|
||||||
|
this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches);
|
||||||
DisplayGenerator._appendMultiple(expressionsContainer, this.createTermExpression.bind(this), expressions, [[details, termTags]]);
|
this._appendMultiple(definitionsContainer, this._createTermDefinitionItem.bind(this), definitionMulti ? definitions : [details]);
|
||||||
DisplayGenerator._appendMultiple(reasonsContainer, this.createTermReason.bind(this), details.reasons);
|
|
||||||
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]);
|
|
||||||
|
|
||||||
if (debugInfoContainer !== null) {
|
if (debugInfoContainer !== null) {
|
||||||
debugInfoContainer.textContent = JSON.stringify(details, null, 4);
|
debugInfoContainer.textContent = JSON.stringify(details, null, 4);
|
||||||
@ -82,88 +80,6 @@ class DisplayGenerator {
|
|||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
createTermExpression([details, termTags]) {
|
|
||||||
const node = this._templateHandler.instantiate('term-expression');
|
|
||||||
|
|
||||||
const expressionContainer = node.querySelector('.term-expression-text');
|
|
||||||
const tagContainer = node.querySelector('.tags');
|
|
||||||
const frequencyContainer = node.querySelector('.frequencies');
|
|
||||||
|
|
||||||
if (details.termFrequency) {
|
|
||||||
node.dataset.frequency = details.termFrequency;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (expressionContainer !== null) {
|
|
||||||
let furiganaSegments = details.furiganaSegments;
|
|
||||||
if (!Array.isArray(furiganaSegments)) {
|
|
||||||
// This case should not occur
|
|
||||||
furiganaSegments = [{text: details.expression, furigana: details.reading}];
|
|
||||||
}
|
|
||||||
DisplayGenerator._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this));
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!Array.isArray(termTags)) {
|
|
||||||
// Fallback
|
|
||||||
termTags = details.termTags;
|
|
||||||
}
|
|
||||||
const searchQueries = [details.expression, details.reading]
|
|
||||||
.filter((x) => !!x)
|
|
||||||
.map((x) => ({query: x}));
|
|
||||||
DisplayGenerator._appendMultiple(tagContainer, this.createTag.bind(this), termTags);
|
|
||||||
DisplayGenerator._appendMultiple(tagContainer, this.createSearchTag.bind(this), searchQueries);
|
|
||||||
DisplayGenerator._appendMultiple(frequencyContainer, this.createFrequencyTag.bind(this), details.frequencies);
|
|
||||||
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
|
|
||||||
createTermReason(reason) {
|
|
||||||
const fragment = this._templateHandler.instantiateFragment('term-reason');
|
|
||||||
const node = fragment.querySelector('.term-reason');
|
|
||||||
node.textContent = reason;
|
|
||||||
node.dataset.reason = reason;
|
|
||||||
return fragment;
|
|
||||||
}
|
|
||||||
|
|
||||||
createTermDefinitionItem(details) {
|
|
||||||
const node = this._templateHandler.instantiate('term-definition-item');
|
|
||||||
|
|
||||||
const tagListContainer = node.querySelector('.term-definition-tag-list');
|
|
||||||
const onlyListContainer = node.querySelector('.term-definition-only-list');
|
|
||||||
const glossaryContainer = node.querySelector('.term-glossary-list');
|
|
||||||
|
|
||||||
node.dataset.dictionary = details.dictionary;
|
|
||||||
|
|
||||||
DisplayGenerator._appendMultiple(tagListContainer, this.createTag.bind(this), details.definitionTags);
|
|
||||||
DisplayGenerator._appendMultiple(onlyListContainer, this.createTermOnly.bind(this), details.only);
|
|
||||||
DisplayGenerator._appendMultiple(glossaryContainer, this.createTermGlossaryItem.bind(this), details.glossary);
|
|
||||||
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
|
|
||||||
createTermGlossaryItem(glossary) {
|
|
||||||
const node = this._templateHandler.instantiate('term-glossary-item');
|
|
||||||
const container = node.querySelector('.term-glossary');
|
|
||||||
if (container !== null) {
|
|
||||||
DisplayGenerator._appendMultilineText(container, glossary);
|
|
||||||
}
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
|
|
||||||
createTermOnly(only) {
|
|
||||||
const node = this._templateHandler.instantiate('term-definition-only');
|
|
||||||
node.dataset.only = only;
|
|
||||||
node.textContent = only;
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
|
|
||||||
createKanjiLink(character) {
|
|
||||||
const node = document.createElement('a');
|
|
||||||
node.href = '#';
|
|
||||||
node.className = 'kanji-link';
|
|
||||||
node.textContent = character;
|
|
||||||
return node;
|
|
||||||
}
|
|
||||||
|
|
||||||
createKanjiEntry(details) {
|
createKanjiEntry(details) {
|
||||||
const node = this._templateHandler.instantiate('kanji-entry');
|
const node = this._templateHandler.instantiate('kanji-entry');
|
||||||
|
|
||||||
@ -183,23 +99,23 @@ class DisplayGenerator {
|
|||||||
glyphContainer.textContent = details.character;
|
glyphContainer.textContent = details.character;
|
||||||
}
|
}
|
||||||
|
|
||||||
DisplayGenerator._appendMultiple(frequenciesContainer, this.createFrequencyTag.bind(this), details.frequencies);
|
this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), details.frequencies);
|
||||||
DisplayGenerator._appendMultiple(tagContainer, this.createTag.bind(this), details.tags);
|
this._appendMultiple(tagContainer, this._createTag.bind(this), details.tags);
|
||||||
DisplayGenerator._appendMultiple(glossaryContainer, this.createKanjiGlossaryItem.bind(this), details.glossary);
|
this._appendMultiple(glossaryContainer, this._createKanjiGlossaryItem.bind(this), details.glossary);
|
||||||
DisplayGenerator._appendMultiple(chineseReadingsContainer, this.createKanjiReading.bind(this), details.onyomi);
|
this._appendMultiple(chineseReadingsContainer, this._createKanjiReading.bind(this), details.onyomi);
|
||||||
DisplayGenerator._appendMultiple(japaneseReadingsContainer, this.createKanjiReading.bind(this), details.kunyomi);
|
this._appendMultiple(japaneseReadingsContainer, this._createKanjiReading.bind(this), details.kunyomi);
|
||||||
|
|
||||||
if (statisticsContainer !== null) {
|
if (statisticsContainer !== null) {
|
||||||
statisticsContainer.appendChild(this.createKanjiInfoTable(details.stats.misc));
|
statisticsContainer.appendChild(this._createKanjiInfoTable(details.stats.misc));
|
||||||
}
|
}
|
||||||
if (classificationsContainer !== null) {
|
if (classificationsContainer !== null) {
|
||||||
classificationsContainer.appendChild(this.createKanjiInfoTable(details.stats.class));
|
classificationsContainer.appendChild(this._createKanjiInfoTable(details.stats.class));
|
||||||
}
|
}
|
||||||
if (codepointsContainer !== null) {
|
if (codepointsContainer !== null) {
|
||||||
codepointsContainer.appendChild(this.createKanjiInfoTable(details.stats.code));
|
codepointsContainer.appendChild(this._createKanjiInfoTable(details.stats.code));
|
||||||
}
|
}
|
||||||
if (dictionaryIndicesContainer !== null) {
|
if (dictionaryIndicesContainer !== null) {
|
||||||
dictionaryIndicesContainer.appendChild(this.createKanjiInfoTable(details.stats.index));
|
dictionaryIndicesContainer.appendChild(this._createKanjiInfoTable(details.stats.index));
|
||||||
}
|
}
|
||||||
|
|
||||||
if (debugInfoContainer !== null) {
|
if (debugInfoContainer !== null) {
|
||||||
@ -209,30 +125,114 @@ class DisplayGenerator {
|
|||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
createKanjiGlossaryItem(glossary) {
|
// Private
|
||||||
const node = this._templateHandler.instantiate('kanji-glossary-item');
|
|
||||||
const container = node.querySelector('.kanji-glossary');
|
_createTermExpression(details, termTags) {
|
||||||
|
const node = this._templateHandler.instantiate('term-expression');
|
||||||
|
|
||||||
|
const expressionContainer = node.querySelector('.term-expression-text');
|
||||||
|
const tagContainer = node.querySelector('.tags');
|
||||||
|
const frequencyContainer = node.querySelector('.frequencies');
|
||||||
|
|
||||||
|
if (details.termFrequency) {
|
||||||
|
node.dataset.frequency = details.termFrequency;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (expressionContainer !== null) {
|
||||||
|
let furiganaSegments = details.furiganaSegments;
|
||||||
|
if (!Array.isArray(furiganaSegments)) {
|
||||||
|
// This case should not occur
|
||||||
|
furiganaSegments = [{text: details.expression, furigana: details.reading}];
|
||||||
|
}
|
||||||
|
this._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!Array.isArray(termTags)) {
|
||||||
|
// Fallback
|
||||||
|
termTags = details.termTags;
|
||||||
|
}
|
||||||
|
const searchQueries = [details.expression, details.reading]
|
||||||
|
.filter((x) => !!x)
|
||||||
|
.map((x) => ({query: x}));
|
||||||
|
this._appendMultiple(tagContainer, this._createTag.bind(this), termTags);
|
||||||
|
this._appendMultiple(tagContainer, this._createSearchTag.bind(this), searchQueries);
|
||||||
|
this._appendMultiple(frequencyContainer, this._createFrequencyTag.bind(this), details.frequencies);
|
||||||
|
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
|
||||||
|
_createTermReason(reason) {
|
||||||
|
const fragment = this._templateHandler.instantiateFragment('term-reason');
|
||||||
|
const node = fragment.querySelector('.term-reason');
|
||||||
|
node.textContent = reason;
|
||||||
|
node.dataset.reason = reason;
|
||||||
|
return fragment;
|
||||||
|
}
|
||||||
|
|
||||||
|
_createTermDefinitionItem(details) {
|
||||||
|
const node = this._templateHandler.instantiate('term-definition-item');
|
||||||
|
|
||||||
|
const tagListContainer = node.querySelector('.term-definition-tag-list');
|
||||||
|
const onlyListContainer = node.querySelector('.term-definition-disambiguation-list');
|
||||||
|
const glossaryContainer = node.querySelector('.term-glossary-list');
|
||||||
|
|
||||||
|
node.dataset.dictionary = details.dictionary;
|
||||||
|
|
||||||
|
this._appendMultiple(tagListContainer, this._createTag.bind(this), details.definitionTags);
|
||||||
|
this._appendMultiple(onlyListContainer, this._createTermDisambiguation.bind(this), details.only);
|
||||||
|
this._appendMultiple(glossaryContainer, this._createTermGlossaryItem.bind(this), details.glossary);
|
||||||
|
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
|
||||||
|
_createTermGlossaryItem(glossary) {
|
||||||
|
const node = this._templateHandler.instantiate('term-glossary-item');
|
||||||
|
const container = node.querySelector('.term-glossary');
|
||||||
if (container !== null) {
|
if (container !== null) {
|
||||||
DisplayGenerator._appendMultilineText(container, glossary);
|
this._appendMultilineText(container, glossary);
|
||||||
}
|
}
|
||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
createKanjiReading(reading) {
|
_createTermDisambiguation(disambiguation) {
|
||||||
|
const node = this._templateHandler.instantiate('term-definition-disambiguation');
|
||||||
|
node.dataset.term = disambiguation;
|
||||||
|
node.textContent = disambiguation;
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
|
||||||
|
_createKanjiLink(character) {
|
||||||
|
const node = document.createElement('a');
|
||||||
|
node.href = '#';
|
||||||
|
node.className = 'kanji-link';
|
||||||
|
node.textContent = character;
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
|
||||||
|
_createKanjiGlossaryItem(glossary) {
|
||||||
|
const node = this._templateHandler.instantiate('kanji-glossary-item');
|
||||||
|
const container = node.querySelector('.kanji-glossary');
|
||||||
|
if (container !== null) {
|
||||||
|
this._appendMultilineText(container, glossary);
|
||||||
|
}
|
||||||
|
return node;
|
||||||
|
}
|
||||||
|
|
||||||
|
_createKanjiReading(reading) {
|
||||||
const node = this._templateHandler.instantiate('kanji-reading');
|
const node = this._templateHandler.instantiate('kanji-reading');
|
||||||
node.textContent = reading;
|
node.textContent = reading;
|
||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
createKanjiInfoTable(details) {
|
_createKanjiInfoTable(details) {
|
||||||
const node = this._templateHandler.instantiate('kanji-info-table');
|
const node = this._templateHandler.instantiate('kanji-info-table');
|
||||||
|
|
||||||
const container = node.querySelector('.kanji-info-table-body');
|
const container = node.querySelector('.kanji-info-table-body');
|
||||||
|
|
||||||
if (container !== null) {
|
if (container !== null) {
|
||||||
const count = DisplayGenerator._appendMultiple(container, this.createKanjiInfoTableItem.bind(this), details);
|
const count = this._appendMultiple(container, this._createKanjiInfoTableItem.bind(this), details);
|
||||||
if (count === 0) {
|
if (count === 0) {
|
||||||
const n = this.createKanjiInfoTableItemEmpty();
|
const n = this._createKanjiInfoTableItemEmpty();
|
||||||
container.appendChild(n);
|
container.appendChild(n);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -240,7 +240,7 @@ class DisplayGenerator {
|
|||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
createKanjiInfoTableItem(details) {
|
_createKanjiInfoTableItem(details) {
|
||||||
const node = this._templateHandler.instantiate('kanji-info-table-item');
|
const node = this._templateHandler.instantiate('kanji-info-table-item');
|
||||||
const nameNode = node.querySelector('.kanji-info-table-item-header');
|
const nameNode = node.querySelector('.kanji-info-table-item-header');
|
||||||
const valueNode = node.querySelector('.kanji-info-table-item-value');
|
const valueNode = node.querySelector('.kanji-info-table-item-value');
|
||||||
@ -253,11 +253,11 @@ class DisplayGenerator {
|
|||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
createKanjiInfoTableItemEmpty() {
|
_createKanjiInfoTableItemEmpty() {
|
||||||
return this._templateHandler.instantiate('kanji-info-table-empty');
|
return this._templateHandler.instantiate('kanji-info-table-empty');
|
||||||
}
|
}
|
||||||
|
|
||||||
createTag(details) {
|
_createTag(details) {
|
||||||
const node = this._templateHandler.instantiate('tag');
|
const node = this._templateHandler.instantiate('tag');
|
||||||
|
|
||||||
const inner = node.querySelector('.tag-inner');
|
const inner = node.querySelector('.tag-inner');
|
||||||
@ -269,7 +269,7 @@ class DisplayGenerator {
|
|||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
createSearchTag(details) {
|
_createSearchTag(details) {
|
||||||
const node = this._templateHandler.instantiate('tag-search');
|
const node = this._templateHandler.instantiate('tag-search');
|
||||||
|
|
||||||
node.textContent = details.query;
|
node.textContent = details.query;
|
||||||
@ -279,7 +279,7 @@ class DisplayGenerator {
|
|||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
createPitches(details) {
|
_createPitches(details) {
|
||||||
if (!this._termPitchAccentStaticTemplateIsSetup) {
|
if (!this._termPitchAccentStaticTemplateIsSetup) {
|
||||||
this._termPitchAccentStaticTemplateIsSetup = true;
|
this._termPitchAccentStaticTemplateIsSetup = true;
|
||||||
const t = this._templateHandler.instantiate('term-pitch-accent-static');
|
const t = this._templateHandler.instantiate('term-pitch-accent-static');
|
||||||
@ -293,16 +293,16 @@ class DisplayGenerator {
|
|||||||
node.dataset.pitchesMulti = 'true';
|
node.dataset.pitchesMulti = 'true';
|
||||||
node.dataset.pitchesCount = `${dictionaryPitches.length}`;
|
node.dataset.pitchesCount = `${dictionaryPitches.length}`;
|
||||||
|
|
||||||
const tag = this.createTag({notes: '', name: dictionary, category: 'pitch-accent-dictionary'});
|
const tag = this._createTag({notes: '', name: dictionary, category: 'pitch-accent-dictionary'});
|
||||||
node.querySelector('.term-pitch-accent-group-tag-list').appendChild(tag);
|
node.querySelector('.term-pitch-accent-group-tag-list').appendChild(tag);
|
||||||
|
|
||||||
const n = node.querySelector('.term-pitch-accent-list');
|
const n = node.querySelector('.term-pitch-accent-list');
|
||||||
DisplayGenerator._appendMultiple(n, this.createPitch.bind(this), dictionaryPitches);
|
this._appendMultiple(n, this._createPitch.bind(this), dictionaryPitches);
|
||||||
|
|
||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
createPitch(details) {
|
_createPitch(details) {
|
||||||
const {reading, position, tags, exclusiveExpressions, exclusiveReadings} = details;
|
const {reading, position, tags, exclusiveExpressions, exclusiveReadings} = details;
|
||||||
const morae = jp.getKanaMorae(reading);
|
const morae = jp.getKanaMorae(reading);
|
||||||
|
|
||||||
@ -315,10 +315,10 @@ class DisplayGenerator {
|
|||||||
n.textContent = `${position}`;
|
n.textContent = `${position}`;
|
||||||
|
|
||||||
n = node.querySelector('.term-pitch-accent-tag-list');
|
n = node.querySelector('.term-pitch-accent-tag-list');
|
||||||
DisplayGenerator._appendMultiple(n, this.createTag.bind(this), tags);
|
this._appendMultiple(n, this._createTag.bind(this), tags);
|
||||||
|
|
||||||
n = node.querySelector('.term-pitch-accent-disambiguation-list');
|
n = node.querySelector('.term-pitch-accent-disambiguation-list');
|
||||||
this.createPitchAccentDisambiguations(n, exclusiveExpressions, exclusiveReadings);
|
this._createPitchAccentDisambiguations(n, exclusiveExpressions, exclusiveReadings);
|
||||||
|
|
||||||
n = node.querySelector('.term-pitch-accent-characters');
|
n = node.querySelector('.term-pitch-accent-characters');
|
||||||
for (let i = 0, ii = morae.length; i < ii; ++i) {
|
for (let i = 0, ii = morae.length; i < ii; ++i) {
|
||||||
@ -338,13 +338,13 @@ class DisplayGenerator {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (morae.length > 0) {
|
if (morae.length > 0) {
|
||||||
this.populatePitchGraph(node.querySelector('.term-pitch-accent-graph'), position, morae);
|
this._populatePitchGraph(node.querySelector('.term-pitch-accent-graph'), position, morae);
|
||||||
}
|
}
|
||||||
|
|
||||||
return node;
|
return node;
|
||||||
}
|
}
|
||||||
|
|
||||||
createPitchAccentDisambiguations(container, exclusiveExpressions, exclusiveReadings) {
|
_createPitchAccentDisambiguations(container, exclusiveExpressions, exclusiveReadings) {
|
||||||
const templateName = 'term-pitch-accent-disambiguation';
|
const templateName = 'term-pitch-accent-disambiguation';
|
||||||
for (const exclusiveExpression of exclusiveExpressions) {
|
for (const exclusiveExpression of exclusiveExpressions) {
|
||||||
const node = this._templateHandler.instantiate(templateName);
|
const node = this._templateHandler.instantiate(templateName);
|
||||||
@ -360,13 +360,12 @@ class DisplayGenerator {
|
|||||||
container.appendChild(node);
|
container.appendChild(node);
|
||||||
}
|
}
|
||||||
|
|
||||||
container.dataset.multi = 'true';
|
|
||||||
container.dataset.count = `${exclusiveExpressions.length + exclusiveReadings.length}`;
|
container.dataset.count = `${exclusiveExpressions.length + exclusiveReadings.length}`;
|
||||||
container.dataset.expressionCount = `${exclusiveExpressions.length}`;
|
container.dataset.expressionCount = `${exclusiveExpressions.length}`;
|
||||||
container.dataset.readingCount = `${exclusiveReadings.length}`;
|
container.dataset.readingCount = `${exclusiveReadings.length}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
populatePitchGraph(svg, position, morae) {
|
_populatePitchGraph(svg, position, morae) {
|
||||||
const svgns = svg.getAttribute('xmlns');
|
const svgns = svg.getAttribute('xmlns');
|
||||||
const ii = morae.length;
|
const ii = morae.length;
|
||||||
svg.setAttribute('viewBox', `0 0 ${50 * (ii + 1)} 100`);
|
svg.setAttribute('viewBox', `0 0 ${50 * (ii + 1)} 100`);
|
||||||
@ -406,7 +405,7 @@ class DisplayGenerator {
|
|||||||
path.setAttribute('d', `M${pathPoints.join(' L')}`);
|
path.setAttribute('d', `M${pathPoints.join(' L')}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
createFrequencyTag(details) {
|
_createFrequencyTag(details) {
|
||||||
const node = this._templateHandler.instantiate('tag-frequency');
|
const node = this._templateHandler.instantiate('tag-frequency');
|
||||||
|
|
||||||
let n = node.querySelector('.term-frequency-dictionary-name');
|
let n = node.querySelector('.term-frequency-dictionary-name');
|
||||||
@ -434,7 +433,7 @@ class DisplayGenerator {
|
|||||||
part = '';
|
part = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
const link = this.createKanjiLink(c);
|
const link = this._createKanjiLink(c);
|
||||||
container.appendChild(link);
|
container.appendChild(link);
|
||||||
} else {
|
} else {
|
||||||
part += c;
|
part += c;
|
||||||
@ -445,31 +444,31 @@ class DisplayGenerator {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static _appendMultiple(container, createItem, detailsIterable, fallback=[]) {
|
_isIterable(value) {
|
||||||
if (container === null) { return 0; }
|
return (
|
||||||
|
value !== null &&
|
||||||
const multi = (
|
typeof value === 'object' &&
|
||||||
detailsIterable !== null &&
|
typeof value[Symbol.iterator] !== 'undefined'
|
||||||
typeof detailsIterable === 'object' &&
|
|
||||||
typeof detailsIterable[Symbol.iterator] !== 'undefined'
|
|
||||||
);
|
);
|
||||||
if (!multi) { detailsIterable = fallback; }
|
}
|
||||||
|
|
||||||
|
_appendMultiple(container, createItem, detailsIterable, ...args) {
|
||||||
let count = 0;
|
let count = 0;
|
||||||
for (const details of detailsIterable) {
|
if (container !== null && this._isIterable(detailsIterable)) {
|
||||||
const item = createItem(details);
|
for (const details of detailsIterable) {
|
||||||
if (item === null) { continue; }
|
const item = createItem(details, ...args);
|
||||||
container.appendChild(item);
|
if (item === null) { continue; }
|
||||||
++count;
|
container.appendChild(item);
|
||||||
|
++count;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
container.dataset.multi = `${multi}`;
|
|
||||||
container.dataset.count = `${count}`;
|
container.dataset.count = `${count}`;
|
||||||
|
|
||||||
return count;
|
return count;
|
||||||
}
|
}
|
||||||
|
|
||||||
static _appendFurigana(container, segments, addText) {
|
_appendFurigana(container, segments, addText) {
|
||||||
for (const {text, furigana} of segments) {
|
for (const {text, furigana} of segments) {
|
||||||
if (furigana) {
|
if (furigana) {
|
||||||
const ruby = document.createElement('ruby');
|
const ruby = document.createElement('ruby');
|
||||||
@ -484,7 +483,7 @@ class DisplayGenerator {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static _appendMultilineText(container, text) {
|
_appendMultilineText(container, text) {
|
||||||
const parts = text.split('\n');
|
const parts = text.split('\n');
|
||||||
container.appendChild(document.createTextNode(parts[0]));
|
container.appendChild(document.createTextNode(parts[0]));
|
||||||
for (let i = 1, ii = parts.length; i < ii; ++i) {
|
for (let i = 1, ii = parts.length; i < ii; ++i) {
|
||||||
@ -493,7 +492,7 @@ class DisplayGenerator {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static _getPitchInfos(definition) {
|
_getPitchInfos(definition) {
|
||||||
const results = new Map();
|
const results = new Map();
|
||||||
|
|
||||||
const allExpressions = new Set();
|
const allExpressions = new Set();
|
||||||
@ -511,7 +510,7 @@ class DisplayGenerator {
|
|||||||
}
|
}
|
||||||
|
|
||||||
for (const {position, tags} of pitches) {
|
for (const {position, tags} of pitches) {
|
||||||
let pitchInfo = DisplayGenerator._findExistingPitchInfo(reading, position, tags, dictionaryResults);
|
let pitchInfo = this._findExistingPitchInfo(reading, position, tags, dictionaryResults);
|
||||||
if (pitchInfo === null) {
|
if (pitchInfo === null) {
|
||||||
pitchInfo = {expressions: new Set(), reading, position, tags};
|
pitchInfo = {expressions: new Set(), reading, position, tags};
|
||||||
dictionaryResults.push(pitchInfo);
|
dictionaryResults.push(pitchInfo);
|
||||||
@ -540,12 +539,12 @@ class DisplayGenerator {
|
|||||||
return [...results.entries()];
|
return [...results.entries()];
|
||||||
}
|
}
|
||||||
|
|
||||||
static _findExistingPitchInfo(reading, position, tags, pitchInfoList) {
|
_findExistingPitchInfo(reading, position, tags, pitchInfoList) {
|
||||||
for (const pitchInfo of pitchInfoList) {
|
for (const pitchInfo of pitchInfoList) {
|
||||||
if (
|
if (
|
||||||
pitchInfo.reading === reading &&
|
pitchInfo.reading === reading &&
|
||||||
pitchInfo.position === position &&
|
pitchInfo.position === position &&
|
||||||
DisplayGenerator._areTagListsEqual(pitchInfo.tags, tags)
|
this._areTagListsEqual(pitchInfo.tags, tags)
|
||||||
) {
|
) {
|
||||||
return pitchInfo;
|
return pitchInfo;
|
||||||
}
|
}
|
||||||
@ -553,7 +552,7 @@ class DisplayGenerator {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
static _areTagListsEqual(tagList1, tagList2) {
|
_areTagListsEqual(tagList1, tagList2) {
|
||||||
const ii = tagList1.length;
|
const ii = tagList1.length;
|
||||||
if (tagList2.length !== ii) { return false; }
|
if (tagList2.length !== ii) { return false; }
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user