diff options
Diffstat (limited to 'ext/fg')
| -rw-r--r-- | ext/fg/js/frontend.js | 102 | ||||
| -rw-r--r-- | ext/fg/js/popup.js | 105 |
2 files changed, 103 insertions, 104 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,29 +32,17 @@ window.yomichan_frontend = new class { async prepare() { try { this.options = await apiOptionsGet(); - } 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); - } + 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)); - popupTimerClear() { - if (this.popupTimer) { - window.clearTimeout(this.popupTimer); - this.popupTimer = null; + chrome.runtime.onMessage.addListener(({action, params}, sender, callback) => this.onBgMessage(action, params, sender, callback)); + } catch (e) { + this.onError(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}`); + } } - async searchAt(point) { - if (this.pendingLookup) { - return; - } + popupTimerSet(callback) { + this.popupTimerClear(); + this.popupTimer = window.setTimeout(callback, this.options.scanning.delay); + } - const textSource = docRangeFromPoint(point); - if (!textSource || !textSource.containsPoint(point)) { - docImposterDestroy(); - return; + popupTimerClear() { + if (this.popupTimer) { + window.clearTimeout(this.popupTimer); + this.popupTimer = null; } + } - if (this.lastTextSource && this.lastTextSource.equals(textSource)) { - return; - } + async searchAt(point) { + try { + if (this.pendingLookup) { + return; + } - this.pendingLookup = true; + const textSource = docRangeFromPoint(point); + if (!textSource || !textSource.containsPoint(point)) { + docImposterDestroy(); + return; + } + + if (this.lastTextSource && this.lastTextSource.equals(textSource)) { + return; + } + + this.pendingLookup = true; - try { 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); - - const limitX = document.body.clientWidth; - const limitY = window.innerHeight; - - 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; - } - } + async show(elementRect, options) { + 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 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 { + width = limitX; + x = 0; + } + } + + 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'; - }); + 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}); - }); - } - - showKanjiDefs(elementRect, definitions, options, context) { - this.show(elementRect, options).then(() => { - this.invokeApi('showKanjiDefs', {definitions, options, context}); - }); + async termsShow(elementRect, definitions, options, context) { + await this.show(elementRect, options); + this.invokeApi('termsShow', {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'); + } } |