Merge branch 'master' into testing

1 files changed, 254 insertions, 176 deletions

diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index ca1738a6..dc64dbea 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -28,11 +28,14 @@ class Display {
         this.index = 0;
         this.audioCache = {};
         this.optionsContext = {};
+        this.eventListeners = [];
 
         this.dependencies = {};
 
-        $(document).keydown(this.onKeyDown.bind(this));
-        $(document).on('wheel', this.onWheel.bind(this));
+        this.windowScroll = new WindowScroll();
+
+        document.addEventListener('keydown', this.onKeyDown.bind(this));
+        document.addEventListener('wheel', this.onWheel.bind(this), {passive: false});
     }
 
     onError(error) {
@@ -52,12 +55,13 @@ class Display {
         try {
             e.preventDefault();
 
-            const link = $(e.target);
+            const link = e.target;
+            this.windowScroll.toY(0);
             const context = {
                 source: {
                     definitions: this.definitions,
-                    index: Display.entryIndexFind(link),
-                    scroll: $('html,body').scrollTop()
+                    index: this.entryIndexFind(link),
+                    scroll: this.windowScroll.y
                 }
             };
 
@@ -67,7 +71,7 @@ class Display {
                 context.source.source = this.context.source;
             }
 
-            const kanjiDefs = await apiKanjiFind(link.text(), this.optionsContext);
+            const kanjiDefs = await apiKanjiFind(link.textContent, this.optionsContext);
             this.kanjiShow(kanjiDefs, this.options, context);
         } catch (e) {
             this.onError(e);
@@ -80,7 +84,7 @@ class Display {
 
             const {docRangeFromPoint, docSentenceExtract} = this.dependencies;
 
-            const clickedElement = $(e.target);
+            const clickedElement = e.target;
             const textSource = docRangeFromPoint(e.clientX, e.clientY, this.options);
             if (textSource === null) {
                 return false;
@@ -102,11 +106,12 @@ class Display {
                 textSource.cleanup();
             }
 
+            this.windowScroll.toY(0);
             const context = {
                 source: {
                     definitions: this.definitions,
-                    index: Display.entryIndexFind(clickedElement),
-                    scroll: $('html,body').scrollTop()
+                    index: this.entryIndexFind(clickedElement),
+                    scroll: this.windowScroll.y
                 }
             };
 
@@ -124,161 +129,51 @@ class Display {
 
     onAudioPlay(e) {
         e.preventDefault();
-        const link = $(e.currentTarget);
-        const definitionIndex = Display.entryIndexFind(link);
-        const expressionIndex = link.closest('.entry').find('.expression .action-play-audio').index(link);
+        const link = e.currentTarget;
+        const entry = link.closest('.entry');
+        const definitionIndex = this.entryIndexFind(entry);
+        const expressionIndex = Display.indexOf(entry.querySelectorAll('.expression .action-play-audio'), link);
         this.audioPlay(this.definitions[definitionIndex], expressionIndex);
     }
 
     onNoteAdd(e) {
         e.preventDefault();
-        const link = $(e.currentTarget);
-        const index = Display.entryIndexFind(link);
-        this.noteAdd(this.definitions[index], link.data('mode'));
+        const link = e.currentTarget;
+        const index = this.entryIndexFind(link);
+        this.noteAdd(this.definitions[index], link.dataset.mode);
     }
 
     onNoteView(e) {
         e.preventDefault();
-        const link = $(e.currentTarget);
-        const index = Display.entryIndexFind(link);
-        apiNoteView(link.data('noteId'));
+        const link = e.currentTarget;
+        apiNoteView(link.dataset.noteId);
     }
 
     onKeyDown(e) {
-        const noteTryAdd = mode => {
-            const button = Display.adderButtonFind(this.index, mode);
-            if (button.length !== 0 && !button.hasClass('disabled')) {
-                this.noteAdd(this.definitions[this.index], mode);
-            }
-        };
-
-        const noteTryView = mode => {
-            const button = Display.viewerButtonFind(this.index);
-            if (button.length !== 0 && !button.hasClass('disabled')) {
-                apiNoteView(button.data('noteId'));
+        const key = Display.getKeyFromEvent(e);
+        const handlers = Display.onKeyDownHandlers;
+        if (handlers.hasOwnProperty(key)) {
+            const handler = handlers[key];
+            if (handler(this, e)) {
+                e.preventDefault();
             }
-        };
-
-        const handlers = {
-            27: /* escape */ () => {
-                this.onSearchClear();
-                return true;
-            },
-
-            33: /* page up */ () => {
-                if (e.altKey) {
-                    this.entryScrollIntoView(this.index - 3, null, true);
-                    return true;
-                }
-            },
-
-            34: /* page down */ () => {
-                if (e.altKey) {
-                    this.entryScrollIntoView(this.index + 3, null, true);
-                    return true;
-                }
-            },
-
-            35: /* end */ () => {
-                if (e.altKey) {
-                    this.entryScrollIntoView(this.definitions.length - 1, null, true);
-                    return true;
-                }
-            },
-
-            36: /* home */ () => {
-                if (e.altKey) {
-                    this.entryScrollIntoView(0, null, true);
-                    return true;
-                }
-            },
-
-            38: /* up */ () => {
-                if (e.altKey) {
-                    this.entryScrollIntoView(this.index - 1, null, true);
-                    return true;
-                }
-            },
-
-            40: /* down */ () => {
-                if (e.altKey) {
-                    this.entryScrollIntoView(this.index + 1, null, true);
-                    return true;
-                }
-            },
-
-            66: /* b */ () => {
-                if (e.altKey) {
-                    this.sourceTermView();
-                    return true;
-                }
-            },
-
-            69: /* e */ () => {
-                if (e.altKey) {
-                    noteTryAdd('term-kanji');
-                    return true;
-                }
-            },
-
-            75: /* k */ () => {
-                if (e.altKey) {
-                    noteTryAdd('kanji');
-                    return true;
-                }
-            },
-
-            82: /* r */ () => {
-                if (e.altKey) {
-                    noteTryAdd('term-kana');
-                    return true;
-                }
-            },
-
-            80: /* p */ () => {
-                if (e.altKey) {
-                    if ($('.entry').eq(this.index).data('type') === 'term') {
-                        this.audioPlay(this.definitions[this.index], this.firstExpressionIndex);
-                    }
-
-                    return true;
-                }
-            },
-
-            86: /* v */ () => {
-                if (e.altKey) {
-                    noteTryView();
-                }
-            }
-        };
-
-        const handler = handlers[e.keyCode];
-        if (handler && handler()) {
-            e.preventDefault();
         }
     }
 
     onWheel(e) {
-        const event = e.originalEvent;
-        const handler = () => {
-            if (event.altKey) {
-                if (event.deltaY < 0) { // scroll up
-                    this.entryScrollIntoView(this.index - 1, null, true);
-                    return true;
-                } else if (event.deltaY > 0) { // scroll down
-                    this.entryScrollIntoView(this.index + 1, null, true);
-                    return true;
-                }
+        if (e.altKey) {
+            const delta = e.deltaY;
+            if (delta !== 0) {
+                this.entryScrollIntoView(this.index + (delta > 0 ? 1 : -1), null, true);
+                e.preventDefault();
             }
-        };
-
-        if (handler()) {
-            event.preventDefault();
         }
     }
 
     async termsShow(definitions, options, context) {
         try {
+            this.clearEventListeners();
+
             if (!context || context.focus !== false) {
                 window.focus();
             }
@@ -310,7 +205,7 @@ class Display {
             }
 
             const content = await apiTemplateRender('terms.html', params);
-            this.container.html(content);
+            this.container.innerHTML = content;
             const {index, scroll} = context || {};
             this.entryScrollIntoView(index || 0, scroll);
 
@@ -318,12 +213,14 @@ class Display {
                 this.autoPlayAudio();
             }
 
-            $('.action-add-note').click(this.onNoteAdd.bind(this));
-            $('.action-view-note').click(this.onNoteView.bind(this));
-            $('.action-play-audio').click(this.onAudioPlay.bind(this));
-            $('.kanji-link').click(this.onKanjiLookup.bind(this));
-            $('.source-term').click(this.onSourceTermView.bind(this));
-            $('.glossary-item').click(this.onTermLookup.bind(this));
+            this.addEventListeners('.action-add-note', 'click', this.onNoteAdd.bind(this));
+            this.addEventListeners('.action-view-note', 'click', this.onNoteView.bind(this));
+            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));
+            if (this.options.scanning.enablePopupSearch) {
+                this.addEventListeners('.glossary-item', 'click', this.onTermLookup.bind(this));
+            }
 
             await this.adderButtonUpdate(['term-kanji', 'term-kana'], sequence);
         } catch (e) {
@@ -333,6 +230,8 @@ class Display {
 
     async kanjiShow(definitions, options, context) {
         try {
+            this.clearEventListeners();
+
             if (!context || context.focus !== false) {
                 window.focus();
             }
@@ -360,13 +259,13 @@ class Display {
             }
 
             const content = await apiTemplateRender('kanji.html', params);
-            this.container.html(content);
+            this.container.innerHTML = content;
             const {index, scroll} = context || {};
             this.entryScrollIntoView(index || 0, scroll);
 
-            $('.action-add-note').click(this.onNoteAdd.bind(this));
-            $('.action-view-note').click(this.onNoteView.bind(this));
-            $('.source-term').click(this.onSourceTermView.bind(this));
+            this.addEventListeners('.action-add-note', 'click', this.onNoteAdd.bind(this));
+            this.addEventListeners('.action-view-note', 'click', this.onNoteView.bind(this));
+            this.addEventListeners('.source-term', 'click', this.onSourceTermView.bind(this));
 
             await this.adderButtonUpdate(['kanji'], sequence);
         } catch (e) {
@@ -388,14 +287,13 @@ class Display {
             for (let i = 0; i < states.length; ++i) {
                 const state = states[i];
                 for (const mode in state) {
-                    const button = Display.adderButtonFind(i, mode);
-                    if (state[mode]) {
-                        button.removeClass('disabled');
-                    } else {
-                        button.addClass('disabled');
+                    const button = this.adderButtonFind(i, mode);
+                    if (button === null) {
+                        continue;
                     }
 
-                    button.removeClass('pending');
+                    button.classList.toggle('disabled', !state[mode]);
+                    button.classList.remove('pending');
                 }
             }
         } catch (e) {
@@ -407,22 +305,29 @@ class Display {
         index = Math.min(index, this.definitions.length - 1);
         index = Math.max(index, 0);
 
-        $('.current').hide().eq(index).show();
+        const entryPre = this.getEntry(this.index);
+        if (entryPre !== null) {
+            entryPre.classList.remove('entry-current');
+        }
+
+        const entry = this.getEntry(index);
+        if (entry !== null) {
+            entry.classList.add('entry-current');
+        }
 
-        const container = $('html,body').stop();
-        const entry = $('.entry').eq(index);
+        this.windowScroll.stop();
         let target;
 
         if (scroll) {
             target = scroll;
         } else {
-            target = index === 0 ? 0 : entry.offset().top;
+            target = index === 0 || entry === null ? 0 : Display.getElementTop(entry);
         }
 
         if (smooth) {
-            container.animate({scrollTop: target}, 200);
+            this.windowScroll.animate(this.windowScroll.x, target, 200);
         } else {
-            container.scrollTop(target);
+            this.windowScroll.toY(target);
         }
 
         this.index = index;
@@ -442,9 +347,23 @@ class Display {
         }
     }
 
+    noteTryAdd(mode) {
+        const button = this.adderButtonFind(this.index, mode);
+        if (button !== null && !button.classList.contains('disabled')) {
+            this.noteAdd(this.definitions[this.index], mode);
+        }
+    }
+
+    noteTryView() {
+        const button = this.viewerButtonFind(this.index);
+        if (button !== null && !button.classList.contains('disabled')) {
+            apiNoteView(button.dataset.noteId);
+        }
+    }
+
     async noteAdd(definition, mode) {
         try {
-            this.spinner.show();
+            this.setSpinnerVisible(true);
 
             const context = {};
             if (this.noteUsesScreenshot()) {
@@ -457,21 +376,28 @@ class Display {
             const noteId = await apiDefinitionAdd(definition, mode, context, this.optionsContext);
             if (noteId) {
                 const index = this.definitions.indexOf(definition);
-                Display.adderButtonFind(index, mode).addClass('disabled');
-                Display.viewerButtonFind(index).removeClass('pending disabled').data('noteId', noteId);
+                const adderButton = this.adderButtonFind(index, mode);
+                if (adderButton !== null) {
+                    adderButton.classList.add('disabled');
+                }
+                const viewerButton = this.viewerButtonFind(index);
+                if (viewerButton !== null) {
+                    viewerButton.classList.remove('pending', 'disabled');
+                    viewerButton.dataset.noteId = noteId;
+                }
             } else {
                 throw 'Note could note be added';
             }
         } catch (e) {
             this.onError(e);
         } finally {
-            this.spinner.hide();
+            this.setSpinnerVisible(false);
         }
     }
 
     async audioPlay(definition, expressionIndex) {
         try {
-            this.spinner.show();
+            this.setSpinnerVisible(true);
 
             const expression = expressionIndex === -1 ? definition : definition.expressions[expressionIndex];
             let url = await apiAudioGetUrl(expression, this.options.general.audioSource);
@@ -503,7 +429,7 @@ class Display {
         } catch (e) {
             this.onError(e);
         } finally {
-            this.spinner.hide();
+            this.setSpinnerVisible(false);
         }
     }
 
@@ -540,6 +466,15 @@ class Display {
         return apiForward('popupSetVisible', {visible});
     }
 
+    setSpinnerVisible(visible) {
+        this.spinner.style.display = visible ? 'block' : '';
+    }
+
+    getEntry(index) {
+        const entries = this.container.querySelectorAll('.entry');
+        return index >= 0 && index < entries.length ? entries[index] : null;
+    }
+
     static clozeBuild(sentence, source) {
         const result = {
             sentence: sentence.text.trim()
@@ -554,19 +489,162 @@ class Display {
         return result;
     }
 
-    static entryIndexFind(element) {
-        return $('.entry').index(element.closest('.entry'));
+    entryIndexFind(element) {
+        const entry = element.closest('.entry');
+        return entry !== null ? Display.indexOf(this.container.querySelectorAll('.entry'), entry) : -1;
     }
 
-    static adderButtonFind(index, mode) {
-        return $('.entry').eq(index).find(`.action-add-note[data-mode="${mode}"]`);
+    adderButtonFind(index, mode) {
+        const entry = this.getEntry(index);
+        return entry !== null ? entry.querySelector(`.action-add-note[data-mode="${mode}"]`) : null;
     }
 
-    static viewerButtonFind(index) {
-        return $('.entry').eq(index).find('.action-view-note');
+    viewerButtonFind(index) {
+        const entry = this.getEntry(index);
+        return entry !== null ? entry.querySelector('.action-view-note') : null;
     }
 
     static delay(time) {
         return new Promise((resolve) => setTimeout(resolve, time));
     }
+
+    static indexOf(nodeList, node) {
+        for (let i = 0, ii = nodeList.length; i < ii; ++i) {
+            if (nodeList[i] === node) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    addEventListeners(selector, type, listener, options) {
+        this.container.querySelectorAll(selector).forEach((node) => {
+            node.addEventListener(type, listener, options);
+            this.eventListeners.push([node, type, listener, options]);
+        });
+    }
+
+    clearEventListeners() {
+        for (const [node, type, listener, options] of this.eventListeners) {
+            node.removeEventListener(type, listener, options);
+        }
+        this.eventListeners = [];
+    }
+
+    static getElementTop(element) {
+        const elementRect = element.getBoundingClientRect();
+        const documentRect = document.documentElement.getBoundingClientRect();
+        return elementRect.top - documentRect.top;
+    }
+
+    static getKeyFromEvent(event) {
+        const key = event.key;
+        return key.length === 1 ? key.toUpperCase() : key;
+    }
 }
+
+Display.onKeyDownHandlers = {
+    'Escape': (self) => {
+        self.onSearchClear();
+        return true;
+    },
+
+    'PageUp': (self, e) => {
+        if (e.altKey) {
+            self.entryScrollIntoView(self.index - 3, null, true);
+            return true;
+        }
+        return false;
+    },
+
+    'PageDown': (self, e) => {
+        if (e.altKey) {
+            self.entryScrollIntoView(self.index + 3, null, true);
+            return true;
+        }
+        return false;
+    },
+
+    'End': (self, e) => {
+        if (e.altKey) {
+            self.entryScrollIntoView(self.definitions.length - 1, null, true);
+            return true;
+        }
+        return false;
+    },
+
+    'Home': (self, e) => {
+        if (e.altKey) {
+            self.entryScrollIntoView(0, null, true);
+            return true;
+        }
+        return false;
+    },
+
+    'ArrowUp': (self, e) => {
+        if (e.altKey) {
+            self.entryScrollIntoView(self.index - 1, null, true);
+            return true;
+        }
+        return false;
+    },
+
+    'ArrowDown': (self, e) => {
+        if (e.altKey) {
+            self.entryScrollIntoView(self.index + 1, null, true);
+            return true;
+        }
+        return false;
+    },
+
+    'B': (self, e) => {
+        if (e.altKey) {
+            self.sourceTermView();
+            return true;
+        }
+        return false;
+    },
+
+    'E': (self, e) => {
+        if (e.altKey) {
+            self.noteTryAdd('term-kanji');
+            return true;
+        }
+        return false;
+    },
+
+    'K': (self, e) => {
+        if (e.altKey) {
+            self.noteTryAdd('kanji');
+            return true;
+        }
+        return false;
+    },
+
+    'R': (self, e) => {
+        if (e.altKey) {
+            self.noteTryAdd('term-kana');
+            return true;
+        }
+        return false;
+    },
+
+    'P': (self, e) => {
+        if (e.altKey) {
+            const entry = self.getEntry(self.index);
+            if (entry !== null && entry.dataset.type === 'term') {
+                self.audioPlay(self.definitions[self.index], self.firstExpressionIndex);
+            }
+            return true;
+        }
+        return false;
+    },
+
+    'V': (self, e) => {
+        if (e.altKey) {
+            self.noteTryView();
+            return true;
+        }
+        return false;
+    }
+};