1 files changed, 65 insertions, 66 deletions

diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index b18e275d..8113260c 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -32,11 +32,11 @@ class Display {
         this.index = 0;
         this.audioPlaying = null;
         this.audioFallback = null;
-        this.audioCache = {};
+        this.audioCache = new Map();
         this.styleNode = null;
 
-        this.eventListeners = [];
-        this.persistentEventListeners = [];
+        this.eventListeners = new EventListenerCollection();
+        this.persistentEventListeners = new EventListenerCollection();
         this.interactive = false;
         this.eventListenersActive = false;
         this.clickScanPrevent = false;
@@ -48,6 +48,13 @@ class Display {
         this.setInteractive(true);
     }
 
+    async prepare(options=null) {
+        const displayGeneratorPromise = this.displayGenerator.prepare();
+        const updateOptionsPromise = this.updateOptions(options);
+        await Promise.all([displayGeneratorPromise, updateOptionsPromise]);
+        yomichan.on('optionsUpdated', () => this.updateOptions(null));
+    }
+
     onError(_error) {
         throw new Error('Override me');
     }
@@ -179,13 +186,15 @@ class Display {
         e.preventDefault();
         const link = e.currentTarget;
         const entry = link.closest('.entry');
-        const definitionIndex = this.entryIndexFind(entry);
+        const index = this.entryIndexFind(entry);
+        if (index < 0 || index >= this.definitions.length) { return; }
+
         const expressionIndex = Display.indexOf(entry.querySelectorAll('.term-expression .action-play-audio'), link);
         this.audioPlay(
-            this.definitions[definitionIndex],
+            this.definitions[index],
             // expressionIndex is used in audioPlay to detect result output mode
             Math.max(expressionIndex, this.options.general.resultOutputMode === 'merge' ? 0 : -1),
-            definitionIndex
+            index
         );
     }
 
@@ -193,6 +202,8 @@ class Display {
         e.preventDefault();
         const link = e.currentTarget;
         const index = this.entryIndexFind(link);
+        if (index < 0 || index >= this.definitions.length) { return; }
+
         this.noteAdd(this.definitions[index], link.dataset.mode);
     }
 
@@ -243,15 +254,6 @@ class Display {
         throw new Error('Override me');
     }
 
-    isInitialized() {
-        return this.options !== null;
-    }
-
-    async initialize(options=null) {
-        await this.updateOptions(options);
-        yomichan.on('optionsUpdate', () => this.updateOptions(null));
-    }
-
     async updateOptions(options) {
         this.options = options ? options : await apiOptionsGet(this.getOptionsContext());
         this.updateDocumentOptions(this.options);
@@ -299,13 +301,23 @@ class Display {
         this.interactive = interactive;
 
         if (interactive) {
-            Display.addEventListener(this.persistentEventListeners, document, 'keydown', this.onKeyDown.bind(this), false);
-            Display.addEventListener(this.persistentEventListeners, document, 'wheel', this.onWheel.bind(this), {passive: false});
-            Display.addEventListener(this.persistentEventListeners, document.querySelector('.action-previous'), 'click', this.onSourceTermView.bind(this));
-            Display.addEventListener(this.persistentEventListeners, document.querySelector('.action-next'), 'click', this.onNextTermView.bind(this));
-            Display.addEventListener(this.persistentEventListeners, document.querySelector('.navigation-header'), 'wheel', this.onHistoryWheel.bind(this), {passive: false});
+            const actionPrevious = document.querySelector('.action-previous');
+            const actionNext = document.querySelector('.action-next');
+            const navigationHeader = document.querySelector('.navigation-header');
+
+            this.persistentEventListeners.addEventListener(document, 'keydown', this.onKeyDown.bind(this), false);
+            this.persistentEventListeners.addEventListener(document, 'wheel', this.onWheel.bind(this), {passive: false});
+            if (actionPrevious !== null) {
+                this.persistentEventListeners.addEventListener(actionPrevious, 'click', this.onSourceTermView.bind(this));
+            }
+            if (actionNext !== null) {
+                this.persistentEventListeners.addEventListener(actionNext, 'click', this.onNextTermView.bind(this));
+            }
+            if (navigationHeader !== null) {
+                this.persistentEventListeners.addEventListener(navigationHeader, 'wheel', this.onHistoryWheel.bind(this), {passive: false});
+            }
         } else {
-            Display.clearEventListeners(this.persistentEventListeners);
+            this.persistentEventListeners.removeAllEventListeners();
         }
         this.setEventListenersActive(this.eventListenersActive);
     }
@@ -316,23 +328,23 @@ class Display {
         this.eventListenersActive = active;
 
         if (active) {
-            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.addMultipleEventListeners('.action-add-note', 'click', this.onNoteAdd.bind(this));
+            this.addMultipleEventListeners('.action-view-note', 'click', this.onNoteView.bind(this));
+            this.addMultipleEventListeners('.action-play-audio', 'click', this.onAudioPlay.bind(this));
+            this.addMultipleEventListeners('.kanji-link', 'click', this.onKanjiLookup.bind(this));
             if (this.options.scanning.enablePopupSearch) {
-                this.addEventListeners('.term-glossary-item, .tag', 'mouseup', this.onGlossaryMouseUp.bind(this));
-                this.addEventListeners('.term-glossary-item, .tag', 'mousedown', this.onGlossaryMouseDown.bind(this));
-                this.addEventListeners('.term-glossary-item, .tag', 'mousemove', this.onGlossaryMouseMove.bind(this));
+                this.addMultipleEventListeners('.term-glossary-item, .tag', 'mouseup', this.onGlossaryMouseUp.bind(this));
+                this.addMultipleEventListeners('.term-glossary-item, .tag', 'mousedown', this.onGlossaryMouseDown.bind(this));
+                this.addMultipleEventListeners('.term-glossary-item, .tag', 'mousemove', this.onGlossaryMouseMove.bind(this));
             }
         } else {
-            Display.clearEventListeners(this.eventListeners);
+            this.eventListeners.removeAllEventListeners();
         }
     }
 
-    addEventListeners(selector, type, listener, options) {
+    addMultipleEventListeners(selector, type, listener, options) {
         for (const node of this.container.querySelectorAll(selector)) {
-            Display.addEventListener(this.eventListeners, node, type, listener, options);
+            this.eventListeners.addEventListener(node, type, listener, options);
         }
     }
 
@@ -362,7 +374,6 @@ class Display {
 
     async setContentTerms(definitions, context, token) {
         if (!context) { throw new Error('Context expected'); }
-        if (!this.isInitialized()) { return; }
 
         this.setEventListenersActive(false);
 
@@ -370,11 +381,6 @@ class Display {
             window.focus();
         }
 
-        if (!this.displayGenerator.isInitialized()) {
-            await this.displayGenerator.initialize();
-            if (this.setContentToken !== token) { return; }
-        }
-
         this.definitions = definitions;
         if (context.disableHistory) {
             delete context.disableHistory;
@@ -418,7 +424,7 @@ class Display {
 
         this.setEventListenersActive(true);
 
-        const states = await apiDefinitionsAddable(definitions, ['term-kanji', 'term-kana'], this.getOptionsContext());
+        const states = await this.getDefinitionsAddable(definitions, ['term-kanji', 'term-kana']);
         if (this.setContentToken !== token) { return; }
 
         this.updateAdderButtons(states);
@@ -426,7 +432,6 @@ class Display {
 
     async setContentKanji(definitions, context, token) {
         if (!context) { throw new Error('Context expected'); }
-        if (!this.isInitialized()) { return; }
 
         this.setEventListenersActive(false);
 
@@ -434,11 +439,6 @@ class Display {
             window.focus();
         }
 
-        if (!this.displayGenerator.isInitialized()) {
-            await this.displayGenerator.initialize();
-            if (this.setContentToken !== token) { return; }
-        }
-
         this.definitions = definitions;
         if (context.disableHistory) {
             delete context.disableHistory;
@@ -460,7 +460,7 @@ class Display {
 
         for (let i = 0, ii = definitions.length; i < ii; ++i) {
             if (i > 0) {
-                await promiseTimeout(0);
+                await promiseTimeout(1);
                 if (this.setContentToken !== token) { return; }
             }
 
@@ -473,7 +473,7 @@ class Display {
 
         this.setEventListenersActive(true);
 
-        const states = await apiDefinitionsAddable(definitions, ['kanji'], this.getOptionsContext());
+        const states = await this.getDefinitionsAddable(definitions, ['kanji']);
         if (this.setContentToken !== token) { return; }
 
         this.updateAdderButtons(states);
@@ -512,6 +512,8 @@ class Display {
     }
 
     autoPlayAudio() {
+        if (this.definitions.length === 0) { return; }
+
         this.audioPlay(this.definitions[0], this.firstExpressionIndex, 0);
     }
 
@@ -611,9 +613,12 @@ class Display {
     }
 
     noteTryAdd(mode) {
-        const button = this.adderButtonFind(this.index, mode);
+        const index = this.index;
+        if (index < 0 || index >= this.definitions.length) { return; }
+
+        const button = this.adderButtonFind(index, mode);
         if (button !== null && !button.classList.contains('disabled')) {
-            this.noteAdd(this.definitions[this.index], mode);
+            this.noteAdd(this.definitions[index], mode);
         }
     }
 
@@ -712,7 +717,7 @@ class Display {
     async getScreenshot() {
         try {
             await this.setPopupVisibleOverride(false);
-            await Display.delay(1); // Wait for popup to be hidden.
+            await promiseTimeout(1); // Wait for popup to be hidden.
 
             const {format, quality} = this.options.anki.screenshot;
             const dataUrl = await apiScreenshotGet({format, quality});
@@ -781,8 +786,12 @@ class Display {
         return entry !== null ? entry.querySelector('.action-play-audio>img') : null;
     }
 
-    static delay(time) {
-        return new Promise((resolve) => setTimeout(resolve, time));
+    async getDefinitionsAddable(definitions, modes) {
+        try {
+            return await apiDefinitionsAddable(definitions, modes, this.getOptionsContext());
+        } catch (e) {
+            return [];
+        }
     }
 
     static indexOf(nodeList, node) {
@@ -794,19 +803,6 @@ class Display {
         return -1;
     }
 
-    static addEventListener(eventListeners, object, type, listener, options) {
-        if (object === null) { return; }
-        object.addEventListener(type, listener, options);
-        eventListeners.push([object, type, listener, options]);
-    }
-
-    static clearEventListeners(eventListeners) {
-        for (const [object, type, listener, options] of eventListeners) {
-            object.removeEventListener(type, listener, options);
-        }
-        eventListeners.length = 0;
-    }
-
     static getElementTop(element) {
         const elementRect = element.getBoundingClientRect();
         const documentRect = document.documentElement.getBoundingClientRect();
@@ -915,9 +911,12 @@ Display._onKeyDownHandlers = new Map([
 
     ['P', (self, e) => {
         if (e.altKey) {
-            const entry = self.getEntry(self.index);
+            const index = self.index;
+            if (index < 0 || index >= self.definitions.length) { return; }
+
+            const entry = self.getEntry(index);
             if (entry !== null && entry.dataset.type === 'term') {
-                self.audioPlay(self.definitions[self.index], self.firstExpressionIndex, self.index);
+                self.audioPlay(self.definitions[index], self.firstExpressionIndex, index);
             }
             return true;
         }