breadcrumb-the-shire/web/js/components/app-nav-history.js

/**
 * Browser history integration — handles back/forward navigation state.
 */
import { isEditableTarget } from '../core/app-form-utils.js';
import { resolveHost } from '../core/app-dom.js';

export function initNavHistory(root = document, options = {}) {
  const {
    backSelector = '#global-back',
    forwardSelector = '#global-forward',
  } = options;
  const host = resolveHost(root);
  const back = host.querySelector(backSelector);
  const forward = host.querySelector(forwardSelector);
  if (!back && !forward) {
    return { destroy: () => {} };
  }

  const setDisabledState = (link, disabled) => {
    link.setAttribute('aria-disabled', disabled ? 'true' : 'false');
    link.classList.toggle('is-disabled', disabled);
    if (disabled) {
      link.setAttribute('tabindex', '-1');
    } else {
      link.removeAttribute('tabindex');
    }
  };

  const updateHistoryButtons = () => {
    const hasHistory = window.history.length > 1;
    if (back instanceof HTMLElement) {
      setDisabledState(back, !hasHistory);
    }
    if (forward instanceof HTMLElement) {
      setDisabledState(forward, !hasHistory);
    }
  };

  const onKeyDown = (event) => {
    if (!event.altKey || event.metaKey || event.ctrlKey) {
      return;
    }
    if (isEditableTarget(event.target)) {
      return;
    }
    if (event.key === 'ArrowLeft') {
      if (window.history.length > 1) {
        event.preventDefault();
        window.history.back();
      }
    } else if (event.key === 'ArrowRight') {
      if (window.history.length > 1) {
        event.preventDefault();
        window.history.forward();
      }
    }
  };

  document.addEventListener('keydown', onKeyDown);

  const onBackClick = (event) => {
    event.preventDefault();
    if (window.history.length > 1) {
      window.history.back();
    }
  };
  if (back instanceof HTMLElement) {
    back.addEventListener('click', onBackClick);
  }

  const onForwardClick = (event) => {
    event.preventDefault();
    if (window.history.length > 1) {
      window.history.forward();
    }
  };
  if (forward instanceof HTMLElement) {
    forward.addEventListener('click', onForwardClick);
  }

  window.addEventListener('popstate', updateHistoryButtons);
  updateHistoryButtons();

  const destroy = () => {
    document.removeEventListener('keydown', onKeyDown);
    if (back instanceof HTMLElement) {
      back.removeEventListener('click', onBackClick);
    }
    if (forward instanceof HTMLElement) {
      forward.removeEventListener('click', onForwardClick);
    }
    window.removeEventListener('popstate', updateHistoryButtons);
  };

  return { destroy, update: updateHistoryButtons };
}