wip

ext/fg/js/frontend.js

@@ -32,30 +32,18 @@ window.yomichan_frontend = new class {
     async prepare() {
         try {
             this.options = await apiOptionsGet();
+
+            window.addEventListener('message', e => this.onFrameMessage(e));
+            window.addEventListener('mousedown', e => this.onMouseDown(e));
+            window.addEventListener('mousemove', e => this.onMouseMove(e));
+            window.addEventListener('mouseover', e => this.onMouseOver(e));
+            window.addEventListener('mouseup', e => this.onMouseUp(e));
+            window.addEventListener('resize', e => this.onResize(e));
+
+            chrome.runtime.onMessage.addListener(({action, params}, sender, callback) => this.onBgMessage(action, params, sender, callback));
         } catch (e) {
             this.onError(e);
         }
-
-        window.addEventListener('message', this.onFrameMessage.bind(this));
-        window.addEventListener('mousedown', this.onMouseDown.bind(this));
-        window.addEventListener('mousemove', this.onMouseMove.bind(this));
-        window.addEventListener('mouseover', this.onMouseOver.bind(this));
-        window.addEventListener('mouseup', this.onMouseUp.bind(this));
-        window.addEventListener('resize', this.onResize.bind(this));
-
-        chrome.runtime.onMessage.addListener(this.onBgMessage.bind(this));
-    }
-
-    popupTimerSet(callback) {
-        this.popupTimerClear();
-        this.popupTimer = window.setTimeout(callback, this.options.scanning.delay);
-    }
-
-    popupTimerClear() {
-        if (this.popupTimer) {
-            window.clearTimeout(this.popupTimer);
-            this.popupTimer = null;
-        }
     }
 
     onMouseOver(e) {
@@ -132,7 +120,11 @@ window.yomichan_frontend = new class {
         }
     }
 
-    onBgMessage({action, params}, sender, callback) {
+    onResize() {
+        this.onSearchClear();
+    }
+
+    onBgMessage(action, params, sender, callback) {
         const handlers = {
             optionsSet: options => {
                 this.options = options;
@@ -150,37 +142,55 @@ window.yomichan_frontend = new class {
         callback();
     }
 
-    onResize() {
+    onError(error) {
-        this.onSearchClear();
+        if (window.yomichan_orphaned) {
+            if (this.lastTextSource && this.options.scanning.modifier !== 'none') {
+                this.popup.showOrphaned(this.lastTextSource.getRect(), this.options);
+            }
+        } else {
+            window.alert(`Error: ${error}`);
+        }
+    }
+
+    popupTimerSet(callback) {
+        this.popupTimerClear();
+        this.popupTimer = window.setTimeout(callback, this.options.scanning.delay);
+    }
+
+    popupTimerClear() {
+        if (this.popupTimer) {
+            window.clearTimeout(this.popupTimer);
+            this.popupTimer = null;
+        }
     }
 
     async searchAt(point) {
-        if (this.pendingLookup) {
-            return;
-        }
-
-        const textSource = docRangeFromPoint(point);
-        if (!textSource || !textSource.containsPoint(point)) {
-            docImposterDestroy();
-            return;
-        }
-
-        if (this.lastTextSource && this.lastTextSource.equals(textSource)) {
-            return;
-        }
-
-        this.pendingLookup = true;
-
         try {
+            if (this.pendingLookup) {
+                return;
+            }
+
+            const textSource = docRangeFromPoint(point);
+            if (!textSource || !textSource.containsPoint(point)) {
+                docImposterDestroy();
+                return;
+            }
+
+            if (this.lastTextSource && this.lastTextSource.equals(textSource)) {
+                return;
+            }
+
+            this.pendingLookup = true;
+
             if (!await this.searchTerms(textSource)) {
                 await this.searchKanji(textSource);
             }
         } catch (e) {
             this.onError(e);
+        } finally {
+            docImposterDestroy();
+            this.pendingLookup = false;
         }
-
-        docImposterDestroy();
-        this.pendingLookup = false;
     }
 
     async searchTerms(textSource) {
@@ -245,14 +255,6 @@ window.yomichan_frontend = new class {
 
         this.lastTextSource = null;
     }
+}();
 
-    handleError(error, textSource) {
+window.yomichan_frontend.prepare();
-        if (window.yomichan_orphaned) {
-            if (textSource && this.options.scanning.modifier !== 'none') {
-                this.popup.showOrphaned(textSource.getRect(), this.options);
-            }
-        } else {
-            window.alert(`Error: ${error}`);
-        }
-    }
-};

ext/fg/js/popup.js

@@ -40,51 +40,51 @@ class Popup {
         return this.injected;
     }
 
-    show(elementRect, options) {
+    async show(elementRect, options) {
-        return this.inject().then(() => {
+        await this.inject();
-            const containerStyle = window.getComputedStyle(this.container);
-            const containerHeight = parseInt(containerStyle.height);
-            const containerWidth = parseInt(containerStyle.width);
 
-            const limitX = document.body.clientWidth;
+        const containerStyle = window.getComputedStyle(this.container);
-            const limitY = window.innerHeight;
+        const containerHeight = parseInt(containerStyle.height);
+        const containerWidth = parseInt(containerStyle.width);
 
-            let x = elementRect.left;
+        const limitX = document.body.clientWidth;
-            let width = Math.max(containerWidth, options.general.popupWidth);
+        const limitY = window.innerHeight;
-            const overflowX = Math.max(x + width - limitX, 0);
-            if (overflowX > 0) {
-                if (x >= overflowX) {
-                    x -= overflowX;
-                } else {
-                    width = limitX;
-                    x = 0;
-                }
-            }
 
-            let y = 0;
+        let x = elementRect.left;
-            let height = Math.max(containerHeight, options.general.popupHeight);
+        let width = Math.max(containerWidth, options.general.popupWidth);
-            const yBelow = elementRect.bottom + options.general.popupOffset;
+        const overflowX = Math.max(x + width - limitX, 0);
-            const yAbove = elementRect.top - options.general.popupOffset;
+        if (overflowX > 0) {
-            const overflowBelow = Math.max(yBelow + height - limitY, 0);
+            if (x >= overflowX) {
-            const overflowAbove = Math.max(height - yAbove, 0);
+                x -= overflowX;
-            if (overflowBelow > 0 || overflowAbove > 0) {
-                if (overflowBelow < overflowAbove) {
-                    height = Math.max(height - overflowBelow, 0);
-                    y = yBelow;
-                } else {
-                    height = Math.max(height - overflowAbove, 0);
-                    y = Math.max(yAbove - height, 0);
-                }
             } else {
-                y = yBelow;
+                width = limitX;
+                x = 0;
             }
+        }
 
-            this.container.style.left = `${x}px`;
+        let y = 0;
-            this.container.style.top = `${y}px`;
+        let height = Math.max(containerHeight, options.general.popupHeight);
-            this.container.style.width = `${width}px`;
+        const yBelow = elementRect.bottom + options.general.popupOffset;
-            this.container.style.height = `${height}px`;
+        const yAbove = elementRect.top - options.general.popupOffset;
-            this.container.style.visibility = 'visible';
+        const overflowBelow = Math.max(yBelow + height - limitY, 0);
-        });
+        const overflowAbove = Math.max(height - yAbove, 0);
+        if (overflowBelow > 0 || overflowAbove > 0) {
+            if (overflowBelow < overflowAbove) {
+                height = Math.max(height - overflowBelow, 0);
+                y = yBelow;
+            } else {
+                height = Math.max(height - overflowAbove, 0);
+                y = Math.max(yAbove - height, 0);
+            }
+        } else {
+            y = yBelow;
+        }
+
+        this.container.style.left = `${x}px`;
+        this.container.style.top = `${y}px`;
+        this.container.style.width = `${width}px`;
+        this.container.style.height = `${height}px`;
+        this.container.style.visibility = 'visible';
     }
 
     hide() {
@@ -95,25 +95,22 @@ class Popup {
         return this.injected && this.container.style.visibility !== 'hidden';
     }
 
-    showTermDefs(elementRect, definitions, options, context) {
+    async termsShow(elementRect, definitions, options, context) {
-        this.show(elementRect, options).then(() => {
+        await this.show(elementRect, options);
-            this.invokeApi('showTermDefs', {definitions, options, context});
+        this.invokeApi('termsShow', {definitions, options, context});
-        });
     }
 
-    showKanjiDefs(elementRect, definitions, options, context) {
+    async kanjiShow(elementRect, definitions, options, context) {
-        this.show(elementRect, options).then(() => {
+        await this.show(elementRect, options);
-            this.invokeApi('showKanjiDefs', {definitions, options, context});
+        this.invokeApi('termsShow', {definitions, options, context});
-        });
-    }
-
-    showOrphaned(elementRect, options) {
-        this.show(elementRect, options).then(() => {
-            this.invokeApi('showOrphaned');
-        });
     }
 
     invokeApi(action, params={}) {
         this.container.contentWindow.postMessage({action, params}, '*');
     }
+
+    async onOrphaned(elementRect, options) {
+        await this.show(elementRect, options);
+        this.invokeApi('orphaned');
+    }
 }