katalyst-content 2.7.1 → 2.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dd304c013caafd629c2337b31fb5f0d312a0788a849d837ce7af782a57a3323f
-  data.tar.gz: fa5ebf0fc07717ad6342133019d98c8ee7c3fb7e1e10dc48da431eb800463ece
+  metadata.gz: 66041eb840d07d79378df3d2e9dd118b78c73b0360341f622cf62b8280c57deb
+  data.tar.gz: 4286fae6950b693ae85395efd7073644694b8e571d82a8f512eafb73698bea17
 SHA512:
-  metadata.gz: a26484269d545c5e9be10a1c7f905ec79398c96d98274f135da46df72de6c76be552ec162aaa3707844b1a1ac6dac43cd7a2592f4f34d8e5d1f1c10310ad9bcf
-  data.tar.gz: 9331d35d82ede880932a60c299cc2c6a525b46c4e972241d12c914507765ea38d2d3b9f686a027401a8e4871c67a9afb6bb471dd5fd2d910524426061fcc4ede
+  metadata.gz: d35c06d115c82bf4c3d31d8633da792dd498d9aa5949aa637df65e388bc2ce1a6c7a3c2e455baa00eb55d7a759d8fed75ac95b754b4297b1f10c2598c65fa719
+  data.tar.gz: 1b9bcea09d7a7b542afd2d645ef5778554795e5845d86cf61bc7c6b681239da7e37b5eeaddf1698d219b43a047809edf68d36d1e0defbc66e7751afa4e90cdd2

data/app/assets/builds/katalyst/content.esm.js

@@ -737,10 +737,6 @@ class ItemController extends Controller {
 }
 
 class ListController extends Controller {
-  connect() {
-    this.enterCount = 0;
-  }
-
   /**
    * 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.
@@ -764,11 +760,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) {
@@ -782,54 +773,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.dragItem.remove();
-      this.reset();
-    }
-  }
-
-  /**
-   * 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}
    */
@@ -842,31 +786,17 @@ 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, prefix: "content" });
   }
 
   /**
-   * 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();
     }
@@ -890,7 +820,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
@@ -899,51 +829,160 @@ 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);
-    }
+  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);
-  }
-}
-
-/**
- * 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='content--editor--list'] > *") ||
-      e.closest("[data-controller='content--editor--list']"))
-  );
+  return e && e.closest("[data-controller='content--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;
+  }
+
+  open(e) {
+    e.preventDefault();
+    this.dialog.showModal();
+  }
+
+  close(e) {
+    e.preventDefault();
+    this.dialog.close();
+  }
+
+  noop(e) {}
+
+  /**
+   * 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.querySelector("template");
+    const item = template.content.querySelector("li").cloneNode(true);
+    const target = this.currentItem;
+
+    if (target) {
+      target.insertAdjacentElement("beforebegin", item);
+    } 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;
+
+    // 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);
+  };
 
-    event.dataTransfer.setData("text/html", this.templateTarget.innerHTML);
-    event.dataTransfer.effectAllowed = "copy";
+  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="content--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")
+    );
   }
 }
 
@@ -1199,8 +1238,8 @@ const Definitions = [
     controllerConstructor: ListController,
   },
   {
-    identifier: "content--editor--new-item",
-    controllerConstructor: NewItemController,
+    identifier: "content--editor--new-items",
+    controllerConstructor: NewItemsController,
   },
   {
     identifier: "content--editor--status-bar",

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

@@ -737,10 +737,6 @@ class ItemController extends Controller {
 }
 
 class ListController extends Controller {
-  connect() {
-    this.enterCount = 0;
-  }
-
   /**
    * 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.
@@ -764,11 +760,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) {
@@ -782,54 +773,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.dragItem.remove();
-      this.reset();
-    }
-  }
-
-  /**
-   * 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}
    */
@@ -842,31 +786,17 @@ 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, prefix: "content" });
   }
 
   /**
-   * 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();
     }
@@ -890,7 +820,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
@@ -899,51 +829,160 @@ 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);
-    }
+  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);
-  }
-}
-
-/**
- * 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='content--editor--list'] > *") ||
-      e.closest("[data-controller='content--editor--list']"))
-  );
+  return e && e.closest("[data-controller='content--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;
+  }
+
+  open(e) {
+    e.preventDefault();
+    this.dialog.showModal();
+  }
+
+  close(e) {
+    e.preventDefault();
+    this.dialog.close();
+  }
+
+  noop(e) {}
+
+  /**
+   * 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.querySelector("template");
+    const item = template.content.querySelector("li").cloneNode(true);
+    const target = this.currentItem;
+
+    if (target) {
+      target.insertAdjacentElement("beforebegin", item);
+    } 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;
+
+    // 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);
+  };
 
-    event.dataTransfer.setData("text/html", this.templateTarget.innerHTML);
-    event.dataTransfer.effectAllowed = "copy";
+  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="content--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")
+    );
   }
 }
 
@@ -1199,8 +1238,8 @@ const Definitions = [
     controllerConstructor: ListController,
   },
   {
-    identifier: "content--editor--new-item",
-    controllerConstructor: NewItemController,
+    identifier: "content--editor--new-items",
+    controllerConstructor: NewItemsController,
   },
   {
     identifier: "content--editor--status-bar",