added multiple event callbacks

* added event support to call `grid.on('added removed change', callback)`
again even with native events (was jquery feature)
* updated demos to use it (like it!)
* fix for #1171

Author: Alain Dumesny

demo/advance.html

@@ -117,14 +117,11 @@ <h1>Advanced Demo</h1>
       acceptWidgets: '.newWidget'
     });
 
-    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) {
+    grid.on('added removed change', function(e, items) {
       var str = '';
       items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
-      console.log(type + items.length + ' items.' + str );
-    }
+      console.log(e.type + ' ' + items.length + ' items:' + str );
+    });
 
     // TODO: switch jquery-ui out
     $('.newWidget').draggable({

demo/column.html

@@ -38,14 +38,11 @@ <h1>column() grid demo</h1>
     var grid = GridStack.init({float: true});
     var text = document.querySelector('#column-text');
 
-    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) {
+    grid.on('added removed change', function(e, items) {
       var str = '';
       items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
-      console.log(type + items.length + ' items.' + str );
-    }
+      console.log(e.type + ' ' + items.length + ' items:' + str );
+    });
 
     var items = [
       /* match karma testing

demo/serialization.html

@@ -28,14 +28,11 @@ <h1>Serialization demo</h1>
   <script type="text/javascript">
     var grid = GridStack.init();
 
-    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) {
+    grid.on('added removed change', function(e, items) {
       var str = '';
       items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
-      console.log(type + items.length + ' items.' + str );
-    }
+      console.log(e.type + ' ' + items.length + ' items:' + str );
+    });
 
     var serializedData = [
       {x: 0, y: 0, width: 2, height: 2},

demo/two.html

@@ -116,14 +116,11 @@ <h1>Two grids demo</h1>
     ];
 
     grids.forEach(function (grid, i) {
-      grid.on('added', function(e, items) { log(i, ' added ', items) });
-      grid.on('removed', function(e, items) { log(i, ' removed ', items) });
-      grid.on('change', function(e, items) { log(i, ' change ', items) });
-      function log(id, type, items) {
+      grid.on('added removed change', function(e, items) {
         var str = '';
         items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
-        console.log('grid' + id + type + items.length + ' items.' + str );
-      }
+        console.log('grid' + i + ' ' + e.type + ' ' + items.length + ' items:' + str );
+      });
 
       grid.batchUpdate();
       items.forEach(function (node) {

doc/CHANGES.md

@@ -35,6 +35,7 @@ Change log
 
 - fix [(1166)](https://github.com/gridstack/gridstack.js/issues/1166) resize not taking margin height into account
 - fix [(1155)](https://github.com/gridstack/gridstack.js/issues/1155) `maxRow` now limit initial item placement if out of bound, preventing broken drag behavior
+- fix [(1171)](https://github.com/gridstack/gridstack.js/issues/1171) added event support to call `grid.on('added removed change', callback)` again even with native events.
 
 ## v1.0.0 (2020-02-23)
 

doc/README.md

@@ -123,8 +123,11 @@ to completely lock the widget.
 
 ## Events
 
-Those are the events set by the grid when items are added/removed or changed - they use standard JS calls with a CustomElement that stores the list
-of nodes that changed (id, x, y, width, height, etc...)
+Those are the events set by the grid when items are added/removed or changed - they use standard JS calls with a CustomElement `detail` that stores the list
+of nodes that changed (id, x, y, width, height, etc...).
+
+You can call it on a single event name, or space separated list:
+`grid.on('added removed change', ...)`
 
 ### added(event, items)
 

spec/e2e/html/1142_change_event_missing.html

@@ -24,14 +24,11 @@
 <script type="text/javascript">
   var grid = GridStack.init({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) {
+  grid.on('added removed change', function(e, items) {
     var str = '';
     items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
-    console.log(type + items.length + ' items.' + str);
-  }
+    console.log(e.type + ' ' + items.length + ' items:' + str );
+  });
 
   $('.grid-stack .grid-stack-item').click(function(e) {
     var item = $(e.currentTarget).closest('.grid-stack-item');

spec/e2e/html/1143_nested_acceptWidget_types.html

@@ -61,14 +61,11 @@
     var grid = GridStack.init({ acceptWidgets: '.otherWidgetType' }, '.grid-stack.outer');
     var gridNest = GridStack.init({ acceptWidgets: '.newWidget' }, '.grid-stack.nested');
 
-    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) {
+    grid.on('added removed change', function(e, items) {
       var str = '';
       items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
-      console.log(type + items.length + ' items.' + str );
-    }
+      console.log(e.type + ' ' + items.length + ' items:' + str );
+    });
 
     $('.newWidget').draggable({
       revert: 'invalid',

spec/e2e/html/events.html

@@ -30,14 +30,11 @@ <h1>Events test</h1>
         + count++ + '</div></div>');
     };
 
-    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) {
+    grid.on('added removed change', function(e, items) {
       var str = '';
-      items.forEach(function(item) { str += ' (x,y,wxh)=' + item.x + ',' + item.y + ' ' + item.width + 'x' + item.height; });
-      console.log(type + items.length + ' items.' + str );
-    }
+      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
+      console.log(e.type + ' ' + items.length + ' items:' + str );
+    });
 
     grid.on('disable', function(event) {
       var grid = event.target;

src/gridstack.d.ts

@@ -24,7 +24,7 @@ interface GridStackHTMLElement extends HTMLElement {
   gridstack: GridStack;
 }
 type GridStackEvent = 'added' | 'change' | 'disable' | 'dragstart' | 'dragstop' | 'dropped' |
-                      'enable' | 'removed' | 'resize' | 'resizestart' | 'gsresizestop';
+                      'enable' | 'removed' | 'resize' | 'resizestart' | 'gsresizestop' | string;
 
 interface GridStack {
   /**
@@ -296,12 +296,14 @@ interface GridStack {
   /**
    * Event handler that extracts our CustomEvent data out automatically for receiving custom
    * notifications (see doc for supported events)
-   * @param name of the event (see possible values)
+   * @param name of the event (see possible values) or list of names space separated
    * @param callback function called with event and optional second/third param
    * (see README documentation for each signature).
    * 
    * @example
    * grid.on('added', function(e, items) { log('added ', items)} );
+   * or
+   * grid.on('added removed change', function(e, items) { log(e.type, items)} );
    * 
    * Note: in some cases it is the same as calling native handler and parsing the event.
    * grid.el.addEventListener('added', function(event) { log('added ', event.detail)} );