From e1f5696e7f6091a3f9b33eba54de530cfa466ef4 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Mon, 7 Dec 2020 09:33:31 -0800 Subject: [PATCH] web component fixes * fix #1438 * make sure we handle grid size 0 when initializing things, or we don' create CSS and bad things happen. Also avoid oneColumnMode when no size. * added webcomponent example (more for debugging than anything) --- demo/index.html | 3 ++- demo/web-comp.html | 32 ++++++++++++++++++++++++++++++++ doc/CHANGES.md | 1 + src/gridstack-extra.scss | 2 +- src/gridstack.scss | 2 +- src/gridstack.ts | 12 +++++++----- 6 files changed, 44 insertions(+), 8 deletions(-) create mode 100644 demo/web-comp.html diff --git a/demo/index.html b/demo/index.html index d80570be9..a47b5fa53 100644 --- a/demo/index.html +++ b/demo/index.html @@ -19,8 +19,9 @@

Demos

diff --git a/demo/web-comp.html b/demo/web-comp.html new file mode 100644 index 000000000..328c45108 --- /dev/null +++ b/demo/web-comp.html @@ -0,0 +1,32 @@ + + + Codestin Search App + + + + + + +

LitElement Web Component

+ + + + + + + \ No newline at end of file diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 9ba2a047c..d27f55abe 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -53,6 +53,7 @@ Change log - fix [1330](https://github.com/gridstack/gridstack.js/issues/1330) `maxW` does not work as intended with resizable handle `"w"` - fix [1472](https://github.com/gridstack/gridstack.js/issues/1472) support all options for new dragged in widgets (read all `gs-xyz` attributes) - fix [1511](https://github.com/gridstack/gridstack.js/issues/1511) dragging any grid item content works +- fix [1438](https://github.com/gridstack/gridstack.js/issues/1438) web-component fixes & grid with 0 size initially. ## 3.1.0 (2020-12-4) diff --git a/src/gridstack-extra.scss b/src/gridstack-extra.scss index eee82235a..4b0c2ca66 100644 --- a/src/gridstack-extra.scss +++ b/src/gridstack-extra.scss @@ -1,5 +1,5 @@ /*! - * gridstack 2.0.0 extra CSS for [2-11] columns (non default) + * gridstack 3.1.0-dev extra CSS for [2-11] columns (non default) * https://gridstackjs.com/ * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov * gridstack.js may be freely distributed under the MIT license. diff --git a/src/gridstack.scss b/src/gridstack.scss index 59902a8db..df7bf73c4 100644 --- a/src/gridstack.scss +++ b/src/gridstack.scss @@ -1,5 +1,5 @@ /*! - * 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 + * gridstack 3.1.0-dev 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 * https://gridstackjs.com/ * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov * gridstack.js may be freely distributed under the MIT license. diff --git a/src/gridstack.ts b/src/gridstack.ts index 0bb768eb8..3c85fd5e5 100644 --- a/src/gridstack.ts +++ b/src/gridstack.ts @@ -291,7 +291,6 @@ export class GridStack { this.el.classList.add(this.opts._styleSheetClass); this._setStaticClass(); - this._updateStyles(); this.engine = new GridStackEngine({ column: this.opts.column, @@ -336,7 +335,7 @@ export class GridStack { this.placeholder.classList.add(this.opts.placeholderClass, defaults.itemClass, this.opts.itemClass); this.placeholder.appendChild(placeholderChild); - this._updateContainerHeight(); + this._updateStyles(); this._setupDragIn(); this._setupRemoveDrop(); @@ -588,7 +587,8 @@ export class GridStack { * Gets current cell width. */ public cellWidth(): number { - return this.el.offsetWidth / this.opts.column; + // use parent width if we're 0 (no size yet) + return (this.el.offsetWidth || this.el.parentElement.offsetWidth || window.innerWidth) / this.opts.column; } /** @@ -1171,7 +1171,9 @@ export class GridStack { } this._updateContainerHeight(); - if (!this.opts.cellHeight) { // The rest will be handled by CSS TODO: I don't understand this usage + + // if user is telling us they will handle the CSS themselves by setting heights to 0. Do we need this opts really ?? + if (this.opts.cellHeight === 0) { return this; } @@ -1363,7 +1365,7 @@ export class GridStack { * and remember the prev columns we used, as well as check for auto cell height (square) */ public onParentResize(): GridStack { - if (!this.el) {return} // return if we're gone + if (!this.el || !this.el.clientWidth) return; // return if we're gone or no size yet (will get called again) // make the cells content (minus margin) square again if (this._isAutoCellHeight) {