web component fixes

adumesny · adumesny · commit e1f5696e7f60 · 2020-12-07T09:33:31.000-08:00
* 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)
diff --git a/demo/index.html b/demo/index.html
@@ -19,8 +19,9 @@ <h1>Demos</h1>
     <li><a href="serialization.html">Serialization</a></li>
     <li><a href="static.html">Static</a></li>
     <li><a href="two.html">Two grids</a></li>
-    <li><a href="vue2js.html">Vue2.js</a></li>
     <li><a href="vue3js.html">Vue3.js</a></li>
+    <li><a href="vue2js.html">Vue2.js</a></li>
+    <li><a href="web-comp.html">Web Component</a></li>
   </ul>
 </body>
 </html>
diff --git a/demo/web-comp.html b/demo/web-comp.html
@@ -0,0 +1,32 @@
+<html>
+<head>
+  <title>Web Component demo</title>
+  <!-- Polyfills only needed for Firefox and Edge. -->
+  <script src="https://unpkg.com/@webcomponents/webcomponentsjs@latest/webcomponents-loader.js"></script>
+  <link rel="stylesheet" href="demo.css"/>
+  <script src="../dist/gridstack-h5.js"></script>
+</head>
+<body>
+  <h1>LitElement Web Component</h1>
+  <script type="module">
+    import {LitElement, html, css} from 'https://unpkg.com/lit-element/lit-element.js?module';
+
+    class MyElement extends LitElement {
+      static get properties() { return {} }
+      render() { return html`<style>:host {display: block;} </style><slot></slot>`; }
+    }
+    customElements.define('my-element', MyElement);
+</script>
+
+<my-element class="grid-stack"></my-element>
+
+<script type="text/javascript">
+  let items = [
+    {x:0, y:0, w:2, content: 'item 0'},
+    {x:0, y:1, content: 'item 1'}
+  ];
+  let grid = GridStack.init();
+  grid.load(items);
+</script>
+</body>
+</html>
diff --git 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
@@ -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
@@ -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
@@ -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) {
