From 3ca28a93746ed0860bf19ede83e3e9bac979bfb5 Mon Sep 17 00:00:00 2001 From: Alex Yatskov Date: Sun, 13 Aug 2017 16:42:22 -0700 Subject: [PATCH] wip --- ext/fg/js/frontend.js | 108 +++++++++++++++++++++--------------------- ext/fg/js/popup.js | 103 +++++++++++++++++++--------------------- 2 files changed, 105 insertions(+), 106 deletions(-) diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js index 37389766..de5fa953 100644 --- a/ext/fg/js/frontend.js +++ b/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() { - this.onSearchClear(); + onError(error) { + 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) { - if (window.yomichan_orphaned) { - if (textSource && this.options.scanning.modifier !== 'none') { - this.popup.showOrphaned(textSource.getRect(), this.options); - } - } else { - window.alert(`Error: ${error}`); - } - } -}; +window.yomichan_frontend.prepare(); diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index cd7e846a..ba3289d4 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -40,51 +40,51 @@ class Popup { return this.injected; } - show(elementRect, options) { - return this.inject().then(() => { - const containerStyle = window.getComputedStyle(this.container); - const containerHeight = parseInt(containerStyle.height); - const containerWidth = parseInt(containerStyle.width); + async show(elementRect, options) { + await this.inject(); - const limitX = document.body.clientWidth; - const limitY = window.innerHeight; + const containerStyle = window.getComputedStyle(this.container); + const containerHeight = parseInt(containerStyle.height); + const containerWidth = parseInt(containerStyle.width); - let x = elementRect.left; - let width = Math.max(containerWidth, options.general.popupWidth); - const overflowX = Math.max(x + width - limitX, 0); - if (overflowX > 0) { - if (x >= overflowX) { - x -= overflowX; - } else { - width = limitX; - x = 0; - } - } + const limitX = document.body.clientWidth; + const limitY = window.innerHeight; - let y = 0; - let height = Math.max(containerHeight, options.general.popupHeight); - const yBelow = elementRect.bottom + options.general.popupOffset; - const yAbove = elementRect.top - options.general.popupOffset; - 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); - } + let x = elementRect.left; + let width = Math.max(containerWidth, options.general.popupWidth); + const overflowX = Math.max(x + width - limitX, 0); + if (overflowX > 0) { + if (x >= overflowX) { + x -= overflowX; } else { - y = yBelow; + width = limitX; + x = 0; } + } - 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'; - }); + let y = 0; + let height = Math.max(containerHeight, options.general.popupHeight); + const yBelow = elementRect.bottom + options.general.popupOffset; + const yAbove = elementRect.top - options.general.popupOffset; + 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) { - this.show(elementRect, options).then(() => { - this.invokeApi('showTermDefs', {definitions, options, context}); - }); + async termsShow(elementRect, definitions, options, context) { + await this.show(elementRect, options); + this.invokeApi('termsShow', {definitions, options, context}); } - showKanjiDefs(elementRect, definitions, options, context) { - this.show(elementRect, options).then(() => { - this.invokeApi('showKanjiDefs', {definitions, options, context}); - }); - } - - showOrphaned(elementRect, options) { - this.show(elementRect, options).then(() => { - this.invokeApi('showOrphaned'); - }); + async kanjiShow(elementRect, definitions, options, context) { + await this.show(elementRect, options); + this.invokeApi('termsShow', {definitions, options, context}); } invokeApi(action, params={}) { this.container.contentWindow.postMessage({action, params}, '*'); } + + async onOrphaned(elementRect, options) { + await this.show(elementRect, options); + this.invokeApi('orphaned'); + } }