Merge branch 'master' into testing

1 files changed, 168 insertions, 102 deletions

diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 6d992897..c32852ad 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -42,7 +42,7 @@ class Display {
         this.setInteractive(true);
     }
 
-    onError(error) {
+    onError(_error) {
         throw new Error('Override me');
     }
 
@@ -55,93 +55,117 @@ class Display {
         this.sourceTermView();
     }
 
+    onNextTermView(e) {
+        e.preventDefault();
+        this.nextTermView();
+    }
+
     async onKanjiLookup(e) {
         try {
             e.preventDefault();
+            if (!this.context) { return; }
 
             const link = e.target;
-            this.windowScroll.toY(0);
+            this.context.update({
+                index: this.entryIndexFind(link),
+                scroll: this.windowScroll.y
+            });
             const context = {
-                source: {
-                    definitions: this.definitions,
-                    index: this.entryIndexFind(link),
-                    scroll: this.windowScroll.y
-                }
+                sentence: this.context.get('sentence'),
+                url: this.context.get('url')
             };
 
-            if (this.context) {
-                context.sentence = this.context.sentence;
-                context.url = this.context.url;
-                context.source.source = this.context.source;
-            }
-
             const definitions = await apiKanjiFind(link.textContent, this.getOptionsContext());
             this.setContentKanji(definitions, context);
-        } catch (e) {
-            this.onError(e);
+        } catch (error) {
+            this.onError(error);
         }
     }
 
     onGlossaryMouseDown(e) {
-        if (Frontend.isMouseButton('primary', e)) {
+        if (DOM.isMouseButtonPressed(e, 'primary')) {
             this.clickScanPrevent = false;
         }
     }
 
-    onGlossaryMouseMove(e) {
+    onGlossaryMouseMove() {
         this.clickScanPrevent = true;
     }
 
     onGlossaryMouseUp(e) {
-        if (!this.clickScanPrevent && Frontend.isMouseButton('primary', e)) {
+        if (!this.clickScanPrevent && DOM.isMouseButtonPressed(e, 'primary')) {
             this.onTermLookup(e);
         }
     }
 
-    async onTermLookup(e) {
+    async onTermLookup(e, {disableScroll, selectText, disableHistory}={}) {
+        try {
+            if (!this.context) { return; }
+
+            const termLookupResults = await this.termLookup(e);
+            if (!termLookupResults) { return; }
+            const {textSource, definitions} = termLookupResults;
+
+            const scannedElement = e.target;
+            const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
+
+            this.context.update({
+                index: this.entryIndexFind(scannedElement),
+                scroll: this.windowScroll.y
+            });
+            const context = {
+                disableScroll,
+                disableHistory,
+                sentence,
+                url: this.context.get('url')
+            };
+            if (disableHistory) {
+                Object.assign(context, {
+                    previous: this.context.previous,
+                    next: this.context.next
+                });
+            } else {
+                Object.assign(context, {
+                    previous: this.context
+                });
+            }
+
+            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);
 
-                ({definitions, length} = await apiTermsFind(textSource.text(), this.getOptionsContext()));
+                ({definitions, length} = await apiTermsFind(textSource.text(), {}, this.getOptionsContext()));
                 if (definitions.length === 0) {
                     return false;
                 }
 
                 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);
-        } catch (e) {
-            this.onError(e);
+            return {textSource, definitions};
+        } catch (error) {
+            this.onError(error);
         }
     }
 
@@ -170,7 +194,7 @@ class Display {
     onKeyDown(e) {
         const key = Display.getKeyFromEvent(e);
         const handlers = Display.onKeyDownHandlers;
-        if (handlers.hasOwnProperty(key)) {
+        if (hasOwn(handlers, key)) {
             const handler = handlers[key];
             if (handler(this, e)) {
                 e.preventDefault();
@@ -182,9 +206,17 @@ class Display {
 
     onWheel(e) {
         if (e.altKey) {
-            const delta = e.deltaY;
-            if (delta !== 0) {
-                this.entryScrollIntoView(this.index + (delta > 0 ? 1 : -1), null, true);
+            if (e.deltaY !== 0) {
+                this.entryScrollIntoView(this.index + (e.deltaY > 0 ? 1 : -1), null, true);
+                e.preventDefault();
+            }
+        } else if (e.shiftKey) {
+            const delta = -e.deltaX || e.deltaY;
+            if (delta > 0) {
+                this.sourceTermView();
+                e.preventDefault();
+            } else if (delta < 0) {
+                this.nextTermView();
                 e.preventDefault();
             }
         }
@@ -192,7 +224,7 @@ class Display {
 
     onRuntimeMessage({action, params}, sender, callback) {
         const handlers = Display.runtimeMessageHandlers;
-        if (handlers.hasOwnProperty(action)) {
+        if (hasOwn(handlers, action)) {
             const handler = handlers[action];
             const result = handler(this, params);
             callback(result);
@@ -268,6 +300,7 @@ class Display {
             this.addEventListeners('.action-play-audio', 'click', this.onAudioPlay.bind(this));
             this.addEventListeners('.kanji-link', 'click', this.onKanjiLookup.bind(this));
             this.addEventListeners('.source-term', 'click', this.onSourceTermView.bind(this));
+            this.addEventListeners('.next-term', 'click', this.onNextTermView.bind(this));
             if (this.options.scanning.enablePopupSearch) {
                 this.addEventListeners('.glossary-item', 'mouseup', this.onGlossaryMouseUp.bind(this));
                 this.addEventListeners('.glossary-item', 'mousedown', this.onGlossaryMouseDown.bind(this));
@@ -279,9 +312,9 @@ class Display {
     }
 
     addEventListeners(selector, type, listener, options) {
-        this.container.querySelectorAll(selector).forEach((node) => {
+        for (const node of this.container.querySelectorAll(selector)) {
             Display.addEventListener(this.eventListeners, node, type, listener, options);
-        });
+        }
     }
 
     setContent(type, details) {
@@ -298,6 +331,7 @@ class Display {
     }
 
     async setContentTerms(definitions, context) {
+        if (!context) { throw new Error('Context expected'); }
         if (!this.isInitialized()) { return; }
 
         try {
@@ -305,17 +339,23 @@ class Display {
 
             this.setEventListenersActive(false);
 
-            if (!context || context.focus !== false) {
+            if (context.focus !== false) {
                 window.focus();
             }
 
             this.definitions = definitions;
-            this.context = context;
+            if (context.disableHistory) {
+                delete context.disableHistory;
+                this.context = new DisplayContext('terms', definitions, context);
+            } else {
+                this.context = DisplayContext.push(this.context, 'terms', definitions, context);
+            }
 
             const sequence = ++this.sequence;
             const params = {
                 definitions,
-                source: context && context.source,
+                source: this.context.previous,
+                next: this.context.next,
                 addable: options.anki.enable,
                 grouped: options.general.resultOutputMode === 'group',
                 merged: options.general.resultOutputMode === 'merge',
@@ -324,20 +364,20 @@ class Display {
                 debug: options.general.debugInfo
             };
 
-            if (context) {
-                for (const definition of definitions) {
-                    if (context.sentence) {
-                        definition.cloze = Display.clozeBuild(context.sentence, definition.source);
-                    }
-
-                    definition.url = context.url;
-                }
+            for (const definition of definitions) {
+                definition.cloze = Display.clozeBuild(context.sentence, definition.source);
+                definition.url = context.url;
             }
 
             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);
+            } else {
+                delete context.disableScroll;
+                this.entrySetCurrent(index || 0);
+            }
 
             if (options.audio.enabled && options.audio.autoPlay) {
                 this.autoPlayAudio();
@@ -352,6 +392,7 @@ class Display {
     }
 
     async setContentKanji(definitions, context) {
+        if (!context) { throw new Error('Context expected'); }
         if (!this.isInitialized()) { return; }
 
         try {
@@ -359,34 +400,35 @@ class Display {
 
             this.setEventListenersActive(false);
 
-            if (!context || context.focus !== false) {
+            if (context.focus !== false) {
                 window.focus();
             }
 
             this.definitions = definitions;
-            this.context = context;
+            if (context.disableHistory) {
+                delete context.disableHistory;
+                this.context = new DisplayContext('kanji', definitions, context);
+            } else {
+                this.context = DisplayContext.push(this.context, 'kanji', definitions, context);
+            }
 
             const sequence = ++this.sequence;
             const params = {
                 definitions,
-                source: context && context.source,
+                source: this.context.previous,
+                next: this.context.next,
                 addable: options.anki.enable,
                 debug: options.general.debugInfo
             };
 
-            if (context) {
-                for (const definition of definitions) {
-                    if (context.sentence) {
-                        definition.cloze = Display.clozeBuild(context.sentence);
-                    }
-
-                    definition.url = context.url;
-                }
+            for (const definition of definitions) {
+                definition.cloze = Display.clozeBuild(context.sentence, definition.character);
+                definition.url = context.url;
             }
 
             const content = await apiTemplateRender('kanji.html', params);
             this.container.innerHTML = content;
-            const {index, scroll} = context || {};
+            const {index, scroll} = context;
             this.entryScrollIntoView(index || 0, scroll);
 
             this.setEventListenersActive(true);
@@ -446,7 +488,7 @@ class Display {
         }
     }
 
-    entryScrollIntoView(index, scroll, smooth) {
+    entrySetCurrent(index) {
         index = Math.min(index, this.definitions.length - 1);
         index = Math.max(index, 0);
 
@@ -460,13 +502,20 @@ class Display {
             entry.classList.add('entry-current');
         }
 
+        this.index = index;
+
+        return entry;
+    }
+
+    entryScrollIntoView(index, scroll, smooth) {
         this.windowScroll.stop();
-        let target;
 
-        if (scroll) {
+        const entry = this.entrySetCurrent(index);
+        let target;
+        if (scroll !== null) {
             target = scroll;
         } else {
-            target = index === 0 || entry === null ? 0 : Display.getElementTop(entry);
+            target = this.index === 0 || entry === null ? 0 : Display.getElementTop(entry);
         }
 
         if (smooth) {
@@ -474,22 +523,36 @@ class Display {
         } else {
             this.windowScroll.toY(target);
         }
-
-        this.index = index;
     }
 
     sourceTermView() {
-        if (this.context && this.context.source) {
-            const context = {
-                url: this.context.source.url,
-                sentence: this.context.source.sentence,
-                index: this.context.source.index,
-                scroll: this.context.source.scroll,
-                source: this.context.source.source
-            };
+        if (!this.context || !this.context.previous) { return; }
+        this.context.update({
+            index: this.index,
+            scroll: this.windowScroll.y
+        });
+        const previousContext = this.context.previous;
+        previousContext.set('disableHistory', true);
+        const details = {
+            definitions: previousContext.definitions,
+            context: previousContext.context
+        };
+        this.setContent(previousContext.type, details);
+    }
 
-            this.setContentTerms(this.context.source.definitions, context);
-        }
+    nextTermView() {
+        if (!this.context || !this.context.next) { return; }
+        this.context.update({
+            index: this.index,
+            scroll: this.windowScroll.y
+        });
+        const nextContext = this.context.next;
+        nextContext.set('disableHistory', true);
+        const details = {
+            definitions: nextContext.definitions,
+            context: nextContext.context
+        };
+        this.setContent(nextContext.type, details);
     }
 
     noteTryAdd(mode) {
@@ -564,7 +627,7 @@ class Display {
             if (button !== null) {
                 let titleDefault = button.dataset.titleDefault;
                 if (!titleDefault) {
-                    titleDefault = button.title || "";
+                    titleDefault = button.title || '';
                     button.dataset.titleDefault = titleDefault;
                 }
                 button.title = `${titleDefault}\n${info}`;
@@ -623,18 +686,13 @@ class Display {
         return index >= 0 && index < entries.length ? entries[index] : null;
     }
 
-    static clozeBuild(sentence, source) {
-        const result = {
-            sentence: sentence.text.trim()
+    static clozeBuild({text, offset}, source) {
+        return {
+            sentence: text.trim(),
+            prefix: text.substring(0, offset).trim(),
+            body: text.substring(offset, offset + source.length),
+            suffix: text.substring(offset + source.length).trim()
         };
-
-        if (source) {
-            result.prefix = sentence.text.substring(0, sentence.offset).trim();
-            result.body = source.trim();
-            result.suffix = sentence.text.substring(sentence.offset + source.length).trim();
-        }
-
-        return result;
     }
 
     entryIndexFind(element) {
@@ -765,6 +823,14 @@ Display.onKeyDownHandlers = {
         return false;
     },
 
+    'F': (self, e) => {
+        if (e.altKey) {
+            self.nextTermView();
+            return true;
+        }
+        return false;
+    },
+
     'E': (self, e) => {
         if (e.altKey) {
             self.noteTryAdd('term-kanji');