From 62b95a656f5e55395893982822b0388a425f5a29 Mon Sep 17 00:00:00 2001 From: odehjoseph Date: Thu, 26 Sep 2019 21:33:33 -0700 Subject: Add option to enable Alt+B lookup --- ext/mixed/js/display.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'ext/mixed/js/display.js') diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index ca1738a6..3a728ee8 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -323,7 +323,9 @@ class Display { $('.action-play-audio').click(this.onAudioPlay.bind(this)); $('.kanji-link').click(this.onKanjiLookup.bind(this)); $('.source-term').click(this.onSourceTermView.bind(this)); - $('.glossary-item').click(this.onTermLookup.bind(this)); + if (this.options.scanning.enablePopupSearch) { + $('.glossary-item').click(this.onTermLookup.bind(this)); + } await this.adderButtonUpdate(['term-kanji', 'term-kana'], sequence); } catch (e) { -- cgit v1.2.3 From 355fb29c3b532da279a54114c5b4b976fce3ff20 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 14:06:27 -0400 Subject: Use entryIndexFind without jQuery --- ext/mixed/js/display.js | 42 ++++++++++++++++++++++++++---------------- 1 file changed, 26 insertions(+), 16 deletions(-) (limited to 'ext/mixed/js/display.js') diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 3a728ee8..1ce997a1 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -52,11 +52,11 @@ class Display { try { e.preventDefault(); - const link = $(e.target); + const link = e.target; const context = { source: { definitions: this.definitions, - index: Display.entryIndexFind(link), + index: this.entryIndexFind(link), scroll: $('html,body').scrollTop() } }; @@ -67,7 +67,7 @@ class Display { context.source.source = this.context.source; } - const kanjiDefs = await apiKanjiFind(link.text(), this.optionsContext); + const kanjiDefs = await apiKanjiFind(link.textContent, this.optionsContext); this.kanjiShow(kanjiDefs, this.options, context); } catch (e) { this.onError(e); @@ -80,7 +80,7 @@ class Display { const {docRangeFromPoint, docSentenceExtract} = this.dependencies; - const clickedElement = $(e.target); + const clickedElement = e.target; const textSource = docRangeFromPoint(e.clientX, e.clientY, this.options); if (textSource === null) { return false; @@ -105,7 +105,7 @@ class Display { const context = { source: { definitions: this.definitions, - index: Display.entryIndexFind(clickedElement), + index: this.entryIndexFind(clickedElement), scroll: $('html,body').scrollTop() } }; @@ -124,24 +124,24 @@ class Display { onAudioPlay(e) { e.preventDefault(); - const link = $(e.currentTarget); - const definitionIndex = Display.entryIndexFind(link); - const expressionIndex = link.closest('.entry').find('.expression .action-play-audio').index(link); + const link = e.currentTarget; + const entry = link.closest('.entry'); + const definitionIndex = this.entryIndexFind(entry); + const expressionIndex = Display.indexOf(entry.querySelectorAll('.expression .action-play-audio'), link); this.audioPlay(this.definitions[definitionIndex], expressionIndex); } onNoteAdd(e) { e.preventDefault(); - const link = $(e.currentTarget); - const index = Display.entryIndexFind(link); - this.noteAdd(this.definitions[index], link.data('mode')); + const link = e.currentTarget; + const index = this.entryIndexFind(link); + this.noteAdd(this.definitions[index], link.dataset.mode); } onNoteView(e) { e.preventDefault(); - const link = $(e.currentTarget); - const index = Display.entryIndexFind(link); - apiNoteView(link.data('noteId')); + const link = e.currentTarget; + apiNoteView(link.dataset.noteId); } onKeyDown(e) { @@ -556,8 +556,9 @@ class Display { return result; } - static entryIndexFind(element) { - return $('.entry').index(element.closest('.entry')); + entryIndexFind(element) { + const entry = element.closest('.entry'); + return entry !== null ? Display.indexOf(this.container.get(0).querySelectorAll('.entry'), entry) : -1; } static adderButtonFind(index, mode) { @@ -571,4 +572,13 @@ class Display { static delay(time) { return new Promise((resolve) => setTimeout(resolve, time)); } + + static indexOf(nodeList, node) { + for (let i = 0, ii = nodeList.length; i < ii; ++i) { + if (nodeList[i] === node) { + return i; + } + } + return -1; + } } -- 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/mixed/js/display.js') 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 9fc69395c5a3c66a9289c73d412f8b92d9bc4b31 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 14:53:30 -0400 Subject: Use raw event listeners --- ext/mixed/js/display.js | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) (limited to 'ext/mixed/js/display.js') diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index e0f80b51..a3d618e5 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -31,8 +31,8 @@ class Display { this.dependencies = {}; - $(document).keydown(this.onKeyDown.bind(this)); - $(document).on('wheel', this.onWheel.bind(this)); + document.addEventListener('keydown', this.onKeyDown.bind(this)); + document.addEventListener('wheel', this.onWheel.bind(this), {passive: false}); } onError(error) { @@ -259,13 +259,12 @@ class Display { } onWheel(e) { - const event = e.originalEvent; const handler = () => { - if (event.altKey) { - if (event.deltaY < 0) { // scroll up + if (e.altKey) { + if (e.deltaY < 0) { // scroll up this.entryScrollIntoView(this.index - 1, null, true); return true; - } else if (event.deltaY > 0) { // scroll down + } else if (e.deltaY > 0) { // scroll down this.entryScrollIntoView(this.index + 1, null, true); return true; } @@ -273,7 +272,7 @@ class Display { }; if (handler()) { - event.preventDefault(); + e.preventDefault(); } } @@ -318,13 +317,13 @@ class Display { this.autoPlayAudio(); } - $('.action-add-note').click(this.onNoteAdd.bind(this)); - $('.action-view-note').click(this.onNoteView.bind(this)); - $('.action-play-audio').click(this.onAudioPlay.bind(this)); - $('.kanji-link').click(this.onKanjiLookup.bind(this)); - $('.source-term').click(this.onSourceTermView.bind(this)); + 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.addEventListeners('.source-term', 'click', this.onSourceTermView.bind(this)); if (this.options.scanning.enablePopupSearch) { - $('.glossary-item').click(this.onTermLookup.bind(this)); + this.addEventListeners('.glossary-item', 'click', this.onTermLookup.bind(this)); } await this.adderButtonUpdate(['term-kanji', 'term-kana'], sequence); @@ -366,9 +365,9 @@ class Display { const {index, scroll} = context || {}; this.entryScrollIntoView(index || 0, scroll); - $('.action-add-note').click(this.onNoteAdd.bind(this)); - $('.action-view-note').click(this.onNoteView.bind(this)); - $('.source-term').click(this.onSourceTermView.bind(this)); + this.addEventListeners('.action-add-note', 'click', this.onNoteAdd.bind(this)); + this.addEventListeners('.action-view-note', 'click', this.onNoteView.bind(this)); + this.addEventListeners('.source-term', 'click', this.onSourceTermView.bind(this)); await this.adderButtonUpdate(['kanji'], sequence); } catch (e) { @@ -585,4 +584,8 @@ class Display { } return -1; } + + addEventListeners(selector, ...args) { + this.container.querySelectorAll(selector).forEach((node) => node.addEventListener(...args)); + } } -- 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/mixed/js/display.js') 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 3ca84e3a85e02659ca818cc0d0506cd4f374eb8c Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 18:29:11 -0400 Subject: Remove jQuery calls from adderButtonFind and viewerButtonFind --- ext/mixed/js/display.js | 50 +++++++++++++++++++++++++++++++------------------ 1 file changed, 32 insertions(+), 18 deletions(-) (limited to 'ext/mixed/js/display.js') diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index e3c44507..b11e8f99 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -150,16 +150,16 @@ class Display { onKeyDown(e) { const noteTryAdd = mode => { - const button = Display.adderButtonFind(this.index, mode); - if (button.length !== 0 && !button.hasClass('disabled')) { + const button = this.adderButtonFind(this.index, mode); + if (button !== null && !button.classList.contains('disabled')) { this.noteAdd(this.definitions[this.index], mode); } }; const noteTryView = mode => { - const button = Display.viewerButtonFind(this.index); - if (button.length !== 0 && !button.hasClass('disabled')) { - apiNoteView(button.data('noteId')); + const button = this.viewerButtonFind(this.index); + if (button !== null && !button.classList.contains('disabled')) { + apiNoteView(button.dataset.noteId); } }; @@ -241,7 +241,8 @@ class Display { 80: /* p */ () => { if (e.altKey) { - if ($('.entry').eq(this.index).data('type') === 'term') { + const entry = this.getEntry(this.index); + if (entry !== null && entry.dataset.type === 'term') { this.audioPlay(this.definitions[this.index], this.firstExpressionIndex); } @@ -393,14 +394,13 @@ class Display { for (let i = 0; i < states.length; ++i) { const state = states[i]; for (const mode in state) { - const button = Display.adderButtonFind(i, mode); - if (state[mode]) { - button.removeClass('disabled'); - } else { - button.addClass('disabled'); + const button = this.adderButtonFind(i, mode); + if (button === null) { + continue; } - button.removeClass('pending'); + button.classList.toggle('disabled', !state[mode]); + button.classList.remove('pending'); } } } catch (e) { @@ -462,8 +462,15 @@ class Display { const noteId = await apiDefinitionAdd(definition, mode, context, this.optionsContext); if (noteId) { const index = this.definitions.indexOf(definition); - Display.adderButtonFind(index, mode).addClass('disabled'); - Display.viewerButtonFind(index).removeClass('pending disabled').data('noteId', noteId); + const adderButton = this.adderButtonFind(index, mode); + if (adderButton !== null) { + adderButton.classList.add('disabled'); + } + const viewerButton = this.viewerButtonFind(index); + if (viewerButton !== null) { + viewerButton.classList.remove('pending', 'disabled'); + viewerButton.dataset.noteId = noteId; + } } else { throw 'Note could note be added'; } @@ -549,6 +556,11 @@ class Display { this.spinner.style.display = visible ? 'block' : ''; } + getEntry(index) { + const entries = this.container.querySelectorAll('.entry'); + return index >= 0 && index < entries.length ? entries[index] : null; + } + static clozeBuild(sentence, source) { const result = { sentence: sentence.text.trim() @@ -568,12 +580,14 @@ class Display { return entry !== null ? Display.indexOf(this.container.querySelectorAll('.entry'), entry) : -1; } - static adderButtonFind(index, mode) { - return $('.entry').eq(index).find(`.action-add-note[data-mode="${mode}"]`); + adderButtonFind(index, mode) { + const entry = this.getEntry(index); + return entry !== null ? entry.querySelector(`.action-add-note[data-mode="${mode}"]`) : null; } - static viewerButtonFind(index) { - return $('.entry').eq(index).find('.action-view-note'); + viewerButtonFind(index) { + const entry = this.getEntry(index); + return entry !== null ? entry.querySelector('.action-view-note') : null; } static delay(time) { -- cgit v1.2.3 From 8db830b46887ee49f8be268d35eaaf155979fc56 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 18:44:49 -0400 Subject: Change how current entry is indicated --- ext/mixed/css/display.css | 4 ++++ ext/mixed/js/display.js | 19 ++++++++++++++++--- 2 files changed, 20 insertions(+), 3 deletions(-) (limited to 'ext/mixed/js/display.js') diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css index eadb9dae..8a4cf4a7 100644 --- a/ext/mixed/css/display.css +++ b/ext/mixed/css/display.css @@ -230,3 +230,7 @@ div.glossary-item.compact-glossary { .info-output td { text-align: right; } + +.entry:not(.entry-current) .current { + display: none; +} diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index b11e8f99..2f7a694e 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -412,16 +412,23 @@ class Display { index = Math.min(index, this.definitions.length - 1); index = Math.max(index, 0); - $('.current').hide().eq(index).show(); + const entryPre = this.getEntry(this.index); + if (entryPre !== null) { + entryPre.classList.remove('entry-current'); + } + + const entry = this.getEntry(index); + if (entry !== null) { + entry.classList.add('entry-current'); + } this.windowScroll.stop(); - const entry = $('.entry').eq(index); let target; if (scroll) { target = scroll; } else { - target = index === 0 ? 0 : entry.offset().top; + target = index === 0 || entry === null ? 0 : Display.getElementTop(entry); } if (smooth) { @@ -606,4 +613,10 @@ class Display { addEventListeners(selector, ...args) { this.container.querySelectorAll(selector).forEach((node) => node.addEventListener(...args)); } + + static getElementTop(element) { + const elementRect = element.getBoundingClientRect(); + const documentRect = document.documentElement.getBoundingClientRect(); + return elementRect.top - documentRect.top; + } } -- cgit v1.2.3 From e358c94882ba4fea134ca0a21824055d09719143 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 15 Sep 2019 18:52:26 -0400 Subject: Clean up event listeners --- ext/mixed/js/display.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) (limited to 'ext/mixed/js/display.js') diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index 2f7a694e..46016192 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -28,6 +28,7 @@ class Display { this.index = 0; this.audioCache = {}; this.optionsContext = {}; + this.eventListeners = []; this.dependencies = {}; @@ -283,6 +284,8 @@ class Display { async termsShow(definitions, options, context) { try { + this.clearEventListeners(); + if (!context || context.focus !== false) { window.focus(); } @@ -339,6 +342,8 @@ class Display { async kanjiShow(definitions, options, context) { try { + this.clearEventListeners(); + if (!context || context.focus !== false) { window.focus(); } @@ -610,8 +615,18 @@ class Display { return -1; } - addEventListeners(selector, ...args) { - this.container.querySelectorAll(selector).forEach((node) => node.addEventListener(...args)); + addEventListeners(selector, type, listener, options) { + this.container.querySelectorAll(selector).forEach((node) => { + node.addEventListener(type, listener, options); + this.eventListeners.push([node, type, listener, options]); + }); + } + + clearEventListeners() { + for (const [node, type, listener, options] of this.eventListeners) { + node.removeEventListener(type, listener, options); + } + this.eventListeners = []; } static getElementTop(element) { -- 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/mixed/js/display.js') 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 7380ada1f12c382d423133c2e9142f36a6634067 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Wed, 2 Oct 2019 20:57:48 -0400 Subject: Simplify onWheel handler --- ext/mixed/js/display.js | 18 +++++------------- 1 file changed, 5 insertions(+), 13 deletions(-) (limited to 'ext/mixed/js/display.js') diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js index eb40a5df..dc64dbea 100644 --- a/ext/mixed/js/display.js +++ b/ext/mixed/js/display.js @@ -161,20 +161,12 @@ class Display { } onWheel(e) { - const handler = () => { - if (e.altKey) { - if (e.deltaY < 0) { // scroll up - this.entryScrollIntoView(this.index - 1, null, true); - return true; - } else if (e.deltaY > 0) { // scroll down - this.entryScrollIntoView(this.index + 1, null, true); - return true; - } + if (e.altKey) { + const delta = e.deltaY; + if (delta !== 0) { + this.entryScrollIntoView(this.index + (delta > 0 ? 1 : -1), null, true); + e.preventDefault(); } - }; - - if (handler()) { - e.preventDefault(); } } -- cgit v1.2.3