aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-11-14 13:42:50 -0500
committerGitHub <noreply@github.com>2020-11-14 13:42:50 -0500
commit50a1fbfb9fd4b289902928dc90bc95a2f700cc55 (patch)
treec0729d28acbef9f3b05ff40f51b830d4186e1ad6 /ext
parent112f08a13e1534685b19e0d164fd2fe64a23ebd9 (diff)
Display updates (#1029)
* 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
Diffstat (limited to 'ext')
-rw-r--r--ext/bg/search.html1
-rw-r--r--ext/fg/float.html6
-rw-r--r--ext/mixed/display-templates.html2
-rw-r--r--ext/mixed/js/display-generator.js119
4 files changed, 42 insertions, 86 deletions
diff --git a/ext/bg/search.html b/ext/bg/search.html
index 29594eae..55dc61e0 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -59,6 +59,7 @@
</div></div>
+<!-- Scripts -->
<script src="/mixed/lib/wanakana.min.js"></script>
<script src="/mixed/js/core.js"></script>
diff --git a/ext/fg/float.html b/ext/fg/float.html
index e40a656b..db10c159 100644
--- a/ext/fg/float.html
+++ b/ext/fg/float.html
@@ -15,6 +15,8 @@
</head>
<body>
+<div class="content"><div class="content-center">
+
<div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
<div id="navigation-header" class="navigation-header" hidden><div class="navigation-header-actions">
@@ -47,6 +49,9 @@
</div>
</div>
+</div></div>
+
+<!-- Scripts -->
<script src="/mixed/js/core.js"></script>
<script src="/mixed/js/yomichan.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-main.js"></script>
+
</body>
</html>
diff --git a/ext/mixed/display-templates.html b/ext/mixed/display-templates.html
index 08028f7b..e27ce85d 100644
--- a/ext/mixed/display-templates.html
+++ b/ext/mixed/display-templates.html
@@ -79,7 +79,7 @@
<tr><th colspan="3">Dictionary Indices</th></tr>
<tr><td colspan="3" class="kanji-dictionary-indices"></td></tr>
</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>
<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>
diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index 9daf2e91..5a563024 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -51,7 +51,7 @@ class DisplayGenerator {
const definitionsContainer = node.querySelector('.term-definition-list');
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 merged = (type === 'termMerged' || type === 'termMergedByGlossary');
const pitches = DictionaryDataUtil.getPitchAccentInfos(details);
@@ -69,7 +69,7 @@ class DisplayGenerator {
(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(frequenciesContainer, this._createFrequencyTag.bind(this), frequencies);
this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches);
@@ -91,11 +91,8 @@ class DisplayGenerator {
const classificationsContainer = node.querySelector('.kanji-classifications');
const codepointsContainer = node.querySelector('.kanji-codepoints');
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(tagContainer, this._createTag.bind(this), details.tags);
@@ -103,58 +100,36 @@ class DisplayGenerator {
this._appendMultiple(chineseReadingsContainer, this._createKanjiReading.bind(this), details.onyomi);
this._appendMultiple(japaneseReadingsContainer, this._createKanjiReading.bind(this), details.kunyomi);
- if (statisticsContainer !== null) {
- statisticsContainer.appendChild(this._createKanjiInfoTable(details.stats.misc));
- }
- if (classificationsContainer !== null) {
- classificationsContainer.appendChild(this._createKanjiInfoTable(details.stats.class));
- }
- if (codepointsContainer !== null) {
- codepointsContainer.appendChild(this._createKanjiInfoTable(details.stats.code));
- }
- if (dictionaryIndicesContainer !== null) {
- dictionaryIndicesContainer.appendChild(this._createKanjiInfoTable(details.stats.index));
- }
-
- if (debugInfoContainer !== null) {
- debugInfoContainer.textContent = JSON.stringify(details, null, 4);
- }
+ statisticsContainer.appendChild(this._createKanjiInfoTable(details.stats.misc));
+ classificationsContainer.appendChild(this._createKanjiInfoTable(details.stats.class));
+ codepointsContainer.appendChild(this._createKanjiInfoTable(details.stats.code));
+ dictionaryIndicesContainer.appendChild(this._createKanjiInfoTable(details.stats.index));
return node;
}
// 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 expressionContainer = node.querySelector('.term-expression-text');
const tagContainer = node.querySelector('.tags');
const frequencyContainer = node.querySelector('.frequencies');
- if (details.termFrequency) {
- node.dataset.frequency = details.termFrequency;
- }
+ node.dataset.readingIsSame = `${!reading || reading === expression}`;
+ 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));
- }
-
- if (!Array.isArray(termTags)) {
- // Fallback
- termTags = details.termTags;
- }
- const searchQueries = [details.expression, details.reading]
- .filter((x) => !!x)
- .map((x) => ({query: x}));
+ this._appendFurigana(expressionContainer, furiganaSegments, this._appendKanjiLinks.bind(this));
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);
+ this._appendMultiple(frequencyContainer, this._createFrequencyTag.bind(this), frequencies);
return node;
}
@@ -200,9 +175,7 @@ class DisplayGenerator {
_createTermGlossaryItemText(glossary) {
const node = this._templates.instantiate('term-glossary-item');
const container = node.querySelector('.term-glossary');
- if (container !== null) {
- this._appendMultilineText(container, glossary);
- }
+ this._appendMultilineText(container, glossary);
return node;
}
@@ -285,9 +258,7 @@ class DisplayGenerator {
_createKanjiGlossaryItem(glossary) {
const node = this._templates.instantiate('kanji-glossary-item');
const container = node.querySelector('.kanji-glossary');
- if (container !== null) {
- this._appendMultilineText(container, glossary);
- }
+ this._appendMultilineText(container, glossary);
return node;
}
@@ -299,15 +270,12 @@ class DisplayGenerator {
_createKanjiInfoTable(details) {
const node = this._templates.instantiate('kanji-info-table');
-
const container = node.querySelector('.kanji-info-table-body');
- if (container !== null) {
- const count = this._appendMultiple(container, this._createKanjiInfoTableItem.bind(this), details);
- if (count === 0) {
- const n = this._createKanjiInfoTableItemEmpty();
- container.appendChild(n);
- }
+ const count = this._appendMultiple(container, this._createKanjiInfoTableItem.bind(this), details);
+ if (count === 0) {
+ const n = this._createKanjiInfoTableItemEmpty();
+ container.appendChild(n);
}
return node;
@@ -317,12 +285,8 @@ class DisplayGenerator {
const node = this._templates.instantiate('kanji-info-table-item');
const nameNode = node.querySelector('.kanji-info-table-item-header');
const valueNode = node.querySelector('.kanji-info-table-item-value');
- if (nameNode !== null) {
- nameNode.textContent = details.notes || details.name;
- }
- if (valueNode !== null) {
- valueNode.textContent = details.value;
- }
+ nameNode.textContent = details.notes || details.name;
+ valueNode.textContent = details.value;
return node;
}
@@ -343,13 +307,10 @@ class DisplayGenerator {
return node;
}
- _createSearchTag(details) {
+ _createSearchTag(text) {
const node = this._templates.instantiate('tag-search');
-
- node.textContent = details.query;
-
- node.dataset.query = details.query;
-
+ node.textContent = text;
+ node.dataset.query = text;
return node;
}
@@ -479,14 +440,10 @@ class DisplayGenerator {
const node = this._templates.instantiate('tag-frequency');
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');
- if (n !== null) {
- n.textContent = `${details.frequency}`;
- }
+ n.textContent = `${details.frequency}`;
node.dataset.dictionary = details.dictionary;
node.dataset.frequency = details.frequency;
@@ -514,18 +471,10 @@ class DisplayGenerator {
}
}
- _isIterable(value) {
- return (
- value !== null &&
- typeof value === 'object' &&
- typeof value[Symbol.iterator] !== 'undefined'
- );
- }
-
- _appendMultiple(container, createItem, detailsIterable, ...args) {
+ _appendMultiple(container, createItem, detailsArray, ...args) {
let count = 0;
- if (container !== null && this._isIterable(detailsIterable)) {
- for (const details of detailsIterable) {
+ if (Array.isArray(detailsArray)) {
+ for (const details of detailsArray) {
const item = createItem(details, ...args);
if (item === null) { continue; }
container.appendChild(item);