add scannable tags for expression and reading

ext/bg/data/options-schema.json

@@ -290,7 +290,8 @@
                                     "popupNestingMaxDepth",
                                     "enablePopupSearch",
                                     "enableOnPopupExpressions",
-                                    "enableOnSearchPage"
+                                    "enableOnSearchPage",
+                                    "enableSearchTags"
                                 ],
                                 "properties": {
                                     "middleMouse": {
@@ -348,6 +349,10 @@
                                     "enableOnSearchPage": {
                                         "type": "boolean",
                                         "default": true
+                                    },
+                                    "enableSearchTags": {
+                                        "type": "boolean",
+                                        "default": false
                                     }
                                 }
                             },

ext/bg/js/options.js

@@ -316,7 +316,8 @@ function profileOptionsCreateDefaults() {
             popupNestingMaxDepth: 0,
             enablePopupSearch: false,
             enableOnPopupExpressions: false,
-            enableOnSearchPage: true
+            enableOnSearchPage: true,
+            enableSearchTags: false
         },
 
         translation: {

ext/bg/js/settings/main.js

@@ -67,6 +67,7 @@ async function formRead(options) {
     options.scanning.enablePopupSearch = $('#enable-search-within-first-popup').prop('checked');
     options.scanning.enableOnPopupExpressions = $('#enable-scanning-of-popup-expressions').prop('checked');
     options.scanning.enableOnSearchPage = $('#enable-scanning-on-search-page').prop('checked');
+    options.scanning.enableSearchTags = $('#enable-search-tags').prop('checked');
     options.scanning.delay = parseInt($('#scan-delay').val(), 10);
     options.scanning.length = parseInt($('#scan-length').val(), 10);
     options.scanning.modifier = $('#scan-modifier-key').val();
@@ -142,6 +143,7 @@ async function formWrite(options) {
     $('#enable-search-within-first-popup').prop('checked', options.scanning.enablePopupSearch);
     $('#enable-scanning-of-popup-expressions').prop('checked', options.scanning.enableOnPopupExpressions);
     $('#enable-scanning-on-search-page').prop('checked', options.scanning.enableOnSearchPage);
+    $('#enable-search-tags').prop('checked', options.scanning.enableSearchTags);
     $('#scan-delay').val(options.scanning.delay);
     $('#scan-length').val(options.scanning.length);
     $('#scan-modifier-key').val(options.scanning.modifier);

ext/bg/settings.html

@@ -481,7 +481,7 @@
                 </p>
 
                 <div class="checkbox">
-                    <label><input type="checkbox" id="enable-search-within-first-popup"> Enable search when clicking glossary entries</label>
+                    <label><input type="checkbox" id="enable-search-within-first-popup"> Enable search when clicking glossary entries and tags</label>
                 </div>
 
                 <div class="checkbox">
@@ -492,6 +492,10 @@
                     <label><input type="checkbox" id="enable-scanning-of-popup-expressions"> Enable scanning of expressions in search results</label>
                 </div>
 
+                <div class="checkbox">
+                    <label><input type="checkbox" id="enable-search-tags"> Enable clickable and scannable tags for searching expressions and their readings</label>
+                </div>
+
                 <div class="form-group">
                     <label for="popup-nesting-max-depth">Maximum number of additional popups</label>
                     <input type="number" min="0" step="1" id="popup-nesting-max-depth" class="form-control">

ext/mixed/css/display-dark.css

@@ -38,6 +38,7 @@ body { background-color: #1e1e1e; color: #d4d4d4; }
 .tag[data-category=dictionary]   { background-color: #9057ad; }
 .tag[data-category=frequency]    { background-color: #489148; }
 .tag[data-category=partOfSpeech] { background-color: #565656; }
+.tag[data-category=search]       { background-color: #69696e; }
 
 .term-reasons { color: #888888; }
 

ext/mixed/css/display-default.css

@@ -38,6 +38,7 @@ body { background-color: #ffffff; color: #333333; }
 .tag[data-category=dictionary]   { background-color: #aa66cc; }
 .tag[data-category=frequency]    { background-color: #5cb85c; }
 .tag[data-category=partOfSpeech] { background-color: #565656; }
+.tag[data-category=search]       { background-color: #8a8a91; }
 
 .term-reasons { color: #777777; }
 

ext/mixed/css/display.css

@@ -227,6 +227,10 @@ button.action-button {
     margin-left: 0.375em;
 }
 
+html:root:not([data-enable-search-tags=true]) .tag[data-category=search] {
+    display: none;
+}
+
 .entry-header2,
 .entry-header3 {
     display: inline;

ext/mixed/display-templates.html

@@ -77,5 +77,6 @@
 
 <template id="tag-template"><span class="tag"><span class="tag-inner"></span></span></template>
 <template id="tag-frequency-template"><span class="tag" data-category="frequency"><span class="tag-inner"><span class="term-frequency-dictionary-name"></span><span class="term-frequency-separator"></span><span class="term-frequency-value"></span></span></template>
+<template id="tag-search-template"><span class="tag" data-category="search"></span></template>
 
 </body></html>

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');
     }
 

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, .tag', 'mouseup', this.onGlossaryMouseUp.bind(this));
-                this.addEventListeners('.term-glossary-item', 'mousedown', this.onGlossaryMouseDown.bind(this));
+                this.addEventListeners('.term-glossary-item, .tag', 'mousedown', this.onGlossaryMouseDown.bind(this));
-                this.addEventListeners('.term-glossary-item', 'mousemove', this.onGlossaryMouseMove.bind(this));
+                this.addEventListeners('.term-glossary-item, .tag', 'mousemove', this.onGlossaryMouseMove.bind(this));
             }
         } else {
             Display.clearEventListeners(this.eventListeners);