fix: makes dynamic items work again (#29)

resolves #26
schne324 · Sep 10, 2018 · 333ace5 · 333ace5
1 parent 91ab1c2
commit 333ace5
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -61,7 +61,7 @@ class App extends Component {
     const { dragonDrop } = this.state;
     // this public method allows dragon drop to
     // reassess the updated items and handles
-    dragonDrop.initElements();
+    dragonDrop.initElements(this.dragon);
   }
 
   render() {

diff --git a/demo/dynamic-items-test.html b/demo/dynamic-items-test.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Dragon Drop | Dynamic List Items</title>
+  </head>
+  <body>
+    <ul id="dragon">
+      <li>Foo</li>
+      <li>Bar</li>
+      <li>Baz</li>
+    </ul>
+    <button id="add" type='button'>Add Item</button>
+    <script src="../dragon-drop.js"></script>
+    <script>
+      var dragon = document.getElementById('dragon');
+      var dragonDrop = new DragonDrop(dragon, { handle: false });
+      var add = document.getElementById('add');
+      var added = 1;
+
+      add.addEventListener('click', function (e) {
+        var newItem = document.createElement('li');
+        newItem.innerHTML = 'Dynamically added item #' + added;
+        dragon.appendChild(newItem);
+        dragonDrop.initElements(dragon);
+        added++;
+      });
+    </script>
+  </body>
+</html>
diff --git a/dist/demo/dynamic-items-test.html b/dist/demo/dynamic-items-test.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Dragon Drop | Dynamic List Items</title>
+  </head>
+  <body>
+    <ul id="dragon">
+      <li>Foo</li>
+      <li>Bar</li>
+      <li>Baz</li>
+    </ul>
+    <button id="add" type='button'>Add Item</button>
+    <script src="../dragon-drop.js"></script>
+    <script>
+      var dragon = document.getElementById('dragon');
+      var dragonDrop = new DragonDrop(dragon, { handle: false });
+      var add = document.getElementById('add');
+      var added = 1;
+
+      add.addEventListener('click', function (e) {
+        var newItem = document.createElement('li');
+        newItem.innerHTML = 'Dynamically added item #' + added;
+        dragon.appendChild(newItem);
+        dragonDrop.initElements(dragon);
+        added++;
+      });
+    </script>
+  </body>
+</html>
diff --git a/dist/dragon-drop.js b/dist/dragon-drop.js
@@ -155,6 +155,7 @@ var DragonDrop = function () {
     }
     // make the dragon an emitter
     (0, _componentEmitter2.default)(this);
+    this.handledHandles = [];
     this.initOptions(userOptions);
 
     var _options = this.options,
@@ -183,7 +184,7 @@ var DragonDrop = function () {
     this.onKeydown = this.onKeydown.bind(this);
 
     // initialize elements / events
-    this.initElements(container).mouseEvents().initClick();
+    this.initElements(container).mouseEvents();
 
     debug('dragon initialized: ', this);
 
@@ -218,6 +219,10 @@ var DragonDrop = function () {
 
 
       this.handles.forEach(function (handle) {
+        if (_this.handledHandles.includes(handle)) {
+          return;
+        }
+
         handle.addEventListener('click', function (e) {
           if (nested) {
             e.stopPropagation();
@@ -226,8 +231,7 @@ var DragonDrop = function () {
           var type = wasPressed ? 'dropped' : 'grabbed';
 
           // clean up
-          _this.handles // TODO: This can probably be tied into the below items iteration
-          .filter(function (h) {
+          _this.handles.filter(function (h) {
             return h.getAttribute('aria-pressed') === 'true';
           }).forEach(function (h) {
             h.setAttribute('aria-pressed', 'false');
@@ -259,6 +263,8 @@ var DragonDrop = function () {
             _this.cachedItems = (0, _queryAll2.default)(_this.options.item, _this.container);
           }
         });
+
+        _this.handledHandles.push(handle);
       });
 
       return this;
@@ -275,7 +281,7 @@ var DragonDrop = function () {
       var _this2 = this;
 
       this.container = container;
-      this.setItems();
+      this.setItems().initClick();
 
       // set all attrs/props/events on handle elements
       this.handles.forEach(function (handle) {

diff --git a/dist/dragon-drop.min.js b/dist/dragon-drop.min.js
diff --git a/index.js b/index.js
@@ -104,6 +104,7 @@ export default class DragonDrop {
     }
     // make the dragon an emitter
     Emitter(this);
+    this.handledHandles = [];
     this.initOptions(userOptions);
 
     const { handle, nested } = this.options;
@@ -132,8 +133,7 @@ export default class DragonDrop {
     // initialize elements / events
     this
       .initElements(container)
-      .mouseEvents()
-      .initClick();
+      .mouseEvents();
 
     debug('dragon initialized: ', this);
 
@@ -159,16 +159,20 @@ export default class DragonDrop {
   }
 
   initClick() {
-    const { activeClass, inactiveClass, nested} = this.options;
+    const { activeClass, inactiveClass, nested } = this.options;
 
     this.handles.forEach(handle => {
+      if (this.handledHandles.includes(handle)) {
+        return;
+      }
+
       handle.addEventListener('click', e => {
         if (nested) { e.stopPropagation(); }
         const wasPressed = handle.getAttribute('data-drag-on') === 'true';
         const type = wasPressed ? 'dropped' : 'grabbed';
 
         // clean up
-        this.handles // TODO: This can probably be tied into the below items iteration
+        this.handles
           .filter(h => h.getAttribute('aria-pressed') === 'true')
           .forEach(h => {
             h.setAttribute('aria-pressed', 'false');
@@ -200,6 +204,8 @@ export default class DragonDrop {
           this.cachedItems = queryAll(this.options.item, this.container);
         }
       });
+
+      this.handledHandles.push(handle);
     });
 
     return this;
@@ -211,7 +217,8 @@ export default class DragonDrop {
    */
   initElements(container) {
     this.container = container;
-    this.setItems();
+    this.setItems().initClick();
+
 
     // set all attrs/props/events on handle elements
     this.handles.forEach(handle => {