Merge pull request #1122 from Patternslib/fix-sortable-3

feat(pat-sortable): Support initialization after injection.

Author: thet

src/pat/sortable/index.html

@@ -30,7 +30,8 @@ <h2>Horizontal sorting</h2>
 
         <h2>Vertical sorting with pat-clone</h2>
         <button class="clone-trigger-1">Add item</button>
-        <ul class="pat-sortable pat-clone"
+        <a class="pat-inject" data-pat-inject="source: .clone-template-1; target: #clone-inject-example::after">Add item via injection</a>
+        <ul id="clone-inject-example" class="pat-sortable pat-clone"
           data-pat-clone="template: .clone-template-1; trigger-element: .clone-trigger-1">
         </ul>
         <template class="clone-template-1">

src/pat/sortable/sortable.js

@@ -23,31 +23,18 @@ export default Base.extend({
         this.options = parser.parse(this.$el, false);
         this.recordPositions().initScrolling();
         this.$el.on("pat-update", this.onPatternUpdate.bind(this));
+        this.$el.on("patterns-injected", this.recordPositions.bind(this));
     },
 
     onPatternUpdate: function (ev, data) {
         /* Handler which gets called when pat-update is triggered within
          * the .pat-sortable element.
          */
-        if (data?.pattern !== "clone" || data?.action !== "added" || !data?.dom) {
+        if (data?.pattern !== "clone" || data?.action !== "added") {
             // Nothing to do.
             return;
         }
-
         this.recordPositions();
-
-        events.add_event_listener(
-            data.dom,
-            "dragstart",
-            "pat-sortable--dragstart",
-            this.onDragStart.bind(this)
-        );
-        events.add_event_listener(
-            data.dom,
-            "dragend",
-            "pat-sortable--dragend",
-            this.onDragEnd.bind(this)
-        );
     },
 
     recordPositions: function () {

src/pat/sortable/sortable.test.js

@@ -1,4 +1,5 @@
 import events from "../../core/events";
+import utils from "../../core/utils";
 import $ from "jquery";
 import Sortable from "./sortable";
 
@@ -180,4 +181,36 @@ describe("pat-sortable", function () {
 
         expect(cloned.classList.contains(sortable.options.dragClass)).toBe(true);
     });
+
+    it("6 - Initializes sorting behavior on pat-injected elements.", async function () {
+        const Inject = (await import("../inject/inject")).default;
+
+        document.body.innerHTML = `
+            <ul class="pat-sortable">
+            </ul>
+            <a class="pat-inject"
+               data-pat-inject="
+                   source: .inject-template;
+                   target: .pat-sortable::after">Inject</a>
+            <template class="inject-template">
+                <li>item</li>
+            </template>
+        `;
+        const el = document.querySelector(".pat-sortable");
+        const sortable = new Sortable(el);
+        const el_inject = document.querySelector(".pat-inject");
+        Inject.init($(el_inject));
+
+        el_inject.click();
+        await utils.timeout(1);
+
+        const injected = el.querySelector("li");
+        expect(injected).toBeTruthy();
+
+        const drag_handle = injected.querySelector(".sortable-handle");
+        expect(drag_handle).toBeTruthy();
+        drag_handle.dispatchEvent(new Event("dragstart"));
+
+        expect(injected.classList.contains(sortable.options.dragClass)).toBe(true);
+    });
 });