Fix tag disambiguation (#1556)

* Update display generator to use new data format for tag disambiguation

* Add separator for multiple disambiguations

3 files changed, 35 insertions, 26 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index 626f78bd..887a04a6 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -1823,6 +1823,9 @@ button.footer-notification-close-button {
     height: calc(16em / var(--font-size-no-units));
     background-color: var(--button-content-color);
 }
+.tag-details-disambiguation-list>.tag-details-disambiguation:not(:last-child)::after {
+    content: var(--disambiguation-separator);
+}
 
 
 /* Overlays */
diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index be5d5e66..19e88b8a 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -163,7 +163,7 @@ class DisplayGenerator {
         return this._templates.instantiate('footer-notification');
     }
 
-    createTagFooterNotificationDetails(tagNode) {
+    createTagFooterNotificationDetails(tagNode, dictionaryEntry) {
         const node = this._templates.instantiateFragment('footer-notification-tag-details');
 
         let details = tagNode.dataset.details;
@@ -173,32 +173,35 @@ class DisplayGenerator {
         }
         this._setTextContent(node.querySelector('.tag-details'), details);
 
-        let disambiguation = null;
-        try {
-            let a = tagNode.dataset.disambiguation;
-            if (typeof a !== 'undefined') {
-                a = JSON.parse(a);
-                if (Array.isArray(a)) { disambiguation = a; }
+        if (dictionaryEntry !== null) {
+            const {headwords} = dictionaryEntry;
+            const disambiguationHeadwords = [];
+            const {headwords: headwordIndices} = tagNode.dataset;
+            if (typeof headwordIndices === 'string' && headwordIndices.length > 0) {
+                for (let headwordIndex of headwordIndices.split(' ')) {
+                    headwordIndex = Number.parseInt(headwordIndex, 10);
+                    if (!Number.isNaN(headwordIndex) && headwordIndex >= 0 && headwordIndex < headwords.length) {
+                        disambiguationHeadwords.push(headwords[headwordIndex]);
+                    }
+                }
             }
-        } 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 disambiguationItem = document.createElement('span');
-                disambiguationItem.className = 'tag-details-disambiguation';
-                this._appendFurigana(disambiguationItem, expression, reading, (container, text) => {
-                    container.appendChild(document.createTextNode(text));
-                });
-                disambiguationContainer.appendChild(disambiguationItem);
+            if (disambiguationHeadwords.length > 0 && disambiguationHeadwords.length < headwords.length) {
+                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 {term, reading} of disambiguationHeadwords) {
+                    const disambiguationItem = document.createElement('span');
+                    disambiguationItem.className = 'tag-details-disambiguation';
+                    this._appendFurigana(disambiguationItem, term, reading, (container, text) => {
+                        container.appendChild(document.createTextNode(text));
+                    });
+                    disambiguationContainer.appendChild(disambiguationItem);
+                }
             }
         }
 
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 65cc579f..1142f36f 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -806,7 +806,10 @@ class Display extends EventDispatcher {
             this._tagNotification = new DisplayNotification(this._footerNotificationContainer, node);
         }
 
-        const content = this._displayGenerator.createTagFooterNotificationDetails(tagNode);
+        const index = this._getClosestDefinitionIndex(tagNode);
+        const dictionaryEntry = (index >= 0 && index < this._definitions.length ? this._definitions[index] : null);
+
+        const content = this._displayGenerator.createTagFooterNotificationDetails(tagNode, dictionaryEntry);
         this._tagNotification.setContent(content);
         this._tagNotification.open();
     }