From 7fbbb9c30e434e02a8eb8651867cd3025d566571 Mon Sep 17 00:00:00 2001
From: Alain Dumesny <alaind831+github@gmail.com>
Date: Sun, 17 May 2020 14:55:48 -0700
Subject: [PATCH] fix 'addWidget' ignores data attributes #1276

---
 doc/CHANGES.md         |  1 +
 spec/gridstack-spec.js | 28 ++++++++++++++++------------
 src/gridstack.js       |  7 +++++--
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 887f5ad9e..8f228904c 100644
--- a/doc/CHANGES.md
+++ b/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)
 
diff --git a/spec/gridstack-spec.js b/spec/gridstack-spec.js
index 9040f6839..c3c2deab2 100644
--- a/spec/gridstack-spec.js
+++ b/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,16 +915,7 @@ 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);
@@ -932,6 +923,19 @@ describe('gridstack', function() {
       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() {
diff --git a/src/gridstack.js b/src/gridstack.js
index 18ebbcd84..94555a886 100644
--- a/src/gridstack.js
+++ b/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);