fixed callbacks types

README.md

@@ -63,16 +63,16 @@ Using gridstack.js with jQuery UI
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/gridstack.min.css" />
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/gridstack.all.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/gridstack.all.js"></script>
 ```
 
 * Using CDN (debug):
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/gridstack.css" />
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/gridstack.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/jquery-ui.js"></script>
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/gridstack.jQueryUI.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/gridstack.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/jquery-ui.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/gridstack@0.5.5/dist/gridstack.jQueryUI.js"></script>
 ```
 
 * or local:

demo/advance.html

@@ -53,7 +53,7 @@ <h1>Advanced Demo</h1>
       </div>
     </div>
     <div class="col-sm-12 col-md-10">
-      <div class="grid-stack" id="advanced-grid" data-gs-width="12" data-gs-animate="yes">
+      <div class="grid-stack" id="advanced-grid" data-gs-animate="yes">
         <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
           <div class="grid-stack-item-content">1</div>
         </div>
@@ -105,7 +105,19 @@ <h1>Advanced Demo</h1>
 
   <script type="text/javascript">
     $(function () {
-      $('#advanced-grid').gridstack({
+      var $grid = $('#advanced-grid');
+
+      $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) {
+        if (!items) { return; }
+        var str = '';
+        for (let i=0; i<items.length && items[i]; i++) { str += ' (x,y)=' + items[i].x + ',' + items[i].y; }
+        console.log(type + items.length + ' items.' + str );
+      }
+
+      $grid.gridstack({
         alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
           navigator.userAgent
         ),
@@ -116,6 +128,7 @@ <h1>Advanced Demo</h1>
         removeTimeout: 100,
         acceptWidgets: '.newWidget'
       });
+
       $('.newWidget').draggable({
         revert: 'invalid',
         scroll: false,

demo/responsive.html

@@ -85,11 +85,13 @@ <h1>Responsive grid demo</h1>
         this.grid = $('.grid-stack').data('gridstack');
 
         this.loadGrid = function () {
+          this.grid.batchUpdate();
           this.grid.removeAll();
           var items = GridStackUI.Utils.sort(this.serializedData);
           items.forEach(function (node, i) {
             this.grid.addWidget($('<div><div class="grid-stack-item-content">' + i + '</div></div>'), node);
           }.bind(this));
+          this.grid.commit();
           return false;
         }.bind(this);
 

demo/serialization.html

@@ -27,9 +27,19 @@ <h1>Serialization demo</h1>
 
   <script type="text/javascript">
     $(function () {
-      var options = {
-      };
-      $('.grid-stack').gridstack(options);
+      var $grid = $('.grid-stack');
+
+      $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) {
+        if (!items) { return; }
+        var str = '';
+        for (let i=0; i<items.length && items[i]; i++) { str += ' (x,y)=' + items[i].x + ',' + items[i].y; }
+        console.log(type + items.length + ' items.' + str );
+      }
+
+      $grid.gridstack();
 
       new function () {
         this.serializedData = [
@@ -46,11 +56,13 @@ <h1>Serialization demo</h1>
         this.grid = $('.grid-stack').data('gridstack');
 
         this.loadGrid = function () {
+          this.grid.batchUpdate();
           this.grid.removeAll();
           var items = GridStackUI.Utils.sort(this.serializedData);
           items.forEach(function (node) {
             this.grid.addWidget($('<div><div class="grid-stack-item-content"></div></div>'), node);
           }, this);
+          this.grid.commit();
           return false;
         }.bind(this);
 

demo/two.html

@@ -81,10 +81,9 @@ <h1>Two grids demo</h1>
         <a class="btn btn-primary" id="float2" href="#">float: true</a>
         <div class="grid-stack grid-stack-6" id="grid2">
           </div>
+      </div>
     </div>
   </div>
-</div>
-
 
   <script type="text/javascript">
     $(function () {
@@ -109,12 +108,25 @@ <h1>Two grids demo</h1>
       ];
 
       $('.grid-stack').each(function () {
-        var grid = $(this).data('gridstack');
+        var $grid = $(this);
+        var id = $grid.attr('id');
+        $grid.on('added', function(e, items) { log(id, ' added ', items) });
+        $grid.on('removed', function(e, items) { log(id, ' removed ', items) });
+        $grid.on('change', function(e, items) { log(id, ' change ', items) });
+        function log(id, type, items) {
+          if (!items) { return; }
+          var str = '';
+          for (let i=0; i<items.length && items[i]; i++) { str += ' (x,y)=' + items[i].x + ',' + items[i].y; }
+          console.log(id + type + items.length + ' items.' + str );
+        }
 
+        var grid = $grid.data('gridstack');
+        grid.batchUpdate();
         items.forEach(function (node) {
           grid.addWidget($('<div><div class="grid-stack-item-content">' 
             + (node.text? node.text : '') + '</div></div>'), node);
         });
+        grid.commit();
       });
 
       $('.sidebar .grid-stack-item').draggable({

doc/CHANGES.md

@@ -29,6 +29,9 @@ Change log
 
 - add `float(val)` to set/get the grid float mode [#1088](https://github.com/gridstack/gridstack.js/pull/1088)
 - Allow percentage as a valid unit for height [#1093](https://github.com/gridstack/gridstack.js/pull/1093)
+- fixed callbacks to get either `added, removed, change` or combination if adding a node require also to change its (x,y) for example.
+Also you can now call `batchUpdate()` before calling a bunch of `addWidget()` and get a single event callback (more efficient).
+[#1096](https://github.com/gridstack/gridstack.js/pull/1096)
 
 ## v0.5.5 (2019-11-27)
 

doc/README.md

@@ -250,7 +250,7 @@ grid.addWidget(el, 0, 0, 3, 2, true);
 
 ### batchUpdate()
 
-Initializes batch updates. You will see no changes until `commit` method is called.
+starts batch updates. You will see no changes until `commit()` method is called.
 
 ### cellHeight()
 
@@ -271,7 +271,7 @@ Gets current cell width.
 
 ### commit()
 
-Finishes batch updates. Updates DOM nodes. You must call it after `batchUpdate`.
+Ends batch updates. Updates DOM nodes. You must call it after `batchUpdate()`.
 
 ### destroy([detachGrid])
 
@@ -355,7 +355,7 @@ Parameters:
 ```javascript
 $('.grid-stack').gridstack();
 
-$('.grid-stack').append('<div id="gsi-1" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="2" data-gs-auto-position="1"></div>')
+$('.grid-stack').append('<div id="gsi-1" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="2" data-gs-auto-position="true"></div>')
 var grid = $('.grid-stack').data('gridstack');
 grid.makeWidget('gsi-1');
 ```

spec/e2e/html/column.html

@@ -37,9 +37,11 @@ <h1>setColumn() grid demo</h1>
         {x: 2, y: 0, width: 2, height: 1},
         {x: 5, y: 0, width: 1, height: 1},
       ];
+      self.grid.batchUpdate();
       items.forEach(function (node, i) {
         self.grid.addWidget($('<div><div class="grid-stack-item-content">' + i + '</div></div>'), node);
       });
+      self.grid.batchUpdate();
 
       $('#1column').click(function() { self.grid.setColumn(1); });
       $('#2column').click(function() { self.grid.setColumn(2); });

spec/e2e/html/gridstack-with-height.html

@@ -35,6 +35,7 @@ <h1>gridstack.js tests</h1>
         ];
 
         this.grid = $('.grid-stack').data('gridstack');
+        this.grid.batchUpdate();
         this.grid.removeAll();
         items = GridStackUI.Utils.sort(items);
         var id = 0;
@@ -43,6 +44,7 @@ <h1>gridstack.js tests</h1>
           w.attr('id', 'item-' + (++id));
           this.grid.addWidget(w, node);
         }, this);
+        this.grid.commit();
       };
     });
   </script>

spec/gridstack-spec.js

@@ -979,12 +979,45 @@ describe('gridstack', function() {
     afterEach(function() {
       document.body.removeChild(document.getElementById('gs-cont'));
     });
-    it('should keep all widget options the same (autoPosition off)', function() {
+    it('should autoPosition (missing X,Y)', function() {
       $('.grid-stack').gridstack();
       var grid = $('.grid-stack').data('gridstack');
-      var widget = grid.addWidget(widgetHTML, {x: 8, height: 2, id: 'optionWidget'});
+      var widget = grid.addWidget(widgetHTML, {height: 2, id: 'optionWidget'});
+      var $widget = $(widget);
+      expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8);
+      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-min-width')).toBe(undefined);
+      expect($widget.attr('data-gs-max-width')).toBe(undefined);
+      expect($widget.attr('data-gs-min-height')).toBe(undefined);
+      expect($widget.attr('data-gs-max-height')).toBe(undefined);
+      expect($widget.attr('data-gs-id')).toBe('optionWidget');
+    });
+    it('should autoPosition (missing X)', function() {
+      $('.grid-stack').gridstack();
+      var grid = $('.grid-stack').data('gridstack');
+      var widget = grid.addWidget(widgetHTML, {y: 9, height: 2, id: 'optionWidget'});
+      var $widget = $(widget);
+      expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8);
+      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-min-width')).toBe(undefined);
+      expect($widget.attr('data-gs-max-width')).toBe(undefined);
+      expect($widget.attr('data-gs-min-height')).toBe(undefined);
+      expect($widget.attr('data-gs-max-height')).toBe(undefined);
+      expect($widget.attr('data-gs-id')).toBe('optionWidget');
+    });
+    it('should autoPosition (missing Y)', function() {
+      $('.grid-stack').gridstack();
+      var grid = $('.grid-stack').data('gridstack');
+      var widget = grid.addWidget(widgetHTML, {x: 9, height: 2, id: 'optionWidget'});
       var $widget = $(widget);
       expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8);
+      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);
@@ -994,6 +1027,23 @@ describe('gridstack', function() {
       expect($widget.attr('data-gs-max-height')).toBe(undefined);
       expect($widget.attr('data-gs-id')).toBe('optionWidget');
     });
+    it('should not autoPosition (correct X, missing Y)', function() {
+      $('.grid-stack').gridstack();
+      var grid = $('.grid-stack').data('gridstack');
+      var widget = grid.addWidget(widgetHTML, {x: 8, height: 2, id: 'optionWidget'});
+      var $widget = $(widget);
+      expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8);
+      expect($widget.attr('data-gs-y')).toBe(undefined);
+      expect($widget.attr('data-gs-width')).toBe(undefined);
+      expect(parseInt($widget.attr('data-gs-height'), 10)).toBe(2);
+      expect($widget.attr('data-gs-auto-position')).toBe(undefined);
+      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);
+      expect($widget.attr('data-gs-max-height')).toBe(undefined);
+      expect($widget.attr('data-gs-id')).toBe('optionWidget');
+    });
+
   });
 
   describe('addWidget() with bad string value widget options', function() {

src/gridstack.d.ts

@@ -191,7 +191,7 @@ interface GridStack {
    * @example
    * $('.grid-stack').gridstack();
    * $('.grid-stack').append('<div id="gsi-1" data-gs-x="0" data-gs-y="0" data-gs-width="3" data-gs-height="2"
-   *                     data-gs-auto-position="1"></div>')
+   *                     data-gs-auto-position="true"></div>')
    * var grid = $('.grid-stack').data('gridstack');
    * grid.makeWidget('gsi-1');
    */