katalyst-tables 2.2.2 → 2.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b8413e971a3164d1ab1fa688a20ce34e1f25768da7650565d9f600e1612a80e
-  data.tar.gz: d14455c86030073e293aafbaaf86a4da483be27912cca5a8d46cc43cc3a532b8
+  metadata.gz: 450377488700ebc511da5b3d515c217811ef60ce631df86edf62778ef8a3c5c9
+  data.tar.gz: 90040f0e73ad2858fd6b683b8046c9726d6a9223676edafc555dadf3e416e97b
 SHA512:
-  metadata.gz: 5825f4058bc40aa823dbdd0719d8738a5fa4e4738442438c7e0c86ae9942cb5fc163d19b7754eb27b1abd061699dccfd79b249c93ceef8ce3605c101a4262522
-  data.tar.gz: ed4ccfa22d6342eff7c6f0a84ac6c28472263c249846594d794492c40c2b2a8bd9265f26fe897cb5a331c489b2b2d5caf59da98619ad16763a8a4dd4e8124f05
+  metadata.gz: 65cb752a4d5ad8620572f123f960b8378e31b5775b34b84bcc7787cd5d89234a5fee3ef2e5d850d19a4c422278aaed74eab8fddf254a92445c11d1e9f17296af
+  data.tar.gz: c72888fbed46322cc3adf8bb4a562079699ccacea0fac36a8b85879ddf4378c252f7090c35206b4ac0e7696b2d67e7baadd455c279be9e813efc81103efe7724

data/app/assets/javascripts/controllers/tables/orderable/form_controller.js

@@ -1,12 +1,12 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class OrderableFormController extends Controller {
-  add(item, index) {
+  add(item) {
     const { id_name, id_value, index_name } = item.paramsValue;
     this.element.insertAdjacentHTML(
       "beforeend",
       `<input type="hidden" name="${id_name}" value="${id_value}" data-generated>
-              <input type="hidden" name="${index_name}" value="${index}" data-generated>`,
+              <input type="hidden" name="${index_name}" value="${item.index}" data-generated>`,
     );
   }
 

data/app/assets/javascripts/controllers/tables/orderable/item_controller.js

@@ -5,7 +5,106 @@ export default class OrderableRowController extends Controller {
     params: Object,
   };
 
-  get index() {
-    return this.paramsValue.index_value;
+  connect() {
+    // index from server may be inconsistent with the visual ordering,
+    // especially if this is a new node. Use positional indexes instead,
+    // as these are the values we will send on save.
+    this.index = domIndex(this.row);
   }
+
+  paramsValueChanged(params) {
+    this.id = params.id_value;
+  }
+
+  dragUpdate(offset) {
+    this.dragOffset = offset;
+    this.row.style.position = "relative";
+    this.row.style.top = offset + "px";
+    this.row.style.zIndex = "1";
+    this.row.toggleAttribute("dragging", true);
+  }
+
+  /**
+   * 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
+   */
+  updateVisually(index) {
+    this.row.style.position = "relative";
+    this.row.style.top = `${
+      this.row.offsetHeight * (index - this.dragIndex)
+    }px`;
+  }
+
+  /**
+   * Set the index value of the item. This is called on all items after a drop
+   * event. If the index is different to the params index then this item has
+   * changed.
+   *
+   * @param index {number} the new index value
+   */
+  updateIndex(index) {
+    this.index = index;
+  }
+
+  /**
+   * Restore any visual changes made during drag and remove the drag state.
+   */
+  reset() {
+    delete this.dragOffset;
+    this.row.removeAttribute("style");
+    this.row.removeAttribute("dragging");
+  }
+
+  /**
+   * @returns {boolean} true when the item has a change to its index value
+   */
+  get hasChanges() {
+    return this.paramsValue.index_value !== this.index;
+  }
+
+  /**
+   * 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.
+   *
+   * @returns {number}
+   */
+  get comparisonIndex() {
+    if (this.dragOffset) {
+      return this.dragIndex + (this.dragOffset > 0 ? 0.5 : -0.5);
+    } else {
+      return this.index;
+    }
+  }
+
+  /**
+   * The containing row element.
+   *
+   * @returns {HTMLElement}
+   */
+  get row() {
+    return this.element.parentElement;
+  }
+}
+
+function domIndex(element) {
+  return Array.from(element.parentElement.children).indexOf(element);
 }

data/app/assets/javascripts/controllers/tables/orderable/list_controller.js

@@ -3,71 +3,302 @@ import { Controller } from "@hotwired/stimulus";
 export default class OrderableListController extends Controller {
   static outlets = ["tables--orderable--item", "tables--orderable--form"];
 
-  dragstart(event) {
-    if (this.element !== event.target.parentElement) return;
+  //region State transitions
 
-    const target = event.target;
-    event.dataTransfer.effectAllowed = "move";
+  startDragging(dragState) {
+    this.dragState = dragState;
 
-    // update element style after drag has begun
-    setTimeout(() => (target.dataset.dragging = ""));
+    document.addEventListener("mousemove", this.mousemove);
+    document.addEventListener("mouseup", this.mouseup);
+    window.addEventListener("scroll", this.scroll, true);
+
+    this.element.style.position = "relative";
   }
 
-  dragover(event) {
-    if (!this.dragItem) return;
+  stopDragging() {
+    const dragState = this.dragState;
+    delete this.dragState;
 
-    swap(this.dropTarget(event.target), this.dragItem);
+    document.removeEventListener("mousemove", this.mousemove);
+    document.removeEventListener("mouseup", this.mouseup);
+    window.removeEventListener("scroll", this.scroll, true);
 
-    event.preventDefault();
-    return true;
-  }
+    this.element.removeAttribute("style");
+    this.tablesOrderableItemOutlets.forEach((item) => item.reset());
 
-  dragenter(event) {
-    event.preventDefault();
+    return dragState;
   }
 
-  drop(event) {
-    if (!this.dragItem) return;
+  drop() {
+    // note: early returns guard against turbo updates that prevent us finding
+    // the right item to drop on. In this situation it's better to discard the
+    // drop than to drop in the wrong place.
+
+    const dragItem = this.dragItem;
+
+    if (!dragItem) return;
+
+    const newIndex = dragItem.dragIndex;
+    const targetItem = this.tablesOrderableItemOutlets[newIndex];
 
-    event.preventDefault();
-    delete this.dragItem.dataset.dragging;
+    if (!targetItem) return;
 
-    this.update();
+    // 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);
+    }
+
+    // reindex all items based on their new positions
+    this.tablesOrderableItemOutlets.forEach((item, index) =>
+      item.updateIndex(index),
+    );
+
+    // save the changes
+    this.commitChanges();
   }
 
-  update() {
+  commitChanges() {
     // clear any existing inputs to prevent duplicates
     this.tablesOrderableFormOutlet.clear();
 
     // insert any items that have changed position
-    this.tablesOrderableItemOutlets.forEach((item, index) => {
-      if (item.index !== index) {
-        this.tablesOrderableFormOutlet.add(item, index);
-      }
+    this.tablesOrderableItemOutlets.forEach((item) => {
+      if (item.hasChanges) this.tablesOrderableFormOutlet.add(item);
     });
 
     this.tablesOrderableFormOutlet.submit();
   }
 
-  get dragItem() {
-    return this.element.querySelector("[data-dragging]");
+  //endregion
+
+  //region Events
+
+  mousedown(event) {
+    if (this.isDragging) return;
+
+    const target = this.#targetItem(event.target);
+
+    if (!target) return;
+
+    event.preventDefault(); // prevent built-in drag
+
+    this.startDragging(new DragState(this.element, event, target.id));
+
+    this.dragState.updateCursor(this.element, target.row, event, this.animate);
   }
 
-  dropTarget($e) {
-    while ($e && $e.parentElement !== this.element) {
-      $e = $e.parentElement;
+  mousemove = (event) => {
+    if (!this.isDragging) return;
+
+    event.preventDefault(); // prevent build-in drag
+
+    if (this.ticking) return;
+
+    this.ticking = true;
+
+    window.requestAnimationFrame(() => {
+      this.ticking = false;
+      this.dragState.updateCursor(
+        this.element,
+        this.dragItem.row,
+        event,
+        this.animate,
+      );
+    });
+  };
+
+  scroll = (event) => {
+    if (!this.isDragging || this.ticking) return;
+
+    this.ticking = true;
+
+    window.requestAnimationFrame(() => {
+      this.ticking = false;
+      this.dragState.updateScroll(
+        this.element,
+        this.dragItem.row,
+        this.animate,
+      );
+    });
+  };
+
+  mouseup = (event) => {
+    if (!this.isDragging) return;
+
+    this.drop();
+    this.stopDragging();
+    this.tablesOrderableFormOutlets.forEach((form) => delete form.dragState);
+  };
+
+  tablesOrderableFormOutletConnected(form, element) {
+    if (form.dragState) {
+      // restore the previous controller's state
+      this.startDragging(form.dragState);
     }
-    return $e;
   }
-}
 
-function swap(target, item) {
-  if (target && target !== 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);
+  tablesOrderableFormOutletDisconnected(form, element) {
+    if (this.isDragging) {
+      // cache drag state in the form
+      form.dragState = this.stopDragging();
     }
   }
+
+  //endregion
+
+  //region Helpers
+
+  /**
+   * Updates the position of the drag item with a relative offset. Updates
+   * other items relative to the new position of the drag item, as required.
+   *
+   * @callback {OrderableListController~animate}
+   * @param {number} offset
+   */
+  animate = (offset) => {
+    const dragItem = this.dragItem;
+
+    // Visually update the dragItem so it follows the cursor
+    dragItem.dragUpdate(offset);
+
+    // 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);
+    });
+  };
+
+  get isDragging() {
+    return !!this.dragState;
+  }
+
+  get dragItem() {
+    if (!this.isDragging) return null;
+
+    return this.tablesOrderableItemOutlets.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 {Array[OrderableRowController]}
+   */
+  get #currentItems() {
+    return this.tablesOrderableItemOutlets.toSorted(
+      (a, b) => a.comparisonIndex - b.comparisonIndex,
+    );
+  }
+
+  /**
+   * Returns the item outlet that was clicked on, if any.
+   *
+   * @param element {HTMLElement} the clicked ordinal cell
+   * @returns {OrderableRowController}
+   */
+  #targetItem(element) {
+    return this.tablesOrderableItemOutlets.find(
+      (item) => item.element === element,
+    );
+  }
+
+  //endregion
+}
+
+/**
+ * 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
+ * and stores internal state so that we can translate absolute page coordinates
+ * from mouse events into relative offsets for the list items within the list
+ * element.
+ *
+ * We also keep track of the drag target so that if the controller is attached
+ * to a new element during the drag we can continue after the turbo update.
+ */
+class DragState {
+  /**
+   * @param list {HTMLElement} the list controller's element (tbody)
+   * @param event {MouseEvent} the initial event
+   * @param id {String} the id of the element being dragged
+   */
+  constructor(list, event, id) {
+    // cursor offset is the offset of the cursor relative to the drag item
+    this.cursorOffset = event.offsetY;
+
+    // initial offset is the offset position of the drag item at drag start
+    this.initialPosition = event.target.offsetTop - list.offsetTop;
+
+    // id of the item being dragged
+    this.targetId = id;
+  }
+
+  /**
+   * Calculates the offset of the drag item relative to its initial position.
+   *
+   * @param list {HTMLElement} the list controller's element (tbody)
+   * @param row {HTMLElement} the row being dragged
+   * @param event {MouseEvent} the current event
+   * @param callback {OrderableListController~animate} updates the drag item with a relative offset
+   */
+  updateCursor(list, row, event, callback) {
+    // Calculate and store the list offset relative to the viewport
+    // This value is cached so we can calculate the outcome of any scroll events
+    this.listOffset = list.getBoundingClientRect().top;
+
+    // Calculate the position of the cursor relative to the list.
+    // Accounts for scroll offsets by using the item's bounding client rect.
+    const cursorPosition = event.clientY - this.listOffset;
+
+    // intended item position relative to the list, from cursor position
+    let itemPosition = cursorPosition - this.cursorOffset;
+
+    this.#updateItemPosition(list, row, itemPosition, callback);
+  }
+
+  /**
+   * Animates the item's position as the list scrolls. Requires a previous call
+   * to set the scroll offset.
+   *
+   * @param list {HTMLElement} the list controller's element (tbody)
+   * @param row {HTMLElement} the row being dragged
+   * @param callback {OrderableListController~animate} updates the drag item with a relative offset
+   */
+  updateScroll(list, row, callback) {
+    const previousScrollOffset = this.listOffset;
+
+    // Calculate and store the list offset relative to the viewport
+    // This value is cached so we can calculate the outcome of any scroll events
+    this.listOffset = list.getBoundingClientRect().top;
+
+    // Calculate the change in scroll offset since the last update
+    const scrollDelta = previousScrollOffset - this.listOffset;
+
+    // intended item position relative to the list, from cursor position
+    const position = this.position + scrollDelta;
+
+    this.#updateItemPosition(list, row, position, callback);
+  }
+
+  #updateItemPosition(list, row, position, callback) {
+    // ensure itemPosition is within the bounds of the list (tbody)
+    position = Math.max(position, 0);
+    position = Math.min(position, list.offsetHeight - row.offsetHeight);
+
+    // cache the item's position relative to the list for use in scroll events
+    this.position = position;
+
+    // Item has position: relative, so we want to calculate the amount to move
+    // the item relative to it's DOM position to represent how much it has been
+    // dragged by.
+    const offset = position - this.initialPosition;
+
+    // Convert itemPosition from offset relative to list to offset relative to
+    // its position within the DOM (if it hadn't moved).
+    callback(offset);
+  }
 }

data/app/components/concerns/katalyst/tables/orderable.rb

@@ -45,10 +45,7 @@ module Katalyst
         super.merge_html(
           { data: { controller: LIST_CONTROLLER,
                     action: <<~ACTIONS.squish,
-                      dragstart->#{LIST_CONTROLLER}#dragstart
-                      dragenter->#{LIST_CONTROLLER}#dragenter
-                      dragover->#{LIST_CONTROLLER}#dragover
-                      drop->#{LIST_CONTROLLER}#drop
+                      mousedown->#{LIST_CONTROLLER}#mousedown
                     ACTIONS
                     "#{LIST_CONTROLLER}-#{FORM_CONTROLLER}-outlet" => "##{orderable.id}",
                     "#{LIST_CONTROLLER}-#{ITEM_CONTROLLER}-outlet" => "td.ordinal" } },
@@ -95,19 +92,11 @@ module Katalyst
             index_name:  @table.orderable.record_scope(id, attribute),
             index_value: @record.public_send(attribute),
           }
-          cell(attribute, class: "ordinal", data: {
+          cell(attribute, class: "ordinal", draggable: true, data: {
                  controller:                        ITEM_CONTROLLER,
                  "#{ITEM_CONTROLLER}-params-value": params.to_json,
                }) { t("katalyst.tables.orderable.value") }
         end
-
-        def html_attributes
-          super.merge_html(
-            {
-              draggable: "true",
-            },
-          )
-        end
       end
 
       class FormComponent < ViewComponent::Base # :nodoc:

data/lib/katalyst/tables/version.rb

@@ -2,6 +2,6 @@
 
 module Katalyst
   module Tables
-    VERSION = "2.2.2"
+    VERSION = "2.2.4"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-tables
 version: !ruby/object:Gem::Version
-  version: 2.2.2
+  version: 2.2.4
 platform: ruby
 authors:
 - Katalyst Interactive
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-20 00:00:00.000000000 Z
+date: 2023-09-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: html-attributes-utils