diff --git a/assets/js/markdowntoolbar.js b/assets/js/markdowntoolbar.js index 534388f6..05c8eb8e 100644 --- a/assets/js/markdowntoolbar.js +++ b/assets/js/markdowntoolbar.js @@ -7,19 +7,19 @@ import { $, $$ } from './utils/dom'; const markdownSyntax = { bold: { action: wrapSelection, - options: { prefix: '**', shortcutKey: 'b' }, + options: { prefix: '**', shortcutKeyCode: 66 }, }, italics: { action: wrapSelection, - options: { prefix: '*', shortcutKey: 'i' }, + options: { prefix: '*', shortcutKeyCode: 73 }, }, under: { action: wrapSelection, - options: { prefix: '__', shortcutKey: 'u' }, + options: { prefix: '__', shortcutKeyCode: 85 }, }, spoiler: { action: wrapSelection, - options: { prefix: '||', shortcutKey: 's' }, + options: { prefix: '||', shortcutKeyCode: 83 }, }, code: { action: wrapSelectionOrLines, @@ -29,7 +29,7 @@ const markdownSyntax = { prefixMultiline: '```\n', suffixMultiline: '\n```', singleWrap: true, - shortcutKey: 'e', + shortcutKeyCode: 69, }, }, strike: { @@ -50,11 +50,11 @@ const markdownSyntax = { }, link: { action: insertLink, - options: { shortcutKey: 'l' }, + options: { shortcutKeyCode: 76 }, }, image: { action: insertLink, - options: { image: true, shortcutKey: 'k' }, + options: { image: true, shortcutKeyCode: 75 }, }, escape: { action: escapeSelection, @@ -257,10 +257,10 @@ function shortcutHandler(event) { } const textarea = event.target, - key = event.key.toLowerCase(); + keyCode = event.keyCode; for (const id in markdownSyntax) { - if (key === markdownSyntax[id].options.shortcutKey) { + if (keyCode === markdownSyntax[id].options.shortcutKeyCode) { markdownSyntax[id].action(textarea, markdownSyntax[id].options); event.preventDefault(); } diff --git a/assets/js/shortcuts.ts b/assets/js/shortcuts.ts index 682863ef..3de21c89 100644 --- a/assets/js/shortcuts.ts +++ b/assets/js/shortcuts.ts @@ -4,7 +4,7 @@ import { $ } from './utils/dom'; -type ShortcutKeyMap = Record void>; +type ShortcutKeyMap = Record void>; function getHover(): string | null { const thumbBoxHover = $('.media-box:hover'); @@ -50,19 +50,19 @@ function isOK(event: KeyboardEvent): boolean { /* eslint-disable prettier/prettier */ const keyCodes: ShortcutKeyMap = { - j() { click('.js-prev'); }, // J - go to previous image - i() { click('.js-up'); }, // I - go to index page - k() { click('.js-next'); }, // K - go to next image - r() { click('.js-rand'); }, // R - go to random image - s() { click('.js-source-link'); }, // S - go to image source - l() { click('.js-tag-sauce-toggle'); }, // L - edit tags - o() { openFullView(); }, // O - open original - v() { openFullViewNewTab(); }, // V - open original in a new tab - f() { + 74() { click('.js-prev'); }, // J - go to previous image + 73() { click('.js-up'); }, // I - go to index page + 75() { click('.js-next'); }, // K - go to next image + 82() { click('.js-rand'); }, // R - go to random image + 83() { click('.js-source-link'); }, // S - go to image source + 76() { click('.js-tag-sauce-toggle'); }, // L - edit tags + 79() { openFullView(); }, // O - open original + 86() { openFullViewNewTab(); }, // V - open original in a new tab + 70() { // F - favourite image click(getHover() ? `a.interaction--fave[data-image-id="${getHover()}"]` : '.block__header a.interaction--fave'); }, - u() { + 85() { // U - upvote image click(getHover() ? `a.interaction--upvote[data-image-id="${getHover()}"]` : '.block__header a.interaction--upvote'); }, @@ -72,8 +72,8 @@ const keyCodes: ShortcutKeyMap = { export function listenForKeys() { document.addEventListener('keydown', (event: KeyboardEvent) => { - if (isOK(event) && keyCodes[event.key]) { - keyCodes[event.key](); + if (isOK(event) && keyCodes[event.keyCode]) { + keyCodes[event.keyCode](); event.preventDefault(); } });