philomena/assets/js/shortcuts.ts

/**
 * Keyboard shortcuts
 */

import { $ } from './utils/dom';

type ShortcutKeyMap = Record<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: 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'() {                                   // F - favourite image
    click(getHover() ? `a.interaction--fave[data-image-id="${getHover()}"]`
      : '.block__header a.interaction--fave');
  },
  'u'() {                                   // U - upvote image
    click(getHover() ? `a.interaction--upvote[data-image-id="${getHover()}"]`
      : '.block__header a.interaction--upvote');
  },
};

export function listenForKeys() {
  document.addEventListener('keydown', (event: KeyboardEvent) => {
    if (isOK(event) && keyCodes[event.key]) {
      keyCodes[event.key]();
      event.preventDefault();
    }
  });
}