Harvest (time tracking) arrow navigation

harvest-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://*.harvestapp.com/time*
// - uses shortcuts

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

const getDaysList = () => {
  const allElements = [...document.querySelectorAll('.js-week-nav a')];
  return allElements.filter(isVisible);
};

const getProjectsList = () => {
  const allElements = [...document.querySelectorAll('button.js-edit-entry')];
  return allElements.filter(isVisible);
};

const nextElem = (getElems) => (event) => {
  const elems = getElems();
  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 prevElem = (getElems) => (event) => {
  const elems = getElems();
  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 prevDay = () => {
  const button = document.querySelectorAll('a.js-navigate-by-url')[0]
  button && button.click()
}

const nextDay = () => {
  const button = document.querySelectorAll('a.js-navigate-by-url')[1]
  button && button.click()
}

ShortcutService.registerShortcut('arrowright', {
  handler: nextDay,
  preventOnInputs: true,
})
ShortcutService.registerShortcut('arrowleft', {
  handler: prevDay,
  preventOnInputs: true,
})
ShortcutService.registerShortcut('arrowdown', {
  handler: nextElem(getProjectsList),
  preventOnInputs: true,
})
ShortcutService.registerShortcut('arrowup', {
  handler: prevElem(getProjectsList),
  preventOnInputs: true,
})