katalyst-tables 3.11.3 → 3.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f1a656d6c4afdbaaa9775b017ece93c5a1ed47f1fa23b6a629ee902ea6862de8
-  data.tar.gz: 6ae825a285b001c1a9fdb88f4b5611a1cc7a87273d13819bcf863f3c9c3a4ed6
+  metadata.gz: 2c67bc4631e5e9cb0b84c73e61572dd2f7c2d049700a10172d56124a2e59a997
+  data.tar.gz: 897729b9bed4774e874fa09df37d6e3c6a1c651c465431d182f047843df7a2df
 SHA512:
-  metadata.gz: 24ff7144511a36aac499f10f035eea0fd5c734c0f98e21caf7094e48902796d24ad5f8e30cc14f0f0c8e3c3a68ae7336f732fb974a038b541872a9b4faa8e8cc
-  data.tar.gz: c8e1be4b57246e7bf3cdd988aeb812b34e95c518c8176f4931040cf53ceb1351f23f8bdfd7b89239bc5a2b139447336e22fa9d7d88055a206ff92f15177160ce
+  metadata.gz: f02e1176c948660ecae3fde031492bdcbf1b7ffde9e20ca9018277da2cc80f5c353a7eabd97d070a2c5a4fb27923e52668edea461cd3008bd71d06407675e2e0
+  data.tar.gz: f519c5b3518213bebe01a994d0cf3573d11974d16949573fb5ab0f884887f407ed0fed655f2bd14c7d83884cf149b53983fb363bfe186181821d2d67371a63e7

data/CHANGELOG.md

@@ -1,3 +1,7 @@
+## [3.12.0]
+
+* Support for ordering variable height rows
+
 ## [3.11.0]
 
 * Support for Pagy 43

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

@@ -19,7 +19,7 @@ class OrderableRowController extends Controller {
   dragUpdate(offset) {
     this.dragOffset = offset;
     this.row.style.position = "relative";
-    this.row.style.top = offset + "px";
+    this.row.style.transform = `scale(1.01) translateY(${offset}px)`;
     this.row.style.zIndex = "1";
     this.row.toggleAttribute("dragging", true);
   }
@@ -28,13 +28,27 @@ class OrderableRowController extends Controller {
    * Called on items that are not the dragged item during drag. Updates the
    * visual position of the item relative to the dragged item.
    *
-   * @param index {number} intended index of the item during drag
+   * @param offset {number} intended offset of the item during drag
    */
-  updateVisually(index) {
-    this.row.style.position = "relative";
-    this.row.style.top = `${
-      this.row.offsetHeight * (index - this.dragIndex)
-    }px`;
+  updateVisually(offset) {
+    this.row.style.transform = `translateY(${offset - this.#offsetTop}px)`;
+  }
+
+  captureDropPosition() {
+    this.dropTop = this.#viewportTop;
+  }
+
+  invertDropPosition() {
+    delete this.dragOffset;
+    this.row.removeAttribute("dragging");
+    this.row.style.transition = "transform 0s";
+    this.row.style.transform = "";
+    this.row.style.transform = `translateY(${this.dropTop - this.#viewportTop}px)`;
+  }
+
+  playDrop() {
+    this.row.style.transition = "";
+    this.row.style.transform = "";
   }
 
   /**
@@ -62,6 +76,7 @@ class OrderableRowController extends Controller {
    */
   reset() {
     delete this.dragOffset;
+    delete this.dropTop;
     this.row.removeAttribute("style");
     this.row.removeAttribute("dragging");
   }
@@ -74,34 +89,15 @@ class OrderableRowController extends Controller {
   }
 
   /**
-   * Calculate the relative index of the item during drag. This is used to
-   * sort items during drag as it takes into account any uncommitted changes
-   * to index caused by the drag offset.
-   *
-   * @returns {number} index for the purposes of drag and drop ordering
-   */
-  get dragIndex() {
-    if (this.dragOffset && this.dragOffset !== 0) {
-      return this.index + Math.round(this.dragOffset / this.row.offsetHeight);
-    } else {
-      return this.index;
-    }
-  }
-
-  /**
-   * Index value for use in comparisons during drag. This is used to determine
-   * whether the dragged item is above or below another item. If this item is
-   * being dragged then we offset the index by 0.5 to ensure that it jumps up
-   * or down when it reaches the midpoint of the item above or below it.
+   * Value for use in comparisons during drag. Used by ListController to
+   * determine whether the dragged item is above or below another item.
    *
    * @returns {number}
    */
-  get comparisonIndex() {
-    if (this.dragOffset) {
-      return this.dragIndex + (this.dragOffset > 0 ? 0.5 : -0.5);
-    } else {
-      return this.index;
-    }
+  get dragPosition() {
+    return this.dragOffset && this.dragOffset !== 0
+      ? this.#leadingEdge
+      : this.#midpoint;
   }
 
   /**
@@ -112,6 +108,28 @@ class OrderableRowController extends Controller {
   get row() {
     return this.element.parentElement;
   }
+
+  get height() {
+    return this.row.offsetHeight;
+  }
+
+  get #midpoint() {
+    return this.#offsetTop + this.height / 2;
+  }
+
+  get #leadingEdge() {
+    const top = this.#offsetTop + this.dragOffset;
+
+    return this.dragOffset < 0 ? top : top + this.height;
+  }
+
+  get #offsetTop() {
+    return this.row.offsetTop;
+  }
+
+  get #viewportTop() {
+    return this.row.getBoundingClientRect().top;
+  }
 }
 
 function domIndex(element) {
@@ -133,7 +151,7 @@ class OrderableListController extends Controller {
     this.element.style.position = "relative";
   }
 
-  stopDragging() {
+  stopDragging({ reset = true } = {}) {
     const dragState = this.dragState;
     delete this.dragState;
 
@@ -142,7 +160,7 @@ class OrderableListController extends Controller {
     window.removeEventListener("scroll", this.scroll, true);
 
     this.element.removeAttribute("style");
-    this.tablesOrderableItemOutlets.forEach((item) => item.reset());
+    if (reset) this.items.forEach((item) => item.reset());
 
     return dragState;
   }
@@ -156,25 +174,30 @@ class OrderableListController extends Controller {
 
     if (!dragItem) return;
 
-    const newIndex = dragItem.dragIndex;
-    const targetItem = this.tablesOrderableItemOutlets[newIndex];
+    const items = this.items;
+    items.forEach((item) => item.captureDropPosition());
 
-    if (!targetItem) return;
+    this.#insertDragItem(this.orderedItems, dragItem);
 
-    // swap the dragged item into the correct position for its current offset
-    if (newIndex < dragItem.index) {
-      targetItem.row.insertAdjacentElement("beforebegin", dragItem.row);
-    } else if (newIndex > dragItem.index) {
-      targetItem.row.insertAdjacentElement("afterend", dragItem.row);
-    }
+    items.forEach((item) => item.invertDropPosition());
+
+    // Commit the inverted transforms before enabling transitions to play out.
+    this.element.offsetHeight;
 
     // reindex all items based on their new positions
-    this.tablesOrderableItemOutlets.forEach((item, index) =>
-      item.updateIndex(index),
-    );
+    this.items.forEach((item, index) => item.updateIndex(index));
 
     // save the changes
     this.commitChanges();
+
+    window.requestAnimationFrame(() => {
+      items.forEach((item) => item.playDrop());
+      window.setTimeout(() => {
+        items.forEach((item) => item.reset());
+      }, this.#animationDuration);
+    });
+
+    return true;
   }
 
   commitChanges() {
@@ -182,7 +205,7 @@ class OrderableListController extends Controller {
     this.tablesOrderableFormOutlet.clear();
 
     // insert any items that have changed position
-    this.tablesOrderableItemOutlets.forEach((item) => {
+    this.items.forEach((item) => {
       if (item.hasChanges) this.tablesOrderableFormOutlet.add(item);
     });
 
@@ -245,9 +268,9 @@ class OrderableListController extends Controller {
   mouseup = (event) => {
     if (!this.isDragging) return;
 
-    this.drop();
-    this.stopDragging();
-    this.tablesOrderableFormOutlets.forEach((form) => delete form.dragState);
+    const dropped = this.drop();
+    this.stopDragging({ reset: !dropped });
+    this.items.forEach((form) => delete form.dragState);
   };
 
   tablesOrderableFormOutletConnected(form, element) {
@@ -290,9 +313,11 @@ class OrderableListController extends Controller {
 
     // Visually updates the position of all items in the list relative to the
     // dragged item. No actual changes to orderings at this stage.
-    this.#currentItems.forEach((item, index) => {
-      if (item === dragItem) return;
-      item.updateVisually(index);
+    let nextOffset = 0;
+
+    this.orderedItems.forEach((item) => {
+      if (item !== dragItem) item.updateVisually(nextOffset);
+      nextOffset += item.height;
     });
   };
 
@@ -303,23 +328,30 @@ class OrderableListController extends Controller {
   get dragItem() {
     if (!this.isDragging) return null;
 
-    return this.tablesOrderableItemOutlets.find(
-      (item) => item.id === this.dragState.targetId,
-    );
+    return this.items.find((item) => item.id === this.dragState.targetId);
   }
 
   /**
-   * Returns the current items in the list, sorted by their current index.
-   * Current uses the drag index if the item is being dragged, if set.
+   * Returns the current items in the list in DOM order.
    *
    * @returns {Array[OrderableRowController]}
    */
-  get #currentItems() {
-    return this.tablesOrderableItemOutlets.toSorted(
-      (a, b) => a.comparisonIndex - b.comparisonIndex,
+  get items() {
+    // Note, item outlets may include other items as the outlets do not have a
+    // mechanism to specify an element scope.
+    return this.tablesOrderableItemOutlets.filter((item) =>
+      this.element.contains(item.element),
     );
   }
 
+  get orderedItems() {
+    const dragItem = this.dragItem;
+
+    if (!dragItem) return this.items;
+
+    return this.items.toSorted((a, b) => a.dragPosition - b.dragPosition);
+  }
+
   /**
    * Returns the item outlet that was clicked on, if any.
    *
@@ -327,14 +359,42 @@ class OrderableListController extends Controller {
    * @returns {OrderableRowController}
    */
   #targetItem(element) {
-    return this.tablesOrderableItemOutlets.find(
-      (item) => item.element === element,
-    );
+    return this.items.find((item) => item.element === element);
+  }
+
+  #insertDragItem(orderedItems, dragItem) {
+    const index = orderedItems.indexOf(dragItem);
+    const previousItem = orderedItems[index - 1];
+    const nextItem = orderedItems[index + 1];
+
+    if (previousItem) {
+      previousItem.row.insertAdjacentElement("afterend", dragItem.row);
+    } else if (nextItem) {
+      nextItem.row.insertAdjacentElement("beforebegin", dragItem.row);
+    }
+  }
+
+  get #animationDuration() {
+    const duration =
+      window
+        .getComputedStyle(this.element)
+        .getPropertyValue("--animation-duration") || "150ms";
+
+    return parseTime(duration);
   }
 
   //endregion
 }
 
+function parseTime(value) {
+  value = value.trim();
+
+  if (value.endsWith("ms")) return parseFloat(value);
+  if (value.endsWith("s")) return parseFloat(value) * 1000;
+
+  return parseFloat(value) || 0;
+}
+
 /**
  * During drag we want to be able to translate a document-relative coordinate
  * into a coordinate relative to the list element. This state object calculates

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

@@ -19,7 +19,7 @@ class OrderableRowController extends Controller {
   dragUpdate(offset) {
     this.dragOffset = offset;
     this.row.style.position = "relative";
-    this.row.style.top = offset + "px";
+    this.row.style.transform = `scale(1.01) translateY(${offset}px)`;
     this.row.style.zIndex = "1";
     this.row.toggleAttribute("dragging", true);
   }
@@ -28,13 +28,27 @@ class OrderableRowController extends Controller {
    * Called on items that are not the dragged item during drag. Updates the
    * visual position of the item relative to the dragged item.
    *
-   * @param index {number} intended index of the item during drag
+   * @param offset {number} intended offset of the item during drag
    */
-  updateVisually(index) {
-    this.row.style.position = "relative";
-    this.row.style.top = `${
-      this.row.offsetHeight * (index - this.dragIndex)
-    }px`;
+  updateVisually(offset) {
+    this.row.style.transform = `translateY(${offset - this.#offsetTop}px)`;
+  }
+
+  captureDropPosition() {
+    this.dropTop = this.#viewportTop;
+  }
+
+  invertDropPosition() {
+    delete this.dragOffset;
+    this.row.removeAttribute("dragging");
+    this.row.style.transition = "transform 0s";
+    this.row.style.transform = "";
+    this.row.style.transform = `translateY(${this.dropTop - this.#viewportTop}px)`;
+  }
+
+  playDrop() {
+    this.row.style.transition = "";
+    this.row.style.transform = "";
   }
 
   /**
@@ -62,6 +76,7 @@ class OrderableRowController extends Controller {
    */
   reset() {
     delete this.dragOffset;
+    delete this.dropTop;
     this.row.removeAttribute("style");
     this.row.removeAttribute("dragging");
   }
@@ -74,34 +89,15 @@ class OrderableRowController extends Controller {
   }
 
   /**
-   * Calculate the relative index of the item during drag. This is used to
-   * sort items during drag as it takes into account any uncommitted changes
-   * to index caused by the drag offset.
-   *
-   * @returns {number} index for the purposes of drag and drop ordering
-   */
-  get dragIndex() {
-    if (this.dragOffset && this.dragOffset !== 0) {
-      return this.index + Math.round(this.dragOffset / this.row.offsetHeight);
-    } else {
-      return this.index;
-    }
-  }
-
-  /**
-   * Index value for use in comparisons during drag. This is used to determine
-   * whether the dragged item is above or below another item. If this item is
-   * being dragged then we offset the index by 0.5 to ensure that it jumps up
-   * or down when it reaches the midpoint of the item above or below it.
+   * Value for use in comparisons during drag. Used by ListController to
+   * determine whether the dragged item is above or below another item.
    *
    * @returns {number}
    */
-  get comparisonIndex() {
-    if (this.dragOffset) {
-      return this.dragIndex + (this.dragOffset > 0 ? 0.5 : -0.5);
-    } else {
-      return this.index;
-    }
+  get dragPosition() {
+    return this.dragOffset && this.dragOffset !== 0
+      ? this.#leadingEdge
+      : this.#midpoint;
   }
 
   /**
@@ -112,6 +108,28 @@ class OrderableRowController extends Controller {
   get row() {
     return this.element.parentElement;
   }
+
+  get height() {
+    return this.row.offsetHeight;
+  }
+
+  get #midpoint() {
+    return this.#offsetTop + this.height / 2;
+  }
+
+  get #leadingEdge() {
+    const top = this.#offsetTop + this.dragOffset;
+
+    return this.dragOffset < 0 ? top : top + this.height;
+  }
+
+  get #offsetTop() {
+    return this.row.offsetTop;
+  }
+
+  get #viewportTop() {
+    return this.row.getBoundingClientRect().top;
+  }
 }
 
 function domIndex(element) {
@@ -133,7 +151,7 @@ class OrderableListController extends Controller {
     this.element.style.position = "relative";
   }
 
-  stopDragging() {
+  stopDragging({ reset = true } = {}) {
     const dragState = this.dragState;
     delete this.dragState;
 
@@ -142,7 +160,7 @@ class OrderableListController extends Controller {
     window.removeEventListener("scroll", this.scroll, true);
 
     this.element.removeAttribute("style");
-    this.tablesOrderableItemOutlets.forEach((item) => item.reset());
+    if (reset) this.items.forEach((item) => item.reset());
 
     return dragState;
   }
@@ -156,25 +174,30 @@ class OrderableListController extends Controller {
 
     if (!dragItem) return;
 
-    const newIndex = dragItem.dragIndex;
-    const targetItem = this.tablesOrderableItemOutlets[newIndex];
+    const items = this.items;
+    items.forEach((item) => item.captureDropPosition());
 
-    if (!targetItem) return;
+    this.#insertDragItem(this.orderedItems, dragItem);
 
-    // swap the dragged item into the correct position for its current offset
-    if (newIndex < dragItem.index) {
-      targetItem.row.insertAdjacentElement("beforebegin", dragItem.row);
-    } else if (newIndex > dragItem.index) {
-      targetItem.row.insertAdjacentElement("afterend", dragItem.row);
-    }
+    items.forEach((item) => item.invertDropPosition());
+
+    // Commit the inverted transforms before enabling transitions to play out.
+    this.element.offsetHeight;
 
     // reindex all items based on their new positions
-    this.tablesOrderableItemOutlets.forEach((item, index) =>
-      item.updateIndex(index),
-    );
+    this.items.forEach((item, index) => item.updateIndex(index));
 
     // save the changes
     this.commitChanges();
+
+    window.requestAnimationFrame(() => {
+      items.forEach((item) => item.playDrop());
+      window.setTimeout(() => {
+        items.forEach((item) => item.reset());
+      }, this.#animationDuration);
+    });
+
+    return true;
   }
 
   commitChanges() {
@@ -182,7 +205,7 @@ class OrderableListController extends Controller {
     this.tablesOrderableFormOutlet.clear();
 
     // insert any items that have changed position
-    this.tablesOrderableItemOutlets.forEach((item) => {
+    this.items.forEach((item) => {
       if (item.hasChanges) this.tablesOrderableFormOutlet.add(item);
     });
 
@@ -245,9 +268,9 @@ class OrderableListController extends Controller {
   mouseup = (event) => {
     if (!this.isDragging) return;
 
-    this.drop();
-    this.stopDragging();
-    this.tablesOrderableFormOutlets.forEach((form) => delete form.dragState);
+    const dropped = this.drop();
+    this.stopDragging({ reset: !dropped });
+    this.items.forEach((form) => delete form.dragState);
   };
 
   tablesOrderableFormOutletConnected(form, element) {
@@ -290,9 +313,11 @@ class OrderableListController extends Controller {
 
     // Visually updates the position of all items in the list relative to the
     // dragged item. No actual changes to orderings at this stage.
-    this.#currentItems.forEach((item, index) => {
-      if (item === dragItem) return;
-      item.updateVisually(index);
+    let nextOffset = 0;
+
+    this.orderedItems.forEach((item) => {
+      if (item !== dragItem) item.updateVisually(nextOffset);
+      nextOffset += item.height;
     });
   };
 
@@ -303,23 +328,30 @@ class OrderableListController extends Controller {
   get dragItem() {
     if (!this.isDragging) return null;
 
-    return this.tablesOrderableItemOutlets.find(
-      (item) => item.id === this.dragState.targetId,
-    );
+    return this.items.find((item) => item.id === this.dragState.targetId);
   }
 
   /**
-   * Returns the current items in the list, sorted by their current index.
-   * Current uses the drag index if the item is being dragged, if set.
+   * Returns the current items in the list in DOM order.
    *
    * @returns {Array[OrderableRowController]}
    */
-  get #currentItems() {
-    return this.tablesOrderableItemOutlets.toSorted(
-      (a, b) => a.comparisonIndex - b.comparisonIndex,
+  get items() {
+    // Note, item outlets may include other items as the outlets do not have a
+    // mechanism to specify an element scope.
+    return this.tablesOrderableItemOutlets.filter((item) =>
+      this.element.contains(item.element),
     );
   }
 
+  get orderedItems() {
+    const dragItem = this.dragItem;
+
+    if (!dragItem) return this.items;
+
+    return this.items.toSorted((a, b) => a.dragPosition - b.dragPosition);
+  }
+
   /**
    * Returns the item outlet that was clicked on, if any.
    *
@@ -327,14 +359,42 @@ class OrderableListController extends Controller {
    * @returns {OrderableRowController}
    */
   #targetItem(element) {
-    return this.tablesOrderableItemOutlets.find(
-      (item) => item.element === element,
-    );
+    return this.items.find((item) => item.element === element);
+  }
+
+  #insertDragItem(orderedItems, dragItem) {
+    const index = orderedItems.indexOf(dragItem);
+    const previousItem = orderedItems[index - 1];
+    const nextItem = orderedItems[index + 1];
+
+    if (previousItem) {
+      previousItem.row.insertAdjacentElement("afterend", dragItem.row);
+    } else if (nextItem) {
+      nextItem.row.insertAdjacentElement("beforebegin", dragItem.row);
+    }
+  }
+
+  get #animationDuration() {
+    const duration =
+      window
+        .getComputedStyle(this.element)
+        .getPropertyValue("--animation-duration") || "150ms";
+
+    return parseTime(duration);
   }
 
   //endregion
 }
 
+function parseTime(value) {
+  value = value.trim();
+
+  if (value.endsWith("ms")) return parseFloat(value);
+  if (value.endsWith("s")) return parseFloat(value) * 1000;
+
+  return parseFloat(value) || 0;
+}
+
 /**
  * During drag we want to be able to translate a document-relative coordinate
  * into a coordinate relative to the list element. This state object calculates