katalyst-navigation 1.8.4 → 2.0.2

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

@@ -264,7 +264,7 @@ class Item {
  */
 function createChildrenList(node) {
   const childrenList = document.createElement("ol");
-  childrenList.setAttribute("class", "hidden");
+  childrenList.toggleAttribute("hidden", true);
 
   childrenList.dataset[`navigationChildren`] = "";
 
@@ -744,11 +744,64 @@ class ItemController extends Controller {
   }
 }
 
-class ListController extends Controller {
+class ItemEditorController extends Controller {
+  static targets = ["dialog"];
+
   connect() {
-    this.enterCount = 0;
+    this.element.addEventListener("turbo:submit-end", this.onSubmit);
   }
 
+  disconnect() {
+    this.element.removeEventListener("turbo:submit-end", this.onSubmit);
+  }
+
+  click(e) {
+    if (e.target.tagName === "DIALOG") this.dismiss();
+  }
+
+  dismiss() {
+    if (!this.dialogTarget) return;
+    if (!this.dialogTarget.open) this.dialogTarget.close();
+
+    if (!("itemPersisted" in this.dialogTarget.dataset)) {
+      this.#removeTargetItem();
+    }
+
+    this.element.removeAttribute("src");
+    this.dialogTarget.remove();
+  }
+
+  dialogTargetConnected(dialog) {
+    dialog.showModal();
+  }
+
+  onSubmit = (event) => {
+    if (
+      event.detail.success &&
+      "closeDialog" in event.detail.formSubmission?.submitter?.dataset
+    ) {
+      this.dialogTarget.close();
+      this.element.removeAttribute("src");
+      this.dialogTarget.remove();
+    }
+  };
+
+  #removeTargetItem() {
+    const el = document.getElementById(this.dialogTarget.dataset.itemId);
+    const item = new Item(el.closest("[data-navigation-item]"));
+    const list = item.node.parentElement;
+
+    item.node.remove();
+
+    this.dispatch("reindex", {
+      target: list,
+      bubbles: true,
+      prefix: "navigation",
+    });
+  }
+}
+
+class ListController extends Controller {
   /**
    * When the user starts a drag within the list, set the item's dataTransfer
    * properties to indicate that it's being dragged and update its style.
@@ -772,11 +825,6 @@ class ListController extends Controller {
    * When the user drags an item over another item in the last, swap the
    * dragging item with the item under the cursor.
    *
-   * As a special case, if the item is dragged over placeholder space at the end
-   * of the list, move the item to the bottom of the list instead. This allows
-   * users to hit the list element more easily when adding new items to an empty
-   * list.
-   *
    * @param event {DragEvent}
    */
   dragover(event) {
@@ -790,53 +838,7 @@ class ListController extends Controller {
   }
 
   /**
-   * When the user drags an item into the list, create a placeholder item to
-   * represent the new item. Note that we can't access the drag data
-   * until drop, so we assume that this is our template item for now.
-   *
-   * Users can cancel the drag by dragging the item out of the list or by
-   * pressing escape. Both are handled by `cancelDrag`.
-   *
-   * @param event {DragEvent}
-   */
-  dragenter(event) {
-    event.preventDefault();
-
-    // Safari doesn't support relatedTarget, so we count enter/leave pairs
-    this.enterCount++;
-
-    if (copyAllowed(event) && !this.dragItem) {
-      const item = document.createElement("li");
-      item.dataset.dragging = "";
-      item.dataset.newItem = "";
-      this.element.appendChild(item);
-    }
-  }
-
-  /**
-   * When the user drags the item out of the list, remove the placeholder.
-   * This allows users to cancel the drag by dragging the item out of the list.
-   *
-   * @param event {DragEvent}
-   */
-  dragleave(event) {
-    // Safari doesn't support relatedTarget, so we count enter/leave pairs
-    // https://bugs.webkit.org/show_bug.cgi?id=66547
-    this.enterCount--;
-
-    if (
-      this.enterCount <= 0 &&
-      this.dragItem.dataset.hasOwnProperty("newItem")
-    ) {
-      this.cancelDrag(event);
-    }
-  }
-
-  /**
-   * When the user drops an item into the list, end the drag and reindex the list.
-   *
-   * If the item is a new item, we replace the placeholder with the template
-   * item data from the dataTransfer API.
+   * When the user drops an item, end the drag and reindex the list.
    *
    * @param event {DragEvent}
    */
@@ -849,18 +851,6 @@ class ListController extends Controller {
     delete item.dataset.dragging;
     swap(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);
-      requestAnimationFrame(() =>
-        item.querySelector("[role='button'][value='edit']").click(),
-      );
-    }
-
     this.dispatch("drop", {
       target: item,
       bubbles: true,
@@ -869,15 +859,13 @@ class ListController extends Controller {
   }
 
   /**
-   * End an in-progress drag. If the item is a new item, remove it, otherwise
-   * reset the item's style and restore its original position in the list.
+   * End an in-progress drag by resetting the item's style and restoring its
+   * original position in the list.
    */
   dragend() {
     const item = this.dragItem;
 
-    if (!item) ; else if (item.dataset.hasOwnProperty("newItem")) {
-      item.remove();
-    } else {
+    if (item) {
       delete item.dataset.dragging;
       this.reset();
     }
@@ -901,7 +889,7 @@ class ListController extends Controller {
 }
 
 /**
- * Swaps two list items. If target is a list, the item is appended.
+ * Swaps two list items.
  *
  * @param target the target element to swap with
  * @param item the item the user is dragging
@@ -910,51 +898,165 @@ 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);
+  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);
   }
 }
 
-/**
- * Returns true if the event supports copy or copy move.
- *
- * Chrome and Firefox use copy, but Safari only supports copyMove.
- */
-function copyAllowed(event) {
-  return (
-    event.dataTransfer.effectAllowed === "copy" ||
-    event.dataTransfer.effectAllowed === "copyMove"
-  );
-}
-
 /**
  * Given an event target, return the closest drop target, if any.
  */
 function dropTarget(e) {
-  return (
-    e &&
-    (e.closest("[data-controller='navigation--editor--list'] > *") ||
-      e.closest("[data-controller='navigation--editor--list']"))
-  );
+  return e && e.closest("[data-controller='navigation--editor--list'] > *");
 }
 
-class NewItemController extends Controller {
-  static targets = ["template"];
+const EDGE_AREA = 24;
 
-  dragstart(event) {
-    if (this.element !== event.target) return;
+class NewItemsController extends Controller {
+  static targets = ["inline"];
+
+  connect() {
+    this.form.addEventListener("mousemove", this.move);
+  }
+
+  disconnect() {
+    this.form?.removeEventListener("mousemove", this.move);
+    delete this.currentItem;
+  }
+
+  click(e) {
+    if (e.target.tagName === "DIALOG") this.close(e);
+  }
+
+  open(e) {
+    e.preventDefault();
+    this.dialog.showModal();
+  }
+
+  close(e) {
+    e.preventDefault();
+    this.dialog.close();
+  }
+
+  /**
+   * Add the selected item to the DOM at the current position or the end of the list.
+   */
+  add(e) {
+    e.preventDefault();
+
+    const template = e.target.closest("li").querySelector("template");
+    const item = template.content.querySelector("li").cloneNode(true);
+    const target = this.currentItem;
+
+    if (target) {
+      target.insertAdjacentElement("beforebegin", item);
+      new Item(item).depth = new Item(target).depth;
+    } else {
+      this.list.insertAdjacentElement("beforeend", item);
+    }
+
+    this.toggleInline(false);
+    this.dialog.close();
+
+    requestAnimationFrame(() => {
+      item.querySelector(`[value="edit"]`).click();
+    });
+  }
+
+  morph(e) {
+    e.preventDefault();
+    this.dialog.close();
+  }
+
+  move = (e) => {
+    if (this.isOverInlineTarget(e)) return;
+    if (this.dialog.open) return;
+
+    const target = this.getCurrentItem(e);
+
+    // return if we're already showing this item
+    if (this.currentItem === target) return;
+
+    // hide the button if it's already visible
+    if (this.currentItem) this.toggleInline(false);
+
+    this.currentItem = target;
 
-    event.dataTransfer.setData("text/html", this.templateTarget.innerHTML);
-    event.dataTransfer.effectAllowed = "copy";
+    // clear any previously set timer
+    if (this.timer) clearTimeout(this.timer);
+
+    // show the button after a debounce pause
+    this.timer = setTimeout(() => {
+      delete this.timer;
+      this.toggleInline();
+    }, 100);
+  };
+
+  toggleInline(show = !!this.currentItem) {
+    if (show) {
+      this.inlineTarget.style.top = `${this.currentItem.offsetTop}px`;
+      this.inlineTarget.toggleAttribute("hidden", false);
+    } else {
+      this.inlineTarget.toggleAttribute("hidden", true);
+    }
+  }
+
+  get dialog() {
+    return this.element.querySelector("dialog");
+  }
+
+  /**
+   * @returns {HTMLFormElement}
+   */
+  get form() {
+    return this.element.closest("form");
+  }
+
+  /**
+   * @returns {HTMLUListElement,null}
+   */
+  get list() {
+    return this.form.querySelector(
+      `[data-controller="navigation--editor--list"]`,
+    );
+  }
+
+  /**
+   * @param {MouseEvent} e
+   * @returns {HTMLLIElement,null}
+   */
+  getCurrentItem(e) {
+    const item = document.elementFromPoint(e.clientX, e.clientY).closest("li");
+    if (!item) return null;
+
+    const bounds = item.getBoundingClientRect();
+
+    // check X for center(ish) mouse position
+    if (e.clientX < bounds.left + bounds.width / 2 - 2 * EDGE_AREA) return null;
+    if (e.clientX > bounds.left + bounds.width / 2 + 2 * EDGE_AREA) return null;
+
+    // check Y for hits on this item or it's next sibling
+    if (e.clientY - bounds.y <= EDGE_AREA) {
+      return item;
+    } else if (bounds.y + bounds.height - e.clientY <= EDGE_AREA) {
+      return item.nextElementSibling;
+    } else {
+      return null;
+    }
+  }
+
+  /**
+   * @param {MouseEvent} e
+   * @returns {Boolean} true when the target of the event is the floating button
+   */
+  isOverInlineTarget(e) {
+    return (
+      this.inlineTarget ===
+      document.elementFromPoint(e.clientX, e.clientY).closest("div")
+    );
   }
 }
 
@@ -995,13 +1097,17 @@ const Definitions = [
     identifier: "navigation--editor--item",
     controllerConstructor: ItemController,
   },
+  {
+    identifier: "navigation--editor--item-editor",
+    controllerConstructor: ItemEditorController,
+  },
   {
     identifier: "navigation--editor--list",
     controllerConstructor: ListController,
   },
   {
-    identifier: "navigation--editor--new-item",
-    controllerConstructor: NewItemController,
+    identifier: "navigation--editor--new-items",
+    controllerConstructor: NewItemsController,
   },
   {
     identifier: "navigation--editor--status-bar",

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

@@ -1,2 +1,2 @@
-import{Controller as e}from"@hotwired/stimulus";class t{static comparator(e,t){return e.index-t.index}constructor(e){this.node=e}get itemId(){return this.node.dataset.navigationItemId}get#e(){return this.node.querySelector('input[name$="[id]"]')}set itemId(e){this.itemId!==e&&(this.node.dataset.navigationItemId=`${e}`,this.#e.value=`${e}`)}get depth(){return parseInt(this.node.dataset.navigationDepth)||0}get#t(){return this.node.querySelector('input[name$="[depth]"]')}set depth(e){this.depth!==e&&(this.node.dataset.navigationDepth=`${e}`,this.#t.value=`${e}`)}get index(){return parseInt(this.node.dataset.navigationIndex)}get#n(){return this.node.querySelector('input[name$="[index]"]')}set index(e){this.index!==e&&(this.node.dataset.navigationIndex=`${e}`,this.#n.value=`${e}`)}get isLayout(){return this.node.hasAttribute("data-content-layout")}get previousItem(){let e=this.node.previousElementSibling;if(e)return new t(e)}get nextItem(){let e=this.node.nextElementSibling;if(e)return new t(e)}hasCollapsedDescendants(){let e=this.#s;return!!e&&e.children.length>0}hasExpandedDescendants(){let e=this.nextItem;return!!e&&e.depth>this.depth}traverse(e){const t=this.#a;e(this),this.#i(e),t.forEach((t=>t.#i(e)))}#i(e){this.hasCollapsedDescendants()&&this.#d.forEach((t=>{e(t),t.#i(e)}))}collapse(){let e=this.#s;e||(e=function(e){const t=document.createElement("ol");return t.setAttribute("class","hidden"),t.dataset.navigationChildren="",e.appendChild(t),t}(this.node)),this.#a.forEach((t=>e.appendChild(t.node)))}expand(){this.hasCollapsedDescendants()&&Array.from(this.#s.children).reverse().forEach((e=>{this.node.insertAdjacentElement("afterend",e)}))}toggleRule(e,t=!1){this.node.dataset.hasOwnProperty(e)&&!t&&delete this.node.dataset[e],!this.node.dataset.hasOwnProperty(e)&&t&&(this.node.dataset[e]=""),"denyDrag"===e&&(this.node.hasAttribute("draggable")||t||this.node.setAttribute("draggable","true"),this.node.hasAttribute("draggable")&&t&&this.node.removeAttribute("draggable"))}hasItemIdChanged(){return!(this.#e.value===this.itemId)}updateAfterChange(){this.itemId=this.#e.value,this.#n.value=this.index,this.#t.value=this.depth}get#s(){return this.node.querySelector(":scope > [data-navigation-children]")}get#a(){const e=[];let t=this.nextItem;for(;t&&t.depth>this.depth;)e.push(t),t=t.nextItem;return e}get#d(){return this.hasCollapsedDescendants()?Array.from(this.#s.children).map((e=>new t(e))):[]}}class n{constructor(e){this.node=e}get items(){return e=this.node.querySelectorAll("[data-navigation-index]"),Array.from(e).map((e=>new t(e)));var e}get state(){const e=this.node.querySelectorAll("li input[type=hidden]");return Array.from(e).map((e=>e.value)).join("/")}reindex(){this.items.map(((e,t)=>e.index=t))}reset(){this.items.sort(t.comparator).forEach((e=>{this.node.appendChild(e.node)}))}}class s{static rules=["denyDeNest","denyNest","denyCollapse","denyExpand","denyRemove","denyDrag","denyEdit"];constructor(e=null,t=!1){this.maxDepth=e,this.debug=t?(...e)=>console.log(...e):()=>{}}normalize(e){this.firstItemDepthZero(e),this.depthMustBeSet(e),this.itemCannotHaveInvalidDepth(e),this.itemCannotExceedDepthLimit(e),this.parentMustBeLayout(e),this.parentCannotHaveExpandedAndCollapsedChildren(e)}update(e){this.rules={},this.parentsCannotDeNest(e),this.rootsCannotDeNest(e),this.nestingNeedsParent(e),this.nestingCannotExceedMaxDepth(e),this.leavesCannotCollapse(e),this.needHiddenItemsToExpand(e),this.parentsCannotBeDeleted(e),this.parentsCannotBeDragged(e),s.rules.forEach((t=>{e.toggleRule(t,!!this.rules[t])}))}firstItemDepthZero(e){0===e.index&&0!==e.depth&&(this.debug(`enforce depth on item ${e.index}: ${e.depth} => 0`),e.depth=0)}depthMustBeSet(e){(isNaN(e.depth)||e.depth<0)&&(this.debug(`unset depth on item ${e.index}: => 0`),e.depth=0)}itemCannotHaveInvalidDepth(e){const t=e.previousItem;t&&t.depth<e.depth-1&&(this.debug(`invalid depth on item ${e.index}: ${e.depth} => ${t.depth+1}`),e.depth=t.depth+1)}itemCannotExceedDepthLimit(e){this.maxDepth>0&&this.maxDepth<=e.depth&&(e.depth=this.maxDepth-1)}parentMustBeLayout(e){const t=e.previousItem;t&&t.depth<e.depth&&!t.isLayout&&(this.debug(`invalid parent for item ${e.index}: ${e.depth} => ${t.depth}`),e.depth=t.depth)}parentCannotHaveExpandedAndCollapsedChildren(e){e.hasCollapsedDescendants()&&e.hasExpandedDescendants()&&(this.debug(`expanding collapsed children of item ${e.index}`),e.expand())}parentsCannotDeNest(e){e.hasExpandedDescendants()&&this.#r("denyDeNest")}rootsCannotDeNest(e){0===e.depth&&this.#r("denyDeNest")}leavesCannotCollapse(e){e.hasExpandedDescendants()||this.#r("denyCollapse")}needHiddenItemsToExpand(e){e.hasCollapsedDescendants()||this.#r("denyExpand")}nestingNeedsParent(e){const t=e.previousItem;t?t.depth<e.depth?this.#r("denyNest"):t.depth!==e.depth||t.isLayout||this.#r("denyNest"):this.#r("denyNest")}nestingCannotExceedMaxDepth(e){this.maxDepth>0&&this.maxDepth<=e.depth+1&&this.#r("denyNest")}parentsCannotBeDeleted(e){e.itemId&&!e.hasExpandedDescendants()||this.#r("denyRemove")}parentsCannotBeDragged(e){e.hasExpandedDescendants()&&this.#r("denyDrag")}#r(e){this.rules[e]=!0}}function a(e){return new t(e.target.closest("[data-navigation-item]"))}function i(e,t){if(e&&e!==t){if("LI"===e.nodeName){const n=e.compareDocumentPosition(t);n&Node.DOCUMENT_POSITION_FOLLOWING?e.insertAdjacentElement("beforebegin",t):n&Node.DOCUMENT_POSITION_PRECEDING&&e.insertAdjacentElement("afterend",t)}"OL"===e.nodeName&&e.appendChild(t)}}function d(e){return e&&(e.closest("[data-controller='navigation--editor--list'] > *")||e.closest("[data-controller='navigation--editor--list']"))}const r=[{identifier:"navigation--editor--menu",controllerConstructor:class extends e{static targets=["menu"];static values={maxDepth:Number};connect(){this.state=this.menu.state,this.reindex()}get menu(){return new n(this.menuTarget)}reindex(){this.menu.reindex(),this.#h()}reset(){this.menu.reset()}drop(e){this.menu.reindex();const t=a(e),n=t.previousItem;let s=0;s=void 0===n?-t.depth:t.nextItem&&t.nextItem.depth>n.depth?n.depth-t.depth+1:n.depth-t.depth,t.traverse((e=>{e.depth+=s})),this.#h(),e.preventDefault()}remove(e){a(e).node.remove(),this.#h(),e.preventDefault()}nest(e){a(e).traverse((e=>{e.depth+=1})),this.#h(),e.preventDefault()}deNest(e){a(e).traverse((e=>{e.depth-=1})),this.#h(),e.preventDefault()}collapse(e){a(e).collapse(),this.#h(),e.preventDefault()}expand(e){a(e).expand(),this.#h(),e.preventDefault()}#h(){this.updateRequested=!0,setTimeout((()=>{if(!this.updateRequested)return;this.updateRequested=!1;const e=new s(this.maxDepthValue);this.menu.items.forEach((t=>e.normalize(t))),this.menu.items.forEach((t=>e.update(t))),this.#o()}),0)}#o(){this.dispatch("change",{bubbles:!0,prefix:"navigation",detail:{dirty:this.#l()}})}#l(){return this.menu.state!==this.state}}},{identifier:"navigation--editor--item",controllerConstructor:class extends e{get item(){return new t(this.li)}get ol(){return this.element.closest("ol")}get li(){return this.element.closest("li")}connect(){this.element.dataset.hasOwnProperty("delete")?this.remove():this.item.index>=0?this.item.hasItemIdChanged()&&(this.item.updateAfterChange(),this.reindex()):this.reindex()}remove(){this.ol,this.li.remove(),this.reindex()}reindex(){this.dispatch("reindex",{bubbles:!0,prefix:"navigation"})}}},{identifier:"navigation--editor--list",controllerConstructor:class extends e{connect(){this.enterCount=0}dragstart(e){if(this.element!==e.target.parentElement)return;const t=e.target;e.dataTransfer.effectAllowed="move",requestAnimationFrame((()=>t.dataset.dragging=""))}dragover(e){const t=this.dragItem;if(t)return i(d(e.target),t),e.preventDefault(),!0}dragenter(e){if(e.preventDefault(),this.enterCount++,function(e){return"copy"===e.dataTransfer.effectAllowed||"copyMove"===e.dataTransfer.effectAllowed}(e)&&!this.dragItem){const e=document.createElement("li");e.dataset.dragging="",e.dataset.newItem="",this.element.appendChild(e)}}dragleave(e){this.enterCount--,this.enterCount<=0&&this.dragItem.dataset.hasOwnProperty("newItem")&&this.cancelDrag(e)}drop(e){let t=this.dragItem;if(t){if(e.preventDefault(),delete t.dataset.dragging,i(d(e.target),t),t.dataset.hasOwnProperty("newItem")){const n=t,s=document.createElement("template");s.innerHTML=e.dataTransfer.getData("text/html"),t=s.content.querySelector("li"),this.element.replaceChild(t,n),requestAnimationFrame((()=>t.querySelector("[role='button'][value='edit']").click()))}this.dispatch("drop",{target:t,bubbles:!0,prefix:"navigation"})}}dragend(){const e=this.dragItem;e&&(e.dataset.hasOwnProperty("newItem")?e.remove():(delete e.dataset.dragging,this.reset()))}get isDragging(){return!!this.dragItem}get dragItem(){return this.element.querySelector("[data-dragging]")}reindex(){this.dispatch("reindex",{bubbles:!0,prefix:"navigation"})}reset(){this.dispatch("reset",{bubbles:!0,prefix:"navigation"})}}},{identifier:"navigation--editor--new-item",controllerConstructor:class extends e{static targets=["template"];dragstart(e){this.element===e.target&&(e.dataTransfer.setData("text/html",this.templateTarget.innerHTML),e.dataTransfer.effectAllowed="copy")}}},{identifier:"navigation--editor--status-bar",controllerConstructor:class extends e{connect(){this.versionState=this.element.dataset.state}morph(e){e.target===this.element&&(this.versionState=this.element.dataset.state,this.update({dirty:!1}))}change(e){e.detail&&e.detail.hasOwnProperty("dirty")&&this.update(e.detail)}update({dirty:e}){this.element.dataset.state=e?"dirty":this.versionState}}}];export{r as default};
+import{Controller as e}from"@hotwired/stimulus";class t{static comparator(e,t){return e.index-t.index}constructor(e){this.node=e}get itemId(){return this.node.dataset.navigationItemId}get#e(){return this.node.querySelector('input[name$="[id]"]')}set itemId(e){this.itemId!==e&&(this.node.dataset.navigationItemId=`${e}`,this.#e.value=`${e}`)}get depth(){return parseInt(this.node.dataset.navigationDepth)||0}get#t(){return this.node.querySelector('input[name$="[depth]"]')}set depth(e){this.depth!==e&&(this.node.dataset.navigationDepth=`${e}`,this.#t.value=`${e}`)}get index(){return parseInt(this.node.dataset.navigationIndex)}get#n(){return this.node.querySelector('input[name$="[index]"]')}set index(e){this.index!==e&&(this.node.dataset.navigationIndex=`${e}`,this.#n.value=`${e}`)}get isLayout(){return this.node.hasAttribute("data-content-layout")}get previousItem(){let e=this.node.previousElementSibling;if(e)return new t(e)}get nextItem(){let e=this.node.nextElementSibling;if(e)return new t(e)}hasCollapsedDescendants(){let e=this.#i;return!!e&&e.children.length>0}hasExpandedDescendants(){let e=this.nextItem;return!!e&&e.depth>this.depth}traverse(e){const t=this.#s;e(this),this.#a(e),t.forEach((t=>t.#a(e)))}#a(e){this.hasCollapsedDescendants()&&this.#d.forEach((t=>{e(t),t.#a(e)}))}collapse(){let e=this.#i;e||(e=function(e){const t=document.createElement("ol");return t.toggleAttribute("hidden",!0),t.dataset.navigationChildren="",e.appendChild(t),t}(this.node)),this.#s.forEach((t=>e.appendChild(t.node)))}expand(){this.hasCollapsedDescendants()&&Array.from(this.#i.children).reverse().forEach((e=>{this.node.insertAdjacentElement("afterend",e)}))}toggleRule(e,t=!1){this.node.dataset.hasOwnProperty(e)&&!t&&delete this.node.dataset[e],!this.node.dataset.hasOwnProperty(e)&&t&&(this.node.dataset[e]=""),"denyDrag"===e&&(this.node.hasAttribute("draggable")||t||this.node.setAttribute("draggable","true"),this.node.hasAttribute("draggable")&&t&&this.node.removeAttribute("draggable"))}hasItemIdChanged(){return!(this.#e.value===this.itemId)}updateAfterChange(){this.itemId=this.#e.value,this.#n.value=this.index,this.#t.value=this.depth}get#i(){return this.node.querySelector(":scope > [data-navigation-children]")}get#s(){const e=[];let t=this.nextItem;for(;t&&t.depth>this.depth;)e.push(t),t=t.nextItem;return e}get#d(){return this.hasCollapsedDescendants()?Array.from(this.#i.children).map((e=>new t(e))):[]}}class n{constructor(e){this.node=e}get items(){return e=this.node.querySelectorAll("[data-navigation-index]"),Array.from(e).map((e=>new t(e)));var e}get state(){const e=this.node.querySelectorAll("li input[type=hidden]");return Array.from(e).map((e=>e.value)).join("/")}reindex(){this.items.map(((e,t)=>e.index=t))}reset(){this.items.sort(t.comparator).forEach((e=>{this.node.appendChild(e.node)}))}}class i{static rules=["denyDeNest","denyNest","denyCollapse","denyExpand","denyRemove","denyDrag","denyEdit"];constructor(e=null,t=!1){this.maxDepth=e,this.debug=t?(...e)=>console.log(...e):()=>{}}normalize(e){this.firstItemDepthZero(e),this.depthMustBeSet(e),this.itemCannotHaveInvalidDepth(e),this.itemCannotExceedDepthLimit(e),this.parentMustBeLayout(e),this.parentCannotHaveExpandedAndCollapsedChildren(e)}update(e){this.rules={},this.parentsCannotDeNest(e),this.rootsCannotDeNest(e),this.nestingNeedsParent(e),this.nestingCannotExceedMaxDepth(e),this.leavesCannotCollapse(e),this.needHiddenItemsToExpand(e),this.parentsCannotBeDeleted(e),this.parentsCannotBeDragged(e),i.rules.forEach((t=>{e.toggleRule(t,!!this.rules[t])}))}firstItemDepthZero(e){0===e.index&&0!==e.depth&&(this.debug(`enforce depth on item ${e.index}: ${e.depth} => 0`),e.depth=0)}depthMustBeSet(e){(isNaN(e.depth)||e.depth<0)&&(this.debug(`unset depth on item ${e.index}: => 0`),e.depth=0)}itemCannotHaveInvalidDepth(e){const t=e.previousItem;t&&t.depth<e.depth-1&&(this.debug(`invalid depth on item ${e.index}: ${e.depth} => ${t.depth+1}`),e.depth=t.depth+1)}itemCannotExceedDepthLimit(e){this.maxDepth>0&&this.maxDepth<=e.depth&&(e.depth=this.maxDepth-1)}parentMustBeLayout(e){const t=e.previousItem;t&&t.depth<e.depth&&!t.isLayout&&(this.debug(`invalid parent for item ${e.index}: ${e.depth} => ${t.depth}`),e.depth=t.depth)}parentCannotHaveExpandedAndCollapsedChildren(e){e.hasCollapsedDescendants()&&e.hasExpandedDescendants()&&(this.debug(`expanding collapsed children of item ${e.index}`),e.expand())}parentsCannotDeNest(e){e.hasExpandedDescendants()&&this.#r("denyDeNest")}rootsCannotDeNest(e){0===e.depth&&this.#r("denyDeNest")}leavesCannotCollapse(e){e.hasExpandedDescendants()||this.#r("denyCollapse")}needHiddenItemsToExpand(e){e.hasCollapsedDescendants()||this.#r("denyExpand")}nestingNeedsParent(e){const t=e.previousItem;t?t.depth<e.depth?this.#r("denyNest"):t.depth!==e.depth||t.isLayout||this.#r("denyNest"):this.#r("denyNest")}nestingCannotExceedMaxDepth(e){this.maxDepth>0&&this.maxDepth<=e.depth+1&&this.#r("denyNest")}parentsCannotBeDeleted(e){e.itemId&&!e.hasExpandedDescendants()||this.#r("denyRemove")}parentsCannotBeDragged(e){e.hasExpandedDescendants()&&this.#r("denyDrag")}#r(e){this.rules[e]=!0}}function s(e){return new t(e.target.closest("[data-navigation-item]"))}function a(e,t){if(!e)return;if(e===t)return;const n=e.compareDocumentPosition(t);n&Node.DOCUMENT_POSITION_FOLLOWING?e.insertAdjacentElement("beforebegin",t):n&Node.DOCUMENT_POSITION_PRECEDING&&e.insertAdjacentElement("afterend",t)}function d(e){return e&&e.closest("[data-controller='navigation--editor--list'] > *")}const r=[{identifier:"navigation--editor--menu",controllerConstructor:class extends e{static targets=["menu"];static values={maxDepth:Number};connect(){this.state=this.menu.state,this.reindex()}get menu(){return new n(this.menuTarget)}reindex(){this.menu.reindex(),this.#o()}reset(){this.menu.reset()}drop(e){this.menu.reindex();const t=s(e),n=t.previousItem;let i=0;i=void 0===n?-t.depth:t.nextItem&&t.nextItem.depth>n.depth?n.depth-t.depth+1:n.depth-t.depth,t.traverse((e=>{e.depth+=i})),this.#o(),e.preventDefault()}remove(e){s(e).node.remove(),this.#o(),e.preventDefault()}nest(e){s(e).traverse((e=>{e.depth+=1})),this.#o(),e.preventDefault()}deNest(e){s(e).traverse((e=>{e.depth-=1})),this.#o(),e.preventDefault()}collapse(e){s(e).collapse(),this.#o(),e.preventDefault()}expand(e){s(e).expand(),this.#o(),e.preventDefault()}#o(){this.updateRequested=!0,setTimeout((()=>{if(!this.updateRequested)return;this.updateRequested=!1;const e=new i(this.maxDepthValue);this.menu.items.forEach((t=>e.normalize(t))),this.menu.items.forEach((t=>e.update(t))),this.#h()}),0)}#h(){this.dispatch("change",{bubbles:!0,prefix:"navigation",detail:{dirty:this.#l()}})}#l(){return this.menu.state!==this.state}}},{identifier:"navigation--editor--item",controllerConstructor:class extends e{get item(){return new t(this.li)}get ol(){return this.element.closest("ol")}get li(){return this.element.closest("li")}connect(){this.element.dataset.hasOwnProperty("delete")?this.remove():this.item.index>=0?this.item.hasItemIdChanged()&&(this.item.updateAfterChange(),this.reindex()):this.reindex()}remove(){this.ol,this.li.remove(),this.reindex()}reindex(){this.dispatch("reindex",{bubbles:!0,prefix:"navigation"})}}},{identifier:"navigation--editor--item-editor",controllerConstructor:class extends e{static targets=["dialog"];connect(){this.element.addEventListener("turbo:submit-end",this.onSubmit)}disconnect(){this.element.removeEventListener("turbo:submit-end",this.onSubmit)}click(e){"DIALOG"===e.target.tagName&&this.dismiss()}dismiss(){this.dialogTarget&&(this.dialogTarget.open||this.dialogTarget.close(),"itemPersisted"in this.dialogTarget.dataset||this.#p(),this.element.removeAttribute("src"),this.dialogTarget.remove())}dialogTargetConnected(e){e.showModal()}onSubmit=e=>{e.detail.success&&"closeDialog"in e.detail.formSubmission?.submitter?.dataset&&(this.dialogTarget.close(),this.element.removeAttribute("src"),this.dialogTarget.remove())};#p(){const e=document.getElementById(this.dialogTarget.dataset.itemId),n=new t(e.closest("[data-navigation-item]")),i=n.node.parentElement;n.node.remove(),this.dispatch("reindex",{target:i,bubbles:!0,prefix:"navigation"})}}},{identifier:"navigation--editor--list",controllerConstructor:class extends e{dragstart(e){if(this.element!==e.target.parentElement)return;const t=e.target;e.dataTransfer.effectAllowed="move",requestAnimationFrame((()=>t.dataset.dragging=""))}dragover(e){const t=this.dragItem;if(t)return a(d(e.target),t),e.preventDefault(),!0}drop(e){let t=this.dragItem;t&&(e.preventDefault(),delete t.dataset.dragging,a(d(e.target),t),this.dispatch("drop",{target:t,bubbles:!0,prefix:"navigation"}))}dragend(){const e=this.dragItem;e&&(delete e.dataset.dragging,this.reset())}get isDragging(){return!!this.dragItem}get dragItem(){return this.element.querySelector("[data-dragging]")}reindex(){this.dispatch("reindex",{bubbles:!0,prefix:"navigation"})}reset(){this.dispatch("reset",{bubbles:!0,prefix:"navigation"})}}},{identifier:"navigation--editor--new-items",controllerConstructor:class extends e{static targets=["inline"];connect(){this.form.addEventListener("mousemove",this.move)}disconnect(){this.form?.removeEventListener("mousemove",this.move),delete this.currentItem}click(e){"DIALOG"===e.target.tagName&&this.close(e)}open(e){e.preventDefault(),this.dialog.showModal()}close(e){e.preventDefault(),this.dialog.close()}add(e){e.preventDefault();const n=e.target.closest("li").querySelector("template").content.querySelector("li").cloneNode(!0),i=this.currentItem;i?(i.insertAdjacentElement("beforebegin",n),new t(n).depth=new t(i).depth):this.list.insertAdjacentElement("beforeend",n),this.toggleInline(!1),this.dialog.close(),requestAnimationFrame((()=>{n.querySelector('[value="edit"]').click()}))}morph(e){e.preventDefault(),this.dialog.close()}move=e=>{if(this.isOverInlineTarget(e))return;if(this.dialog.open)return;const t=this.getCurrentItem(e);this.currentItem!==t&&(this.currentItem&&this.toggleInline(!1),this.currentItem=t,this.timer&&clearTimeout(this.timer),this.timer=setTimeout((()=>{delete this.timer,this.toggleInline()}),100))};toggleInline(e=!!this.currentItem){e?(this.inlineTarget.style.top=`${this.currentItem.offsetTop}px`,this.inlineTarget.toggleAttribute("hidden",!1)):this.inlineTarget.toggleAttribute("hidden",!0)}get dialog(){return this.element.querySelector("dialog")}get form(){return this.element.closest("form")}get list(){return this.form.querySelector('[data-controller="navigation--editor--list"]')}getCurrentItem(e){const t=document.elementFromPoint(e.clientX,e.clientY).closest("li");if(!t)return null;const n=t.getBoundingClientRect();return e.clientX<n.left+n.width/2-48||e.clientX>n.left+n.width/2+48?null:e.clientY-n.y<=24?t:n.y+n.height-e.clientY<=24?t.nextElementSibling:null}isOverInlineTarget(e){return this.inlineTarget===document.elementFromPoint(e.clientX,e.clientY).closest("div")}}},{identifier:"navigation--editor--status-bar",controllerConstructor:class extends e{connect(){this.versionState=this.element.dataset.state}morph(e){e.target===this.element&&(this.versionState=this.element.dataset.state,this.update({dirty:!1}))}change(e){e.detail&&e.detail.hasOwnProperty("dirty")&&this.update(e.detail)}update({dirty:e}){this.element.dataset.state=e?"dirty":this.versionState}}}];export{r as default};
 //# sourceMappingURL=navigation.min.js.map