new cellHeight:'fill' so rows divide the (fixed) grid height

* fix #2583 fix #787
* new cellHeight:'fill' so row numbers take entire fixed sized (by the application) grid height, which simulates cellHeight being %, but also aumatically adpate to always fill grid height.
* update cell-height.html demo to show the new option

Author: adumesny

angular/doc/api/gridstack.component.md

@@ -221,7 +221,7 @@ OnInit.ngOnInit
 ngAfterContentInit(): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:272](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L272)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:273](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L273)
 
 wait until after all DOM is ready to init gridstack children (after angular ngFor and sub-components run first)
 
@@ -241,7 +241,7 @@ AfterContentInit.ngAfterContentInit
 ngOnDestroy(): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:280](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L280)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:281](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L281)
 
 A callback method that performs custom clean-up, invoked immediately
 before a directive, pipe, or service instance is destroyed.
@@ -262,7 +262,7 @@ OnDestroy.ngOnDestroy
 updateAll(): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:294](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L294)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:295](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L295)
 
 called when the TEMPLATE (not recommended) list of items changes - get a list of nodes and
 update the layout accordingly (which will take care of adding/removing items changed by Angular)
@@ -277,7 +277,7 @@ update the layout accordingly (which will take care of adding/removing items cha
 checkEmpty(): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:305](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L305)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:306](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L306)
 
 check if the grid is empty, if so show alternative content
 
@@ -291,7 +291,7 @@ check if the grid is empty, if so show alternative content
 protected hookEvents(grid?): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:311](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L311)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:312](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L312)
 
 get all known events as easy to use Outputs for convenience
 
@@ -311,7 +311,7 @@ get all known events as easy to use Outputs for convenience
 protected unhookEvents(grid?): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:338](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L338)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:339](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L339)
 
 ###### Parameters
 
@@ -3094,7 +3094,7 @@ function gsCreateNgComponents(
    isGrid): undefined | HTMLElement;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:349](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L349)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:350](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L350)
 
 can be used when a new item needs to be created, which we do as a Angular component, or deleted (skip)
 
@@ -3119,7 +3119,7 @@ can be used when a new item needs to be created, which we do as a Angular compon
 function gsSaveAdditionalNgInfo(n, w): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:444](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L444)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:445](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L445)
 
 called for each item in the grid - check if additional information needs to be saved.
 Note: since this is options minus gridstack protected members using Utils.removeInternalForSave(),
@@ -3145,7 +3145,7 @@ using BaseWidget.serialize()
 function gsUpdateNgComponents(n): void;
 ```
 
-Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:463](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L463)
+Defined in: [angular/projects/lib/src/lib/gridstack.component.ts:464](https://github.com/adumesny/gridstack.js/blob/master/angular/projects/lib/src/lib/gridstack.component.ts#L464)
 
 track when widgeta re updated (rather than created) to make sure we de-serialize them as well
 

demo/cell-height.html

@@ -9,25 +9,46 @@
   <link rel="stylesheet" href="demo.css"/>
   <script src="../dist/gridstack-all.js"></script>
   <style type="text/css">
+  html, body {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    display: flex;
+  }
   .container {
     background-color: lightblue;
     width: 100%;
-    height: 800px;
+    flex: 1;
+    max-height: 800px; /* test grid not filling entire page */
+    display: flex;
+    flex-direction: column;
   }
   </style>
-
 </head>
 <body>
   <div class="container">
     <h1>Cell Height grid options demo</h1>
-    <p>sample showing the different cellHeight options and what happens when you resize the window</p>
+    <p>sample showing the different cellHeight options and what happens when you resize the window<br>
+    <b>New:</b> v14.x <i>cellHeight:'fill'</i> (rows divide the <b>grid height</b> which MUST be set by the app to something fixed as GS won't set a size)</p>
     <div>
       <a class="btn btn-primary" onClick="setOpt('auto')" href="#">auto</a>
       <a class="btn btn-primary" onClick="setOpt('initial')" href="#">initial</a>
       <a class="btn btn-primary" onClick="setOpt(100)" href="#">100px</a>
       <a class="btn btn-primary" onClick="setOpt('10vh')" href="#">'10vh'</a>
+      <a class="btn btn-primary" onClick="setOpt('fill')" href="#">fill</a>
       <a class="btn btn-primary" onClick="setOpt('10%')" href="#">'10%' of blue (broken)</a>
       <span>settings:</span><span id="info"></span>
+      <span>rows:</span><span id="rows"></span>
+      <a class="btn btn-primary" onClick="grid.removeAll()" href="#">clear</a>
+    </div>
+    <br>
+    <div class="sidebar" style="height: 40px">
+      <div class="grid-stack-item">
+        <div class="grid-stack-item-content">1x1</div>
+      </div>
+      <div class="grid-stack-item" gs-h="2">
+        <div class="grid-stack-item-content">1x2</div>
+      </div>
     </div>
     <br>
     <div class="grid-stack"></div>
@@ -36,21 +57,33 @@ <h1>Cell Height grid options demo</h1>
     let opts = {
       cellHeight: 'auto', // see other possible values (best to do in here)
       cellHeightThrottle: 100,
+      acceptWidgets: true,
+      children: [{x:0, y:0, content:'0'}, {x:1, y:0, w:2, content:'1'}, {x:3, y:0, h:2, content:'2'}]
     }
-    let grid = GridStack.init(opts);
-    let items = [
-      {x:0, y:0, content:'0'},
-      {x:1, y:0, w:2, content:'1'},
-      {x:3, y:0, h:2, content:'2'},
-    ];
-    grid.load(items);
 
     let info = document.querySelector('#info');
-    info.innerHTML = opts.cellHeight;
-    setOpt = function(val) {
-      grid.cellHeight(val);
+    let rows = document.querySelector('#rows');
+    let grid_el = document.querySelector('.grid-stack');
+    setOpt = function(val, update = true) {
+      if (val === 'fill') {
+        grid_el.style.flex = '1';
+      } else {
+        grid_el.style.flex = 'none';
+      }
+      if (update && grid) grid.cellHeight(val);
       info.innerHTML = val;
     }
+
+    // initialize our CSS state BEFORE grid (reduces flicker)
+    setOpt(opts.cellHeight, false);
+    let grid = GridStack.init(opts);
+    
+    GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: 'clone' });
+    
+    grid.on('change added removed', function(e, items) {
+      rows.innerHTML = grid.getRow();
+    });
+    rows.innerHTML = grid.getRow();
   </script>
 </body>
 </html>