Function createItem

packages/foliate-js/ui/tree.js:17–54

({ label, href, subitems }, depth = 0)

  let count = 0;
  const makeID = () => `toc-element-${count++}`;
  const createItem = ({ label, href, subitems }, depth = 0) => {
    const a = document.createElement(href ? "a" : "span");
    a.innerText = label;
    a.setAttribute("role", "treeitem");
    a.tabIndex = -1;
    a.style.paddingInlineStart = `${(depth + 1) * 24}px`;
    list.push(a);
    if (href) {
      if (!map.has(href)) map.set(href, a);
      a.href = href;
      a.onclick = (event) => {
        event.preventDefault();
        onclick(href);
      };
    } else a.onclick = (event) => a.firstElementChild?.onclick(event);

    const li = document.createElement("li");
    li.setAttribute("role", "none");
    li.append(a);
    if (subitems?.length) {
      a.setAttribute("aria-expanded", "false");
      const expander = createExpanderIcon();
      expander.onclick = (event) => {
        event.preventDefault();
        event.stopPropagation();
        const expanded = a.getAttribute("aria-expanded");
        a.setAttribute("aria-expanded", expanded === "true" ? "false" : "true");
      };
      a.prepend(expander);
      const ol = document.createElement("ol");
      ol.id = makeID();
      ol.setAttribute("role", "group");
      a.setAttribute("aria-owns", ol.id);
      ol.replaceChildren(...subitems.map((item) => createItem(item, depth + 1)));
      li.append(ol);
    }
    return li;
  };
  return createItem;
};