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(-) 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