5e_tools_KB_Nav.user.js

// ==UserScript==
// @name	5e.tools KB Nav
// @namespace	https://gkjsdll.com/
// @version	0.1.1
// @description	Add some 5e.tools Keyboard Navigation
// @author	Zack (Gkjsdll) Winchell
// @match	*://5e.tools/actions*
// @match	*://5e.tools/backgrounds*
// @match	*://5e.tools/bestiary*
// @match	*://5e.tools/charcreationoptions*
// @match	*://5e.tools/classes*
// @match	*://5e.tools/conditionsdiseases*
// @match	*://5e.tools/deities*
// @match	*://5e.tools/feats*
// @match	*://5e.tools/items*
// @match	*://5e.tools/languages*
// @match	*://5e.tools/optionalfeatures*
// @match	*://5e.tools/psionics*
// @match	*://5e.tools/races*
// @match	*://5e.tools/recipes*
// @match	*://5e.tools/rewards*
// @match	*://5e.tools/spells*
// @match	*://5e.tools/vehicles*
// @grant	none
// ==/UserScript==

(function addKeyboardNavigation() {
  function getActiveTab() {
    return document.querySelector('.ui-tab__btn-tab-head--active');
  }
  
	function getSelectedRow() {
    return document.querySelector('.list-multi-selected');
  }
  
  function handleArrowDown() {
    const selectedRow = getSelectedRow();
    const newRow = selectedRow.nextElementSibling ?? selectedRow.parentElement.querySelector(':scope > .lst__row:first-of-type');
    
    newRow.querySelector(':scope > a').click();
    newRow.scrollIntoView({ behavior: 'smooth', block: 'center' });
	}

 	function handleArrowLeft() {
  	const activeTab = getActiveTab();
  	const newTab = activeTab.previousElementSibling ??
          activeTab.parentElement.querySelector(':scope > button:last-of-type');

    newTab.click();
	}

	function handleArrowRight() {
  	const activeTab = getActiveTab();
  	const newTab = (() => {
    	if (activeTab.nextElementSibling?.tagName === 'BUTTON') {
    		return activeTab.nextElementSibling;
    	}
    
    	return activeTab.parentElement.querySelector(':scope > button:first-of-type');
    })();

    newTab.click();
	}

  function handleArrowUp() {
    const selectedRow = getSelectedRow();
    const newRow = selectedRow.previousElementSibling ??
          selectedRow.parentElement.querySelector(':scope > .lst__row:last-of-type');
    
    newRow.querySelector(':scope > a').click();
    newRow.scrollIntoView({ behavior: 'smooth', block: 'center' });;
  }

  function onKeydown(event) {
    switch (event.key) {
      case 'ArrowDown': {
        handleArrowDown();
        break;
      }

      case 'ArrowLeft': {
        handleArrowLeft();
        break;
      }

      case 'ArrowRight': {
        handleArrowRight();
        break;
      }

      case 'ArrowUp': {
        handleArrowUp();
        break;
      }
    }
  }

  window.addEventListener('keydown', onKeydown);
})();