katalyst-tables 2.2.3 → 2.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8224ebb910f428c3f7750ae6e79c92f21440f5546a2baaede473bb286f217a82
-  data.tar.gz: 6be02c8a263dda22b7faae734cb20e8cec5879db532adb50f257bd502fa51265
+  metadata.gz: 450377488700ebc511da5b3d515c217811ef60ce631df86edf62778ef8a3c5c9
+  data.tar.gz: 90040f0e73ad2858fd6b683b8046c9726d6a9223676edafc555dadf3e416e97b
 SHA512:
-  metadata.gz: 61052d361a93ab2675274f9ed3b3f59e0acd08519261cf016c4db55006097d72f78114ba489e5eed9d066a82aa6bbaa9dd00675d378e24c996a5ccba775bce75
-  data.tar.gz: e411c014472cd5d34338ad0a02d869d69352fd4c6abe70c68ead05d75b3d2f0f52bf11c263031cd6606d27d09c7565e76770eee0b9149b58ef5e91ec383d86bf
+  metadata.gz: 65cb752a4d5ad8620572f123f960b8378e31b5775b34b84bcc7787cd5d89234a5fee3ef2e5d850d19a4c422278aaed74eab8fddf254a92445c11d1e9f17296af
+  data.tar.gz: c72888fbed46322cc3adf8bb4a562079699ccacea0fac36a8b85879ddf4378c252f7090c35206b4ac0e7696b2d67e7baadd455c279be9e813efc81103efe7724

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

@@ -5,16 +5,22 @@ export default class OrderableRowController extends Controller {
     params: Object,
   };
 
+  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;
-    this.index = params.index_value;
   }
 
   dragUpdate(offset) {
     this.dragOffset = offset;
     this.row.style.position = "relative";
     this.row.style.top = offset + "px";
-    this.row.style.zIndex = 1;
+    this.row.style.zIndex = "1";
     this.row.toggleAttribute("dragging", true);
   }
 
@@ -98,3 +104,7 @@ export default class OrderableRowController extends Controller {
     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

@@ -10,6 +10,7 @@ export default class OrderableListController extends Controller {
 
     document.addEventListener("mousemove", this.mousemove);
     document.addEventListener("mouseup", this.mouseup);
+    window.addEventListener("scroll", this.scroll, true);
 
     this.element.style.position = "relative";
   }
@@ -20,6 +21,7 @@ export default class OrderableListController extends Controller {
 
     document.removeEventListener("mousemove", this.mousemove);
     document.removeEventListener("mouseup", this.mouseup);
+    window.removeEventListener("scroll", this.scroll, true);
 
     this.element.removeAttribute("style");
     this.tablesOrderableItemOutlets.forEach((item) => item.reset());
@@ -84,7 +86,7 @@ export default class OrderableListController extends Controller {
 
     this.startDragging(new DragState(this.element, event, target.id));
 
-    this.#updateDragItem(event);
+    this.dragState.updateCursor(this.element, target.row, event, this.animate);
   }
 
   mousemove = (event) => {
@@ -92,13 +94,33 @@ export default class OrderableListController extends Controller {
 
     event.preventDefault(); // prevent build-in drag
 
-    const dragItem = this.#updateDragItem(event);
+    if (this.ticking) return;
 
-    // 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);
+    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,
+      );
     });
   };
 
@@ -128,6 +150,27 @@ export default class OrderableListController extends Controller {
 
   //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;
   }
@@ -155,7 +198,7 @@ export default class OrderableListController extends Controller {
   /**
    * Returns the item outlet that was clicked on, if any.
    *
-   * @param event {HTMLElement} the clicked ordinal cell
+   * @param element {HTMLElement} the clicked ordinal cell
    * @returns {OrderableRowController}
    */
   #targetItem(element) {
@@ -164,17 +207,6 @@ export default class OrderableListController extends Controller {
     );
   }
 
-  #updateDragItem(event) {
-    const offset = this.dragState.itemOffset(
-      this.element,
-      this.dragItem.row,
-      event,
-    );
-    const item = this.dragItem;
-    item.dragUpdate(offset);
-    return item;
-  }
-
   //endregion
 }
 
@@ -195,23 +227,11 @@ class DragState {
    * @param id {String} the id of the element being dragged
    */
   constructor(list, event, id) {
-    // calculate the offset top of the tbody element relative to offsetParent
-    const offsetParent = list.offsetParent;
-    let offsetTop = event.offsetY;
-    let current = event.target;
-    while (current && current !== offsetParent) {
-      offsetTop += current.offsetTop;
-      current = current.offsetParent;
-    }
-
-    // page offset is the offset of the tbody element relative to the page
-    this.pageOffset = event.pageY - offsetTop + list.offsetTop;
-
     // 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.initialOffset = event.target.offsetTop - list.offsetTop;
+    this.initialPosition = event.target.offsetTop - list.offsetTop;
 
     // id of the item being dragged
     this.targetId = id;
@@ -223,25 +243,62 @@ class DragState {
    * @param list {HTMLElement} the list controller's element (tbody)
    * @param row {HTMLElement} the row being dragged
    * @param event {MouseEvent} the current event
-   * @returns {number} relative offset for the item being dragged
+   * @param callback {OrderableListController~animate} updates the drag item with a relative offset
    */
-  itemOffset(list, row, event) {
-    // cursor position relative to the list
-    const cursorPosition = event.pageY - this.pageOffset;
+  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;
 
-    // item position relative to the list
+    // 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)
-    itemPosition = Math.max(itemPosition, 0);
-    itemPosition = Math.min(itemPosition, list.offsetHeight - row.offsetHeight);
+    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).
-    return itemPosition - this.initialOffset;
+    callback(offset);
   }
 }

data/lib/katalyst/tables/version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-tables
 version: !ruby/object:Gem::Version
-  version: 2.2.3
+  version: 2.2.4
 platform: ruby
 authors:
 - Katalyst Interactive