From 4ac41283880fdbdf9bf0b82e255004a300d62e8b Mon Sep 17 00:00:00 2001
From: siikamiika <siikamiika@users.noreply.github.com>
Date: Sun, 10 Nov 2019 03:15:55 +0200
Subject: search page checkbox styling

Change checkboxes to color-inverting icons
---
 ext/mixed/css/display-dark.css    |  6 ++++++
 ext/mixed/css/display-default.css |  6 ++++++
 ext/mixed/css/display.css         | 16 ++++++++++++++++
 3 files changed, 28 insertions(+)

(limited to 'ext/mixed/css')

diff --git a/ext/mixed/css/display-dark.css b/ext/mixed/css/display-dark.css
index 34a0ccd1..681d248c 100644
--- a/ext/mixed/css/display-dark.css
+++ b/ext/mixed/css/display-dark.css
@@ -48,3 +48,9 @@ hr { border-top-color: #2f2f2f; }
 .expression-rare, .expression-rare .kanji-link {
     color: #666666;
 }
+
+.icon-checkbox:checked + label {
+    /* invert colors */
+    background-color: #d4d4d4;
+    color: #1e1e1e;
+}
diff --git a/ext/mixed/css/display-default.css b/ext/mixed/css/display-default.css
index 176c5387..add0a9c8 100644
--- a/ext/mixed/css/display-default.css
+++ b/ext/mixed/css/display-default.css
@@ -48,3 +48,9 @@ hr { border-top-color: #eeeeee; }
 .expression-rare, .expression-rare .kanji-link {
     color: #999999;
 }
+
+.icon-checkbox:checked + label {
+    /* invert colors */
+    background-color: #333333;
+    color: #ffffff;
+}
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 7793ddeb..7ee6f5ac 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -73,6 +73,22 @@ ol, ul {
 }
 
 
+/*
+ * Search page
+ */
+
+.icon-checkbox {
+    display: none;
+}
+
+.icon-checkbox + label {
+    cursor: pointer;
+    font-size: 22px;
+    padding: 2px;
+    user-select: none;
+}
+
+
 /*
  * Entries
  */
-- 
cgit v1.2.3


From f63e8e4be0e7bdb1a2e45e349bf667ea7ca4adab Mon Sep 17 00:00:00 2001
From: siikamiika <siikamiika@users.noreply.github.com>
Date: Tue, 29 Oct 2019 23:49:36 +0200
Subject: add simple query parser

---
 ext/bg/js/search-query-parser.js | 44 ++++++++++++++++++++++++++++++++++++++++
 ext/bg/js/search.js              | 24 ++++++++++++++--------
 ext/bg/search.html               |  3 +++
 ext/mixed/css/display.css        |  9 ++++++++
 ext/mixed/js/display.js          |  2 ++
 5 files changed, 74 insertions(+), 8 deletions(-)
 create mode 100644 ext/bg/js/search-query-parser.js

(limited to 'ext/mixed/css')

diff --git a/ext/bg/js/search-query-parser.js b/ext/bg/js/search-query-parser.js
new file mode 100644
index 00000000..debe53b4
--- /dev/null
+++ b/ext/bg/js/search-query-parser.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (C) 2019  Alex Yatskov <alex@foosoft.net>
+ * Author: Alex Yatskov <alex@foosoft.net>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+
+class QueryParser {
+    constructor(search) {
+        this.search = search;
+
+        this.queryParser = document.querySelector('#query-parser');
+
+        // TODO also enable for mouseover scanning
+        this.queryParser.addEventListener('click', (e) => this.onTermLookup(e));
+    }
+
+    onError(error) {
+        logError(error, false);
+    }
+
+    async onTermLookup(e) {
+        const {textSource} = await this.search.onTermLookup(e, {isQueryParser: true});
+        if (textSource) {
+            textSource.select();
+        }
+    }
+
+    setText(text) {
+        this.queryParser.innerText = text;
+    }
+}
diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js
index 56316217..20d0c58c 100644
--- a/ext/bg/js/search.js
+++ b/ext/bg/js/search.js
@@ -32,6 +32,8 @@ class DisplaySearch extends Display {
             url: window.location.href
         };
 
+        this.queryParser = new QueryParser(this);
+
         this.search = document.querySelector('#search');
         this.query = document.querySelector('#query');
         this.intro = document.querySelector('#intro');
@@ -72,11 +74,11 @@ class DisplaySearch extends Display {
                         const query = DisplaySearch.getSearchQueryFromLocation(window.location.href) || '';
                         if (e.target.checked) {
                             window.wanakana.bind(this.query);
-                            this.query.value = window.wanakana.toKana(query);
+                            this.setQuery(window.wanakana.toKana(query));
                             apiOptionsSet({general: {enableWanakana: true}}, this.getOptionsContext());
                         } else {
                             window.wanakana.unbind(this.query);
-                            this.query.value = query;
+                            this.setQuery(query);
                             apiOptionsSet({general: {enableWanakana: false}}, this.getOptionsContext());
                         }
                         this.onSearchQueryUpdated(this.query.value, false);
@@ -86,9 +88,9 @@ class DisplaySearch extends Display {
                 const query = DisplaySearch.getSearchQueryFromLocation(window.location.href);
                 if (query !== null) {
                     if (this.isWanakanaEnabled()) {
-                        this.query.value = window.wanakana.toKana(query);
+                        this.setQuery(window.wanakana.toKana(query));
                     } else {
-                        this.query.value = query;
+                        this.setQuery(query);
                     }
                     this.onSearchQueryUpdated(this.query.value, false);
                 }
@@ -159,6 +161,7 @@ class DisplaySearch extends Display {
         e.preventDefault();
 
         const query = this.query.value;
+        this.queryParser.setText(query);
         const queryString = query.length > 0 ? `?query=${encodeURIComponent(query)}` : '';
         window.history.pushState(null, '', `${window.location.pathname}${queryString}`);
         this.onSearchQueryUpdated(query, true);
@@ -168,9 +171,9 @@ class DisplaySearch extends Display {
         const query = DisplaySearch.getSearchQueryFromLocation(window.location.href) || '';
         if (this.query !== null) {
             if (this.isWanakanaEnabled()) {
-                this.query.value = window.wanakana.toKana(query);
+                this.setQuery(window.wanakana.toKana(query));
             } else {
-                this.query.value = query;
+                this.setQuery(query);
             }
         }
 
@@ -258,9 +261,9 @@ class DisplaySearch extends Display {
             }
             if (curText && (curText !== this.clipboardPrevText) && jpIsJapaneseText(curText)) {
                 if (this.isWanakanaEnabled()) {
-                    this.query.value = window.wanakana.toKana(curText);
+                    this.setQuery(window.wanakana.toKana(curText));
                 } else {
-                    this.query.value = curText;
+                    this.setQuery(curText);
                 }
 
                 const queryString = curText.length > 0 ? `?query=${encodeURIComponent(curText)}` : '';
@@ -287,6 +290,11 @@ class DisplaySearch extends Display {
         return this.optionsContext;
     }
 
+    setQuery(query) {
+        this.query.value = query;
+        this.queryParser.setText(query);
+    }
+
     setIntroVisible(visible, animate) {
         if (this.introVisible === visible) {
             return;
diff --git a/ext/bg/search.html b/ext/bg/search.html
index 54c5fb6c..48e7dbf5 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -47,6 +47,8 @@
                 <img src="/mixed/img/spinner.gif">
             </div>
 
+            <div id="query-parser" class="scan-disable"></div>
+
             <div id="content"></div>
         </div>
 
@@ -67,6 +69,7 @@
         <script src="/mixed/js/japanese.js"></script>
         <script src="/mixed/js/scroll.js"></script>
 
+        <script src="/bg/js/search-query-parser.js"></script>
         <script src="/bg/js/search.js"></script>
         <script src="/bg/js/search-frontend.js"></script>
     </body>
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 7ee6f5ac..5e5213ff 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -88,6 +88,15 @@ ol, ul {
     user-select: none;
 }
 
+#query-parser {
+    margin-top: 10px;
+    font-size: 24px;
+}
+
+.highlight {
+    background-color: lightblue;
+}
+
 
 /*
  * Entries
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 8ad3ee1b..07a851f5 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -140,6 +140,8 @@ class Display {
             }
 
             this.setContentTerms(definitions, context);
+
+            return {textSource};
         } catch (error) {
             this.onError(error);
         }
-- 
cgit v1.2.3


From c35a05cd62d43ff435c022a353de55510b020277 Mon Sep 17 00:00:00 2001
From: siikamiika <siikamiika@users.noreply.github.com>
Date: Wed, 30 Oct 2019 03:58:24 +0200
Subject: add kana to text

---
 ext/bg/js/api.js                 | 37 +++++++++++++++
 ext/bg/js/backend.js             |  1 +
 ext/bg/js/search-query-parser.js | 97 ++++++++++++++++++++++++++++++++++++----
 ext/fg/js/api.js                 |  4 ++
 ext/mixed/css/display.css        |  4 ++
 ext/mixed/js/display.js          | 78 +++++++++++++++++++++-----------
 6 files changed, 188 insertions(+), 33 deletions(-)

(limited to 'ext/mixed/css')

diff --git a/ext/bg/js/api.js b/ext/bg/js/api.js
index df73aa2a..064903ca 100644
--- a/ext/bg/js/api.js
+++ b/ext/bg/js/api.js
@@ -79,6 +79,43 @@ async function apiTermsFind(text, details, optionsContext) {
     return {length, definitions};
 }
 
+async function apiTextParse(text, optionsContext) {
+    const options = await apiOptionsGet(optionsContext);
+    const translator = utilBackend().translator;
+
+    const results = [];
+    while (text) {
+        let [definitions, length] = await translator.findTerms(text, {}, options);
+        if (definitions.length > 0) {
+            definitions = dictTermsSort(definitions);
+            const {expression, source, reading} = definitions[0];
+
+            let stemLength = source.length;
+            while (source[stemLength - 1] !== expression[stemLength - 1]) {
+                --stemLength;
+            }
+            const offset = source.length - stemLength;
+
+            for (const result of jpDistributeFurigana(
+                source.slice(0, offset === 0 ? source.length : source.length - offset),
+                reading.slice(0, offset === 0 ? reading.length : source.length + (reading.length - expression.length) - offset)
+            )) {
+                results.push(result);
+            }
+
+            if (stemLength !== source.length) {
+                results.push({text: source.slice(stemLength)});
+            }
+
+            text = text.slice(source.length);
+        } else {
+            results.push({text: text[0]});
+            text = text.slice(1);
+        }
+    }
+    return results;
+}
+
 async function apiKanjiFind(text, optionsContext) {
     const options = await apiOptionsGet(optionsContext);
     const definitions = await utilBackend().translator.findKanji(text, options);
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index efad153a..d0e404f2 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -180,6 +180,7 @@ Backend.messageHandlers = {
     optionsSet: ({changedOptions, optionsContext, source}) => apiOptionsSet(changedOptions, optionsContext, source),
     kanjiFind: ({text, optionsContext}) => apiKanjiFind(text, optionsContext),
     termsFind: ({text, details, optionsContext}) => apiTermsFind(text, details, optionsContext),
+    textParse: ({text, optionsContext}) => apiTextParse(text, optionsContext),
     definitionAdd: ({definition, mode, context, optionsContext}) => apiDefinitionAdd(definition, mode, context, optionsContext),
     definitionsAddable: ({definitions, modes, optionsContext}) => apiDefinitionsAddable(definitions, modes, optionsContext),
     noteView: ({noteId}) => apiNoteView(noteId),
diff --git a/ext/bg/js/search-query-parser.js b/ext/bg/js/search-query-parser.js
index debe53b4..c3a3900b 100644
--- a/ext/bg/js/search-query-parser.js
+++ b/ext/bg/js/search-query-parser.js
@@ -23,22 +23,103 @@ class QueryParser {
 
         this.queryParser = document.querySelector('#query-parser');
 
-        // TODO also enable for mouseover scanning
-        this.queryParser.addEventListener('click', (e) => this.onTermLookup(e));
+        this.queryParser.addEventListener('click', (e) => this.onClick(e));
+        this.queryParser.addEventListener('mousemove', (e) => this.onMouseMove(e));
     }
 
     onError(error) {
         logError(error, false);
     }
 
-    async onTermLookup(e) {
-        const {textSource} = await this.search.onTermLookup(e, {isQueryParser: true});
-        if (textSource) {
-            textSource.select();
+    onClick(e) {
+        this.onTermLookup(e, {disableScroll: true, selectText: true});
+    }
+
+    async onMouseMove(e) {
+        if (
+            (e.buttons & 0x1) !== 0x0 // Left mouse button
+        ) {
+            return;
+        }
+
+        const scanningOptions = this.search.options.scanning;
+        const scanningModifier = scanningOptions.modifier;
+        if (!(
+            QueryParser.isScanningModifierPressed(scanningModifier, e) ||
+            (scanningOptions.middleMouse && (e.buttons & 0x4) !== 0x0) // Middle mouse button
+        )) {
+            return;
         }
+
+        await this.onTermLookup(e, {disableScroll: true, selectText: true, disableHistory: true})
+    }
+
+    onTermLookup(e, params) {
+        this.search.onTermLookup(e, params);
     }
 
-    setText(text) {
-        this.queryParser.innerText = text;
+    async setText(text) {
+        this.search.setSpinnerVisible(true);
+
+        const results = await apiTextParse(text, this.search.getOptionsContext());
+
+        const tempContainer = document.createElement('div');
+        for (const {text, furigana} of results) {
+            if (furigana) {
+                const rubyElement = document.createElement('ruby');
+                const furiganaElement = document.createElement('rt');
+                furiganaElement.innerText = furigana;
+                rubyElement.appendChild(document.createTextNode(text));
+                rubyElement.appendChild(furiganaElement);
+                tempContainer.appendChild(rubyElement);
+            } else {
+                tempContainer.appendChild(document.createTextNode(text));
+            }
+        }
+        this.queryParser.innerHTML = '';
+        this.queryParser.appendChild(tempContainer);
+
+        this.search.setSpinnerVisible(false);
+    }
+
+    async parseText(text) {
+        const results = [];
+        while (text) {
+            const {definitions, length} =  await apiTermsFind(text, {}, this.search.getOptionsContext());
+            if (length) {
+                results.push(definitions);
+                text = text.slice(length);
+            } else {
+                results.push(text[0]);
+                text = text.slice(1);
+            }
+        }
+        return results;
+    }
+
+    popupTimerSet(callback) {
+        const delay = this.options.scanning.delay;
+        if (delay > 0) {
+            this.popupTimer = window.setTimeout(callback, delay);
+        } else {
+            Promise.resolve().then(callback);
+        }
+    }
+
+    popupTimerClear() {
+        if (this.popupTimer !== null) {
+            window.clearTimeout(this.popupTimer);
+            this.popupTimer = null;
+        }
+    }
+
+    static isScanningModifierPressed(scanningModifier, mouseEvent) {
+        switch (scanningModifier) {
+            case 'alt': return mouseEvent.altKey;
+            case 'ctrl': return mouseEvent.ctrlKey;
+            case 'shift': return mouseEvent.shiftKey;
+            case 'none': return true;
+            default: return false;
+        }
     }
 }
diff --git a/ext/fg/js/api.js b/ext/fg/js/api.js
index 945ba076..cc1e0e90 100644
--- a/ext/fg/js/api.js
+++ b/ext/fg/js/api.js
@@ -29,6 +29,10 @@ function apiTermsFind(text, details, optionsContext) {
     return utilInvoke('termsFind', {text, details, optionsContext});
 }
 
+function apiTextParse(text, optionsContext) {
+    return utilInvoke('textParse', {text, optionsContext});
+}
+
 function apiKanjiFind(text, optionsContext) {
     return utilInvoke('kanjiFind', {text, optionsContext});
 }
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 5e5213ff..81109fc6 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -73,6 +73,10 @@ ol, ul {
 }
 
 
+html:root[data-yomichan-page=search] body {
+    min-height: 101vh; /* always show scroll bar to avoid scanning problems */
+}
+
 /*
  * Search page
  */
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 07a851f5..82385bf9 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -98,17 +98,62 @@ class Display {
         }
     }
 
-    async onTermLookup(e) {
+    async onTermLookup(e, {disableScroll, selectText, disableHistory}) {
+        const termLookupResults = await this.termLookup(e);
+        if (!termLookupResults) {
+            return false;
+        }
+
+        try {
+            const {textSource, definitions} = termLookupResults;
+
+            const scannedElement = e.target;
+            const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
+
+            if (!disableScroll) {
+                this.windowScroll.toY(0);
+            }
+            let context;
+            if (disableHistory) {
+                const {url, source} = this.context || {};
+                context = {sentence, url, source, disableScroll};
+            } else {
+                context = {
+                    disableScroll,
+                    source: {
+                        definitions: this.definitions,
+                        index: this.entryIndexFind(scannedElement),
+                        scroll: this.windowScroll.y
+                    }
+                };
+
+                if (this.context) {
+                    context.sentence = sentence;
+                    context.url = this.context.url;
+                    context.source.source = this.context.source;
+                }
+            }
+
+            this.setContentTerms(definitions, context);
+
+            if (selectText) {
+                textSource.select();
+            }
+        } catch (error) {
+            this.onError(error);
+        }
+    }
+
+    async termLookup(e) {
         try {
             e.preventDefault();
 
-            const clickedElement = e.target;
             const textSource = docRangeFromPoint(e.clientX, e.clientY, this.options);
             if (textSource === null) {
                 return false;
             }
 
-            let definitions, length, sentence;
+            let definitions, length;
             try {
                 textSource.setEndOffset(this.options.scanning.length);
 
@@ -118,30 +163,11 @@ class Display {
                 }
 
                 textSource.setEndOffset(length);
-
-                sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
             } finally {
                 textSource.cleanup();
             }
 
-            this.windowScroll.toY(0);
-            const context = {
-                source: {
-                    definitions: this.definitions,
-                    index: this.entryIndexFind(clickedElement),
-                    scroll: this.windowScroll.y
-                }
-            };
-
-            if (this.context) {
-                context.sentence = sentence;
-                context.url = this.context.url;
-                context.source.source = this.context.source;
-            }
-
-            this.setContentTerms(definitions, context);
-
-            return {textSource};
+            return {textSource, definitions};
         } catch (error) {
             this.onError(error);
         }
@@ -338,8 +364,10 @@ class Display {
 
             const content = await apiTemplateRender('terms.html', params);
             this.container.innerHTML = content;
-            const {index, scroll} = context || {};
-            this.entryScrollIntoView(index || 0, scroll);
+            const {index, scroll, disableScroll} = context || {};
+            if (!disableScroll) {
+                this.entryScrollIntoView(index || 0, scroll);
+            }
 
             if (options.audio.enabled && options.audio.autoPlay) {
                 this.autoPlayAudio();
-- 
cgit v1.2.3


From 530b95895bb8a807cbaea6a324323c49152c16ab Mon Sep 17 00:00:00 2001
From: siikamiika <siikamiika@users.noreply.github.com>
Date: Wed, 30 Oct 2019 12:06:25 +0200
Subject: remove unused css

---
 ext/mixed/css/display.css | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

(limited to 'ext/mixed/css')

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 81109fc6..65b8b466 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -73,10 +73,6 @@ ol, ul {
 }
 
 
-html:root[data-yomichan-page=search] body {
-    min-height: 101vh; /* always show scroll bar to avoid scanning problems */
-}
-
 /*
  * Search page
  */
@@ -97,8 +93,13 @@ html:root[data-yomichan-page=search] body {
     font-size: 24px;
 }
 
-.highlight {
-    background-color: lightblue;
+html:root[data-yomichan-page=search] body {
+    min-height: 101vh; /* always show scroll bar to avoid scanning problems */
+}
+
+#query-parser {
+    margin-top: 10px;
+    font-size: 24px;
 }
 
 
-- 
cgit v1.2.3


From 3881457e4ed3f9c7833ac21a5e7fc44c2ba00b0f Mon Sep 17 00:00:00 2001
From: siikamiika <siikamiika@users.noreply.github.com>
Date: Thu, 31 Oct 2019 23:56:44 +0200
Subject: use handlebars templates for query parser

---
 ext/bg/js/api.js                 | 12 +++++-----
 ext/bg/js/search-query-parser.js | 40 ++++++++++++++-------------------
 ext/bg/js/templates.js           | 48 ++++++++++++++++++++++++++++++++++++++++
 ext/mixed/css/display.css        |  9 ++++----
 tmpl/query-parser.html           | 23 +++++++++++++++++++
 5 files changed, 99 insertions(+), 33 deletions(-)
 create mode 100644 tmpl/query-parser.html

(limited to 'ext/mixed/css')

diff --git a/ext/bg/js/api.js b/ext/bg/js/api.js
index dbbe7368..7c9a72a7 100644
--- a/ext/bg/js/api.js
+++ b/ext/bg/js/api.js
@@ -85,6 +85,7 @@ async function apiTextParse(text, optionsContext) {
 
     const results = [];
     while (text) {
+        const term = [];
         let [definitions, sourceLength] = await translator.findTerms(text, {}, options);
         if (definitions.length > 0) {
             definitions = dictTermsSort(definitions);
@@ -98,22 +99,23 @@ async function apiTextParse(text, optionsContext) {
             }
             const offset = source.length - stemLength;
 
-            for (const result of jpDistributeFurigana(
+            for (const {text, furigana} of jpDistributeFurigana(
                 source.slice(0, offset === 0 ? source.length : source.length - offset),
-                reading.slice(0, offset === 0 ? reading.length : source.length + (reading.length - expression.length) - offset)
+                reading.slice(0, offset === 0 ? reading.length : reading.length - expression.length + stemLength)
             )) {
-                results.push(result);
+                term.push({text, reading: furigana || ''});
             }
 
             if (stemLength !== source.length) {
-                results.push({text: source.slice(stemLength)});
+                term.push({text: source.slice(stemLength)});
             }
 
             text = text.slice(source.length);
         } else {
-            results.push({text: text[0]});
+            term.push({text: text[0]});
             text = text.slice(1);
         }
+        results.push(term);
     }
     return results;
 }
diff --git a/ext/bg/js/search-query-parser.js b/ext/bg/js/search-query-parser.js
index 9bea6508..8a7db69a 100644
--- a/ext/bg/js/search-query-parser.js
+++ b/ext/bg/js/search-query-parser.js
@@ -59,39 +59,33 @@ class QueryParser {
     }
 
     async setText(text) {
-        this.queryParser.innerHTML = '';
         this.search.setSpinnerVisible(true);
 
+        const previewTerms = [];
         let previewText = text;
         while (previewText) {
             const tempText = previewText.slice(0, 2);
+            previewTerms.push([{text: tempText}]);
             previewText = previewText.slice(2);
-
-            const tempRuby = document.createElement('ruby');
-            const tempFurigana = document.createElement('rt');
-            tempRuby.appendChild(document.createTextNode(tempText));
-            tempRuby.appendChild(tempFurigana);
-            this.queryParser.appendChild(tempRuby);
         }
 
+        this.queryParser.innerHTML = await apiTemplateRender('query-parser.html', {
+            terms: previewTerms,
+            preview: true
+        });
+
         const results = await apiTextParse(text, this.search.getOptionsContext());
 
-        const textContainer = document.createElement('div');
-        for (const {text, furigana} of results) {
-            const rubyElement = document.createElement('ruby');
-            const furiganaElement = document.createElement('rt');
-            if (furigana) {
-                furiganaElement.innerText = furigana;
-                rubyElement.appendChild(document.createTextNode(text));
-                rubyElement.appendChild(furiganaElement);
-            } else {
-                rubyElement.appendChild(document.createTextNode(text));
-                rubyElement.appendChild(furiganaElement);
-            }
-            textContainer.appendChild(rubyElement);
-        }
-        this.queryParser.innerHTML = '';
-        this.queryParser.appendChild(textContainer);
+        const content = await apiTemplateRender('query-parser.html', {
+            terms: results.map((term) => {
+                return term.map((part) => {
+                    part.raw = !part.text.trim() && (!part.reading || !part.reading.trim());
+                    return part;
+                });
+            })
+        });
+
+        this.queryParser.innerHTML = content;
 
         this.search.setSpinnerVisible(false);
     }
diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js
index 823b9e6f..cc233d49 100644
--- a/ext/bg/js/templates.js
+++ b/ext/bg/js/templates.js
@@ -162,6 +162,54 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
   return fn;
   }
 
+,"useDecorators":true,"usePartial":true,"useData":true,"useDepths":true});
+templates['query-parser.html'] = template({"1":function(container,depth0,helpers,partials,data) {
+    var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {});
+
+  return ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.preview : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.program(4, data, 0),"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(alias1,depth0,{"name":"each","hash":{},"fn":container.program(6, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + "</span>";
+},"2":function(container,depth0,helpers,partials,data) {
+    return "<span class=\"query-parser-term-preview\">";
+},"4":function(container,depth0,helpers,partials,data) {
+    return "<span class=\"query-parser-term\">";
+},"6":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return ((stack1 = container.invokePartial(partials.part,depth0,{"name":"part","data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
+},"8":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.raw : depth0),{"name":"if","hash":{},"fn":container.program(9, data, 0),"inverse":container.program(11, data, 0),"data":data})) != null ? stack1 : "");
+},"9":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  return container.escapeExpression(((helper = (helper = helpers.text || (depth0 != null ? depth0.text : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"text","hash":{},"data":data}) : helper)));
+},"11":function(container,depth0,helpers,partials,data) {
+    var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
+
+  return "<ruby>"
+    + alias4(((helper = (helper = helpers.text || (depth0 != null ? depth0.text : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"text","hash":{},"data":data}) : helper)))
+    + "<rt>"
+    + alias4(((helper = (helper = helpers.reading || (depth0 != null ? depth0.reading : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"reading","hash":{},"data":data}) : helper)))
+    + "</rt></ruby>";
+},"13":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1;
+
+  return ((stack1 = container.invokePartial(partials.term,depth0,{"name":"term","hash":{"preview":(depths[1] != null ? depths[1].preview : depths[1])},"data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1;
+
+  return ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.terms : depth0),{"name":"each","hash":{},"fn":container.program(13, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "");
+},"main_d":  function(fn, props, container, depth0, data, blockParams, depths) {
+
+  var decorators = container.decorators;
+
+  fn = decorators.inline(fn,props,container,{"name":"inline","hash":{},"fn":container.program(1, data, 0, blockParams, depths),"inverse":container.noop,"args":["term"],"data":data}) || fn;
+  fn = decorators.inline(fn,props,container,{"name":"inline","hash":{},"fn":container.program(8, data, 0, blockParams, depths),"inverse":container.noop,"args":["part"],"data":data}) || fn;
+  return fn;
+  }
+
 ,"useDecorators":true,"usePartial":true,"useData":true,"useDepths":true});
 templates['terms.html'] = template({"1":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options, alias1=depth0 != null ? depth0 : (container.nullContext || {}), buffer = 
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index 65b8b466..d24aa58c 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -93,13 +93,12 @@ ol, ul {
     font-size: 24px;
 }
 
-html:root[data-yomichan-page=search] body {
-    min-height: 101vh; /* always show scroll bar to avoid scanning problems */
+.query-parser-term {
+    margin-right: 5px;
 }
 
-#query-parser {
-    margin-top: 10px;
-    font-size: 24px;
+html:root[data-yomichan-page=search] body {
+    min-height: 101vh; /* always show scroll bar to avoid scanning problems */
 }
 
 
diff --git a/tmpl/query-parser.html b/tmpl/query-parser.html
new file mode 100644
index 00000000..818650e6
--- /dev/null
+++ b/tmpl/query-parser.html
@@ -0,0 +1,23 @@
+{{~#*inline "term"~}}
+{{~#if preview~}}
+<span class="query-parser-term-preview">
+{{~else~}}
+<span class="query-parser-term">
+{{~/if~}}
+{{~#each this~}}
+{{> part }}
+{{~/each~}}
+</span>
+{{~/inline~}}
+
+{{~#*inline "part"~}}
+{{~#if raw~}}
+{{text}}
+{{~else~}}
+<ruby>{{text}}<rt>{{reading}}</rt></ruby>
+{{~/if~}}
+{{~/inline~}}
+
+{{~#each terms~}}
+{{> term preview=../preview }}
+{{~/each~}}
-- 
cgit v1.2.3


From 0d6e0edc31d4ceac58b886e238b77f0143a5c3ec Mon Sep 17 00:00:00 2001
From: siikamiika <siikamiika@users.noreply.github.com>
Date: Wed, 13 Nov 2019 12:05:39 +0200
Subject: remove height hack and use overflow-y: scroll

---
 ext/mixed/css/display.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'ext/mixed/css')

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index d24aa58c..ba2fadb7 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -98,7 +98,7 @@ ol, ul {
 }
 
 html:root[data-yomichan-page=search] body {
-    min-height: 101vh; /* always show scroll bar to avoid scanning problems */
+    overflow-y: scroll; /* always show scroll bar to avoid scanning problems */
 }
 
 
-- 
cgit v1.2.3


From 1f2734863f2f9213fd6c2db196d2b20969a7ee99 Mon Sep 17 00:00:00 2001
From: siikamiika <siikamiika@users.noreply.github.com>
Date: Thu, 28 Nov 2019 18:06:24 +0200
Subject: Display history navigation buttons fixed position

---
 ext/bg/js/templates.js    | 218 ++++++++++++++++++++++++----------------------
 ext/bg/search.html        |   2 +-
 ext/mixed/css/display.css |  15 +++-
 tmpl/kanji.html           |  12 ++-
 tmpl/terms.html           |  12 ++-
 5 files changed, 141 insertions(+), 118 deletions(-)

(limited to 'ext/mixed/css')

diff --git a/ext/bg/js/templates.js b/ext/bg/js/templates.js
index 1f551c3f..e9ef7de1 100644
--- a/ext/bg/js/templates.js
+++ b/ext/bg/js/templates.js
@@ -33,20 +33,18 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
 
   return "<div class=\"entry\" data-type=\"kanji\">\n    <div class=\"actions\">\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.addable : depth0),{"name":"if","hash":{},"fn":container.program(11, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.source : depth0),{"name":"if","hash":{},"fn":container.program(13, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.history : depth0),{"name":"if","hash":{},"fn":container.program(15, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "        <img src=\"/mixed/img/entry-current.svg\" class=\"current\" title=\"Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)\" alt>\n    </div>\n\n    <div class=\"glyph expression-scan-toggle\">"
     + container.escapeExpression(((helper = (helper = helpers.character || (depth0 != null ? depth0.character : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"character","hash":{},"data":data}) : helper)))
     + "</div>\n\n"
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.frequencies : depth0),{"name":"if","hash":{},"fn":container.program(17, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.frequencies : depth0),{"name":"if","hash":{},"fn":container.program(13, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n"
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.tags : depth0),{"name":"if","hash":{},"fn":container.program(20, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.tags : depth0),{"name":"if","hash":{},"fn":container.program(16, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n    <table class=\"table table-condensed glyph-data\">\n        <tr>\n            <th>Glossary</th>\n            <th>Readings</th>\n            <th>Statistics</th>\n        </tr>\n        <tr>\n            <td class=\"glossary\">\n"
-    + ((stack1 = helpers["if"].call(alias1,((stack1 = (depth0 != null ? depth0.glossary : depth0)) != null ? stack1["1"] : stack1),{"name":"if","hash":{},"fn":container.program(23, data, 0),"inverse":container.program(26, data, 0),"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,((stack1 = (depth0 != null ? depth0.glossary : depth0)) != null ? stack1["1"] : stack1),{"name":"if","hash":{},"fn":container.program(19, data, 0),"inverse":container.program(22, data, 0),"data":data})) != null ? stack1 : "")
     + "            </td>\n            <td class=\"reading\">\n                "
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.onyomi : depth0),{"name":"if","hash":{},"fn":container.program(28, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.onyomi : depth0),{"name":"if","hash":{},"fn":container.program(24, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n                "
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.kunyomi : depth0),{"name":"if","hash":{},"fn":container.program(31, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.kunyomi : depth0),{"name":"if","hash":{},"fn":container.program(27, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n            </td>\n            <td>"
     + ((stack1 = container.invokePartial(partials.table,depth0,{"name":"table","hash":{"data":((stack1 = (depth0 != null ? depth0.stats : depth0)) != null ? stack1.misc : stack1)},"data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "")
     + "</td>\n        </tr>\n        <tr>\n            <th colspan=\"3\">Classifications</th>\n        </tr>\n        <tr>\n            <td colspan=\"3\">"
@@ -56,21 +54,17 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
     + "</td>\n        </tr>\n        <tr>\n            <th colspan=\"3\">Dictionary Indices</th>\n        </tr>\n        <tr>\n            <td colspan=\"3\">"
     + ((stack1 = container.invokePartial(partials.table,depth0,{"name":"table","hash":{"data":((stack1 = (depth0 != null ? depth0.stats : depth0)) != null ? stack1.index : stack1)},"data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "")
     + "</td>\n        </tr>\n    </table>\n\n"
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.debug : depth0),{"name":"if","hash":{},"fn":container.program(33, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.debug : depth0),{"name":"if","hash":{},"fn":container.program(29, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "</div>\n";
 },"11":function(container,depth0,helpers,partials,data) {
     return "        <a href=\"#\" class=\"action-view-note pending disabled\"><img src=\"/mixed/img/view-note.svg\" title=\"View added note (Alt + V)\" alt></a>\n        <a href=\"#\" class=\"action-add-note pending disabled\" data-mode=\"kanji\"><img src=\"/mixed/img/add-term-kanji.svg\" title=\"Add Kanji (Alt + K)\" alt></a>\n";
 },"13":function(container,depth0,helpers,partials,data) {
-    return "        <a href=\"#\" class=\"source-term\"><img src=\"/mixed/img/source-term.svg\" title=\"Source term (Alt + B)\" alt></a>\n";
-},"15":function(container,depth0,helpers,partials,data) {
-    return "        <a href=\"#\" class=\"history-term\"><img src=\"/mixed/img/source-term.svg\" style=\"transform: scaleX(-1);\" title=\"History term (Alt + F)\" alt></a>\n";
-},"17":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return "    <div>\n"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.frequencies : depth0),{"name":"each","hash":{},"fn":container.program(18, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.frequencies : depth0),{"name":"each","hash":{},"fn":container.program(14, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "    </div>\n";
-},"18":function(container,depth0,helpers,partials,data) {
+},"14":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
   return "        <span class=\"label label-default tag-frequency\">"
@@ -78,13 +72,13 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
     + ":"
     + alias4(((helper = (helper = helpers.frequency || (depth0 != null ? depth0.frequency : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"frequency","hash":{},"data":data}) : helper)))
     + "</span>\n";
-},"20":function(container,depth0,helpers,partials,data) {
+},"16":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return "    <div>\n"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.tags : depth0),{"name":"each","hash":{},"fn":container.program(21, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.tags : depth0),{"name":"each","hash":{},"fn":container.program(17, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "    </div>\n";
-},"21":function(container,depth0,helpers,partials,data) {
+},"17":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
   return "        <span class=\"label label-default tag-"
@@ -94,68 +88,81 @@ templates['kanji.html'] = template({"1":function(container,depth0,helpers,partia
     + "\">"
     + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
     + "</span>\n";
-},"23":function(container,depth0,helpers,partials,data) {
+},"19":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return "                <ol>"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(24, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.glossary : depth0),{"name":"each","hash":{},"fn":container.program(20, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "</ol>\n";
-},"24":function(container,depth0,helpers,partials,data) {
+},"20":function(container,depth0,helpers,partials,data) {
     return "<li><span class=\"glossary-item\">"
     + container.escapeExpression(container.lambda(depth0, depth0))
     + "</span></li>";
-},"26":function(container,depth0,helpers,partials,data) {
+},"22":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return "                <span class=\"glossary-item\">"
     + container.escapeExpression(container.lambda(((stack1 = (depth0 != null ? depth0.glossary : depth0)) != null ? stack1["0"] : stack1), depth0))
     + "</span>\n";
-},"28":function(container,depth0,helpers,partials,data) {
+},"24":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return "<dl>"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.onyomi : depth0),{"name":"each","hash":{},"fn":container.program(29, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.onyomi : depth0),{"name":"each","hash":{},"fn":container.program(25, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "</dl>";
-},"29":function(container,depth0,helpers,partials,data) {
+},"25":function(container,depth0,helpers,partials,data) {
     return "<dd>"
     + container.escapeExpression(container.lambda(depth0, depth0))
     + "</dd>";
-},"31":function(container,depth0,helpers,partials,data) {
+},"27":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return "<dl>"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.kunyomi : depth0),{"name":"each","hash":{},"fn":container.program(29, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.kunyomi : depth0),{"name":"each","hash":{},"fn":container.program(25, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "</dl>";
-},"33":function(container,depth0,helpers,partials,data) {
+},"29":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options, buffer = 
   "    <pre>";
-  stack1 = ((helper = (helper = helpers.dumpObject || (depth0 != null ? depth0.dumpObject : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"dumpObject","hash":{},"fn":container.program(34, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),options) : helper));
+  stack1 = ((helper = (helper = helpers.dumpObject || (depth0 != null ? depth0.dumpObject : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"dumpObject","hash":{},"fn":container.program(30, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),options) : helper));
   if (!helpers.dumpObject) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { buffer += stack1; }
   return buffer + "</pre>\n";
-},"34":function(container,depth0,helpers,partials,data) {
+},"30":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return ((stack1 = container.lambda(depth0, depth0)) != null ? stack1 : "");
-},"36":function(container,depth0,helpers,partials,data,blockParams,depths) {
-    var stack1;
+},"32":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {});
 
-  return ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.definitions : depth0),{"name":"each","hash":{},"fn":container.program(37, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "");
-},"37":function(container,depth0,helpers,partials,data,blockParams,depths) {
+  return "<div class=\"term-navigation\">\n    <a href=\"#\" "
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.source : depth0),{"name":"if","hash":{},"fn":container.program(33, data, 0, blockParams, depths),"inverse":container.program(35, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
+    + "><img src=\"/mixed/img/source-term.svg\" title=\"Source term (Alt + B)\" alt></a>\n    <a href=\"#\" "
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.history : depth0),{"name":"if","hash":{},"fn":container.program(37, data, 0, blockParams, depths),"inverse":container.program(39, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
+    + "><img src=\"/mixed/img/source-term.svg\" style=\"transform: scaleX(-1);\" title=\"History term (Alt + F)\" alt></a>\n</div>\n"
+    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.definitions : depth0),{"name":"each","hash":{},"fn":container.program(41, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "");
+},"33":function(container,depth0,helpers,partials,data) {
+    return "class=\"source-term\"";
+},"35":function(container,depth0,helpers,partials,data) {
+    return "class=\"source-term term-button-fade\"";
+},"37":function(container,depth0,helpers,partials,data) {
+    return "class=\"history-term\"";
+},"39":function(container,depth0,helpers,partials,data) {
+    return "class=\"history-term term-button-fade\"";
+},"41":function(container,depth0,helpers,partials,data,blockParams,depths) {
     var stack1;
 
-  return ((stack1 = helpers.unless.call(depth0 != null ? depth0 : (container.nullContext || {}),(data && data.first),{"name":"unless","hash":{},"fn":container.program(38, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+  return ((stack1 = helpers.unless.call(depth0 != null ? depth0 : (container.nullContext || {}),(data && data.first),{"name":"unless","hash":{},"fn":container.program(42, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n"
-    + ((stack1 = container.invokePartial(partials.kanji,depth0,{"name":"kanji","hash":{"root":(depths[1] != null ? depths[1].root : depths[1]),"history":(depths[1] != null ? depths[1].history : depths[1]),"source":(depths[1] != null ? depths[1].source : depths[1]),"addable":(depths[1] != null ? depths[1].addable : depths[1]),"debug":(depths[1] != null ? depths[1].debug : depths[1])},"data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
-},"38":function(container,depth0,helpers,partials,data) {
+    + ((stack1 = container.invokePartial(partials.kanji,depth0,{"name":"kanji","hash":{"root":(depths[1] != null ? depths[1].root : depths[1]),"addable":(depths[1] != null ? depths[1].addable : depths[1]),"debug":(depths[1] != null ? depths[1].debug : depths[1])},"data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
+},"42":function(container,depth0,helpers,partials,data) {
     return "<hr>";
-},"40":function(container,depth0,helpers,partials,data) {
+},"44":function(container,depth0,helpers,partials,data) {
     return "<p class=\"note\">No results found</p>\n";
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data,blockParams,depths) {
     var stack1;
 
   return "\n\n"
-    + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.definitions : depth0),{"name":"if","hash":{},"fn":container.program(36, data, 0, blockParams, depths),"inverse":container.program(40, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "");
+    + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.definitions : depth0),{"name":"if","hash":{},"fn":container.program(32, data, 0, blockParams, depths),"inverse":container.program(44, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "");
 },"main_d":  function(fn, props, container, depth0, data, blockParams, depths) {
 
   var decorators = container.decorators;
@@ -309,18 +316,16 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia
   return "<div class=\"entry\" data-type=\"term\">\n    <div class=\"actions\">\n"
     + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.addable : depth0),{"name":"if","hash":{},"fn":container.program(25, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + ((stack1 = helpers.unless.call(alias1,(depth0 != null ? depth0.merged : depth0),{"name":"unless","hash":{},"fn":container.program(27, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.source : depth0),{"name":"if","hash":{},"fn":container.program(30, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.history : depth0),{"name":"if","hash":{},"fn":container.program(32, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "        <img src=\"/mixed/img/entry-current.svg\" class=\"current\" title=\"Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)\" alt>\n    </div>\n\n"
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.merged : depth0),{"name":"if","hash":{},"fn":container.program(34, data, 0, blockParams, depths),"inverse":container.program(49, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.merged : depth0),{"name":"if","hash":{},"fn":container.program(30, data, 0, blockParams, depths),"inverse":container.program(45, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
     + "\n"
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.reasons : depth0),{"name":"if","hash":{},"fn":container.program(52, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.reasons : depth0),{"name":"if","hash":{},"fn":container.program(48, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n"
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.frequencies : depth0),{"name":"if","hash":{},"fn":container.program(56, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.frequencies : depth0),{"name":"if","hash":{},"fn":container.program(52, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n    <div class=\"glossary\">\n"
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.grouped : depth0),{"name":"if","hash":{},"fn":container.program(59, data, 0, blockParams, depths),"inverse":container.program(65, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.grouped : depth0),{"name":"if","hash":{},"fn":container.program(55, data, 0, blockParams, depths),"inverse":container.program(61, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
     + "    </div>\n\n"
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.debug : depth0),{"name":"if","hash":{},"fn":container.program(68, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.debug : depth0),{"name":"if","hash":{},"fn":container.program(64, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "</div>\n";
 },"25":function(container,depth0,helpers,partials,data) {
     return "        <a href=\"#\" class=\"action-view-note pending disabled\"><img src=\"/mixed/img/view-note.svg\" title=\"View added note (Alt + V)\" alt></a>\n        <a href=\"#\" class=\"action-add-note pending disabled\" data-mode=\"term-kanji\"><img src=\"/mixed/img/add-term-kanji.svg\" title=\"Add expression (Alt + E)\" alt></a>\n        <a href=\"#\" class=\"action-add-note pending disabled\" data-mode=\"term-kana\"><img src=\"/mixed/img/add-term-kana.svg\" title=\"Add reading (Alt + R)\" alt></a>\n";
@@ -330,49 +335,45 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia
   return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.playback : depth0),{"name":"if","hash":{},"fn":container.program(28, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
 },"28":function(container,depth0,helpers,partials,data) {
     return "        <a href=\"#\" class=\"action-play-audio\"><img src=\"/mixed/img/play-audio.svg\" title=\"Play audio (Alt + P)\" alt></a>\n";
-},"30":function(container,depth0,helpers,partials,data) {
-    return "        <a href=\"#\" class=\"source-term\"><img src=\"/mixed/img/source-term.svg\" title=\"Source term (Alt + B)\" alt></a>\n";
-},"32":function(container,depth0,helpers,partials,data) {
-    return "        <a href=\"#\" class=\"history-term\"><img src=\"/mixed/img/source-term.svg\" style=\"transform: scaleX(-1);\" title=\"History term (Alt + F)\" alt></a>\n";
-},"34":function(container,depth0,helpers,partials,data,blockParams,depths) {
+},"30":function(container,depth0,helpers,partials,data,blockParams,depths) {
     var stack1;
 
-  return ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.expressions : depth0),{"name":"each","hash":{},"fn":container.program(35, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "");
-},"35":function(container,depth0,helpers,partials,data,blockParams,depths) {
+  return ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.expressions : depth0),{"name":"each","hash":{},"fn":container.program(31, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "");
+},"31":function(container,depth0,helpers,partials,data,blockParams,depths) {
     var stack1, helper, options, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", buffer = 
   "<div class=\"expression expression-scan-toggle\"><span class=\"expression-"
     + container.escapeExpression(((helper = (helper = helpers.termFrequency || (depth0 != null ? depth0.termFrequency : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"termFrequency","hash":{},"data":data}) : helper)))
     + "\">";
-  stack1 = ((helper = (helper = helpers.kanjiLinks || (depth0 != null ? depth0.kanjiLinks : depth0)) != null ? helper : alias2),(options={"name":"kanjiLinks","hash":{},"fn":container.program(36, data, 0, blockParams, depths),"inverse":container.noop,"data":data}),(typeof helper === alias3 ? helper.call(alias1,options) : helper));
+  stack1 = ((helper = (helper = helpers.kanjiLinks || (depth0 != null ? depth0.kanjiLinks : depth0)) != null ? helper : alias2),(options={"name":"kanjiLinks","hash":{},"fn":container.program(32, data, 0, blockParams, depths),"inverse":container.noop,"data":data}),(typeof helper === alias3 ? helper.call(alias1,options) : helper));
   if (!helpers.kanjiLinks) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { buffer += stack1; }
   return buffer + "</span><div class=\"peek-wrapper\">"
-    + ((stack1 = helpers["if"].call(alias1,(depths[1] != null ? depths[1].playback : depths[1]),{"name":"if","hash":{},"fn":container.program(39, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.termTags : depth0),{"name":"if","hash":{},"fn":container.program(41, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.frequencies : depth0),{"name":"if","hash":{},"fn":container.program(44, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depths[1] != null ? depths[1].playback : depths[1]),{"name":"if","hash":{},"fn":container.program(35, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.termTags : depth0),{"name":"if","hash":{},"fn":container.program(37, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.frequencies : depth0),{"name":"if","hash":{},"fn":container.program(40, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "</div><span class=\""
-    + ((stack1 = helpers["if"].call(alias1,(data && data.last),{"name":"if","hash":{},"fn":container.program(47, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers["if"].call(alias1,(data && data.last),{"name":"if","hash":{},"fn":container.program(43, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\">、</span></div>";
-},"36":function(container,depth0,helpers,partials,data) {
+},"32":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options;
 
-  stack1 = ((helper = (helper = helpers.furigana || (depth0 != null ? depth0.furigana : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"furigana","hash":{},"fn":container.program(37, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),options) : helper));
+  stack1 = ((helper = (helper = helpers.furigana || (depth0 != null ? depth0.furigana : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"furigana","hash":{},"fn":container.program(33, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),options) : helper));
   if (!helpers.furigana) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { return stack1; }
   else { return ''; }
-},"37":function(container,depth0,helpers,partials,data) {
+},"33":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return ((stack1 = container.lambda(depth0, depth0)) != null ? stack1 : "");
-},"39":function(container,depth0,helpers,partials,data) {
+},"35":function(container,depth0,helpers,partials,data) {
     return "<a href=\"#\" class=\"action-play-audio\"><img src=\"/mixed/img/play-audio.svg\" title=\"Play audio\" alt></a>";
-},"41":function(container,depth0,helpers,partials,data) {
+},"37":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return "<div class=\"tags\">"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.termTags : depth0),{"name":"each","hash":{},"fn":container.program(42, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.termTags : depth0),{"name":"each","hash":{},"fn":container.program(38, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "</div>";
-},"42":function(container,depth0,helpers,partials,data) {
+},"38":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
   return "                <span class=\"label label-default tag-"
@@ -382,13 +383,13 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia
     + "\">"
     + alias4(((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"name","hash":{},"data":data}) : helper)))
     + "</span>\n";
-},"44":function(container,depth0,helpers,partials,data) {
+},"40":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return "<div class=\"frequencies\">"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.frequencies : depth0),{"name":"each","hash":{},"fn":container.program(45, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.frequencies : depth0),{"name":"each","hash":{},"fn":container.program(41, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "</div>";
-},"45":function(container,depth0,helpers,partials,data) {
+},"41":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
   return "                <span class=\"label label-default tag-frequency\">"
@@ -396,45 +397,45 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia
     + ":"
     + alias4(((helper = (helper = helpers.frequency || (depth0 != null ? depth0.frequency : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"frequency","hash":{},"data":data}) : helper)))
     + "</span>\n";
-},"47":function(container,depth0,helpers,partials,data) {
+},"43":function(container,depth0,helpers,partials,data) {
     return "invisible";
-},"49":function(container,depth0,helpers,partials,data) {
+},"45":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options, alias1=depth0 != null ? depth0 : (container.nullContext || {}), buffer = 
   "    <div class=\"expression expression-scan-toggle\">";
-  stack1 = ((helper = (helper = helpers.kanjiLinks || (depth0 != null ? depth0.kanjiLinks : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"kanjiLinks","hash":{},"fn":container.program(36, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(alias1,options) : helper));
+  stack1 = ((helper = (helper = helpers.kanjiLinks || (depth0 != null ? depth0.kanjiLinks : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"kanjiLinks","hash":{},"fn":container.program(32, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(alias1,options) : helper));
   if (!helpers.kanjiLinks) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { buffer += stack1; }
   return buffer + "</div>\n"
-    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.termTags : depth0),{"name":"if","hash":{},"fn":container.program(50, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
-},"50":function(container,depth0,helpers,partials,data) {
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.termTags : depth0),{"name":"if","hash":{},"fn":container.program(46, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
+},"46":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return "    <div style=\"display: inline-block;\">\n"
     + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.termTags : depth0),{"name":"each","hash":{},"fn":container.program(7, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "    </div>\n";
-},"52":function(container,depth0,helpers,partials,data) {
+},"48":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return "    <div class=\"reasons\">\n"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.reasons : depth0),{"name":"each","hash":{},"fn":container.program(53, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.reasons : depth0),{"name":"each","hash":{},"fn":container.program(49, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "    </div>\n";
-},"53":function(container,depth0,helpers,partials,data) {
+},"49":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return "        <span class=\"reasons\">"
     + container.escapeExpression(container.lambda(depth0, depth0))
     + "</span> "
-    + ((stack1 = helpers.unless.call(depth0 != null ? depth0 : (container.nullContext || {}),(data && data.last),{"name":"unless","hash":{},"fn":container.program(54, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.unless.call(depth0 != null ? depth0 : (container.nullContext || {}),(data && data.last),{"name":"unless","hash":{},"fn":container.program(50, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n";
-},"54":function(container,depth0,helpers,partials,data) {
+},"50":function(container,depth0,helpers,partials,data) {
     return "&laquo;";
-},"56":function(container,depth0,helpers,partials,data) {
+},"52":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return "    <div>\n"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.frequencies : depth0),{"name":"each","hash":{},"fn":container.program(57, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.frequencies : depth0),{"name":"each","hash":{},"fn":container.program(53, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "    </div>\n";
-},"57":function(container,depth0,helpers,partials,data) {
+},"53":function(container,depth0,helpers,partials,data) {
     var helper, alias1=depth0 != null ? depth0 : (container.nullContext || {}), alias2=helpers.helperMissing, alias3="function", alias4=container.escapeExpression;
 
   return "        <span class=\"label label-default tag-frequency\">"
@@ -442,61 +443,74 @@ templates['terms.html'] = template({"1":function(container,depth0,helpers,partia
     + ":"
     + alias4(((helper = (helper = helpers.frequency || (depth0 != null ? depth0.frequency : depth0)) != null ? helper : alias2),(typeof helper === alias3 ? helper.call(alias1,{"name":"frequency","hash":{},"data":data}) : helper)))
     + "</span>\n";
-},"59":function(container,depth0,helpers,partials,data,blockParams,depths) {
+},"55":function(container,depth0,helpers,partials,data,blockParams,depths) {
     var stack1;
 
-  return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? depth0.definitions : depth0)) != null ? stack1["1"] : stack1),{"name":"if","hash":{},"fn":container.program(60, data, 0, blockParams, depths),"inverse":container.program(63, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "");
-},"60":function(container,depth0,helpers,partials,data,blockParams,depths) {
+  return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),((stack1 = (depth0 != null ? depth0.definitions : depth0)) != null ? stack1["1"] : stack1),{"name":"if","hash":{},"fn":container.program(56, data, 0, blockParams, depths),"inverse":container.program(59, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "");
+},"56":function(container,depth0,helpers,partials,data,blockParams,depths) {
     var stack1;
 
   return "        <ol>\n"
-    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.definitions : depth0),{"name":"each","hash":{},"fn":container.program(61, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+    + ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.definitions : depth0),{"name":"each","hash":{},"fn":container.program(57, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "        </ol>\n";
-},"61":function(container,depth0,helpers,partials,data,blockParams,depths) {
+},"57":function(container,depth0,helpers,partials,data,blockParams,depths) {
     var stack1;
 
   return "            <li>"
     + ((stack1 = container.invokePartial(partials.definition,depth0,{"name":"definition","hash":{"compactGlossaries":(depths[1] != null ? depths[1].compactGlossaries : depths[1])},"data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "")
     + "</li>\n";
-},"63":function(container,depth0,helpers,partials,data) {
+},"59":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return ((stack1 = container.invokePartial(partials.definition,((stack1 = (depth0 != null ? depth0.definitions : depth0)) != null ? stack1["0"] : stack1),{"name":"definition","hash":{"compactGlossaries":(depth0 != null ? depth0.compactGlossaries : depth0)},"data":data,"indent":"        ","helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
-},"65":function(container,depth0,helpers,partials,data,blockParams,depths) {
+},"61":function(container,depth0,helpers,partials,data,blockParams,depths) {
     var stack1;
 
-  return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.merged : depth0),{"name":"if","hash":{},"fn":container.program(59, data, 0, blockParams, depths),"inverse":container.program(66, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "");
-},"66":function(container,depth0,helpers,partials,data) {
+  return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.merged : depth0),{"name":"if","hash":{},"fn":container.program(55, data, 0, blockParams, depths),"inverse":container.program(62, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "");
+},"62":function(container,depth0,helpers,partials,data) {
     var stack1;
 
   return ((stack1 = container.invokePartial(partials.definition,depth0,{"name":"definition","hash":{"compactGlossaries":(depth0 != null ? depth0.compactGlossaries : depth0)},"data":data,"indent":"        ","helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "")
     + "        ";
-},"68":function(container,depth0,helpers,partials,data) {
+},"64":function(container,depth0,helpers,partials,data) {
     var stack1, helper, options, buffer = 
   "    <pre>";
-  stack1 = ((helper = (helper = helpers.dumpObject || (depth0 != null ? depth0.dumpObject : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"dumpObject","hash":{},"fn":container.program(37, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),options) : helper));
+  stack1 = ((helper = (helper = helpers.dumpObject || (depth0 != null ? depth0.dumpObject : depth0)) != null ? helper : helpers.helperMissing),(options={"name":"dumpObject","hash":{},"fn":container.program(33, data, 0),"inverse":container.noop,"data":data}),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),options) : helper));
   if (!helpers.dumpObject) { stack1 = helpers.blockHelperMissing.call(depth0,stack1,options)}
   if (stack1 != null) { buffer += stack1; }
   return buffer + "</pre>\n";
-},"70":function(container,depth0,helpers,partials,data,blockParams,depths) {
-    var stack1;
-
-  return ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.definitions : depth0),{"name":"each","hash":{},"fn":container.program(71, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "");
-},"71":function(container,depth0,helpers,partials,data,blockParams,depths) {
-    var stack1;
+},"66":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {});
 
-  return ((stack1 = helpers.unless.call(depth0 != null ? depth0 : (container.nullContext || {}),(data && data.first),{"name":"unless","hash":{},"fn":container.program(72, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
+  return "<div class=\"term-navigation\">\n    <a href=\"#\" "
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.source : depth0),{"name":"if","hash":{},"fn":container.program(67, data, 0, blockParams, depths),"inverse":container.program(69, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
+    + "><img src=\"/mixed/img/source-term.svg\" title=\"Source term (Alt + B)\" alt></a>\n    <a href=\"#\" "
+    + ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.history : depth0),{"name":"if","hash":{},"fn":container.program(71, data, 0, blockParams, depths),"inverse":container.program(73, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "")
+    + "><img src=\"/mixed/img/source-term.svg\" style=\"transform: scaleX(-1);\" title=\"History term (Alt + F)\" alt></a>\n</div>\n"
+    + ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.definitions : depth0),{"name":"each","hash":{},"fn":container.program(75, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "");
+},"67":function(container,depth0,helpers,partials,data) {
+    return "class=\"source-term\"";
+},"69":function(container,depth0,helpers,partials,data) {
+    return "class=\"source-term term-button-fade\"";
+},"71":function(container,depth0,helpers,partials,data) {
+    return "class=\"history-term\"";
+},"73":function(container,depth0,helpers,partials,data) {
+    return "class=\"history-term term-button-fade\"";
+},"75":function(container,depth0,helpers,partials,data,blockParams,depths) {
+    var stack1;
+
+  return ((stack1 = helpers.unless.call(depth0 != null ? depth0 : (container.nullContext || {}),(data && data.first),{"name":"unless","hash":{},"fn":container.program(76, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "")
     + "\n"
-    + ((stack1 = container.invokePartial(partials.term,depth0,{"name":"term","hash":{"history":(depths[1] != null ? depths[1].history : depths[1]),"source":(depths[1] != null ? depths[1].source : depths[1]),"compactGlossaries":(depths[1] != null ? depths[1].compactGlossaries : depths[1]),"playback":(depths[1] != null ? depths[1].playback : depths[1]),"addable":(depths[1] != null ? depths[1].addable : depths[1]),"merged":(depths[1] != null ? depths[1].merged : depths[1]),"grouped":(depths[1] != null ? depths[1].grouped : depths[1]),"debug":(depths[1] != null ? depths[1].debug : depths[1])},"data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
-},"72":function(container,depth0,helpers,partials,data) {
+    + ((stack1 = container.invokePartial(partials.term,depth0,{"name":"term","hash":{"compactGlossaries":(depths[1] != null ? depths[1].compactGlossaries : depths[1]),"playback":(depths[1] != null ? depths[1].playback : depths[1]),"addable":(depths[1] != null ? depths[1].addable : depths[1]),"merged":(depths[1] != null ? depths[1].merged : depths[1]),"grouped":(depths[1] != null ? depths[1].grouped : depths[1]),"debug":(depths[1] != null ? depths[1].debug : depths[1])},"data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
+},"76":function(container,depth0,helpers,partials,data) {
     return "<hr>";
-},"74":function(container,depth0,helpers,partials,data) {
+},"78":function(container,depth0,helpers,partials,data) {
     return "<p class=\"note\">No results found.</p>\n";
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data,blockParams,depths) {
     var stack1;
 
   return "\n\n"
-    + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.definitions : depth0),{"name":"if","hash":{},"fn":container.program(70, data, 0, blockParams, depths),"inverse":container.program(74, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "");
+    + ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.definitions : depth0),{"name":"if","hash":{},"fn":container.program(66, data, 0, blockParams, depths),"inverse":container.program(78, data, 0, blockParams, depths),"data":data})) != null ? stack1 : "");
 },"main_d":  function(fn, props, container, depth0, data, blockParams, depths) {
 
   var decorators = container.decorators;
diff --git a/ext/bg/search.html b/ext/bg/search.html
index ef24af89..bac7f01c 100644
--- a/ext/bg/search.html
+++ b/ext/bg/search.html
@@ -25,7 +25,7 @@
                 <p style="margin-bottom: 0;">Search your installed dictionaries by entering a Japanese expression into the field below.</p>
             </div>
 
-            <div class="input-group" style="padding-top: 10px;">
+            <div class="input-group" style="padding-top: 20px;">
                 <span title="Enable kana input method" class="input-group-text">
                     <input type="checkbox" id="wanakana-enable" class="icon-checkbox" />
                     <label for="wanakana-enable" class="scan-disable">あ</label>
diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index ba2fadb7..9152216f 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -72,6 +72,19 @@ ol, ul {
     visibility: hidden;
 }
 
+/*
+ * Navigation
+ */
+
+.term-navigation {
+    position: fixed;
+    top: 0px;
+}
+
+.term-button-fade {
+    opacity: 0.4;
+}
+
 
 /*
  * Search page
@@ -107,7 +120,7 @@ html:root[data-yomichan-page=search] body {
  */
 
 .entry, .note {
-    padding-top: 10px;
+    padding-top: 20px;
     padding-bottom: 10px;
 }
 
diff --git a/tmpl/kanji.html b/tmpl/kanji.html
index 35f997dc..8c79e9dd 100644
--- a/tmpl/kanji.html
+++ b/tmpl/kanji.html
@@ -20,12 +20,6 @@ No data found
         <a href="#" class="action-view-note pending disabled"><img src="/mixed/img/view-note.svg" title="View added note (Alt + V)" alt></a>
         <a href="#" class="action-add-note pending disabled" data-mode="kanji"><img src="/mixed/img/add-term-kanji.svg" title="Add Kanji (Alt + K)" alt></a>
         {{/if}}
-        {{#if source}}
-        <a href="#" class="source-term"><img src="/mixed/img/source-term.svg" title="Source term (Alt + B)" alt></a>
-        {{/if}}
-        {{#if history}}
-        <a href="#" class="history-term"><img src="/mixed/img/source-term.svg" style="transform: scaleX(-1);" title="History term (Alt + F)" alt></a>
-        {{/if}}
         <img src="/mixed/img/entry-current.svg" class="current" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)" alt>
     </div>
 
@@ -94,9 +88,13 @@ No data found
 {{/inline}}
 
 {{#if definitions}}
+<div class="term-navigation">
+    <a href="#" {{#if source}}class="source-term"{{else}}class="source-term term-button-fade"{{/if}}><img src="/mixed/img/source-term.svg" title="Source term (Alt + B)" alt></a>
+    <a href="#" {{#if history}}class="history-term"{{else}}class="history-term term-button-fade"{{/if}}><img src="/mixed/img/source-term.svg" style="transform: scaleX(-1);" title="History term (Alt + F)" alt></a>
+</div>
 {{#each definitions}}
 {{#unless @first}}<hr>{{/unless}}
-{{> kanji debug=../debug addable=../addable source=../source history=../history root=../root}}
+{{> kanji debug=../debug addable=../addable root=../root}}
 {{/each}}
 {{else}}
 <p class="note">No results found</p>
diff --git a/tmpl/terms.html b/tmpl/terms.html
index 5e4e694a..2f727365 100644
--- a/tmpl/terms.html
+++ b/tmpl/terms.html
@@ -41,12 +41,6 @@
         <a href="#" class="action-play-audio"><img src="/mixed/img/play-audio.svg" title="Play audio (Alt + P)" alt></a>
         {{/if}}
         {{/unless}}
-        {{#if source}}
-        <a href="#" class="source-term"><img src="/mixed/img/source-term.svg" title="Source term (Alt + B)" alt></a>
-        {{/if}}
-        {{#if history}}
-        <a href="#" class="history-term"><img src="/mixed/img/source-term.svg" style="transform: scaleX(-1);" title="History term (Alt + F)" alt></a>
-        {{/if}}
         <img src="/mixed/img/entry-current.svg" class="current" title="Current entry (Alt + Up/Down/Home/End/PgUp/PgDn)" alt>
     </div>
 
@@ -132,9 +126,13 @@
 {{/inline}}
 
 {{#if definitions}}
+<div class="term-navigation">
+    <a href="#" {{#if source}}class="source-term"{{else}}class="source-term term-button-fade"{{/if}}><img src="/mixed/img/source-term.svg" title="Source term (Alt + B)" alt></a>
+    <a href="#" {{#if history}}class="history-term"{{else}}class="history-term term-button-fade"{{/if}}><img src="/mixed/img/source-term.svg" style="transform: scaleX(-1);" title="History term (Alt + F)" alt></a>
+</div>
 {{#each definitions}}
 {{#unless @first}}<hr>{{/unless}}
-{{> term debug=../debug grouped=../grouped merged=../merged addable=../addable playback=../playback compactGlossaries=../compactGlossaries source=../source history=../history}}
+{{> term debug=../debug grouped=../grouped merged=../merged addable=../addable playback=../playback compactGlossaries=../compactGlossaries}}
 {{/each}}
 {{else}}
 <p class="note">No results found.</p>
-- 
cgit v1.2.3