add scannable tags for expression and reading

2 files changed, 19 insertions, 3 deletions

diff --git a/ext/mixed/js/display-generator.js b/ext/mixed/js/display-generator.js
index b2dc373b..c90e693a 100644
--- a/ext/mixed/js/display-generator.js
+++ b/ext/mixed/js/display-generator.js
@@ -111,7 +111,11 @@ class DisplayGenerator {
             // Fallback
             termTags = details.termTags;
         }
+        const searchQueries = [details.expression, details.reading]
+            .filter((x) => !!x)
+            .map((x) => ({query: x}));
         DisplayGenerator._appendMultiple(tagContainer, this.createTag.bind(this), termTags);
+        DisplayGenerator._appendMultiple(tagContainer, this.createSearchTag.bind(this), searchQueries);
         DisplayGenerator._appendMultiple(frequencyContainer, this.createFrequencyTag.bind(this), details.frequencies);
 
         return node;
@@ -270,6 +274,16 @@ class DisplayGenerator {
         return node;
     }
 
+    createSearchTag(details) {
+        const node = DisplayGenerator._instantiateTemplate(this._tagSearchTemplate);
+
+        node.textContent = details.query;
+
+        node.dataset.query = details.query;
+
+        return node;
+    }
+
     createFrequencyTag(details) {
         const node = DisplayGenerator._instantiateTemplate(this._tagFrequencyTemplate);
 
@@ -311,6 +325,7 @@ class DisplayGenerator {
         this._kanjiReadingTemplate = doc.querySelector('#kanji-reading-template');
 
         this._tagTemplate = doc.querySelector('#tag-template');
+        this._tagSearchTemplate = doc.querySelector('#tag-search-template');
         this._tagFrequencyTemplate = doc.querySelector('#tag-frequency-template');
     }
 
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 70ef8ec3..54cda0eb 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -257,6 +257,7 @@ class Display {
         data.ankiEnabled = `${options.anki.enable}`;
         data.audioEnabled = `${options.audio.enable}`;
         data.compactGlossaries = `${options.general.compactGlossaries}`;
+        data.enableSearchTags = `${options.scanning.enableSearchTags}`;
         data.debug = `${options.general.debugInfo}`;
     }
 
@@ -312,9 +313,9 @@ class Display {
             this.addEventListeners('.action-play-audio', 'click', this.onAudioPlay.bind(this));
             this.addEventListeners('.kanji-link', 'click', this.onKanjiLookup.bind(this));
             if (this.options.scanning.enablePopupSearch) {
-                this.addEventListeners('.term-glossary-item', 'mouseup', this.onGlossaryMouseUp.bind(this));
-                this.addEventListeners('.term-glossary-item', 'mousedown', this.onGlossaryMouseDown.bind(this));
-                this.addEventListeners('.term-glossary-item', 'mousemove', this.onGlossaryMouseMove.bind(this));
+                this.addEventListeners('.term-glossary-item, .tag', 'mouseup', this.onGlossaryMouseUp.bind(this));
+                this.addEventListeners('.term-glossary-item, .tag', 'mousedown', this.onGlossaryMouseDown.bind(this));
+                this.addEventListeners('.term-glossary-item, .tag', 'mousemove', this.onGlossaryMouseMove.bind(this));
             }
         } else {
             Display.clearEventListeners(this.eventListeners);