katalyst-navigation 1.4.1 → 1.5.1

data/app/assets/builds/katalyst/navigation.js

@@ -0,0 +1,920 @@
+import { Controller } from '@hotwired/stimulus';
+
+class Item {
+  /**
+   * Sort items by their index.
+   *
+   * @param a {Item}
+   * @param b {Item}
+   * @returns {number}
+   */
+  static comparator(a, b) {
+    return a.index - b.index;
+  }
+
+  /**
+   * @param node {Element} li[data-navigation-index]
+   */
+  constructor(node) {
+    this.node = node;
+  }
+
+  /**
+   * @returns {String} id of the node's item (from data attributes)
+   */
+  get itemId() {
+    return this.node.dataset[`navigationItemId`];
+  }
+
+  get #itemIdInput() {
+    return this.node.querySelector(`input[name$="[id]"]`);
+  }
+
+  /**
+   * @param itemId {String} id
+   */
+  set itemId(id) {
+    if (this.itemId === id) return;
+
+    this.node.dataset[`navigationItemId`] = `${id}`;
+    this.#itemIdInput.value = `${id}`;
+  }
+
+  /**
+   * @returns {number} logical nesting depth of node in menu
+   */
+  get depth() {
+    return parseInt(this.node.dataset[`navigationDepth`]) || 0;
+  }
+
+  get #depthInput() {
+    return this.node.querySelector(`input[name$="[depth]"]`);
+  }
+
+  /**
+   * @param depth {number} depth >= 0
+   */
+  set depth(depth) {
+    if (this.depth === depth) return;
+
+    this.node.dataset[`navigationDepth`] = `${depth}`;
+    this.#depthInput.value = `${depth}`;
+  }
+
+  /**
+   * @returns {number} logical index of node in menu (pre-order traversal)
+   */
+  get index() {
+    return parseInt(this.node.dataset[`navigationIndex`]);
+  }
+
+  get #indexInput() {
+    return this.node.querySelector(`input[name$="[index]"]`);
+  }
+
+  /**
+   * @param index {number} index >= 0
+   */
+  set index(index) {
+    if (this.index === index) return;
+
+    this.node.dataset[`navigationIndex`] = `${index}`;
+    this.#indexInput.value = `${index}`;
+  }
+
+  /**
+   * @returns {boolean} true if this item can have children
+   */
+  get isLayout() {
+    return this.node.hasAttribute("data-content-layout");
+  }
+
+  /**
+   * @returns {Item} nearest neighbour (index - 1)
+   */
+  get previousItem() {
+    let sibling = this.node.previousElementSibling;
+    if (sibling) return new Item(sibling);
+  }
+
+  /**
+   * @returns {Item} nearest neighbour (index + 1)
+   */
+  get nextItem() {
+    let sibling = this.node.nextElementSibling;
+    if (sibling) return new Item(sibling);
+  }
+
+  /**
+   * @returns {boolean} true if this item has any collapsed children
+   */
+  hasCollapsedDescendants() {
+    let childrenList = this.#childrenListElement;
+    return !!childrenList && childrenList.children.length > 0;
+  }
+
+  /**
+   * @returns {boolean} true if this item has any expanded children
+   */
+  hasExpandedDescendants() {
+    let sibling = this.nextItem;
+    return !!sibling && sibling.depth > this.depth;
+  }
+
+  /**
+   * Recursively traverse the node and its descendants.
+   *
+   * @callback {Item}
+   */
+  traverse(callback) {
+    // capture descendants before traversal in case of side-effects
+    // specifically, setting depth affects calculation
+    const expanded = this.#expandedDescendants;
+
+    callback(this);
+    this.#traverseCollapsed(callback);
+    expanded.forEach((item) => item.#traverseCollapsed(callback));
+  }
+
+  /**
+   * Recursively traverse the node's collapsed descendants, if any.
+   *
+   * @callback {Item}
+   */
+  #traverseCollapsed(callback) {
+    if (!this.hasCollapsedDescendants()) return;
+
+    this.#collapsedDescendants.forEach((item) => {
+      callback(item);
+      item.#traverseCollapsed(callback);
+    });
+  }
+
+  /**
+   * Collapses visible (logical) children into this element's hidden children
+   * list, creating it if it doesn't already exist.
+   */
+  collapse() {
+    let listElement = this.#childrenListElement;
+
+    if (!listElement) listElement = createChildrenList(this.node);
+
+    this.#expandedDescendants.forEach((child) =>
+      listElement.appendChild(child.node)
+    );
+  }
+
+  /**
+   * Moves any collapsed children back into the parent menu.
+   */
+  expand() {
+    if (!this.hasCollapsedDescendants()) return;
+
+    Array.from(this.#childrenListElement.children)
+      .reverse()
+      .forEach((node) => {
+        this.node.insertAdjacentElement("afterend", node);
+      });
+  }
+
+  /**
+   * Sets the state of a given rule on the target node.
+   *
+   * @param rule {String}
+   * @param deny {boolean}
+   */
+  toggleRule(rule, deny = false) {
+    if (this.node.dataset.hasOwnProperty(rule) && !deny) {
+      delete this.node.dataset[rule];
+    }
+    if (!this.node.dataset.hasOwnProperty(rule) && deny) {
+      this.node.dataset[rule] = "";
+    }
+
+    if (rule === "denyDrag") {
+      if (!this.node.hasAttribute("draggable") && !deny) {
+        this.node.setAttribute("draggable", "true");
+      }
+      if (this.node.hasAttribute("draggable") && deny) {
+        this.node.removeAttribute("draggable");
+      }
+    }
+  }
+
+  /**
+   * Detects turbo item changes by comparing the dataset id with the input
+   */
+  hasItemIdChanged() {
+    return !(this.#itemIdInput.value === this.itemId);
+  }
+
+  /**
+   * Updates inputs, in case they don't match the data values, e.g., when the
+   * nested inputs have been hot-swapped by turbo with data from the server.
+   *
+   * Updates itemId from input as that is the canonical source.
+   */
+  updateAfterChange() {
+    this.itemId = this.#itemIdInput.value;
+    this.#indexInput.value = this.index;
+    this.#depthInput.value = this.depth;
+  }
+
+  /**
+   * Finds the dom container for storing collapsed (hidden) children, if present.
+   *
+   * @returns {Element} ol[data-navigation-children]
+   */
+  get #childrenListElement() {
+    return this.node.querySelector(`:scope > [data-navigation-children]`);
+  }
+
+  /**
+   * @returns {Item[]} all items that follow this element that have a greater depth.
+   */
+  get #expandedDescendants() {
+    const descendants = [];
+
+    let sibling = this.nextItem;
+    while (sibling && sibling.depth > this.depth) {
+      descendants.push(sibling);
+      sibling = sibling.nextItem;
+    }
+
+    return descendants;
+  }
+
+  /**
+   * @returns {Item[]} all items directly contained inside this element's hidden children element.
+   */
+  get #collapsedDescendants() {
+    if (!this.hasCollapsedDescendants()) return [];
+
+    return Array.from(this.#childrenListElement.children).map(
+      (node) => new Item(node)
+    );
+  }
+}
+
+/**
+ * Finds or creates a dom container for storing collapsed (hidden) children.
+ *
+ * @param node {Element} li[data-navigation-index]
+ * @returns {Element} ol[data-navigation-children]
+ */
+function createChildrenList(node) {
+  const childrenList = document.createElement("ol");
+  childrenList.setAttribute("class", "hidden");
+
+  childrenList.dataset[`navigationChildren`] = "";
+
+  node.appendChild(childrenList);
+
+  return childrenList;
+}
+
+/**
+ * @param nodes {NodeList}
+ * @returns {Item[]}
+ */
+function createItemList(nodes) {
+  return Array.from(nodes).map((node) => new Item(node));
+}
+
+class Menu {
+  /**
+   * @param node {Element} navigation editor list
+   */
+  constructor(node) {
+    this.node = node;
+  }
+
+  /**
+   * @return {Item[]} an ordered list of all items in the menu
+   */
+  get items() {
+    return createItemList(
+      this.node.querySelectorAll("[data-navigation-index]")
+    );
+  }
+
+  /**
+   *  @return {String} a serialized description of the structure of the menu
+   */
+  get state() {
+    const inputs = this.node.querySelectorAll("li input[type=hidden]");
+    return Array.from(inputs)
+      .map((e) => e.value)
+      .join("/");
+  }
+
+  /**
+   * Set the index of items based on their current position.
+   */
+  reindex() {
+    this.items.map((item, index) => (item.index = index));
+  }
+
+  /**
+   * Resets the order of items to their defined index.
+   * Useful after an aborted drag.
+   */
+  reset() {
+    this.items.sort(Item.comparator).forEach((item) => {
+      this.node.appendChild(item.node);
+    });
+  }
+}
+
+class RulesEngine {
+  static rules = [
+    "denyDeNest",
+    "denyNest",
+    "denyCollapse",
+    "denyExpand",
+    "denyRemove",
+    "denyDrag",
+    "denyEdit",
+  ];
+
+  constructor(maxDepth = null, debug = false) {
+    this.maxDepth = maxDepth;
+    if (debug) {
+      this.debug = (...args) => console.log(...args);
+    } else {
+      this.debug = () => {};
+    }
+  }
+
+  /**
+   * Enforce structural rules to ensure that the given item is currently in a
+   * valid state.
+   *
+   * @param {Item} item
+   */
+  normalize(item) {
+    // structural rules enforce a valid tree structure
+    this.firstItemDepthZero(item);
+    this.depthMustBeSet(item);
+    this.itemCannotHaveInvalidDepth(item);
+    this.itemCannotExceedDepthLimit(item);
+    this.parentMustBeLayout(item);
+    this.parentCannotHaveExpandedAndCollapsedChildren(item);
+  }
+
+  /**
+   * Apply rules to the given item to determine what operations are permitted.
+   *
+   * @param {Item} item
+   */
+  update(item) {
+    this.rules = {};
+
+    // behavioural rules define what the user is allowed to do
+    this.parentsCannotDeNest(item);
+    this.rootsCannotDeNest(item);
+    this.nestingNeedsParent(item);
+    this.nestingCannotExceedMaxDepth(item);
+    this.leavesCannotCollapse(item);
+    this.needHiddenItemsToExpand(item);
+    this.parentsCannotBeDeleted(item);
+    this.parentsCannotBeDragged(item);
+
+    RulesEngine.rules.forEach((rule) => {
+      item.toggleRule(rule, !!this.rules[rule]);
+    });
+  }
+
+  /**
+   * First item can't have a parent, so its depth should always be 0
+   */
+  firstItemDepthZero(item) {
+    if (item.index === 0 && item.depth !== 0) {
+      this.debug(`enforce depth on item ${item.index}: ${item.depth} => 0`);
+
+      item.depth = 0;
+    }
+  }
+
+  /**
+   * Every item should have a non-negative depth set.
+   *
+   * @param {Item} item
+   */
+  depthMustBeSet(item) {
+    if (isNaN(item.depth) || item.depth < 0) {
+      this.debug(`unset depth on item ${item.index}: => 0`);
+
+      item.depth = 0;
+    }
+  }
+
+  /**
+   * Depth must increase stepwise.
+   *
+   * @param {Item} item
+   */
+  itemCannotHaveInvalidDepth(item) {
+    const previous = item.previousItem;
+    if (previous && previous.depth < item.depth - 1) {
+      this.debug(
+        `invalid depth on item ${item.index}: ${item.depth} => ${
+          previous.depth + 1
+        }`
+      );
+
+      item.depth = previous.depth + 1;
+    }
+  }
+
+  /**
+   * Depth must not exceed menu's depth limit.
+   *
+   * @param {Item} item
+   */
+  itemCannotExceedDepthLimit(item) {
+    if (this.maxDepth > 0 && this.maxDepth <= item.depth) {
+      // Note: this change can cause an issue where the previous item is treated
+      // like a parent even though it no longer has children. This is because
+      // items are processed in order. This issue does not seem worth solving
+      // as it only occurs if the max depth is altered. The issue can be worked
+      // around by saving the menu.
+      item.depth = this.maxDepth - 1;
+    }
+  }
+
+  /**
+   * Parent item, if any, must be a layout.
+   *
+   * @param {Item} item
+   */
+  parentMustBeLayout(item) {
+    // if we're the first child, make sure our parent is a layout
+    // if we're a sibling, we know the previous item is valid so we must be too
+    const previous = item.previousItem;
+    if (previous && previous.depth < item.depth && !previous.isLayout) {
+      this.debug(
+        `invalid parent for item ${item.index}: ${item.depth} => ${previous.depth}`
+      );
+
+      item.depth = previous.depth;
+    }
+  }
+
+  /**
+   * If a parent has expanded and collapsed children, expand.
+   *
+   * @param {Item} item
+   */
+  parentCannotHaveExpandedAndCollapsedChildren(item) {
+    if (item.hasCollapsedDescendants() && item.hasExpandedDescendants()) {
+      this.debug(`expanding collapsed children of item ${item.index}`);
+
+      item.expand();
+    }
+  }
+
+  /**
+   * De-nesting an item would create a gap of 2 between itself and its children
+   *
+   * @param {Item} item
+   */
+  parentsCannotDeNest(item) {
+    if (item.hasExpandedDescendants()) this.#deny("denyDeNest");
+  }
+
+  /**
+   * Item depth can't go below 0.
+   *
+   * @param {Item} item
+   */
+  rootsCannotDeNest(item) {
+    if (item.depth === 0) this.#deny("denyDeNest");
+  }
+
+  /**
+   * If an item doesn't have children it can't be collapsed.
+   *
+   * @param {Item} item
+   */
+  leavesCannotCollapse(item) {
+    if (!item.hasExpandedDescendants()) this.#deny("denyCollapse");
+  }
+
+  /**
+   * If an item doesn't have any hidden descendants then it can't be expanded.
+   *
+   * @param {Item} item
+   */
+  needHiddenItemsToExpand(item) {
+    if (!item.hasCollapsedDescendants()) this.#deny("denyExpand");
+  }
+
+  /**
+   * An item can't be nested (indented) if it doesn't have a valid parent.
+   *
+   * @param {Item} item
+   */
+  nestingNeedsParent(item) {
+    const previous = item.previousItem;
+    // no previous, so cannot nest
+    if (!previous) this.#deny("denyNest");
+    // previous is too shallow, nesting would increase depth too much
+    else if (previous.depth < item.depth) this.#deny("denyNest");
+    // new parent is not a layout
+    else if (previous.depth === item.depth && !previous.isLayout)
+      this.#deny("denyNest");
+  }
+
+  /**
+   * An item can't be nested (indented) if doing so would exceed the max depth.
+   *
+   * @param {Item} item
+   */
+  nestingCannotExceedMaxDepth(item) {
+    if (this.maxDepth > 0 && this.maxDepth <= item.depth + 1) {
+      this.#deny("denyNest");
+    }
+  }
+
+  /**
+   * An item can't be deleted if it has visible children.
+   *
+   * @param {Item} item
+   */
+  parentsCannotBeDeleted(item) {
+    if (!item.itemId || item.hasExpandedDescendants()) this.#deny("denyRemove");
+  }
+
+  /**
+   * Items cannot be dragged if they have visible children.
+   *
+   * @param {Item} item
+   */
+  parentsCannotBeDragged(item) {
+    if (item.hasExpandedDescendants()) this.#deny("denyDrag");
+  }
+
+  /**
+   * Record a deny.
+   *
+   * @param rule {String}
+   */
+  #deny(rule) {
+    this.rules[rule] = true;
+  }
+}
+
+class MenuController extends Controller {
+  static targets = ["menu"];
+  static values = {
+    maxDepth: Number,
+  };
+
+  connect() {
+    this.state = this.menu.state;
+
+    this.reindex();
+  }
+
+  get menu() {
+    return new Menu(this.menuTarget);
+  }
+
+  reindex() {
+    this.menu.reindex();
+    this.#update();
+  }
+
+  reset() {
+    this.menu.reset();
+  }
+
+  drop(event) {
+    this.menu.reindex(); // set indexes before calculating previous
+
+    const item = getEventItem(event);
+    const previous = item.previousItem;
+
+    let delta = 0;
+    if (previous === undefined) {
+      // if previous does not exist, set depth to 0
+      delta = -item.depth;
+    } else if (item.nextItem && item.nextItem.depth > previous.depth) {
+      // if next is a child of previous, make item a child of previous
+      delta = previous.depth - item.depth + 1;
+    } else {
+      // otherwise, make item a sibling of previous
+      delta = previous.depth - item.depth;
+    }
+
+    item.traverse((child) => {
+      child.depth += delta;
+    });
+
+    this.#update();
+    event.preventDefault();
+  }
+
+  remove(event) {
+    const item = getEventItem(event);
+
+    item.node.remove();
+
+    this.#update();
+    event.preventDefault();
+  }
+
+  nest(event) {
+    const item = getEventItem(event);
+
+    item.traverse((child) => {
+      child.depth += 1;
+    });
+
+    this.#update();
+    event.preventDefault();
+  }
+
+  deNest(event) {
+    const item = getEventItem(event);
+
+    item.traverse((child) => {
+      child.depth -= 1;
+    });
+
+    this.#update();
+    event.preventDefault();
+  }
+
+  collapse(event) {
+    const item = getEventItem(event);
+
+    item.collapse();
+
+    this.#update();
+    event.preventDefault();
+  }
+
+  expand(event) {
+    const item = getEventItem(event);
+
+    item.expand();
+
+    this.#update();
+    event.preventDefault();
+  }
+
+  /**
+   * Re-apply rules to items to enable/disable appropriate actions.
+   */
+  #update() {
+    // debounce requests to ensure that we only update once per tick
+    this.updateRequested = true;
+    setTimeout(() => {
+      if (!this.updateRequested) return;
+
+      this.updateRequested = false;
+      const engine = new RulesEngine(this.maxDepthValue);
+      this.menu.items.forEach((item) => engine.normalize(item));
+      this.menu.items.forEach((item) => engine.update(item));
+
+      this.#notifyChange();
+    }, 0);
+  }
+
+  #notifyChange() {
+    this.dispatch("change", {
+      bubbles: true,
+      prefix: "navigation",
+      detail: { dirty: this.#isDirty() },
+    });
+  }
+
+  #isDirty() {
+    return this.menu.state !== this.state;
+  }
+}
+
+function getEventItem(event) {
+  return new Item(event.target.closest("[data-navigation-item]"));
+}
+
+class ItemController extends Controller {
+  get item() {
+    return new Item(this.li);
+  }
+
+  get ol() {
+    return this.element.closest("ol");
+  }
+
+  get li() {
+    return this.element.closest("li");
+  }
+
+  connect() {
+    if (this.element.dataset.hasOwnProperty("delete")) {
+      this.remove();
+    }
+    // if index is not already set, re-index will set it
+    else if (!(this.item.index >= 0)) {
+      this.reindex();
+    }
+    // if item has been replaced via turbo, re-index will run the rules engine
+    // update our depth and index with values from the li's data attributes
+    else if (this.item.hasItemIdChanged()) {
+      this.item.updateAfterChange();
+      this.reindex();
+    }
+  }
+
+  remove() {
+    // capture ol
+    this.ol;
+    // remove self from dom
+    this.li.remove();
+    // reindex ol
+    this.reindex();
+  }
+
+  reindex() {
+    this.dispatch("reindex", { bubbles: true, prefix: "navigation" });
+  }
+}
+
+class ListController extends Controller {
+  dragstart(event) {
+    if (this.element !== event.target.parentElement) return;
+
+    const target = event.target;
+    event.dataTransfer.effectAllowed = "move";
+
+    // update element style after drag has begun
+    setTimeout(() => (target.dataset.dragging = ""));
+  }
+
+  dragover(event) {
+    const item = this.dragItem();
+    if (!item) return;
+
+    swap(this.dropTarget(event.target), item);
+
+    event.preventDefault();
+    return true;
+  }
+
+  dragenter(event) {
+    event.preventDefault();
+
+    if (event.dataTransfer.effectAllowed === "copy" && !this.dragItem()) {
+      const item = document.createElement("li");
+      item.dataset.dragging = "";
+      item.dataset.newItem = "";
+      this.element.prepend(item);
+    }
+  }
+
+  dragleave(event) {
+    const item = this.dragItem();
+    const related = this.dropTarget(event.relatedTarget);
+
+    // ignore if item is not set or we're moving into a valid drop target
+    if (!item || related) return;
+
+    // remove item if it's a new item
+    if (item.dataset.hasOwnProperty("newItem")) {
+      item.remove();
+    }
+  }
+
+  drop(event) {
+    let item = this.dragItem();
+
+    if (!item) return;
+
+    event.preventDefault();
+    delete item.dataset.dragging;
+    swap(this.dropTarget(event.target), item);
+
+    if (item.dataset.hasOwnProperty("newItem")) {
+      const placeholder = item;
+      const template = document.createElement("template");
+      template.innerHTML = event.dataTransfer.getData("text/html");
+      item = template.content.querySelector("li");
+
+      this.element.replaceChild(item, placeholder);
+      setTimeout(() =>
+        item.querySelector("[role='button'][value='edit']").click()
+      );
+    }
+
+    this.dispatch("drop", {
+      target: item,
+      bubbles: true,
+      prefix: "navigation",
+    });
+  }
+
+  dragend() {
+    const item = this.dragItem();
+    if (!item) return;
+
+    delete item.dataset.dragging;
+    this.reset();
+  }
+
+  dragItem() {
+    return this.element.querySelector("[data-dragging]");
+  }
+
+  dropTarget(e) {
+    return (
+      e.closest("[data-controller='navigation--editor--list'] > *") ||
+      e.closest("[data-controller='navigation--editor--list']")
+    );
+  }
+
+  reindex() {
+    this.dispatch("reindex", { bubbles: true, prefix: "navigation" });
+  }
+
+  reset() {
+    this.dispatch("reset", { bubbles: true, prefix: "navigation" });
+  }
+}
+
+function swap(target, item) {
+  if (!target) return;
+  if (target === item) return;
+
+  if (target.nodeName === "LI") {
+    const positionComparison = target.compareDocumentPosition(item);
+    if (positionComparison & Node.DOCUMENT_POSITION_FOLLOWING) {
+      target.insertAdjacentElement("beforebegin", item);
+    } else if (positionComparison & Node.DOCUMENT_POSITION_PRECEDING) {
+      target.insertAdjacentElement("afterend", item);
+    }
+  }
+
+  if (target.nodeName === "OL") {
+    target.appendChild(item);
+  }
+}
+
+class NewItemController extends Controller {
+  static targets = ["template"];
+
+  dragstart(event) {
+    if (this.element !== event.target) return;
+
+    event.dataTransfer.setData("text/html", this.templateTarget.innerHTML);
+    event.dataTransfer.effectAllowed = "copy";
+  }
+}
+
+class StatusBarController extends Controller {
+  connect() {
+    // cache the version's state in the controller on connect
+    this.versionState = this.element.dataset.state;
+  }
+
+  change(e) {
+    if (e.detail && e.detail.hasOwnProperty("dirty")) {
+      this.update(e.detail);
+    }
+  }
+
+  update({ dirty }) {
+    if (dirty) {
+      this.element.dataset.state = "dirty";
+    } else {
+      this.element.dataset.state = this.versionState;
+    }
+  }
+}
+
+const Definitions = [
+  {
+    identifier: "navigation--editor--menu",
+    controllerConstructor: MenuController,
+  },
+  {
+    identifier: "navigation--editor--item",
+    controllerConstructor: ItemController,
+  },
+  {
+    identifier: "navigation--editor--list",
+    controllerConstructor: ListController,
+  },
+  {
+    identifier: "navigation--editor--new-item",
+    controllerConstructor: NewItemController,
+  },
+  {
+    identifier: "navigation--editor--status-bar",
+    controllerConstructor: StatusBarController,
+  },
+];
+
+export { Definitions as default };