fix(pat-sortable): Initialize already existing sortable handles.

Also allow the sortable itself to be the handle.

Author: thet

src/pat/sortable/index.html

@@ -39,6 +39,17 @@ <h2>Vertical sorting with pat-clone</h2>
         </template>
 
 
+        <h2>The sortable item can also be the sortable handle</h2>
+        <ul class="pat-sortable">
+            <li class="sortable-item sortable-handle" draggable="true">Item 3</li>
+            <li class="sortable-item sortable-handle" draggable="true">Item 5</li>
+            <li class="sortable-item sortable-handle" draggable="true">Item 4</li>
+            <li class="sortable-item sortable-handle" draggable="true">Item 1</li>
+            <li class="sortable-item sortable-handle" draggable="true">Item 6</li>
+            <li class="sortable-item sortable-handle" draggable="true">Item 2</li>
+        </ul>
+
+
         <style>
             .sortable-item {
                 margin-bottom: -3px;

src/pat/sortable/sortable.js

@@ -1,5 +1,6 @@
 import $ from "jquery";
 import Base from "../../core/base";
+import dom from "../../core/dom";
 import events from "../../core/events";
 import Parser from "../../core/parser";
 
@@ -50,36 +51,44 @@ export default Base.extend({
     },
 
     addHandles: function () {
-        for (const sortable of [...this.$sortables].filter(
-            (it) => !it.querySelector(".sortable-handle")
-        )) {
-            // TODO: we should change to a <button>.
-            const handle = document.createElement("a");
-            handle.textContent = "⇕";
-            handle.classList.add("sortable-handle");
-            handle.setAttribute("draggable", "true");
-            handle.setAttribute("href", "#");
-            handle.setAttribute("title", "Drag to reorder");
-            handle.setAttribute("aria-label", "Drag to reorder");
-            sortable.appendChild(handle);
-
-            // TODO: remove when element is a button.
-            events.add_event_listener(handle, "click", "pat-sortable--click", (e) => {
-                e.preventDefault();
-            });
-
-            events.add_event_listener(
-                handle,
-                "dragstart",
-                "pat-sortable--dragstart",
-                this.onDragStart.bind(this)
-            );
-            events.add_event_listener(
-                handle,
-                "dragend",
-                "pat-sortable--dragend",
-                this.onDragEnd.bind(this)
-            );
+        for (const sortable of this.$sortables) {
+            const handles = dom.querySelectorAllAndMe(sortable, ".sortable-handle");
+            if (handles.length === 0) {
+                // TODO: we should change to a <button>.
+                const handle = document.createElement("a");
+                handle.textContent = "⇕";
+                handle.classList.add("sortable-handle");
+                handle.setAttribute("draggable", "true");
+                handle.setAttribute("href", "#");
+                //handle.setAttribute("title", "Drag to reorder"); // TODO: specify if that should be kept.
+                handle.setAttribute("aria-label", "Drag to reorder");
+                sortable.appendChild(handle);
+                handles.push(handle);
+            }
+
+            for (const handle of handles) {
+                // TODO: remove when element is a button.
+                events.add_event_listener(
+                    handle,
+                    "click",
+                    "pat-sortable--click",
+                    (e) => {
+                        e.preventDefault();
+                    }
+                );
+                events.add_event_listener(
+                    handle,
+                    "dragstart",
+                    "pat-sortable--dragstart",
+                    this.onDragStart.bind(this)
+                );
+                events.add_event_listener(
+                    handle,
+                    "dragend",
+                    "pat-sortable--dragend",
+                    this.onDragEnd.bind(this)
+                );
+            }
         }
     },
 
@@ -111,7 +120,7 @@ export default Base.extend({
     },
 
     onDragEnd: function (ev) {
-        var $dragged = $(ev.target).parent();
+        const $dragged = $(ev.target.closest(this.options.selector));
         $dragged.removeClass(this.options.dragClass);
         this.$sortables.off(".pat-sortable");
         this.$el.off(".pat-sortable");
@@ -156,8 +165,7 @@ export default Base.extend({
     },
 
     onDragStart: function (ev) {
-        var $handle = $(ev.target);
-        var $dragged = $handle.parent();
+        const $dragged = $(ev.target.closest(this.options.selector));
         var that = this;
         if (ev.dataTransfer) {
             // Firefox seems to need this set to any value

src/pat/sortable/sortable.test.js

@@ -213,4 +213,35 @@ describe("pat-sortable", function () {
 
         expect(injected.classList.contains(sortable.options.dragClass)).toBe(true);
     });
+
+    it("7 - Initializes sorting behavior with existing handles.", function () {
+        document.body.innerHTML = `
+            <ul class="pat-sortable">
+                <li>item 1 <a class="sortable-handle">sort</a></li>
+            </ul>
+        `;
+        const el = document.querySelector(".pat-sortable");
+        const sortable = new Sortable(el);
+
+        const item = el.querySelector("li");
+        const drag_handle = item.querySelector(".sortable-handle");
+        drag_handle.dispatchEvent(new Event("dragstart"));
+
+        expect(item.classList.contains(sortable.options.dragClass)).toBe(true);
+    });
+
+    it("8 - Sortable item itself can be the handle.", function () {
+        document.body.innerHTML = `
+            <ul class="pat-sortable">
+                <li class="sortable-handle">item</li>
+            </ul>
+        `;
+        const el = document.querySelector(".pat-sortable");
+        const sortable = new Sortable(el);
+
+        const item = el.querySelector("li");
+        item.dispatchEvent(new Event("dragstart"));
+
+        expect(item.classList.contains(sortable.options.dragClass)).toBe(true);
+    });
 });