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
author: toasted-nutbread <toasted-nutbread@users.noreply.github.com> 2020-11-14 13:42:50 -0500
committer: GitHub <noreply@github.com> 2020-11-14 13:42:50 -0500
commit: 50a1fbfb9fd4b289902928dc90bc95a2f700cc55 (patch)
tree: c0729d28acbef9f3b05ff40f51b830d4186e1ad6 /ext
parent: 112f08a13e1534685b19e0d164fd2fe64a23ebd9 (diff)
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);
author	toasted-nutbread <toasted-nutbread@users.noreply.github.com>	2020-11-14 13:42:50 -0500
committer	GitHub <noreply@github.com>	2020-11-14 13:42:50 -0500
commit	50a1fbfb9fd4b289902928dc90bc95a2f700cc55 (patch)
tree	c0729d28acbef9f3b05ff40f51b830d4186e1ad6 /ext
parent	112f08a13e1534685b19e0d164fd2fe64a23ebd9 (diff)