Merge pull request #1147 from adumesny/develop

adumesny · web-flow · commit e660480bb47c · 2020-02-15T18:08:39.000-08:00
RemoveWidget() now call _triggerChangeEvent()
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
@@ -31,6 +31,7 @@ Change log
 
 ## v0.6.3-dev (upcoming changes)
 
+- fix [#1142](https://github.com/gridstack/gridstack.js/issues/1142) RemoveWidget() doesn't also trigger change events when it should
 - del `bower` since dead for a while now (https://snyk.io/blog/bower-is-dead/)
 
 ## v0.6.3 (2020-02-05)
diff --git a/spec/e2e/html/1142_change_event_missing.html b/spec/e2e/html/1142_change_event_missing.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>test demo</title>
+
+  <link rel="stylesheet" href="../../../demo/demo.css"/>
+
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+  <script src="../../../dist/jquery-ui.min.js"></script>
+  <script src="../../../src/gridstack.js"></script>
+  <script src="../../../src/gridstack.jQueryUI.js"></script>
+</head>
+<body>
+  <div class="grid-stack">
+    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">1 click to delete</div></div>
+    <div class="grid-stack-item" data-gs-x="0" data-gs-y="1" data-gs-width="3" data-gs-height="1"><div class="grid-stack-item-content">2 missing change event</div></div>
+    <div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="1" data-gs-height="1"><div class="grid-stack-item-content">3</div></div>
+    <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="1" data-gs-height="1"><div class="grid-stack-item-content">4</div></div>
+  </div>
+  
+<script type="text/javascript">
+  $(function () {
+    var $grid = $('.grid-stack').gridstack({float: false});
+
+  $grid.on('added', function(e, items) { log(' added ', items) });
+  $grid.on('removed', function(e, items) { log(' removed ', items) });
+  $grid.on('change', function(e, items) { log(' change ', items) });
+
+  function log(type, items) {
+    var str = '';
+    for (let i = 0; items && i < items.length && items[i]; i++) {
+      str += ' (x,y)=' + items[i].x + ',' + items[i].y;
+    }
+    console.log(type + items.length + ' items.' + str);
+  }
+
+  $('.grid-stack .grid-stack-item').click(function(e) {
+    var item = $(e.currentTarget).closest('.grid-stack-item');
+    var g = item.closest('.grid-stack').data('gridstack');
+    g.removeWidget(item);
+  });
+});
+</script>
+</body>
+</html>
diff --git a/src/gridstack.js b/src/gridstack.js
@@ -1453,7 +1453,7 @@
     this._prepareElement(el, true);
     this._updateContainerHeight();
     this._triggerAddEvent();
-    // this._triggerChangeEvent(true); already have AddEvent
+    this._triggerChangeEvent(true); // trigger any other changes
 
     return el;
   };
@@ -1463,7 +1463,7 @@
     this._prepareElement(el, true);
     this._updateContainerHeight();
     this._triggerAddEvent();
-    // this._triggerChangeEvent(true); already have AddEvent
+    this._triggerChangeEvent(true); // trigger any other changes
 
     return el;
   };
@@ -1485,7 +1485,7 @@
     el.removeData('_gridstack_node');
     this.grid.removeNode(node, detachNode);
     this._triggerRemoveEvent();
-    // this._triggerChangeEvent(true); already have removeEvent
+    this._triggerChangeEvent(true); // trigger any other changes
   };
 
   GridStack.prototype.removeAll = function(detachNode) {
