Merge pull request #1 from gridstack/develop

ferretwithaberet · web-flow · commit b54d6c9c2201 · 2020-02-28T10:33:09.000+02:00
Fastforward my repo
diff --git a/demo/advance.html b/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({
diff --git a/demo/column.html b/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
diff --git a/demo/serialization.html b/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},
diff --git a/demo/two.html b/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) {
diff --git a/doc/CHANGES.md b/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)
 
diff --git a/doc/README.md b/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)
 
diff --git a/spec/e2e/html/1142_change_event_missing.html b/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');
diff --git a/spec/e2e/html/1143_nested_acceptWidget_types.html b/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',
diff --git a/spec/e2e/html/events.html b/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;
diff --git a/spec/gridstack-spec.js b/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);
diff --git a/src/gridstack.d.ts b/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)} );
