Use KeyboardEvent.key for onKeyDown handlers
This commit is contained in:
parent
fba2bef905
commit
a628610cbd
@ -102,22 +102,17 @@ class DisplayFloat extends Display {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onKeyDown(e) {
|
onKeyDown(e) {
|
||||||
const handlers = {
|
const key = Display.getKeyFromEvent(e);
|
||||||
67: /* c */ () => {
|
const handlers = DisplayFloat.onKeyDownHandlers;
|
||||||
if (e.ctrlKey && !window.getSelection().toString()) {
|
if (handlers.hasOwnProperty(key)) {
|
||||||
this.onSelectionCopy();
|
const handler = handlers[key];
|
||||||
return true;
|
if (handler(this, e)) {
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handler = handlers[e.keyCode];
|
|
||||||
if (handler && handler()) {
|
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
} else {
|
return;
|
||||||
super.onKeyDown(e);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
super.onKeyDown(e);
|
||||||
|
}
|
||||||
|
|
||||||
autoPlayAudio() {
|
autoPlayAudio() {
|
||||||
this.clearAutoPlayTimer();
|
this.clearAutoPlayTimer();
|
||||||
@ -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();
|
window.yomichan_display = new DisplayFloat();
|
||||||
|
@ -150,119 +150,15 @@ class Display {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onKeyDown(e) {
|
onKeyDown(e) {
|
||||||
const noteTryAdd = mode => {
|
const key = Display.getKeyFromEvent(e);
|
||||||
const button = this.adderButtonFind(this.index, mode);
|
const handlers = Display.onKeyDownHandlers;
|
||||||
if (button !== null && !button.classList.contains('disabled')) {
|
if (handlers.hasOwnProperty(key)) {
|
||||||
this.noteAdd(this.definitions[this.index], mode);
|
const handler = handlers[key];
|
||||||
}
|
if (handler(this, e)) {
|
||||||
};
|
|
||||||
|
|
||||||
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();
|
e.preventDefault();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
onWheel(e) {
|
onWheel(e) {
|
||||||
const handler = () => {
|
const handler = () => {
|
||||||
@ -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) {
|
async noteAdd(definition, mode) {
|
||||||
try {
|
try {
|
||||||
this.setSpinnerVisible(true);
|
this.setSpinnerVisible(true);
|
||||||
@ -634,4 +544,115 @@ class Display {
|
|||||||
const documentRect = document.documentElement.getBoundingClientRect();
|
const documentRect = document.documentElement.getBoundingClientRect();
|
||||||
return elementRect.top - documentRect.top;
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
Loading…
Reference in New Issue
Block a user