alex/yomichan
1
Fork 0
Code Releases Activity

Display updates (#1029)

Browse Source 
* Simplify expression creation

* Add attribute indicating whether the reading is the same or not

* Update kanji debug info

* Remove some unnecessary null checks

* Simplify iterable check

* Update float and search HTML to be more consistent
This commit is contained in:
toasted-nutbread 2020-11-14 13:42:50 -05:00 committed by GitHub
parent 112f08a13e
commit 50a1fbfb9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 42 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
ext/bg/search.html
View File

@ -59,6 +59,7 @@
</div></div> </div></div>
<!-- Scripts -->
<script src="/mixed/lib/wanakana.min.js"></script> <script src="/mixed/lib/wanakana.min.js"></script>
<script src="/mixed/js/core.js"></script> <script src="/mixed/js/core.js"></script>

6
ext/fg/float.html
View File

@ -15,6 +15,8 @@
</head> </head>
<body> <body>
<div class="content"><div class="content-center">
<div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div> <div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
<div id="navigation-header" class="navigation-header" hidden><div class="navigation-header-actions"> <div id="navigation-header" class="navigation-header" hidden><div class="navigation-header-actions">
@ -47,6 +49,9 @@
</div> </div>
</div> </div>
</div></div>
<!-- Scripts -->
<script src="/mixed/js/core.js"></script> <script src="/mixed/js/core.js"></script>
<script src="/mixed/js/yomichan.js"></script> <script src="/mixed/js/yomichan.js"></script>
<script src="/mixed/js/comm.js"></script> <script src="/mixed/js/comm.js"></script>
@ -78,5 +83,6 @@
<script src="/fg/js/float.js"></script> <script src="/fg/js/float.js"></script>
<script src="/fg/js/float-main.js"></script> <script src="/fg/js/float-main.js"></script>
</body> </body>
</html> </html>

2
ext/mixed/display-templates.html
View File

@ -79,7 +79,7 @@
<tr><th colspan="3">Dictionary Indices</th></tr> <tr><th colspan="3">Dictionary Indices</th></tr>
<tr><td colspan="3" class="kanji-dictionary-indices"></td></tr> <tr><td colspan="3" class="kanji-dictionary-indices"></td></tr>
</tbody></table> </tbody></table>
<pre class="debug-info"></pre> <div class="debug-info"><a class="debug-log-link">Log debug info to console</a></div>
</div></template> </div></template>
<template id="kanji-info-table-template"><table class="kanji-info-table"><tbody class="kanji-info-table-body"></tbody></table></template> <template id="kanji-info-table-template"><table class="kanji-info-table"><tbody class="kanji-info-table-body"></tbody></table></template>
<template id="kanji-info-table-item-template"><tr class="kanji-info-table-item"><th class="kanji-info-table-item-header"></th><td class="kanji-info-table-item-value"></td></tr></template> <template id="kanji-info-table-item-template"><tr class="kanji-info-table-item"><th class="kanji-info-table-item-header"></th><td class="kanji-info-table-item-value"></td></tr></template>

87
ext/mixed/js/display-generator.js
View File

@ -51,7 +51,7 @@ class DisplayGenerator {
const definitionsContainer = node.querySelector('.term-definition-list'); const definitionsContainer = node.querySelector('.term-definition-list');
const bodyContainer = node.querySelector('.term-entry-body'); const bodyContainer = node.querySelector('.term-entry-body');
const {termTags, expressions, type, reasons, frequencies} = details; const {expressions, type, reasons, frequencies} = details;
const definitions = (type === 'term' ? [details] : details.definitions); const definitions = (type === 'term' ? [details] : details.definitions);
const merged = (type === 'termMerged' || type === 'termMergedByGlossary'); const merged = (type === 'termMerged' || type === 'termMergedByGlossary');
const pitches = DictionaryDataUtil.getPitchAccentInfos(details); const pitches = DictionaryDataUtil.getPitchAccentInfos(details);
@ -69,7 +69,7 @@ class DisplayGenerator {
(pitches.length > 0 ? 1 : 0) (pitches.length > 0 ? 1 : 0)
}`; }`;
this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressions, termTags); this._appendMultiple(expressionsContainer, this._createTermExpression.bind(this), expressions);
this._appendMultiple(reasonsContainer, this._createTermReason.bind(this), reasons); this._appendMultiple(reasonsContainer, this._createTermReason.bind(this), reasons);
this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), frequencies); this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), frequencies);
this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches); this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches);
@ -91,11 +91,8 @@ class DisplayGenerator {
const classificationsContainer = node.querySelector('.kanji-classifications'); const classificationsContainer = node.querySelector('.kanji-classifications');
const codepointsContainer = node.querySelector('.kanji-codepoints'); const codepointsContainer = node.querySelector('.kanji-codepoints');
const dictionaryIndicesContainer = node.querySelector('.kanji-dictionary-indices'); const dictionaryIndicesContainer = node.querySelector('.kanji-dictionary-indices');
const debugInfoContainer = node.querySelector('.debug-info');
if (glyphContainer !== null) {
glyphContainer.textContent = details.character; glyphContainer.textContent = details.character;
}
this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), details.frequencies); this._appendMultiple(frequenciesContainer, this._createFrequencyTag.bind(this), details.frequencies);
this._appendMultiple(tagContainer, this._createTag.bind(this), details.tags); this._appendMultiple(tagContainer, this._createTag.bind(this), details.tags);
@ -103,58 +100,36 @@ class DisplayGenerator {
this._appendMultiple(chineseReadingsContainer, this._createKanjiReading.bind(this), details.onyomi); this._appendMultiple(chineseReadingsContainer, this._createKanjiReading.bind(this), details.onyomi);
this._appendMultiple(japaneseReadingsContainer, this._createKanjiReading.bind(this), details.kunyomi); this._appendMultiple(japaneseReadingsContainer, this._createKanjiReading.bind(this), details.kunyomi);
if (statisticsContainer !== null) {
statisticsContainer.appendChild(this._createKanjiInfoTable(details.stats.misc)); statisticsContainer.appendChild(this._createKanjiInfoTable(details.stats.misc));
}
if (classificationsContainer !== null) {
classificationsContainer.appendChild(this._createKanjiInfoTable(details.stats.class)); classificationsContainer.appendChild(this._createKanjiInfoTable(details.stats.class));
}
if (codepointsContainer !== null) {
codepointsContainer.appendChild(this._createKanjiInfoTable(details.stats.code)); codepointsContainer.appendChild(this._createKanjiInfoTable(details.stats.code));
}
if (dictionaryIndicesContainer !== null) {
dictionaryIndicesContainer.appendChild(this._createKanjiInfoTable(details.stats.index)); dictionaryIndicesContainer.appendChild(this._createKanjiInfoTable(details.stats.index));
}
if (debugInfoContainer !== null) {
debugInfoContainer.textContent = JSON.stringify(details, null, 4);
}
return node; return node;
} }
// Private // Private
_createTermExpression(details, termTags) { _createTermExpression(details) {
const {termFrequency, furiganaSegments, expression, reading, termTags, frequencies} = details;
const searchQueries = [];
if (expression) { searchQueries.push(expression); }
if (reading) { searchQueries.push(reading); }
const node = this._templates.instantiate('term-expression'); const node = this._templates.instantiate('term-expression');
const expressionContainer = node.querySelector('.term-expression-text'); const expressionContainer = node.querySelector('.term-expression-text');
const tagContainer = node.querySelector('.tags'); const tagContainer = node.querySelector('.tags');
const frequencyContainer = node.querySelector('.frequencies'); const frequencyContainer = node.querySelector('.frequencies');
if (details.termFrequency) { node.dataset.readingIsSame = `${!reading || reading === expression}`;
node.dataset.frequency = details.termFrequency; node.dataset.frequency = 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)); 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._createTag.bind(this), termTags);
this._appendMultiple(tagContainer, this._createSearchTag.bind(this), searchQueries); this._appendMultiple(tagContainer, this._createSearchTag.bind(this), searchQueries);
this._appendMultiple(frequencyContainer, this._createFrequencyTag.bind(this), details.frequencies); this._appendMultiple(frequencyContainer, this._createFrequencyTag.bind(this), frequencies);
return node; return node;
} }
@ -200,9 +175,7 @@ class DisplayGenerator {
_createTermGlossaryItemText(glossary) { _createTermGlossaryItemText(glossary) {
const node = this._templates.instantiate('term-glossary-item'); const node = this._templates.instantiate('term-glossary-item');
const container = node.querySelector('.term-glossary'); const container = node.querySelector('.term-glossary');
if (container !== null) {
this._appendMultilineText(container, glossary); this._appendMultilineText(container, glossary);
}
return node; return node;
} }
@ -285,9 +258,7 @@ class DisplayGenerator {
_createKanjiGlossaryItem(glossary) { _createKanjiGlossaryItem(glossary) {
const node = this._templates.instantiate('kanji-glossary-item'); const node = this._templates.instantiate('kanji-glossary-item');
const container = node.querySelector('.kanji-glossary'); const container = node.querySelector('.kanji-glossary');
if (container !== null) {
this._appendMultilineText(container, glossary); this._appendMultilineText(container, glossary);
}
return node; return node;
} }
@ -299,16 +270,13 @@ class DisplayGenerator {
_createKanjiInfoTable(details) { _createKanjiInfoTable(details) {
const node = this._templates.instantiate('kanji-info-table'); const node = this._templates.instantiate('kanji-info-table');
const container = node.querySelector('.kanji-info-table-body'); const container = node.querySelector('.kanji-info-table-body');
if (container !== null) {
const count = this._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);
} }
}
return node; return node;
} }
@ -317,12 +285,8 @@ class DisplayGenerator {
const node = this._templates.instantiate('kanji-info-table-item'); const node = this._templates.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');
if (nameNode !== null) {
nameNode.textContent = details.notes || details.name; nameNode.textContent = details.notes || details.name;
}
if (valueNode !== null) {
valueNode.textContent = details.value; valueNode.textContent = details.value;
}
return node; return node;
} }
@ -343,13 +307,10 @@ class DisplayGenerator {
return node; return node;
} }
_createSearchTag(details) { _createSearchTag(text) {
const node = this._templates.instantiate('tag-search'); const node = this._templates.instantiate('tag-search');
node.textContent = text;
node.textContent = details.query; node.dataset.query = text;
node.dataset.query = details.query;
return node; return node;
} }
@ -479,14 +440,10 @@ class DisplayGenerator {
const node = this._templates.instantiate('tag-frequency'); const node = this._templates.instantiate('tag-frequency');
let n = node.querySelector('.term-frequency-dictionary-name'); let n = node.querySelector('.term-frequency-dictionary-name');
if (n !== null) {
n.textContent = details.dictionary; n.textContent = details.dictionary;
}
n = node.querySelector('.term-frequency-value'); n = node.querySelector('.term-frequency-value');
if (n !== null) {
n.textContent = `${details.frequency}`; n.textContent = `${details.frequency}`;
}
node.dataset.dictionary = details.dictionary; node.dataset.dictionary = details.dictionary;
node.dataset.frequency = details.frequency; node.dataset.frequency = details.frequency;
@ -514,18 +471,10 @@ class DisplayGenerator {
} }
} }
_isIterable(value) { _appendMultiple(container, createItem, detailsArray, ...args) {
return (
value !== null &&
typeof value === 'object' &&
typeof value[Symbol.iterator] !== 'undefined'
);
}
_appendMultiple(container, createItem, detailsIterable, ...args) {
let count = 0; let count = 0;
if (container !== null && this._isIterable(detailsIterable)) { if (Array.isArray(detailsArray)) {
for (const details of detailsIterable) { for (const details of detailsArray) {
const item = createItem(details, ...args); const item = createItem(details, ...args);
if (item === null) { continue; } if (item === null) { continue; }
container.appendChild(item); container.appendChild(item);