Merge branch 'develop' of https://github.com/gridstack/gridstack.js into develop

hbcarlos · hbcarlos · commit 1d3b40c88aea · 2020-12-09T14:24:19.000+01:00
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
@@ -5,7 +5,7 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
-- [3.1.0-dev](#310-dev)
+- [3.1.2 (2020-12-7)](#311-2020-12-7)
 - [3.1.0 (2020-12-4)](#310-2020-12-4)
 - [3.0.0 (2020-11-29)](#300-2020-11-29)
 - [2.2.0 (2020-11-7)](#220-2020-11-7)
@@ -43,7 +43,7 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## 3.1.0-dev
+## 3.1.2 (2020-12-7)
 
 - 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)
 -- **possible BREAK** (unlikely you use engine directly)
@@ -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/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gridstack",
-  "version": "3.1.0-dev",
+  "version": "3.1.2",
   "description": "TypeScript/Javascript lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)",
   "main": "./dist/gridstack.js",
   "types": "./dist/gridstack.d.ts",
diff --git a/src/gridstack-dd.ts b/src/gridstack-dd.ts
@@ -1,4 +1,4 @@
-// gridstack-GridStackDD.get().ts 3.1.0-dev @preserve
+// gridstack-GridStackDD.get().ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/gridstack-ddi.ts b/src/gridstack-ddi.ts
@@ -1,4 +1,4 @@
-// gridstack-ddi.ts 3.1.0-dev @preserve
+// gridstack-ddi.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/gridstack-engine.ts b/src/gridstack-engine.ts
@@ -1,4 +1,4 @@
-// gridstack-engine.ts 3.1.0-dev @preserve
+// gridstack-engine.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
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.2 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.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
  * 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
@@ -1,4 +1,4 @@
-// gridstack.ts 3.1.0-dev @preserve
+// gridstack.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
@@ -210,6 +210,8 @@ export class GridStack {
   private _isAutoCellHeight: boolean;
   /** @internal track event binding to window resize so we can remove */
   private _windowResizeBind: () => GridStack;
+  /** @internal true when loading items to insert first rather than append */
+  private _insertNotAppend: boolean;
 
   /**
    * Construct a grid item from the given element and options
@@ -289,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,
@@ -334,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();
@@ -397,7 +398,11 @@ export class GridStack {
     this.engine.prepareNode(options);
     this._writeAttr(el, options);
 
-    this.el.appendChild(el);
+    if (this._insertNotAppend) {
+      this.el.prepend(el);
+    } else {
+      this.el.appendChild(el);
+    }
 
     // similar to makeWidget() that doesn't read attr again and worse re-create a new node and loose any _id
     this._prepareElement(el, true, options);
@@ -467,6 +472,7 @@ export class GridStack {
    **/
   public load(layout: GridStackWidget[], addAndRemove: boolean | ((g: GridStack, w: GridStackWidget, add: boolean) => GridItemHTMLElement)  = true): GridStack {
     let items = GridStack.Utils.sort(layout, -1, this._prevColumn || this.opts.column);
+    this._insertNotAppend = true; // since create in reverse order...
 
     // 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
     // the original wanted layout so we can scale back up correctly #1471
@@ -503,6 +509,7 @@ export class GridStack {
           let sub = item.el.querySelector('.grid-stack') as GridHTMLElement;
           if (sub && sub.gridstack) {
             sub.gridstack.load((w.subGrid as GridStackOptions).children); // TODO: support updating grid options ?
+            this._insertNotAppend = true; // got reset by above call
           }
         }
       } else if (addAndRemove) {
@@ -523,7 +530,7 @@ export class GridStack {
 
     // after commit, clear that flag
     delete this._ignoreLayoutsNodeChange;
-
+    delete this._insertNotAppend;
     return this;
   }
 
@@ -580,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;
   }
 
   /**
@@ -1163,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;
     }
 
@@ -1355,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) {
diff --git a/src/h5/dd-base-impl.ts b/src/h5/dd-base-impl.ts
@@ -1,4 +1,4 @@
-// dd-base-impl.ts 3.1.0-dev @preserve
+// dd-base-impl.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/h5/dd-draggable.ts b/src/h5/dd-draggable.ts
@@ -1,4 +1,4 @@
-// dd-draggable.ts 3.1.0-dev @preserve
+// dd-draggable.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/h5/dd-droppable.ts b/src/h5/dd-droppable.ts
@@ -1,4 +1,4 @@
-// dd-droppable.ts 3.1.0-dev @preserve
+// dd-droppable.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/h5/dd-element.ts b/src/h5/dd-element.ts
@@ -1,4 +1,4 @@
-// dd-elements.ts 3.1.0-dev @preserve
+// dd-elements.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/h5/dd-manager.ts b/src/h5/dd-manager.ts
@@ -1,4 +1,4 @@
-// dd-manager.ts 3.1.0-dev @preserve
+// dd-manager.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/h5/dd-resizable-handle.ts b/src/h5/dd-resizable-handle.ts
@@ -1,4 +1,4 @@
-// dd-resizable-handle.ts 3.1.0-dev @preserve
+// dd-resizable-handle.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/h5/dd-resizable.ts b/src/h5/dd-resizable.ts
@@ -1,4 +1,4 @@
-// dd-resizable.ts 3.1.0-dev @preserve
+// dd-resizable.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/h5/dd-utils.ts b/src/h5/dd-utils.ts
@@ -1,4 +1,4 @@
-// dd-utils.ts 3.1.0-dev @preserve
+// dd-utils.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/h5/gridstack-dd-native.ts b/src/h5/gridstack-dd-native.ts
@@ -1,4 +1,4 @@
-// gridstack-dd-native.ts 3.1.0-dev @preserve
+// gridstack-dd-native.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/index-h5.ts b/src/index-h5.ts
@@ -1,4 +1,4 @@
-// index.html5.ts 3.1.0-dev - everything you need for a Grid that uses HTML5 native drag&drop (work in progress) @preserve
+// index.html5.ts 3.1.2 - everything you need for a Grid that uses HTML5 native drag&drop (work in progress) @preserve
 
 // import './gridstack-poly.js';
 
diff --git a/src/index-jq.ts b/src/index-jq.ts
@@ -1,4 +1,4 @@
-// index.jq.ts 3.1.0-dev - everything you need for a Grid that uses Jquery-ui drag&drop (original, full feature) @preserve
+// index.jq.ts 3.1.2 - everything you need for a Grid that uses Jquery-ui drag&drop (original, full feature) @preserve
 
 // import './gridstack-poly.js';
 
diff --git a/src/index-static.ts b/src/index-static.ts
@@ -1,4 +1,4 @@
-// index.static.ts 3.1.0-dev - everything you need for a static Grid (non draggable) @preserve
+// index.static.ts 3.1.2 - everything you need for a static Grid (non draggable) @preserve
 
 // import './gridstack-poly.js';
 
diff --git a/src/jq/gridstack-dd-jqueryui.ts b/src/jq/gridstack-dd-jqueryui.ts
@@ -1,4 +1,4 @@
-// gridstack-dd-jqueryui.ts 3.1.0-dev @preserve
+// gridstack-dd-jqueryui.ts 3.1.2 @preserve
 
 /** JQuery UI Drag&Drop plugin
  * https://gridstackjs.com/
diff --git a/src/types.ts b/src/types.ts
@@ -1,4 +1,4 @@
-// types.ts 3.1.0-dev @preserve
+// types.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/
diff --git a/src/utils.ts b/src/utils.ts
@@ -1,4 +1,4 @@
-// utils.ts 3.1.0-dev @preserve
+// utils.ts 3.1.2 @preserve
 
 /**
  * https://gridstackjs.com/

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "gridstack",`
`3`		`- "version": "3.1.0-dev",`
	`3`	`+ "version": "3.1.2",`
`4`	`4`	`"description": "TypeScript/Javascript lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Ember, knockout...)",`
`5`	`5`	`"main": "./dist/gridstack.js",`
`6`	`6`	`"types": "./dist/gridstack.d.ts",`
Original file line number	Diff line number	Diff 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`
`2`	`2`
`3`	`3`	`/**`
`4`	`4`	`* https://gridstackjs.com/`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// gridstack-ddi.ts 3.1.0-dev @preserve`
	`1`	`+// gridstack-ddi.ts 3.1.2 @preserve`
`2`	`2`
`3`	`3`	`/**`
`4`	`4`	`* https://gridstackjs.com/`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-// gridstack-engine.ts 3.1.0-dev @preserve`
	`1`	`+// gridstack-engine.ts 3.1.2 @preserve`
`2`	`2`
`3`	`3`	`/**`
`4`	`4`	`* https://gridstackjs.com/`