Merge pull request #1278 from adumesny/develop

fix 'addWidget' ignores data attributes #1276

Author: adumesny

doc/CHANGES.md

@@ -39,6 +39,7 @@ Change log
 - fix [1195](https://github.com/gridstack/gridstack.js/issues/1195) options broken with ember hash helper - thanks [@btecu](https://github.com/btecu)
 - fix [1250](https://github.com/gridstack/gridstack.js/issues/1250) don't remove item from another grid
 - fix [1261](https://github.com/gridstack/gridstack.js/issues/1261) `init()` clones passed options so second doesn't affect first one
+- fix [1276](https://github.com/gridstack/gridstack.js/issues/1276) `addWidget()` ignores data attributes
 
 ## 1.1.1 (2020-03-17)
 

spec/gridstack-spec.js

@@ -899,14 +899,14 @@ describe('gridstack', function() {
 
   });
 
-  describe('addWidget() with bad string value widget options', function() {
+  describe('addWidget()', function() {
     beforeEach(function() {
       document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
     });
     afterEach(function() {
       document.body.removeChild(document.getElementById('gs-cont'));
     });
-    it('should use default', function() {
+    it('bad string options should use default', function() {
       var grid = GridStack.init();
       var widget = grid.addWidget(widgetHTML, {x: 'foo', y: null, width: 'bar', height: ''});
       var $widget = $(widget);
@@ -915,23 +915,27 @@ describe('gridstack', function() {
       expect(parseInt($widget.attr('data-gs-width'), 10)).toBe(1);
       expect(parseInt($widget.attr('data-gs-height'), 10)).toBe(1);
     });
-  });
-
-  describe('addWidget with null options, ', function() {
-    beforeEach(function() {
-      document.body.insertAdjacentHTML('afterbegin', gridstackHTML);
-    });
-    afterEach(function() {
-      document.body.removeChild(document.getElementById('gs-cont'));
-    });
-    it('should clear x position', function() {
+    it('null options should clear x position', function() {
       var grid = GridStack.init({float: true});
       var widgetHTML = '<div class="grid-stack-item" data-gs-x="9"><div class="grid-stack-item-content"></div></div>';
       var widget = grid.addWidget(widgetHTML, null, null, undefined);
       var $widget = $(widget);
       expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8);
       expect(parseInt($widget.attr('data-gs-y'), 10)).toBe(0);
     });
+    it('width attr should be retained', function() { // #1276
+      var grid = GridStack.init({float: true});
+      var widgetHTML = '<div class="grid-stack-item" data-gs-width="3" data-gs-max-width="4" data-gs-id="foo"><div class="grid-stack-item-content"></div></div>';
+      var widget = grid.addWidget(widgetHTML, 1, 5);
+      var $widget = $(widget);
+      expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(1);
+      expect(parseInt($widget.attr('data-gs-y'), 10)).toBe(5);
+      expect(parseInt($widget.attr('data-gs-width'), 10)).toBe(3);
+      expect(parseInt($widget.attr('data-gs-max-width'), 10)).toBe(4);
+      expect(parseInt($widget.attr('data-gs-height'), 10)).toBe(1);
+      expect($widget.attr('data-gs-id')).toBe('foo');
+    });
+
   });
 
   describe('method float()', function() {

src/gridstack.js

@@ -1425,8 +1425,8 @@
 
   /** call to write any default attributes back to element */
   GridStack.prototype._writeAttr = function(el, node) {
+    if (!node) { return; }
     el = $(el);
-    node = node || {};
     // Note: passing null removes the attr in jquery
     if (node.x !== undefined) { el.attr('data-gs-x', node.x); }
     if (node.y !== undefined) { el.attr('data-gs-y', node.y); }
@@ -1444,7 +1444,7 @@
     if (node.id !== undefined) { el.attr('data-gs-id', node.id); }
   };
 
-  /** call to write any default attributes back to element */
+  /** call to read any default attributes back to element */
   GridStack.prototype._readAttr = function(el, node) {
     el = $(el);
     node = node || {};
@@ -1488,6 +1488,9 @@
 
     el = $(el);
     if (opt) { // see knockout above
+      // make sure we load any DOM attributes that are not specified in passed in options (which override)
+      domAttr = this._readAttr(el);
+      Utils.defaults(opt, domAttr);
       this.engine._prepareNode(opt);
     }
     this._writeAttr(el, opt);