TS: develop -> typescript

README.md

@@ -39,6 +39,7 @@ Join us on Slack: https://gridstackjs.troolee.com
   - [Touch devices support](#touch-devices-support)
   - [Migrating to v0.6.x](#migrating-to-v06x)
   - [Migrating to v1.0.0](#migrating-to-v100)
+    - [jQuery Application](#jquery-application)
   - [Migrating to v2.0.0](#migrating-to-v200)
 - [Changes](#changes)
 - [The Team](#the-team)
@@ -79,8 +80,8 @@ npm install --save gridstack
 * Using CDN (minimized):
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@1.1.0/dist/gridstack.min.css" />
-<script src="https://cdn.jsdelivr.net/npm/gridstack@1.1.0/dist/gridstack.all.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@1.1.1/dist/gridstack.min.css" />
+<script src="https://cdn.jsdelivr.net/npm/gridstack@1.1.1/dist/gridstack.all.js"></script>
 ```
 
 if you need to debug, look at the git demo/ examples for non min includes.
@@ -94,7 +95,7 @@ creating items dynamically...
 
 <script type="text/javascript">
   var grid = GridStack.init();
-  grid.addWidget('<div class="grid-stack-item"><div class="grid-stack-item-content"> test </div></div>', {width: 2});
+  grid.addWidget('<div><div class="grid-stack-item-content">Item 1</div></div>', {width: 2});
 </script>
 ```
 
@@ -133,7 +134,7 @@ You can easily extend or patch gridstack with code like this:
 ```js
 // extend gridstack with our own custom method
 GridStack.prototype.printCount = function() {
-  console.log('grid has ' + this.grid.nodes.length + ' items');
+  console.log('grid has ' + this.engine.nodes.length + ' items');
 };
 
 var grid = GridStack.init();
@@ -163,7 +164,7 @@ GridStack.init( {column: N} );
 
 2) include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly.
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@1.1.0/dist/gridstack-extra.css"/>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@1.1.1/dist/gridstack-extra.css"/>
 
 <div class="grid-stack grid-stack-N">...</div>
 ```
@@ -277,22 +278,25 @@ starting in 0.6.x `change` event are no longer sent (for pretty much most nodes!
 
 v1.0.0 removed Jquery from the API and external dependencies, which will require some code changes. Here is a list of the changes:
 
-1. your code only needs to include `gridstack.all.js` and `gristack.css` (don't include other JS) and is recommended you do that as internal dependencies will change over time. If you are jquery based, also see note below.
+1. see [Migrating to v0.6.x](#migrating-to-v06x) if you didn't already
 
-2. code change:
+2. your code only needs to include `gridstack.all.js` and `gristack.css` (don't include other JS) and is recommended you do that as internal dependencies will change over time. If you are jquery based, also see note below.
+
+3. code change:
 
 **OLD** initializing code + adding a widget + adding an event:
 ```js
 // initialization returned Jquery element, requiring second call to get GridStack var
-$('.grid-stack').gridstack(opts?);
-var grid = $('.grid-stack').data('gridstack');
+var grid = $('.grid-stack').gridstack(opts?).data('gridstack');
 
 // returned Jquery element
 grid.addWidget($('<div><div class="grid-stack-item-content"> test </div></div>'), undefined, undefined, 2, undefined, true);
 
 // jquery event handler
 $('.grid-stack').on('added', function(e, items) {/* items contains info */});
 
+// grid access after init
+var grid = $('.grid-stack').data('gridstack');
 ```
 **NEW**
 ```js
@@ -306,9 +310,9 @@ grid.addWidget('<div><div class="grid-stack-item-content"> test </div></div>', {
 // event handler
 grid.on('added', function(e, items) {/* items contains info */});
 
+// grid access after init
+var grid = el.gridstack; // where el = document.querySelector('.grid-stack') or other ways...
 ```
- 3. see [Migrating to v0.6.x](#migrating-to-v06x) if you didn't already
-
 Other vars/global changes
 ```
 `GridStackUI` --> `GridStack`
@@ -320,9 +324,9 @@ Other vars/global changes
 
 Recommend looking at the [many samples](./demo) for more code examples.
 
-**NOTE: jQuery Applications** 
+### jQuery Application
 
-We're working on implementing HTML5 drag'n'drop through the plugin system. Right now it is still jquery-ui based. Because of that we are still bundling `jquery` (3.4.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) internally in `gridstack.all.js`. IFF your app needs to bring it's own version instead, you should **instead** include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` + after you import your libs.
+We're working on implementing HTML5 drag'n'drop through the plugin system. Right now it is still jquery-ui based. Because of that we are still bundling `jquery` (3.4.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) internally in `gridstack.all.js`. IFF your app needs to bring it's own version instead, you should **instead** include `gridstack-poly.min.js` (optional IE support) + `gridstack.min.js` + `gridstack.jQueryUI.min.js` after you import your libs.
 
 ## Migrating to v2.0.0
 
@@ -349,4 +353,4 @@ View our change log [here](https://github.com/gridstack/gridstack.js/tree/develo
 The Team
 ========
 
-gridstack.js is currently maintained by [Dylan Weiss](https://github.com/radiolips) and [Alain Dumesny](https://github.com/adumesny), originally created by [Pavel Reznikov](https://github.com/troolee). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help.
+gridstack.js is currently maintained by [Alain Dumesny](https://github.com/adumesny) and [Dylan Weiss](https://github.com/radiolips), originally created by [Pavel Reznikov](https://github.com/troolee). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help.

demo/float.html

@@ -20,7 +20,6 @@ <h1>Float grid demo</h1>
     <div class="grid-stack"></div>
   </div>
 
-
   <script type="text/javascript">
     var grid = GridStack.init({float: true});
 
@@ -30,6 +29,12 @@ <h1>Float grid demo</h1>
       console.log(e.type + ' ' + items.length + ' items:' + str );
     });
 
+    grid.on('added removed change', function(e, items) {
+      var str = '';
+      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
+      console.log(e.type + ' ' + items.length + ' items:' + str );
+    });
+
     var items = [
       {x: 2, y: 1, width: 1, height: 2},
       {x: 2, y: 4, width: 3, height: 1},

demo/locked.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Locked demo</title>
+
+  <link rel="stylesheet" href="demo.css"/>
+  <script src="../dist/gridstack.all.js"></script>
+  </style>
+</head>
+<body>
+  <div class="container-fluid">
+    <h1>Locked demo</h1>
+    <div>
+      <a class="btn btn-primary" onClick="addNewWidget()" href="#">Add Widget</a>
+      <a class="btn btn-primary" onclick="toggleFloat()" id="float" href="#">float: true</a>
+    </div>
+    <br><br>
+    <div class="grid-stack"></div>
+  </div>
+
+  <script type="text/javascript">
+    var grid = GridStack.init({float: true});
+
+    grid.on('added removed change', function(e, items) {
+      var str = '';
+      items.forEach(function(item) { str += ' (x,y)=' + item.x + ',' + item.y; });
+      console.log(e.type + ' ' + items.length + ' items:' + str );
+    });
+
+    var items = [
+      {x: 0, y: 1, width: 12, height: 1, locked: 'yes', noMove: true, noResize: true, text: 'locked, noResize, noMove'},
+      {x: 1, y: 0, width: 2, height: 3},
+      {x: 4, y: 2, width: 1, height: 1},
+      {x: 3, y: 1, width: 1, height: 2},
+      {x: 0, y: 6, width: 2, height: 2}
+    ];
+    var count = 0;
+
+    addNewWidget = function() {
+      var n = items[count] || {
+        x: Math.round(12 * Math.random()),
+        y: Math.round(5 * Math.random()),
+        width: Math.round(1 + 3 * Math.random()),
+        height: Math.round(1 + 3 * Math.random())
+      };
+      grid.addWidget('<div><div class="grid-stack-item-content">' + (n.text ? n.text : count) + '</div></div>', n);
+      count++
+    };
+
+    toggleFloat = function() {
+      grid.float(! grid.float());
+      document.querySelector('#float').innerHTML = 'float: ' + grid.float();
+    };
+    addNewWidget();
+  </script>
+</body>
+</html>

doc/CHANGES.md

@@ -5,7 +5,8 @@ Change log
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](http://doctoc.herokuapp.com/)*
 
-- [1.1.0-dev (upcoming)](#110-dev-upcoming)
+- [1.1.1-dev (upcoming)](#111-dev-upcoming)
+- [1.1.1 (2020-03-17)](#111-2020-03-17)
 - [1.1.0 (2020-02-29)](#110-2020-02-29)
 - [v1.0.0 (2020-02-23)](#v100-2020-02-23)
 - [v0.6.4 (2020-02-17)](#v064-2020-02-17)
@@ -32,13 +33,18 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## 1.1.0-dev (upcoming)
+## 1.1.1-dev (upcoming)
+
+- fix [1229](https://github.com/gridstack/gridstack.js/issues/1229) `staticGrid` no longer disable oneColumnMode
+- add `getGridItems()` to return list of HTML grid items
+
+## 1.1.1 (2020-03-17)
 
 - fix [1187](https://github.com/gridstack/gridstack.js/issues/1187) IE support for `CustomEvent` polyfill - thanks [@phil-blais](https://github.com/phil-blais)
 - fix [1204](https://github.com/gridstack/gridstack.js/issues/1204) destroy drag&drop when removing node(s) instead of just disabling it.
-- include SASS source files to npm package again [1193](https://github.com/gridstack/gridstack.js/pull/1193)	- include SASS source files to npm package again [1193](https://github.com/gridstack/gridstack.js/pull/1193)
-- fix [1217](https://github.com/gridstack/gridstack.js/issues/1217) If I set `cellHeight` to some `vh`, only first grid will take `vh`, rest will use `px`
-- add `getGridItems()` to return list of HTML grid items
+- fix [1181](https://github.com/gridstack/gridstack.js/issues/1181) Locked widgets are still moveable by other widgets.
+- fix [1217](https://github.com/gridstack/gridstack.js/issues/1217) If I set cellHeight to some vh, only first grid will take vh, rest will use px
+- include SASS source files to npm package again [1193](https://github.com/gridstack/gridstack.js/pull/1193)
 
 ## 1.1.0 (2020-02-29)
 

doc/README.md

@@ -100,7 +100,7 @@ gridstack.js API
 - `removeTimeout` - time in milliseconds before widget is being removed while dragging outside of the grid. (default: `2000`)
 - `row` - fix grid number of rows. This is a shortcut of writing `minRow:N, maxRow:N`. (default `0` no constrain)
 - `rtl` - if `true` turns grid to RTL. Possible values are `true`, `false`, `'auto'` (default: `'auto'`) See [example](http://gridstackjs.com/demo/rtl.html)
-- `staticGrid` - makes grid static (default `false`). If true widgets are not movable/resizable. You don't even need jQueryUI draggable/resizable.  A CSS class `grid-stack-static` is also added to the container.
+- `staticGrid` - removes drag&drop&resize (default `false`). If `true` widgets are not movable/resizable by the user, but code can still move and oneColumnMode will still work. You don't even need jQueryUI draggable/resizable.  A CSS class `grid-stack-static` is also added to the container.
 - `verticalMargin` - vertical gap size (default: `20`). Can be:
   * an integer (px)
   * a string (ex: '2em', '20px', '2rem')

spec/gridstack-spec.js

@@ -68,6 +68,7 @@ describe('gridstack', function() {
         staticGrid: true
       };
       let grid = GridStack.init(options);
+      expect($('.grid-stack').hasClass('grid-stack-static')).toBe(true);
       $('.grid-stack').removeClass('grid-stack-static');
       grid._setStaticClass();
       expect($('.grid-stack').hasClass('grid-stack-static')).toBe(true);
@@ -79,6 +80,7 @@ describe('gridstack', function() {
         staticGrid: false
       };
       let grid = GridStack.init(options);
+      expect($('.grid-stack').hasClass('grid-stack-static')).toBe(false);
       $('.grid-stack').addClass('grid-stack-static');
       grid._setStaticClass();
       expect($('.grid-stack').hasClass('grid-stack-static')).toBe(false);

yarn.lock

@@ -4497,9 +4497,9 @@ minimist@0.0.8:
   integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
 
 minimist@^1.1.3, minimist@^1.2.0, minimist@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
-  integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.2.tgz#b00a00230a1108c48c169e69a291aafda3aacd63"
+  integrity sha512-rIqbOrKb8GJmx/5bc2M0QchhUouMXSpd1RTclXsB41JdL+VtnojfaJR+h7F9k18/4kHUsBFgk80Uk+q569vjPA==
 
 minimist@~0.0.1:
   version "0.0.10"