PonyMirrors/philomena
1
0
Fork 0
mirror of https://github.com/philomena-dev/philomena.git synced 2024-11-23 20:18:00 +01:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #277 from philomena-dev/ts-shortcuts

Browse source 
Convert keyboard shortcut scripts to TypeScript
This commit is contained in:
liamwhite 2024-06-08 23:12:05 -04:00 committed by GitHub
commit 85ab98c085
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 74 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
assets/js/shortcuts.js
View file

@ -1,62 +0,0 @@
/**
* Keyboard shortcuts
*/
import { $ } from './utils/dom';
function getHover() {
const thumbBoxHover = $('.media-box:hover');
if (thumbBoxHover) return thumbBoxHover.dataset.imageId;
}
function openFullView() {
const imageHover = $('[data-uris]:hover');
if (!imageHover) return;
window.location = JSON.parse(imageHover.dataset.uris).full;
}
function openFullViewNewTab() {
const imageHover = $('[data-uris]:hover');
if (!imageHover) return;
window.open(JSON.parse(imageHover.dataset.uris).full);
}
function click(selector) {
const el = $(selector);
if (el) el.click();
}
function isOK(event) {
return !event.altKey && !event.ctrlKey && !event.metaKey &&
document.activeElement.tagName !== 'INPUT' &&
document.activeElement.tagName !== 'TEXTAREA';
}
const keyCodes = {
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
getHover() ? click(`a.interaction--fave[data-image-id="${getHover()}"]`)
: click('.block__header a.interaction--fave');
},
85() { // U - upvote image
getHover() ? click(`a.interaction--upvote[data-image-id="${getHover()}"]`)
: click('.block__header a.interaction--upvote');
},
};
function listenForKeys() {
document.addEventListener('keydown', event => {
if (isOK(event) && keyCodes[event.keyCode]) { keyCodes[event.keyCode](); event.preventDefault(); }
});
}
export { listenForKeys };

74
assets/js/shortcuts.ts Normal file
View file

@ -0,0 +1,74 @@
/**
* Keyboard shortcuts
*/
import { $ } from './utils/dom';
interface ShortcutKeycodes {
[key: string]: () => void
}
function getHover(): string | null {
const thumbBoxHover = $<HTMLDivElement>('.media-box:hover');
return thumbBoxHover && (thumbBoxHover.dataset.imageId || null);
}
function openFullView() {
const imageHover = $<HTMLDivElement>('[data-uris]:hover');
if (!imageHover || !imageHover.dataset.uris) return;
window.location = JSON.parse(imageHover.dataset.uris).full;
}
function openFullViewNewTab() {
const imageHover = $<HTMLDivElement>('[data-uris]:hover');
if (!imageHover || !imageHover.dataset.uris) return;
window.open(JSON.parse(imageHover.dataset.uris).full);
}
function click(selector: string) {
const el = $<HTMLElement>(selector);
if (el) {
el.click();
}
}
function isOK(event: KeyboardEvent): boolean {
return !event.altKey && !event.ctrlKey && !event.metaKey &&
document.activeElement !== null &&
document.activeElement.tagName !== 'INPUT' &&
document.activeElement.tagName !== 'TEXTAREA';
}
const keyCodes: ShortcutKeycodes = {
KeyJ() { click('.js-prev'); }, // J - go to previous image
KeyI() { click('.js-up'); }, // I - go to index page
KeyK() { click('.js-next'); }, // K - go to next image
KeyR() { click('.js-rand'); }, // R - go to random image
KeyS() { click('.js-source-link'); }, // S - go to image source
KeyL() { click('.js-tag-sauce-toggle'); }, // L - edit tags
KeyO() { openFullView(); }, // O - open original
KeyV() { openFullViewNewTab(); }, // V - open original in a new tab
KeyF() { // F - favourite image
getHover() ? click(`a.interaction--fave[data-image-id="${getHover()}"]`)
: click('.block__header a.interaction--fave');
},
KeyU() { // U - upvote image
getHover() ? click(`a.interaction--upvote[data-image-id="${getHover()}"]`)
: click('.block__header a.interaction--upvote');
},
};
export function listenForKeys() {
document.addEventListener('keydown', (event: KeyboardEvent) => {
if (isOK(event) && keyCodes[event.code]) {
keyCodes[event.code]();
event.preventDefault();
}
});
}