Function createTOCView

packages/foliate-js/ui/tree.js:59–168

(toc, onclick)

// https://www.w3.org/TR/wai-aria-practices-1.2/examples/treeview/treeview-navigation.html
export const createTOCView = (toc, onclick) => {
  const $toc = document.createElement("ol");
  $toc.setAttribute("role", "tree");
  const list = [];
  const map = new Map();
  const createItem = createTOCItemElement(list, map, onclick);
  $toc.replaceChildren(...toc.map((item) => createItem(item)));

  const isTreeItem = (item) => item?.getAttribute("role") === "treeitem";
  const getParents = function* (el) {
    for (let parent = el.parentNode; parent !== $toc; parent = parent.parentNode) {
      const item = parent.previousElementSibling;
      if (isTreeItem(item)) yield item;
    }
  };

  let currentItem, currentVisibleParent;
  $toc.addEventListener("focusout", () => {
    if (!currentItem) return;
    // reset parent focus from last time
    if (currentVisibleParent) currentVisibleParent.tabIndex = -1;
    // if current item is visible, let it have the focus
    if (currentItem.offsetParent) {
      currentItem.tabIndex = 0;
      return;
    }
    // current item is hidden; give focus to the nearest visible parent
    for (const item of getParents(currentItem)) {
      if (item.offsetParent) {
        item.tabIndex = 0;
        currentVisibleParent = item;
        break;
      }
    }
  });

  const setCurrentHref = (href) => {
    if (currentItem) {
      currentItem.removeAttribute("aria-current");
      currentItem.tabIndex = -1;
    }
    const el = map.get(href);
    if (!el) {
      currentItem = list[0];
      currentItem.tabIndex = 0;
      return;
    }
    for (const item of getParents(el)) item.setAttribute("aria-expanded", "true");
    el.setAttribute("aria-current", "page");
    el.tabIndex = 0;
    el.scrollIntoView({ behavior: "smooth", block: "center" });
    currentItem = el;
  };

  const acceptNode = (node) =>
    isTreeItem(node) && node.offsetParent ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
  const iter = document.createTreeWalker($toc, 1, { acceptNode });
  const getIter = (current) => ((iter.currentNode = current), iter);