Merge pull request #1280 from adumesny/typescript

TS: fix 'addWidget' ignores data attributes #1276, 1.1.2 release

Author: adumesny

README.md

@@ -80,8 +80,8 @@ npm install --save gridstack
 * Using CDN (minimized):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].1/dist/gridstack.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/[email protected].1/dist/gridstack.all.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].2/dist/gridstack.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/gridstack.all.js"></script>
 ```
 
 if you need to debug, look at the git demo/ examples for non min includes.
@@ -164,7 +164,7 @@ GridStack.init( {column: N} );
 
 2) include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly.
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].1/dist/gridstack-extra.css"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected].2/dist/gridstack-extra.css"/>
 
 <div class="grid-stack grid-stack-N">...</div>
 ```

doc/CHANGES.md

@@ -6,7 +6,7 @@ Change log
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
 - [2.0.0-dev (upcoming)](#200-dev-upcoming)
-- [1.1.1-dev (upcoming)](#111-dev-upcoming)
+- [1.1.2 (2020-05-17)](#112-2020-05-17)
 - [1.1.1 (2020-03-17)](#111-2020-03-17)
 - [1.1.0 (2020-02-29)](#110-2020-02-29)
 - [v1.0.0 (2020-02-23)](#v100-2020-02-23)
@@ -36,14 +36,16 @@ Change log
 
 ## 2.0.0-dev (upcoming)
 
+- re-write to native Typescript, removing all JQuery from main code and API (drag&drop plugin still using for now)
 - add `getGridItems()` to return list of HTML grid items
 
-## 1.1.1-dev (upcoming)
+## 1.1.2 (2020-05-17)
 
 - fix [1229](https://github.com/gridstack/gridstack.js/issues/1229) `staticGrid` no longer disable oneColumnMode
 - 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.ts

@@ -885,14 +885,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() {
       let grid = GridStack.init();
       let widget = grid.addWidget(widgetHTML, {x: 'foo', y: null, width: 'bar', height: ''} as any);
 
@@ -901,24 +901,26 @@ describe('gridstack', function() {
       expect(parseInt(widget.getAttribute('data-gs-width'), 10)).toBe(1);
       expect(parseInt(widget.getAttribute('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() {
       let grid = GridStack.init({float: true});
       let widgetHTML = '<div class="grid-stack-item" data-gs-x="9"><div class="grid-stack-item-content"></div></div>';
       let widget = grid.addWidget(widgetHTML, {x:null, y:null, width:undefined});
 
       expect(parseInt(widget.getAttribute('data-gs-x'), 10)).toBe(8);
       expect(parseInt(widget.getAttribute('data-gs-y'), 10)).toBe(0);
     });
-  });
+    it('width attr should be retained', function() { // #1276
+      let grid = GridStack.init({float: true});
+      let 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>';
+      let widget = grid.addWidget(widgetHTML, {x: 1, y: 5});
+      expect(parseInt(widget.getAttribute('data-gs-x'), 10)).toBe(1);
+      expect(parseInt(widget.getAttribute('data-gs-y'), 10)).toBe(5);
+      expect(parseInt(widget.getAttribute('data-gs-width'), 10)).toBe(3);
+      expect(parseInt(widget.getAttribute('data-gs-max-width'), 10)).toBe(4);
+      expect(parseInt(widget.getAttribute('data-gs-height'), 10)).toBe(1);
+      expect(widget.getAttribute('data-gs-id')).toBe('foo');
+    });
+});
 
   describe('method getFloat()', function() {
     beforeEach(function() {

src/gridstack.ts

@@ -323,6 +323,10 @@ export class GridStack {
     // Tempting to initialize the passed in opt with default and valid values, but this break knockout demos
     // as the actual value are filled in when _prepareElement() calls el.getAttribute('data-gs-xyz) before adding the node.
     if (options) {
+      // make sure we load any DOM attributes that are not specified in passed in options (which override)
+      let domAttr = this._readAttr(el);
+      Utils.defaults(options, domAttr);
+      this.engine.prepareNode(options);
       this._writeAttr(el, options);
     }
 
@@ -1405,7 +1409,7 @@ export class GridStack {
     return this;
   }
 
-  /** @internal call to write any default attributes back to element */
+  /** @internal call to read any default attributes from element */
   private _readAttr(el: HTMLElement, node: GridStackNode = {}): GridstackWidget {
     node.x = Utils.toNumber(el.getAttribute('data-gs-x'));
     node.y = Utils.toNumber(el.getAttribute('data-gs-y'));