katalyst-tables 3.11.3 → 3.12.0

data/app/javascript/tables/orderable/list_controller.js

@@ -15,7 +15,7 @@ export default class OrderableListController extends Controller {
     this.element.style.position = "relative";
   }
 
-  stopDragging() {
+  stopDragging({ reset = true } = {}) {
     const dragState = this.dragState;
     delete this.dragState;
 
@@ -24,7 +24,7 @@ export default 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;
   }
@@ -38,25 +38,30 @@ export default 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() {
@@ -64,7 +69,7 @@ export default 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);
     });
 
@@ -127,9 +132,9 @@ export default 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) {
@@ -172,9 +177,11 @@ export default 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;
     });
   };
 
@@ -185,23 +192,30 @@ export default 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.
    *
@@ -209,14 +223,42 @@ export default 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/lib/katalyst/tables/collection/type/helpers/multiple.rb

@@ -64,7 +64,7 @@ module Katalyst
             def value_for_multiple(value)
               case value
               when ::Array
-                value.reject { |v| v.is_a?(::Range) }
+                value.grep_v(::Range)
               when ::Range
                 value
               else

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-tables
 version: !ruby/object:Gem::Version
-  version: 3.11.3
+  version: 3.12.0
 platform: ruby
 authors:
 - Katalyst Interactive
@@ -182,7 +182,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.3
+rubygems_version: 4.0.6
 specification_version: 4
 summary: HTML table generator for Rails views
 test_files: []