Merge pull request #1 from gridstack/develop

Fastforward my repo

Author: ferretwithaberet

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

@@ -111,19 +111,16 @@ <h1>Two grids demo</h1>
       {x: 0, y: 0, width: 2, height: 2},
       {x: 3, y: 1, width: 1, height: 2},
       {x: 4, y: 1, width: 1, height: 1},
-      {x: 2, y: 3, width: 3, height: 1, minWidth: 2, id: 'special', text: 'has minWidth=2'},
+      {x: 2, y: 3, width: 3, height: 1, maxWidth: 3, id: 'special', text: 'has maxWidth=3'},
       {x: 2, y: 5, width: 1, height: 1}
     ];
 
     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

@@ -33,7 +33,9 @@ Change log
 
 ## 1.0.0-dev (upcoming)
 
--- fix [(1166)](https://github.com/gridstack/gridstack.js/issues/1166) resize not taking margin height into account
+- 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;

spec/gridstack-spec.js

@@ -828,7 +828,7 @@ describe('gridstack', function() {
       expect(parseInt($widget.attr('data-gs-y'), 10)).toBe(0);
       expect(parseInt($widget.attr('data-gs-width'), 10)).toBe(1);
       expect(parseInt($widget.attr('data-gs-height'), 10)).toBe(2);
-      expect($widget.attr('data-gs-auto-position')).toBe(undefined);
+      expect($widget.attr('data-gs-auto-position')).toBe('true');
       expect($widget.attr('data-gs-min-width')).toBe(undefined);
       expect($widget.attr('data-gs-max-width')).toBe(undefined);
       expect($widget.attr('data-gs-min-height')).toBe(undefined);
@@ -843,7 +843,7 @@ describe('gridstack', function() {
       expect(parseInt($widget.attr('data-gs-y'), 10)).toBe(0);
       expect(parseInt($widget.attr('data-gs-width'), 10)).toBe(1);
       expect(parseInt($widget.attr('data-gs-height'), 10)).toBe(2);
-      expect($widget.attr('data-gs-auto-position')).toBe(undefined);
+      expect($widget.attr('data-gs-auto-position')).toBe('true');
       expect($widget.attr('data-gs-min-width')).toBe(undefined);
       expect($widget.attr('data-gs-max-width')).toBe(undefined);
       expect($widget.attr('data-gs-min-height')).toBe(undefined);
@@ -858,7 +858,7 @@ describe('gridstack', function() {
       expect(parseInt($widget.attr('data-gs-y'), 10)).toBe(0);
       expect(parseInt($widget.attr('data-gs-width'), 10)).toBe(1);
       expect(parseInt($widget.attr('data-gs-height'), 10)).toBe(2);
-      expect($widget.attr('data-gs-auto-position')).toBe(undefined);
+      expect($widget.attr('data-gs-auto-position')).toBe('true');
       expect($widget.attr('data-gs-min-width')).toBe(undefined);
       expect($widget.attr('data-gs-max-width')).toBe(undefined);
       expect($widget.attr('data-gs-min-height')).toBe(undefined);
@@ -873,7 +873,7 @@ describe('gridstack', function() {
       expect(parseInt($widget.attr('data-gs-y'), 10)).toBe(0);
       expect(parseInt($widget.attr('data-gs-width'), 10)).toBe(1);
       expect(parseInt($widget.attr('data-gs-height'), 10)).toBe(2);
-      expect($widget.attr('data-gs-auto-position')).toBe(undefined);
+      expect($widget.attr('data-gs-auto-position')).toBe('true');
       expect($widget.attr('data-gs-min-width')).toBe(undefined);
       expect($widget.attr('data-gs-max-width')).toBe(undefined);
       expect($widget.attr('data-gs-min-height')).toBe(undefined);
@@ -888,7 +888,7 @@ describe('gridstack', function() {
       expect(parseInt($widget.attr('data-gs-y'), 10)).toBe(0);
       expect(parseInt($widget.attr('data-gs-width'), 10)).toBe(1);
       expect(parseInt($widget.attr('data-gs-height'), 10)).toBe(1);
-      expect($widget.attr('data-gs-auto-position')).toBe(undefined);
+      expect($widget.attr('data-gs-auto-position')).toBe('true');
       expect($widget.attr('data-gs-min-width')).toBe(undefined);
       expect($widget.attr('data-gs-max-width')).toBe(undefined);
       expect($widget.attr('data-gs-min-height')).toBe(undefined);
@@ -1032,24 +1032,16 @@ describe('gridstack', function() {
     afterEach(function() {
       document.body.removeChild(document.getElementById('gs-cont'));
     });
-    it('should do nothing and return node', function() {
-      var options = {
-        cellHeight: 80,
-        verticalMargin: 10
-      };
-      var grid = GridStack.init(options);
+    it('should do nothing and return NULL to mean nothing happened', function() {
+      var grid = GridStack.init();
       var items = $('.grid-stack-item');
       grid._updateElement(items[0], function(el, node) {
-        var newNode = grid.engine.moveNode(node);
-        expect(newNode).toBe(node);
+        var hasMoved = grid.engine.moveNode(node);
+        expect(hasMoved).toBe(null);
       });
     });
     it('should do nothing and return node', function() {
-      var options = {
-        cellHeight: 80,
-        verticalMargin: 10
-      };
-      var grid = GridStack.init(options);
+      var grid = GridStack.init();
       var items = $('.grid-stack-item');
       grid.minWidth(items[0], 1);
       grid.maxWidth(items[0], 2);