Update term tags display and fix a layout issue (#1208)

* Fix layout issue with term expression display

* Update display of term tags

* Update tag notification to include disambiguation information

1 files changed, 52 insertions, 0 deletions

diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index a47a65ee..b48ddadc 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -49,6 +49,7 @@ class DisplayGenerator {
         const pitchesContainer = node.querySelector('.term-pitch-accent-group-list');
         const frequencyGroupListContainer = node.querySelector('.frequency-group-list');
         const definitionsContainer = node.querySelector('.term-definition-list');
+        const termTagsContainer = node.querySelector('.term-tags');
 
         const {expressions, type, reasons, frequencies} = details;
         const definitions = (type === 'term' ? [details] : details.definitions);
@@ -56,6 +57,7 @@ class DisplayGenerator {
         const pitches = DictionaryDataUtil.getPitchAccentInfos(details);
         const pitchCount = pitches.reduce((i, v) => i + v.pitches.length, 0);
         const groupedFrequencies = DictionaryDataUtil.groupTermFrequencies(frequencies);
+        const termTags = DictionaryDataUtil.groupTermTags(details);
 
         const uniqueExpressions = new Set();
         const uniqueReadings = new Set();
@@ -80,6 +82,7 @@ class DisplayGenerator {
         this._appendMultiple(frequencyGroupListContainer, this._createFrequencyGroup.bind(this), groupedFrequencies, false);
         this._appendMultiple(pitchesContainer, this._createPitches.bind(this), pitches);
         this._appendMultiple(definitionsContainer, this._createTermDefinitionItem.bind(this), definitions);
+        this._appendMultiple(termTagsContainer, this._createTermTag.bind(this), termTags, expressions.length);
 
         return node;
     }
@@ -119,6 +122,45 @@ class DisplayGenerator {
         return this._templates.instantiate('footer-notification');
     }
 
+    createTagFooterNotificationDetails(tagNode) {
+        const node = this._templates.instantiateFragment('footer-notification-tag-details');
+
+        const details = tagNode.dataset.details;
+        node.querySelector('.tag-details').textContent = details;
+
+        let disambiguation = null;
+        try {
+            let a = tagNode.dataset.disambiguation;
+            if (typeof a !== 'undefined') {
+                a = JSON.parse(a);
+                if (Array.isArray(a)) { disambiguation = a; }
+            }
+        } catch (e) {
+            // NOP
+        }
+
+        if (disambiguation !== null) {
+            const disambiguationContainer = node.querySelector('.tag-details-disambiguation-list');
+            const copyAttributes = ['totalExpressionCount', 'matchedExpressionCount', 'unmatchedExpressionCount'];
+            for (const attribute of copyAttributes) {
+                const value = tagNode.dataset[attribute];
+                if (typeof value === 'undefined') { continue; }
+                disambiguationContainer.dataset[attribute] = value;
+            }
+            for (const {expression, reading} of disambiguation) {
+                const segments = this._japaneseUtil.distributeFurigana(expression, reading);
+                const disambiguationItem = document.createElement('span');
+                disambiguationItem.className = 'tag-details-disambiguation';
+                this._appendFurigana(disambiguationItem, segments, (container, text) => {
+                    container.appendChild(document.createTextNode(text));
+                });
+                disambiguationContainer.appendChild(disambiguationItem);
+            }
+        }
+
+        return node;
+    }
+
     createProfileListItem() {
         return this._templates.instantiate('profile-list-item');
     }
@@ -321,6 +363,16 @@ class DisplayGenerator {
         return node;
     }
 
+    _createTermTag(details, totalExpressionCount) {
+        const {tag, expressions} = details;
+        const node = this._createTag(tag);
+        node.dataset.disambiguation = `${JSON.stringify(expressions)}`;
+        node.dataset.totalExpressionCount = `${totalExpressionCount}`;
+        node.dataset.matchedExpressionCount = `${expressions.length}`;
+        node.dataset.unmatchedExpressionCount = `${Math.max(0, totalExpressionCount - expressions.length)}`;
+        return node;
+    }
+
     _createSearchTag(text) {
         return this._createTag({
             notes: '',