@fr0st/ui-sortable 3.0.0 → 3.0.2

package/src/helpers.js

@@ -19,7 +19,7 @@ export function resetCursor(nodes) {
         release();
         cursorLocks.delete(node);
     }
-};
+}
 
 /**
  * Sets the cursor style for a collection of elements.
@@ -34,7 +34,7 @@ export function setCursor(nodes, cursor) {
             cursorLocks.set(node, $.setStyleLock(node, 'cursor', cursor));
         }
     }
-};
+}
 
 /**
  * Triggers a Sortable event with its data and detail payloads.
@@ -50,4 +50,4 @@ export function triggerSortableEvent(node, name, data) {
             ...data,
         },
     });
-};
+}

package/src/sortable.js

@@ -56,14 +56,15 @@ export default class Sortable extends BaseComponent {
     };
 
     #currentIndex;
-    #currentSortable;
+    #currentSortable = null;
     #dragging;
     #enabled;
-    #pos;
-    #scrollFrame;
+    #initialCursorNodes = [];
+    #pos = null;
+    #scrollFrame = null;
     #selector;
     #startIndex;
-    #target;
+    #target = null;
 
     /**
      * Creates a Sortable.
@@ -73,15 +74,22 @@ export default class Sortable extends BaseComponent {
     constructor(node, options) {
         super(node, options);
 
-        this.#selector = this.options.handle ?
-            `:is(${this.options.items}) :is(${this.options.handle})` :
-            this.options.items;
-
-        this.#dragging = false;
-        this.#enabled = !this.options.disabled;
-
-        setCursor($.find(this.#selector, this.node), this.options.cursor);
-        this.#events();
+        try {
+            this.#selector = this.options.handle ?
+                `:is(${this.options.items}) :is(${this.options.handle})` :
+                this.options.items;
+
+            this.#dragging = false;
+            this.#enabled = !this.options.disabled;
+
+            this.#initialCursorNodes = $.find(this.#selector, this.node);
+            setCursor(this.#initialCursorNodes, this.options.cursor);
+            this.#events();
+            this.#initialCursorNodes = null;
+        } catch (error) {
+            this.dispose();
+            throw error;
+        }
     }
 
     /**
@@ -97,9 +105,7 @@ export default class Sortable extends BaseComponent {
             return;
         }
 
-        $.removeEventDelegate(this.node, 'mousedown.ui.sortable touchstart.ui.sortable');
-        $.removeEvent(this.node, 'receive.ui.sortable');
-        resetCursor($.find(this.#selector, this.node));
+        resetCursor(this.#initialCursorNodes ?? $.find(this.#selector, this.node));
 
         if (this.#target && this.options.helperClass) {
             $.removeClass(this.#target, this.options.helperClass);
@@ -107,6 +113,8 @@ export default class Sortable extends BaseComponent {
 
         this.#resetDrag();
 
+        this.#initialCursorNodes = null;
+
         super.dispose();
     }
 
@@ -183,16 +191,16 @@ export default class Sortable extends BaseComponent {
      * Attaches events for the Sortable.
      */
     #events() {
-        const downEvent = (e) => {
+        const downHandler = (event) => {
             const cancelled = this.options.cancel &&
                 (
-                    $.is(e.target, this.options.cancel) ||
-                    $.is(e.currentTarget, this.options.cancel) ||
-                    $.closest(e.target, this.options.cancel, this.node).length
+                    $.is(event.target, this.options.cancel) ||
+                    $.is(event.currentTarget, this.options.cancel) ||
+                    $.closest(event.target, this.options.cancel, this.node).length
                 );
 
             if (
-                e.button ||
+                event.button ||
                 !this.#enabled ||
                 cancelled ||
                 $.getDataset(this.node, 'uiDragging')
@@ -201,21 +209,21 @@ export default class Sortable extends BaseComponent {
             }
 
             this.#target = this.options.handle ?
-                this.items().find((node) => $.hasDescendent(node, e.currentTarget)) :
-                e.currentTarget;
+                this.items().find((node) => $.hasDescendent(node, event.currentTarget)) :
+                event.currentTarget;
 
             if (!this.#target) {
                 return false;
             }
         };
 
-        const moveEvent = (e) => {
+        const moveHandler = (event) => {
             if (!this.node || !this.#target) {
                 return;
             }
 
             const previousPos = this.#pos;
-            this.#pos = getPosition(e);
+            this.#pos = getPosition(event);
             const deltaX = previousPos ?
                 this.#pos.x - previousPos.x :
                 0;
@@ -255,7 +263,7 @@ export default class Sortable extends BaseComponent {
             this.#scheduleScroll();
         };
 
-        const upEvent = (e) => {
+        const upHandler = (event) => {
             if (!this.node) {
                 return;
             }
@@ -265,8 +273,8 @@ export default class Sortable extends BaseComponent {
                 return;
             }
 
-            if (e.type === 'mouseup') {
-                e.preventDefault();
+            if (event.type === 'mouseup') {
+                event.preventDefault();
             }
 
             const source = this.node;
@@ -305,16 +313,16 @@ export default class Sortable extends BaseComponent {
             }
         };
 
-        const dragEvent = $.mouseDragFactory(downEvent, moveEvent, upEvent);
+        const dragHandler = $.mouseDragFactory(downHandler, moveHandler, upHandler);
 
-        $.addEventDelegate(
+        this.listen(
             this.node,
             'mousedown.ui.sortable touchstart.ui.sortable',
-            this.#selector,
-            dragEvent,
+            dragHandler,
+            { delegate: this.#selector },
         );
 
-        $.addEvent(this.node, 'receive.ui.sortable', (_) => {
+        this.listen(this.node, 'receive.ui.sortable', () => {
             setCursor($.find(this.#selector, this.node), this.options.cursor);
         });
     }
@@ -323,7 +331,7 @@ export default class Sortable extends BaseComponent {
      * Resets the active drag state.
      */
     #resetDrag() {
-        if (this.#scrollFrame !== null && this.#scrollFrame !== undefined) {
+        if (this.#scrollFrame !== null) {
             window.cancelAnimationFrame(this.#scrollFrame);
         }
 
@@ -348,12 +356,12 @@ export default class Sortable extends BaseComponent {
             !this.node ||
             !this.options.scroll ||
             !this.#dragging ||
-            this.#scrollFrame !== null && this.#scrollFrame !== undefined
+            this.#scrollFrame !== null
         ) {
             return;
         }
 
-        this.#scrollFrame = window.requestAnimationFrame((_) => {
+        this.#scrollFrame = window.requestAnimationFrame(() => {
             this.#checkScroll();
         });
     }