Skip to content

Commit 1d3b40c

Browse files
hbcarloshbcarlos
committed
Merge branch 'develop' of https://github.com/gridstack/gridstack.js into develop
2 parents 565b31a + 7014975 commit 1d3b40c

25 files changed

+76
-32
lines changed

‎demo/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,9 @@ <h1>Demos</h1>
1919
<li><a href="serialization.html">Serialization</a></li>
2020
<li><a href="static.html">Static</a></li>
2121
<li><a href="two.html">Two grids</a></li>
22-
<li><a href="vue2js.html">Vue2.js</a></li>
2322
<li><a href="vue3js.html">Vue3.js</a></li>
23+
<li><a href="vue2js.html">Vue2.js</a></li>
24+
<li><a href="web-comp.html">Web Component</a></li>
2425
</ul>
2526
</body>
2627
</html>

‎demo/web-comp.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<html>
2+
<head>
3+
<title>Web Component demo</title>
4+
<!-- Polyfills only needed for Firefox and Edge. -->
5+
<script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
6+
<link rel="stylesheet" href="demo.css"/>
7+
<script src="../dist/gridstack-h5.js"></script>
8+
</head>
9+
<body>
10+
<h1>LitElement Web Component</h1>
11+
<script type="module">
12+
import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
13+
14+
class MyElement extends LitElement {
15+
static get properties() { return {} }
16+
render() { return html`<style>:host {display: block;} </style><slot></slot>`; }
17+
}
18+
customElements.define('my-element', MyElement);
19+
</script>
20+
21+
<my-element class="grid-stack"></my-element>
22+
23+
<script type="text/javascript">
24+
let items = [
25+
{x:0, y:0, w:2, content: 'item 0'},
26+
{x:0, y:1, content: 'item 1'}
27+
];
28+
let grid = GridStack.init();
29+
grid.load(items);
30+
</script>
31+
</body>
32+
</html>

‎doc/CHANGES.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Change log
55
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
66
**Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)*
77

8-
- [3.1.0-dev](#310-dev)
8+
- [3.1.2 (2020-12-7)](#311-2020-12-7)
99
- [3.1.0 (2020-12-4)](#310-2020-12-4)
1010
- [3.0.0 (2020-11-29)](#300-2020-11-29)
1111
- [2.2.0 (2020-11-7)](#220-2020-11-7)
@@ -43,7 +43,7 @@ Change log
4343

4444
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
4545

46-
## 3.1.0-dev
46+
## 3.1.2 (2020-12-7)
4747

4848
- fix [1419](https://github.com/gridstack/gridstack.js/issues/1419) dragging into a fixed row grid works better (check if it will fit, else try to append, else won't insert)
4949
-- **possible BREAK** (unlikely you use engine directly)
@@ -53,6 +53,7 @@ Change log
5353
- fix [1330](https://github.com/gridstack/gridstack.js/issues/1330) `maxW` does not work as intended with resizable handle `"w"`
5454
- fix [1472](https://github.com/gridstack/gridstack.js/issues/1472) support all options for new dragged in widgets (read all `gs-xyz` attributes)
5555
- fix [1511](https://github.com/gridstack/gridstack.js/issues/1511) dragging any grid item content works
56+
- fix [1438](https://github.com/gridstack/gridstack.js/issues/1438) web-component fixes & grid with 0 size initially.
5657

5758
## 3.1.0 (2020-12-4)
5859

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "gridstack",
3-
"version": "3.1.0-dev",
3+
"version": "3.1.2",
44
"description": "TypeScript/Javascript lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)",
55
"main": "./dist/gridstack.js",
66
"types": "./dist/gridstack.d.ts",

‎src/gridstack-dd.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// gridstack-GridStackDD.get().ts 3.1.0-dev @preserve
1+
// gridstack-GridStackDD.get().ts 3.1.2 @preserve
22

33
/**
44
* https://gridstackjs.com/

‎src/gridstack-ddi.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// gridstack-ddi.ts 3.1.0-dev @preserve
1+
// gridstack-ddi.ts 3.1.2 @preserve
22

33
/**
44
* https://gridstackjs.com/

‎src/gridstack-engine.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// gridstack-engine.ts 3.1.0-dev @preserve
1+
// gridstack-engine.ts 3.1.2 @preserve
22

33
/**
44
* https://gridstackjs.com/

‎src/gridstack-extra.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* gridstack 2.0.0 extra CSS for [2-11] columns (non default)
2+
* gridstack 3.1.2 extra CSS for [2-11] columns (non default)
33
* https://gridstackjs.com/
44
* (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
55
* gridstack.js may be freely distributed under the MIT license.

‎src/gridstack.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* gridstack 2.1.0 required CSS for default 12 and 1 column Mode size. Use gridstack-extra.css for column [2-11], else see https://github.com/gridstack/gridstack.js#custom-columns-css
2+
* gridstack 3.1.2 required CSS for default 12 and 1 column Mode size. Use gridstack-extra.css for column [2-11], else see https://github.com/gridstack/gridstack.js#custom-columns-css
33
* https://gridstackjs.com/
44
* (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov
55
* gridstack.js may be freely distributed under the MIT license.

‎src/gridstack.ts‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// gridstack.ts 3.1.0-dev @preserve
1+
// gridstack.ts 3.1.2 @preserve
22

33
/**
44
* https://gridstackjs.com/
@@ -210,6 +210,8 @@ export class GridStack {
210210
private _isAutoCellHeight: boolean;
211211
/** @internal track event binding to window resize so we can remove */
212212
private _windowResizeBind: () => GridStack;
213+
/** @internal true when loading items to insert first rather than append */
214+
private _insertNotAppend: boolean;
213215

214216
/**
215217
* Construct a grid item from the given element and options
@@ -289,7 +291,6 @@ export class GridStack {
289291
this.el.classList.add(this.opts._styleSheetClass);
290292

291293
this._setStaticClass();
292-
this._updateStyles();
293294

294295
this.engine = new GridStackEngine({
295296
column: this.opts.column,
@@ -334,7 +335,7 @@ export class GridStack {
334335
this.placeholder.classList.add(this.opts.placeholderClass, defaults.itemClass, this.opts.itemClass);
335336
this.placeholder.appendChild(placeholderChild);
336337

337-
this._updateContainerHeight();
338+
this._updateStyles();
338339

339340
this._setupDragIn();
340341
this._setupRemoveDrop();
@@ -397,7 +398,11 @@ export class GridStack {
397398
this.engine.prepareNode(options);
398399
this._writeAttr(el, options);
399400

400-
this.el.appendChild(el);
401+
if (this._insertNotAppend) {
402+
this.el.prepend(el);
403+
} else {
404+
this.el.appendChild(el);
405+
}
401406

402407
// similar to makeWidget() that doesn't read attr again and worse re-create a new node and loose any _id
403408
this._prepareElement(el, true, options);
@@ -467,6 +472,7 @@ export class GridStack {
467472
**/
468473
public load(layout: GridStackWidget[], addAndRemove: boolean | ((g: GridStack, w: GridStackWidget, add: boolean) => GridItemHTMLElement) = true): GridStack {
469474
let items = GridStack.Utils.sort(layout, -1, this._prevColumn || this.opts.column);
475+
this._insertNotAppend = true; // since create in reverse order...
470476

471477
// if we're loading a layout into 1 column (_prevColumn is set only when going to 1) and items don't fit, make sure to save
472478
// the original wanted layout so we can scale back up correctly #1471
@@ -503,6 +509,7 @@ export class GridStack {
503509
let sub = item.el.querySelector('.grid-stack') as GridHTMLElement;
504510
if (sub && sub.gridstack) {
505511
sub.gridstack.load((w.subGrid as GridStackOptions).children); // TODO: support updating grid options ?
512+
this._insertNotAppend = true; // got reset by above call
506513
}
507514
}
508515
} else if (addAndRemove) {
@@ -523,7 +530,7 @@ export class GridStack {
523530

524531
// after commit, clear that flag
525532
delete this._ignoreLayoutsNodeChange;
526-
533+
delete this._insertNotAppend;
527534
return this;
528535
}
529536

@@ -580,7 +587,8 @@ export class GridStack {
580587
* Gets current cell width.
581588
*/
582589
public cellWidth(): number {
583-
return this.el.offsetWidth / this.opts.column;
590+
// use parent width if we're 0 (no size yet)
591+
return (this.el.offsetWidth || this.el.parentElement.offsetWidth || window.innerWidth) / this.opts.column;
584592
}
585593

586594
/**
@@ -1163,7 +1171,9 @@ export class GridStack {
11631171
}
11641172

11651173
this._updateContainerHeight();
1166-
if (!this.opts.cellHeight) { // The rest will be handled by CSS TODO: I don't understand this usage
1174+
1175+
// if user is telling us they will handle the CSS themselves by setting heights to 0. Do we need this opts really ??
1176+
if (this.opts.cellHeight === 0) {
11671177
return this;
11681178
}
11691179

@@ -1355,7 +1365,7 @@ export class GridStack {
13551365
* and remember the prev columns we used, as well as check for auto cell height (square)
13561366
*/
13571367
public onParentResize(): GridStack {
1358-
if (!this.el) {return} // return if we're gone
1368+
if (!this.el || !this.el.clientWidth) return; // return if we're gone or no size yet (will get called again)
13591369

13601370
// make the cells content (minus margin) square again
13611371
if (this._isAutoCellHeight) {

0 commit comments

Comments
 (0)