Greasy Fork is available in English.

Key navigation

To be used for mapping keyboard arrow press events

Skrip ini tidak untuk dipasang secara langsung. Ini adalah pustaka skrip lain untuk disertakan dengan direktif meta // @require https://update.greasyfork.org/scripts/396703/1100259/Key%20navigation.js 

(() => {
  'use strict';

  const setUpKeyNavigation = ({
    onDownPressed,
    onLeftPressed,
    onRightPressed,
    onUpPressed,
    preventDefault,
    stopPropagation,
  }) => {
    document.addEventListener('keydown', (event) => {
      const operation = {
        ArrowDown: (e) => executeFn(onDownPressed, e),
        ArrowLeft: (e) => executeFn(onLeftPressed, e),
        ArrowRight: (e) => executeFn(onRightPressed, e),
        ArrowUp: (e) => executeFn(onUpPressed, e),
      }[event.key];

      if (operation) operation(event);

      preventDefault && event.preventDefault();
      stopPropagation && event.stopPropagation();
    });
  };

  const setUpAnchorNavigation = (selectorsMap) => {
    const downHref = getAnchorHref(selectorsMap.down);
    const leftHref = getAnchorHref(selectorsMap.left);
    const rightHref = getAnchorHref(selectorsMap.right);
    const upHref = getAnchorHref(selectorsMap.up);

    setUpKeyNavigation({
      onDownPressed: generateNavigationEvent(downHref),
      onLeftPressed: generateNavigationEvent(leftHref),
      onRightPressed: generateNavigationEvent(rightHref),
      onUpPressed: generateNavigationEvent(upHref),
    });
  };

  const getElement = (selector) => {
    return selector ? document.querySelector(selector) : undefined;
  };

  const getAnchorHref = (selector) => {
    return getElement(selector)?.href;
  };

  const generateNavigationEvent = (href) => {
    return href ? () => (location.href = href) : undefined;
  };

  const executeFn = (fn, ...parameters) => {
    return typeof fn === 'function' && fn(...parameters);
  };

  window.setUpAnchorNavigation = setUpAnchorNavigation;
  window.setUpKeyNavigation = setUpKeyNavigation;
})();