From 476a5e873a3825d760110a09c6e9b01ec34b4104 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 11:37:36 -0400 Subject: Remove jQuery usage from float.js --- ext/fg/js/float.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) (limited to 'ext/fg') diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index fd7986b8..f75b35b8 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -30,7 +30,7 @@ class DisplayFloat extends Display { this.dependencies = Object.assign({}, this.dependencies, {docRangeFromPoint, docSentenceExtract}); - $(window).on('message', utilAsync(this.onMessage.bind(this))); + window.addEventListener('message', (e) => this.onMessage(e), false); } onError(error) { @@ -42,8 +42,16 @@ class DisplayFloat extends Display { } onOrphaned() { - $('#definitions').hide(); - $('#error-orphaned').show(); + const definitions = document.querySelector('#definitions'); + const errorOrphaned = document.querySelector('#error-orphaned'); + + if (definitions !== null) { + definitions.style.setProperty('display', 'none', 'important'); + } + + if (errorOrphaned !== null) { + errorOrphaned.style.setProperty('display', 'block', 'important'); + } } onSearchClear() { @@ -86,7 +94,7 @@ class DisplayFloat extends Display { } }; - const {action, params} = e.originalEvent.data; + const {action, params} = e.data; const handler = handlers[action]; if (handler) { handler(params); -- cgit v1.2.3 From 95a7fd81f5ff3773618ad697dc4385d40ba6fb54 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 14:16:23 -0400 Subject: Use raw element references for container and spinner --- ext/bg/js/search.js | 2 +- ext/fg/js/float.js | 2 +- ext/mixed/js/display.js | 18 +++++++++++------- 3 files changed, 13 insertions(+), 9 deletions(-) (limited to 'ext/fg') diff --git a/ext/bg/js/search.js b/ext/bg/js/search.js index 693e7938..13ed1e08 100644 --- a/ext/bg/js/search.js +++ b/ext/bg/js/search.js @@ -19,7 +19,7 @@ class DisplaySearch extends Display { constructor() { - super($('#spinner'), $('#content')); + super(document.querySelector('#spinner'), document.querySelector('#content')); this.optionsContext = { depth: 0, diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index f75b35b8..2e952efb 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -19,7 +19,7 @@ class DisplayFloat extends Display { constructor() { - super($('#spinner'), $('#definitions')); + super(document.querySelector('#spinner'), document.querySelector('#definitions')); this.autoPlayAudioTimer = null; this.styleNode = null; diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 1ce997a1..e0f80b51 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -310,7 +310,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); @@ -362,7 +362,7 @@ 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); @@ -446,7 +446,7 @@ class Display { async noteAdd(definition, mode) { try { - this.spinner.show(); + this.setSpinnerVisible(true); const context = {}; if (this.noteUsesScreenshot()) { @@ -467,13 +467,13 @@ class Display { } 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); @@ -505,7 +505,7 @@ class Display { } catch (e) { this.onError(e); } finally { - this.spinner.hide(); + this.setSpinnerVisible(false); } } @@ -542,6 +542,10 @@ class Display { return apiForward('popupSetVisible', {visible}); } + setSpinnerVisible(visible) { + this.spinner.style.display = visible ? 'block' : ''; + } + static clozeBuild(sentence, source) { const result = { sentence: sentence.text.trim() @@ -558,7 +562,7 @@ class Display { entryIndexFind(element) { const entry = element.closest('.entry'); - return entry !== null ? Display.indexOf(this.container.get(0).querySelectorAll('.entry'), entry) : -1; + return entry !== null ? Display.indexOf(this.container.querySelectorAll('.entry'), entry) : -1; } static adderButtonFind(index, mode) { -- cgit v1.2.3 From 946e577e42db9df43169d8547d4536fe8edd6748 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 17:52:30 -0400 Subject: Implement custom window scroll --- ext/bg/search.html | 1 + ext/fg/float.html | 1 + ext/mixed/js/display.js | 14 ++++--- ext/mixed/js/scroll.js | 100 ++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 111 insertions(+), 5 deletions(-) create mode 100644 ext/mixed/js/scroll.js (limited to 'ext/fg') diff --git a/ext/bg/search.html b/ext/bg/search.html index 3c78122d..ab208c26 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -47,6 +47,7 @@ + diff --git a/ext/fg/float.html b/ext/fg/float.html index 465db589..e86c2caa 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -41,6 +41,7 @@ + diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index a3d618e5..e3c44507 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -31,6 +31,8 @@ class Display { this.dependencies = {}; + this.windowScroll = new WindowScroll(); + document.addEventListener('keydown', this.onKeyDown.bind(this)); document.addEventListener('wheel', this.onWheel.bind(this), {passive: false}); } @@ -53,11 +55,12 @@ class Display { e.preventDefault(); const link = e.target; + this.windowScroll.toY(0); const context = { source: { definitions: this.definitions, index: this.entryIndexFind(link), - scroll: $('html,body').scrollTop() + scroll: this.windowScroll.y } }; @@ -102,11 +105,12 @@ class Display { textSource.cleanup(); } + this.windowScroll.toY(0); const context = { source: { definitions: this.definitions, index: this.entryIndexFind(clickedElement), - scroll: $('html,body').scrollTop() + scroll: this.windowScroll.y } }; @@ -410,7 +414,7 @@ class Display { $('.current').hide().eq(index).show(); - const container = $('html,body').stop(); + this.windowScroll.stop(); const entry = $('.entry').eq(index); let target; @@ -421,9 +425,9 @@ class Display { } 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; diff --git a/ext/mixed/js/scroll.js b/ext/mixed/js/scroll.js new file mode 100644 index 00000000..824fd92b --- /dev/null +++ b/ext/mixed/js/scroll.js @@ -0,0 +1,100 @@ +/* + * Copyright (C) 2019 Alex Yatskov + * Author: Alex Yatskov + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + + +class WindowScroll { + constructor() { + this.animationRequestId = null; + this.animationStartTime = 0; + this.animationStartX = 0; + this.animationStartY = 0; + this.animationEndTime = 0; + this.animationEndX = 0; + this.animationEndY = 0; + this.requestAnimationFrameCallback = (t) => this.onAnimationFrame(t); + } + + toY(y) { + this.to(this.x, y); + } + + toX(x) { + this.to(x, this.y); + } + + to(x, y) { + this.stop(); + window.scroll(x, y); + } + + animate(x, y, time) { + this.animationStartX = this.x; + this.animationStartY = this.y; + this.animationStartTime = window.performance.now(); + this.animationEndX = x; + this.animationEndY = y; + this.animationEndTime = this.animationStartTime + time; + this.animationRequestId = window.requestAnimationFrame(this.requestAnimationFrameCallback); + } + + stop() { + if (this.animationRequestId === null) { + return; + } + + window.cancelAnimationFrame(this.animationRequestId); + this.animationRequestId = null; + } + + onAnimationFrame(time) { + if (time >= this.animationEndTime) { + window.scroll(this.animationEndX, this.animationEndY); + this.animationRequestId = null; + return; + } + + const t = WindowScroll.easeInOutCubic((time - this.animationStartTime) / (this.animationEndTime - this.animationStartTime)); + window.scroll( + WindowScroll.lerp(this.animationStartX, this.animationEndX, t), + WindowScroll.lerp(this.animationStartY, this.animationEndY, t) + ); + + this.animationRequestId = window.requestAnimationFrame(this.requestAnimationFrameCallback); + } + + get x() { + return window.scrollX || window.pageXOffset; + } + + get y() { + return window.scrollY || window.pageYOffset; + } + + static easeInOutCubic(t) { + if (t < 0.5) { + return (4.0 * t * t * t); + } else { + t = 1.0 - t; + return 1.0 - (4.0 * t * t * t); + } + } + + static lerp(start, end, percent) { + return (end - start) * percent + start; + } +} -- cgit v1.2.3 From 1a7ad3011109dfb9cb51b5b89740fae1cb8a7035 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 18:46:48 -0400 Subject: Remove jQuery dependency from float.html and search.html --- ext/bg/search.html | 1 - ext/fg/float.html | 1 - 2 files changed, 2 deletions(-) (limited to 'ext/fg') diff --git a/ext/bg/search.html b/ext/bg/search.html index ab208c26..121b477c 100644 --- a/ext/bg/search.html +++ b/ext/bg/search.html @@ -32,7 +32,6 @@ - diff --git a/ext/fg/float.html b/ext/fg/float.html index e86c2caa..52c7faa3 100644 --- a/ext/fg/float.html +++ b/ext/fg/float.html @@ -31,7 +31,6 @@ - -- cgit v1.2.3 From 8110de514edaae5c685282668826bf14db7db557 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Fri, 27 Sep 2019 23:14:21 -0400 Subject: Change skipped node types to use a switch statement --- ext/fg/js/source.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'ext/fg') diff --git a/ext/fg/js/source.js b/ext/fg/js/source.js index 4642de50..2e73be06 100644 --- a/ext/fg/js/source.js +++ b/ext/fg/js/source.js @@ -87,9 +87,11 @@ class TextSourceRange { return false; } - const skip = ['RT', 'SCRIPT', 'STYLE']; - if (skip.includes(node.nodeName.toUpperCase())) { - return false; + switch (node.nodeName.toUpperCase()) { + case 'RT': + case 'SCRIPT': + case 'STYLE': + return false; } const style = window.getComputedStyle(node); -- cgit v1.2.3 From 928d7aecd5018ed71f0409fdad95f7c1b2a768bb Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Fri, 27 Sep 2019 23:14:52 -0400 Subject: Directly return rather than use a temporary variable --- ext/fg/js/source.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) (limited to 'ext/fg') diff --git a/ext/fg/js/source.js b/ext/fg/js/source.js index 2e73be06..d8b1977b 100644 --- a/ext/fg/js/source.js +++ b/ext/fg/js/source.js @@ -95,12 +95,10 @@ class TextSourceRange { } const style = window.getComputedStyle(node); - const hidden = + return !( style.visibility === 'hidden' || style.display === 'none' || - parseFloat(style.fontSize) === 0; - - return !hidden; + parseFloat(style.fontSize) === 0); } static seekForward(node, offset, length) { -- cgit v1.2.3 From a5f393fa2c95476c5b2af5714b03a50b92a2e109 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Fri, 27 Sep 2019 23:37:10 -0400 Subject: Fix incorrect check --- ext/fg/js/source.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ext/fg') diff --git a/ext/fg/js/source.js b/ext/fg/js/source.js index d8b1977b..af2119e8 100644 --- a/ext/fg/js/source.js +++ b/ext/fg/js/source.js @@ -234,7 +234,7 @@ class TextSourceRange { if (next !== null) { break; } next = node.parentNode; - if (node === null) { break; } + if (next === null) { break; } node = next; } -- cgit v1.2.3 From 03c52625a98c1f932a19d8377d82b388fa23c78c Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sat, 28 Sep 2019 10:07:52 -0400 Subject: Refactor seekForward and seekBackward --- ext/fg/js/source.js | 176 ++++++++++++++++++++++++++++++++-------------------- 1 file changed, 107 insertions(+), 69 deletions(-) (limited to 'ext/fg') diff --git a/ext/fg/js/source.js b/ext/fg/js/source.js index af2119e8..ee4f58e2 100644 --- a/ext/fg/js/source.js +++ b/ext/fg/js/source.js @@ -83,10 +83,6 @@ class TextSourceRange { } static shouldEnter(node) { - if (node.nodeType !== 1) { - return false; - } - switch (node.nodeName.toUpperCase()) { case 'RT': case 'SCRIPT': @@ -101,102 +97,128 @@ class TextSourceRange { parseFloat(style.fontSize) === 0); } + static getRubyElement(node) { + node = TextSourceRange.getParentElement(node); + if (node !== null && node.nodeName.toUpperCase() === "RT") { + node = node.parentNode; + return (node !== null && node.nodeName.toUpperCase() === "RUBY") ? node : null; + } + return null; + } + static seekForward(node, offset, length) { const state = {node, offset, remainder: length, content: ''}; - if (!TextSourceRange.seekForwardHelper(node, state)) { - return state; + const TEXT_NODE = Node.TEXT_NODE; + const ELEMENT_NODE = Node.ELEMENT_NODE; + let resetOffset = false; + + const ruby = TextSourceRange.getRubyElement(node); + if (ruby !== null) { + node = ruby; + resetOffset = true; } - for (let current = node; current !== null; current = current.parentElement) { - for (let sibling = current.nextSibling; sibling !== null; sibling = sibling.nextSibling) { - if (!TextSourceRange.seekForwardHelper(sibling, state)) { - return state; + while (node !== null) { + let visitChildren = true; + const nodeType = node.nodeType; + + if (nodeType === TEXT_NODE) { + state.node = node; + if (TextSourceRange.seekForwardTextNode(state, resetOffset)) { + break; } + resetOffset = true; + } else if (nodeType === ELEMENT_NODE) { + visitChildren = TextSourceRange.shouldEnter(node); } + + node = TextSourceRange.getNextNode(node, visitChildren); } return state; } - static seekForwardHelper(node, state) { - if (node.nodeType === 3 && node.parentElement && TextSourceRange.shouldEnter(node.parentElement)) { - const offset = state.node === node ? state.offset : 0; - - let consumed = 0; - let stripped = 0; - while (state.remainder - consumed > 0) { - const currentChar = node.nodeValue[offset + consumed + stripped]; - if (!currentChar) { - break; - } else if (currentChar.match(IGNORE_TEXT_PATTERN)) { - stripped++; - } else { - consumed++; - state.content += currentChar; - } - } - - state.node = node; - state.offset = offset + consumed + stripped; - state.remainder -= consumed; - } else if (TextSourceRange.shouldEnter(node)) { - for (let i = 0; i < node.childNodes.length; ++i) { - if (!TextSourceRange.seekForwardHelper(node.childNodes[i], state)) { + static seekForwardTextNode(state, resetOffset) { + const nodeValue = state.node.nodeValue; + const nodeValueLength = nodeValue.length; + let content = state.content; + let offset = resetOffset ? 0 : state.offset; + let remainder = state.remainder; + let result = false; + + for (; offset < nodeValueLength; ++offset) { + const c = nodeValue[offset]; + if (!IGNORE_TEXT_PATTERN.test(c)) { + content += c; + if (--remainder <= 0) { + result = true; + ++offset; break; } } } - return state.remainder > 0; + state.offset = offset; + state.content = content; + state.remainder = remainder; + return result; } static seekBackward(node, offset, length) { const state = {node, offset, remainder: length, content: ''}; - if (!TextSourceRange.seekBackwardHelper(node, state)) { - return state; + const TEXT_NODE = Node.TEXT_NODE; + const ELEMENT_NODE = Node.ELEMENT_NODE; + let resetOffset = false; + + const ruby = TextSourceRange.getRubyElement(node); + if (ruby !== null) { + node = ruby; + resetOffset = true; } - for (let current = node; current !== null; current = current.parentElement) { - for (let sibling = current.previousSibling; sibling !== null; sibling = sibling.previousSibling) { - if (!TextSourceRange.seekBackwardHelper(sibling, state)) { - return state; + while (node !== null) { + let visitChildren = true; + const nodeType = node.nodeType; + + if (nodeType === TEXT_NODE) { + state.node = node; + if (TextSourceRange.seekBackwardTextNode(state, resetOffset)) { + break; } + resetOffset = true; + } else if (nodeType === ELEMENT_NODE) { + visitChildren = TextSourceRange.shouldEnter(node); } + + node = TextSourceRange.getPreviousNode(node, visitChildren); } return state; } - static seekBackwardHelper(node, state) { - if (node.nodeType === 3 && node.parentElement && TextSourceRange.shouldEnter(node.parentElement)) { - const offset = state.node === node ? state.offset : node.length; - - let consumed = 0; - let stripped = 0; - while (state.remainder - consumed > 0) { - const currentChar = node.nodeValue[offset - 1 - consumed - stripped]; // negative indices are undefined in JS - if (!currentChar) { - break; - } else if (currentChar.match(IGNORE_TEXT_PATTERN)) { - stripped++; - } else { - consumed++; - state.content = currentChar + state.content; - } - } - - state.node = node; - state.offset = offset - consumed - stripped; - state.remainder -= consumed; - } else if (TextSourceRange.shouldEnter(node)) { - for (let i = node.childNodes.length - 1; i >= 0; --i) { - if (!TextSourceRange.seekBackwardHelper(node.childNodes[i], state)) { + static seekBackwardTextNode(state, resetOffset) { + const nodeValue = state.node.nodeValue; + let content = state.content; + let offset = resetOffset ? nodeValue.length : state.offset; + let remainder = state.remainder; + let result = false; + + for (; offset > 0; --offset) { + const c = nodeValue[offset - 1]; + if (!IGNORE_TEXT_PATTERN.test(c)) { + content = c + content; + if (--remainder <= 0) { + result = true; + --offset; break; } } } - return state.remainder > 0; + state.offset = offset; + state.content = content; + state.remainder = remainder; + return result; } static getParentElement(node) { @@ -219,15 +241,15 @@ class TextSourceRange { static getNodesInRange(range) { const end = range.endContainer; const nodes = []; - for (let node = range.startContainer; node !== null; node = TextSourceRange.getNextNode(node)) { + for (let node = range.startContainer; node !== null; node = TextSourceRange.getNextNode(node, true)) { nodes.push(node); if (node === end) { break; } } return nodes; } - static getNextNode(node) { - let next = node.firstChild; + static getNextNode(node, visitChildren) { + let next = visitChildren ? node.firstChild : null; if (next === null) { while (true) { next = node.nextSibling; @@ -242,6 +264,22 @@ class TextSourceRange { return next; } + static getPreviousNode(node, visitChildren) { + let next = visitChildren ? node.lastChild : null; + if (next === null) { + while (true) { + next = node.previousSibling; + if (next !== null) { break; } + + next = node.parentNode; + if (next === null) { break; } + + node = next; + } + } + return next; + } + static anyNodeMatchesSelector(nodeList, selector) { for (const node of nodeList) { if (TextSourceRange.nodeMatchesSelector(node, selector)) { -- cgit v1.2.3 From 25a4dafd73890a8181bd072d0b514ec9668ecfea Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 29 Sep 2019 13:00:32 -0400 Subject: Fix tab focus being changed due to settings changes --- ext/fg/js/frontend.js | 14 +++++++------- ext/fg/js/popup-proxy-host.js | 6 +++--- ext/fg/js/popup-proxy.js | 4 ++-- ext/fg/js/popup.js | 21 +++++++++++++-------- 4 files changed, 25 insertions(+), 20 deletions(-) (limited to 'ext/fg') diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js index 167e82c0..d5bb00c0 100644 --- a/ext/fg/js/frontend.js +++ b/ext/fg/js/frontend.js @@ -128,7 +128,7 @@ class Frontend { } this.popupTimerClear(); - this.searchClear(); + this.searchClear(true); } onMouseOut(e) { @@ -138,7 +138,7 @@ class Frontend { onFrameMessage(e) { const handlers = { popupClose: () => { - this.searchClear(); + this.searchClear(true); }, selectionCopy: () => { @@ -153,7 +153,7 @@ class Frontend { } onResize() { - this.searchClear(); + this.searchClear(true); } onClick(e) { @@ -265,7 +265,7 @@ class Frontend { async updateOptions() { this.options = await apiOptionsGet(this.getOptionsContext()); if (!this.options.enable) { - this.searchClear(); + this.searchClear(false); } } @@ -320,7 +320,7 @@ class Frontend { textSource.cleanup(); } if (hideResults && this.options.scanning.autoHideResults) { - this.searchClear(); + this.searchClear(true); } this.pendingLookup = false; @@ -392,8 +392,8 @@ class Frontend { return true; } - searchClear() { - this.popup.hide(); + searchClear(changeFocus) { + this.popup.hide(changeFocus); this.popup.clearAutoPlayTimer(); if (this.options.scanning.selectText && this.textSourceLast) { diff --git a/ext/fg/js/popup-proxy-host.js b/ext/fg/js/popup-proxy-host.js index 396f7556..cb9741be 100644 --- a/ext/fg/js/popup-proxy-host.js +++ b/ext/fg/js/popup-proxy-host.js @@ -40,7 +40,7 @@ class PopupProxyHost { createNestedPopup: ({parentId}) => this.createNestedPopup(parentId), show: ({id, elementRect, options}) => this.show(id, elementRect, options), showOrphaned: ({id, elementRect, options}) => this.show(id, elementRect, options), - hide: ({id}) => this.hide(id), + hide: ({id, changeFocus}) => this.hide(id, changeFocus), setVisible: ({id, visible}) => this.setVisible(id, visible), containsPoint: ({id, x, y}) => this.containsPoint(id, x, y), termsShow: ({id, elementRect, writingMode, definitions, options, context}) => this.termsShow(id, elementRect, writingMode, definitions, options, context), @@ -98,9 +98,9 @@ class PopupProxyHost { return await popup.showOrphaned(elementRect, options); } - async hide(id) { + async hide(id, changeFocus) { const popup = this.getPopup(id); - return popup.hide(); + return popup.hide(changeFocus); } async setVisible(id, visible) { diff --git a/ext/fg/js/popup-proxy.js b/ext/fg/js/popup-proxy.js index 235e1730..072cebc9 100644 --- a/ext/fg/js/popup-proxy.js +++ b/ext/fg/js/popup-proxy.js @@ -58,11 +58,11 @@ class PopupProxy { return await this.invokeHostApi('showOrphaned', {id, elementRect, options}); } - async hide() { + async hide(changeFocus) { if (this.id === null) { return; } - return await this.invokeHostApi('hide', {id: this.id}); + return await this.invokeHostApi('hide', {id: this.id, changeFocus}); } async setVisible(visible) { diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 08965084..64da9aef 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -105,7 +105,7 @@ class Popup { container.style.height = `${height}px`; container.style.visibility = 'visible'; - this.hideChildren(); + this.hideChildren(true); } static getPositionForHorizontalText(elementRect, width, height, maxWidth, maxHeight, optionsGeneral) { @@ -206,16 +206,21 @@ class Popup { this.invokeApi('orphaned'); } - hide() { - this.hideChildren(); + hide(changeFocus) { + if (this.isContainerHidden()) { + changeFocus = false; + } + this.hideChildren(changeFocus); this.hideContainer(); - this.focusParent(); + if (changeFocus) { + this.focusParent(); + } } - hideChildren() { - // recursively hides all children - if (this.child && !this.child.isContainerHidden()) { - this.child.hide(); + hideChildren(changeFocus) { + // Recursively hides all children. + if (this.child !== null && !this.child.isContainerHidden()) { + this.child.hide(changeFocus); } } -- cgit v1.2.3 From 861474d2fcebd9db82b25700c71351b7d6611794 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Tue, 1 Oct 2019 19:05:30 -0400 Subject: Fix inconsistent return type --- ext/fg/js/frontend.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ext/fg') diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js index d5bb00c0..3292cac4 100644 --- a/ext/fg/js/frontend.js +++ b/ext/fg/js/frontend.js @@ -333,7 +333,7 @@ class Frontend { const searchText = textSource.text(); if (searchText.length === 0) { - return; + return false; } const {definitions, length} = await apiTermsFind(searchText, this.getOptionsContext()); @@ -366,7 +366,7 @@ class Frontend { const searchText = textSource.text(); if (searchText.length === 0) { - return; + return false; } const definitions = await apiKanjiFind(searchText, this.getOptionsContext()); -- cgit v1.2.3 From a628610cbd9ea235987cef399021b0685c50f0e4 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Thu, 19 Sep 2019 22:03:26 -0400 Subject: Use KeyboardEvent.key for onKeyDown handlers --- ext/fg/js/float.js | 31 ++++--- ext/mixed/js/display.js | 241 ++++++++++++++++++++++++++---------------------- 2 files changed, 149 insertions(+), 123 deletions(-) (limited to 'ext/fg') diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 2e952efb..8a05aa70 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -102,21 +102,16 @@ class DisplayFloat extends Display { } onKeyDown(e) { - const handlers = { - 67: /* c */ () => { - if (e.ctrlKey && !window.getSelection().toString()) { - this.onSelectionCopy(); - return true; - } + const key = Display.getKeyFromEvent(e); + const handlers = DisplayFloat.onKeyDownHandlers; + if (handlers.hasOwnProperty(key)) { + const handler = handlers[key]; + if (handler(this, e)) { + e.preventDefault(); + return; } - }; - - const handler = handlers[e.keyCode]; - if (handler && handler()) { - e.preventDefault(); - } else { - super.onKeyDown(e); } + super.onKeyDown(e); } autoPlayAudio() { @@ -146,4 +141,14 @@ class DisplayFloat extends Display { } } +DisplayFloat.onKeyDownHandlers = { + 'C': (self, e) => { + if (e.ctrlKey && !window.getSelection().toString()) { + self.onSelectionCopy(); + return true; + } + return false; + } +}; + window.yomichan_display = new DisplayFloat(); diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 46016192..eb40a5df 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -150,117 +150,13 @@ class Display { } onKeyDown(e) { - const noteTryAdd = mode => { - const button = this.adderButtonFind(this.index, mode); - if (button !== null && !button.classList.contains('disabled')) { - this.noteAdd(this.definitions[this.index], mode); + const key = Display.getKeyFromEvent(e); + const handlers = Display.onKeyDownHandlers; + if (handlers.hasOwnProperty(key)) { + const handler = handlers[key]; + if (handler(this, e)) { + e.preventDefault(); } - }; - - const noteTryView = mode => { - const button = this.viewerButtonFind(this.index); - if (button !== null && !button.classList.contains('disabled')) { - apiNoteView(button.dataset.noteId); - } - }; - - 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) { - const entry = this.getEntry(this.index); - if (entry !== null && entry.dataset.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(); } } @@ -459,6 +355,20 @@ 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.setSpinnerVisible(true); @@ -634,4 +544,115 @@ class Display { 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; + } +}; -- cgit v1.2.3 From 7d15213916355a806ba687803ca94209e29f142c Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Wed, 2 Oct 2019 20:31:42 -0400 Subject: Use static object for frontend message handlers --- ext/fg/js/frontend.js | 64 +++++++++++++++++++++++++++------------------------ 1 file changed, 34 insertions(+), 30 deletions(-) (limited to 'ext/fg') diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js index d5bb00c0..deec1ffd 100644 --- a/ext/fg/js/frontend.js +++ b/ext/fg/js/frontend.js @@ -55,7 +55,7 @@ class Frontend { try { this.options = await apiOptionsGet(this.getOptionsContext()); - window.addEventListener('message', this.onFrameMessage.bind(this)); + window.addEventListener('message', this.onWindowMessage.bind(this)); window.addEventListener('mousedown', this.onMouseDown.bind(this)); window.addEventListener('mousemove', this.onMouseMove.bind(this)); window.addEventListener('mouseover', this.onMouseOver.bind(this)); @@ -71,7 +71,7 @@ class Frontend { window.addEventListener('contextmenu', this.onContextMenu.bind(this)); } - chrome.runtime.onMessage.addListener(this.onBgMessage.bind(this)); + chrome.runtime.onMessage.addListener(this.onRuntimeMessage.bind(this)); } catch (e) { this.onError(e); } @@ -135,20 +135,12 @@ class Frontend { this.popupTimerClear(); } - onFrameMessage(e) { - const handlers = { - popupClose: () => { - this.searchClear(true); - }, - - selectionCopy: () => { - document.execCommand('copy'); - } - }; - - const handler = handlers[e.data]; - if (handler) { - handler(); + onWindowMessage(e) { + const action = e.data; + const handlers = Frontend.windowMessageHandlers; + if (handlers.hasOwnProperty(action)) { + const handler = handlers[action]; + handler(this); } } @@ -240,20 +232,11 @@ class Frontend { this.contextMenuChecking = false; } - onBgMessage({action, params}, sender, callback) { - const handlers = { - optionsUpdate: () => { - this.updateOptions(); - }, - - popupSetVisible: ({visible}) => { - this.popup.setVisible(visible); - } - }; - - const handler = handlers[action]; - if (handler) { - handler(params); + onRuntimeMessage({action, params}, sender, callback) { + const handlers = Frontend.runtimeMessageHandlers; + if (handlers.hasOwnProperty(action)) { + const handler = handlers[action]; + handler(this, params); callback(); } } @@ -529,4 +512,25 @@ class Frontend { } } +Frontend.windowMessageHandlers = { + popupClose: (self) => { + self.searchClear(true); + }, + + selectionCopy: () => { + document.execCommand('copy'); + } +}; + +Frontend.runtimeMessageHandlers = { + optionsUpdate: (self) => { + self.updateOptions(); + }, + + popupSetVisible: (self, {visible}) => { + self.popup.setVisible(visible); + } +}; + + window.yomichan_frontend = Frontend.create(); -- cgit v1.2.3 From bf382652a7be949d0bbfe176bb2876af2d0f7fa2 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Wed, 2 Oct 2019 20:46:35 -0400 Subject: Use static object for float message handlers --- ext/fg/js/float.js | 69 +++++++++++++++++++++++++++--------------------------- 1 file changed, 35 insertions(+), 34 deletions(-) (limited to 'ext/fg') diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 8a05aa70..8f561fec 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -63,41 +63,11 @@ class DisplayFloat extends Display { } onMessage(e) { - const handlers = { - termsShow: ({definitions, options, context}) => { - this.termsShow(definitions, options, context); - }, - - kanjiShow: ({definitions, options, context}) => { - this.kanjiShow(definitions, options, context); - }, - - clearAutoPlayTimer: () => { - this.clearAutoPlayTimer(); - }, - - orphaned: () => { - this.onOrphaned(); - }, - - setOptions: (options) => { - const css = options.general.customPopupCss; - if (css) { - this.setStyle(css); - } - }, - - popupNestedInitialize: ({id, depth, parentFrameId, url}) => { - this.optionsContext.depth = depth; - this.optionsContext.url = url; - popupNestedInitialize(id, depth, parentFrameId, url); - } - }; - const {action, params} = e.data; - const handler = handlers[action]; - if (handler) { - handler(params); + const handlers = DisplayFloat.messageHandlers; + if (handlers.hasOwnProperty(action)) { + const handler = handlers[action]; + handler(this, params); } } @@ -151,4 +121,35 @@ DisplayFloat.onKeyDownHandlers = { } }; +DisplayFloat.messageHandlers = { + termsShow: (self, {definitions, options, context}) => { + self.termsShow(definitions, options, context); + }, + + kanjiShow: (self, {definitions, options, context}) => { + self.kanjiShow(definitions, options, context); + }, + + clearAutoPlayTimer: (self) => { + self.clearAutoPlayTimer(); + }, + + orphaned: (self) => { + self.onOrphaned(); + }, + + setOptions: (self, options) => { + const css = options.general.customPopupCss; + if (css) { + self.setStyle(css); + } + }, + + popupNestedInitialize: (self, {id, depth, parentFrameId, url}) => { + self.optionsContext.depth = depth; + self.optionsContext.url = url; + popupNestedInitialize(id, depth, parentFrameId, url); + } +}; + window.yomichan_display = new DisplayFloat(); -- cgit v1.2.3 From fa7ee468c0b8b877bb6d94a031464525b1a87c6b Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Wed, 2 Oct 2019 21:11:06 -0400 Subject: Simplify float initialization --- ext/fg/js/float.js | 45 +++++++++++++++++---------------------------- ext/fg/js/popup.js | 20 +++++++++++--------- 2 files changed, 28 insertions(+), 37 deletions(-) (limited to 'ext/fg') diff --git a/ext/fg/js/float.js b/ext/fg/js/float.js index 8f561fec..88842eef 100644 --- a/ext/fg/js/float.js +++ b/ext/fg/js/float.js @@ -96,6 +96,18 @@ class DisplayFloat extends Display { } } + initialize(options, popupInfo, url) { + const css = options.general.customPopupCss; + if (css) { + this.setStyle(css); + } + + const {id, depth, parentFrameId} = popupInfo; + this.optionsContext.depth = depth; + this.optionsContext.url = url; + popupNestedInitialize(id, depth, parentFrameId, url); + } + setStyle(css) { const parent = document.head; @@ -122,34 +134,11 @@ DisplayFloat.onKeyDownHandlers = { }; DisplayFloat.messageHandlers = { - termsShow: (self, {definitions, options, context}) => { - self.termsShow(definitions, options, context); - }, - - kanjiShow: (self, {definitions, options, context}) => { - self.kanjiShow(definitions, options, context); - }, - - clearAutoPlayTimer: (self) => { - self.clearAutoPlayTimer(); - }, - - orphaned: (self) => { - self.onOrphaned(); - }, - - setOptions: (self, options) => { - const css = options.general.customPopupCss; - if (css) { - self.setStyle(css); - } - }, - - popupNestedInitialize: (self, {id, depth, parentFrameId, url}) => { - self.optionsContext.depth = depth; - self.optionsContext.url = url; - popupNestedInitialize(id, depth, parentFrameId, url); - } + termsShow: (self, {definitions, options, context}) => self.termsShow(definitions, options, context), + kanjiShow: (self, {definitions, options, context}) => self.kanjiShow(definitions, options, context), + clearAutoPlayTimer: (self) => self.clearAutoPlayTimer(), + orphaned: (self) => self.onOrphaned(), + initialize: (self, {options, popupInfo, url}) => self.initialize(options, popupInfo, url) }; window.yomichan_display = new DisplayFloat(); diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js index 64da9aef..9dff6f28 100644 --- a/ext/fg/js/popup.js +++ b/ext/fg/js/popup.js @@ -56,17 +56,19 @@ class Popup { return new Promise((resolve) => { const parentFrameId = (typeof this.frameId === 'number' ? this.frameId : null); this.container.addEventListener('load', () => { - this.invokeApi('popupNestedInitialize', { - id: this.id, - depth: this.depth, - parentFrameId, + this.invokeApi('initialize', { + options: { + general: { + customPopupCss: options.general.customPopupCss + } + }, + popupInfo: { + id: this.id, + depth: this.depth, + parentFrameId + }, url: this.url }); - this.invokeApi('setOptions', { - general: { - customPopupCss: options.general.customPopupCss - } - }); resolve(); }); this.observeFullscreen(); -- cgit v1.2.3