katalyst-navigation 1.8.4 → 2.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba532b593b5abf0a722dccafede0ffb1c321080b82b9d1f0bd6294b4b2061bb1
-  data.tar.gz: c21364fa3de9868564964cf23b90493e0250ef59e43c9469d2ed87095171d0df
+  metadata.gz: 7673f31e3890ef3021ee1e1b5c1ba29f84708a6bcf84f316b9598c5f87fdc675
+  data.tar.gz: 18a0af06707489433eb2313c9dc5d2e568827746a007be03444598f65d65e5ef
 SHA512:
-  metadata.gz: 9b2a8856c3283b2a1b2141eedfa29462b95efe8e1918a24c346a0278b4b6c4cdf423616d8c9a9156938d4344849b3fa251f921680cffffd0d8580018040698e2
-  data.tar.gz: 51d6e8fb93d4550c3b29af9645d684ea376eae1d3fb283d32205845a453b77cd340101e7183f1c566db15b51d3a3e07d642cf26baeca4bd27c0745df2a1afaf9
+  metadata.gz: 9b6c0279c73bae208e257ae7b35f961a36f975a04b2994805a5286ce3ff92187caaf3174d0f36045947b2adc37a5e2bde3c0af5f6bcb20e91340f6f2e0b71de2
+  data.tar.gz: 491585bcfc806c6d52e76a4f959a82304af56bbf1111d022b3a822fb55d8f504bef6fb204d9429cfbb14597cbe975496a0588893e09719ac6e0a9ccbc72b86b8

data/README.md

@@ -23,7 +23,7 @@ rake katalyst_navigation:install:migrations
 ```
 
 Add the Gem's javascript and CSS to your build pipeline. This assumes that
-you're using `rails-dartsass` and `importmaps` to manage your assets.
+you're using `propshaft` and `importmaps` to manage your assets.
 
 ```javascript
 // app/javascript/controllers/application.js
@@ -32,7 +32,16 @@ import navigation from "@katalyst/navigation";
 application.load(navigation);
 ```
 
-```sass
+Import the styles as css:
+
+```css
+@import "/katalyst/navigation.css";
+```
+
+Or, if you're using `dartsass-rails`:
+
+```scss
+// app/assets/stylesheets/application.scss
 @use "katalyst/navigation";
 ```
 

data/app/assets/builds/katalyst/navigation.esm.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",