diff --git a/README.md b/README.md
index 75abcd9de..0a92c90ed 100644
--- a/README.md
+++ b/README.md
@@ -80,8 +80,8 @@ npm install --save gridstack
* Using CDN (minimized):
```html
-
-
+
+
```
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
-
+
...
```
diff --git a/doc/CHANGES.md b/doc/CHANGES.md
index 69a2a11e0..0f0d6f710 100644
--- a/doc/CHANGES.md
+++ b/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)
diff --git a/spec/gridstack-spec.ts b/spec/gridstack-spec.ts
index cccfe77e4..6d9f85d90 100644
--- a/spec/gridstack-spec.ts
+++ b/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,16 +901,7 @@ 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 = '
';
let widget = grid.addWidget(widgetHTML, {x:null, y:null, width:undefined});
@@ -918,7 +909,18 @@ describe('gridstack', function() {
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 = '
';
+ 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() {
diff --git a/src/gridstack.ts b/src/gridstack.ts
index c4171ba03..2ae8f0d2e 100644
--- a/src/gridstack.ts
+++ b/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'));