Github notifications arrow navigation

github-notifications-shortcuts.js

// Browser extension
// - Firefox: https://addons.mozilla.org/pl/firefox/addon/shark-javascript-injector/
// - Other browsers (source code): https://github.com/rossinek/javascript-injector-webextension

// Options:
// - hosts: https://github.com/notifications*
// - uses shortcuts

const isVisible = (elem) => {
  if (!elem) return true;
  return window.getComputedStyle(elem, null).getPropertyValue('display') !== 'none'
    && isVisible(elem.parentElement);
};

const getListItems = () => {
  const allCheckboxes = [...document.querySelectorAll('input[type="checkbox"][name="notification_ids[]"]')];
  return allCheckboxes.filter(isVisible);
};

const focusNext = (event) => {
  console.log('<custom shortcut> focus next');
  const elems = getListItems();
  const focused = elems.find((el) => el === document.activeElement);
  const toFocus = focused ? elems[(elems.indexOf(focused) + 1) % elems.length] : elems[0];
  if (toFocus) {
    toFocus.focus();
    event.preventDefault();
  }
};

const focusPrev = (event) => {
  console.log('<custom shortcut> focus prev');
  const elems = getListItems();
  const focused = elems.find((el) => el === document.activeElement);
  const toFocus = focused
    ? elems[(elems.indexOf(focused) - 1 + elems.length) % elems.length]
    : elems[elems.length - 1];
  if (toFocus) {
    toFocus.focus();
    event.preventDefault();
  }
};

const toggleCheckbox = (event) => {
  console.log('<custom shortcut> toggle checkbox');
  const elems = getListItems();
  const focused = elems.find((el) => el === document.activeElement);
  if (focused) {
    focused.click();
    event.preventDefault();
  }
}

ShortcutService.registerShortcut('arrowdown', focusNext)
ShortcutService.registerShortcut('arrowup', focusPrev)
ShortcutService.registerShortcut('x', toggleCheckbox)