Merge pull request #1494 from adumesny/develop

doc for v3 release

README.md

@@ -71,17 +71,28 @@ npm install --save gridstack
 ES6 or Typescript
 
 ```js
-import GridStack from 'gridstack';
 import 'gridstack/dist/gridstack.min.css';
+import GridStack from 'gridstack';
+// THEN to get HTML5 drag&drop
+import 'gridstack/dist/h5/gridstack-dd-native';
+// OR to get legacy jquery-ui drag&drop
+import 'gridstack/dist/jq/gridstack-dd-jqueryui';
+// OR nothing to get static grids (API driven, no user drag&drop)
 ```
-
-alternatively in html
+Alternatively in html
 
 ```html
 <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
+<!-- HTML5 drag&drop (63k) -->
 <script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
+<!-- OR jquery-ui drag&drop (188k) -->
+<script src="node_modules/gridstack/dist/gridstack-jq.js"></script>
+<!-- OR static grid (34k) -->
+<script src="node_modules/gridstack/dist/gridstack-static.js"></script>
 ```
 
+Note: the API is the same, regardless of the plugin (or lack thereof) so you can switch at any time. The Jquery version will export $ that it bundles. Read more at [migrating to v3](#migrating-to-v3)
+
 ## Basic usage
 
 creating items dynamically...
@@ -129,7 +140,7 @@ see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example
 
 ## Requirements
 
-GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). All you need to include is `gridstack-h5.js` and `gridstack.min.css` (layouts are done using CSS column based %).
+GridStack no longer requires external dependencies as of v1.0.0 (lodash was removed in v0.5.0 and jquery API in v1.0.0). v3.0.0 is a complete HTML5 re-write which removes all jqeury dependency (still available for legacy apps). All you need to include now is `gridstack-h5.js` and `gridstack.min.css` (layouts are done using CSS column based %).
 
 ## API Documentation
 
@@ -362,23 +373,27 @@ v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and
 
 make sure to read v2 migration first!
 
-v3 has a new HTML5 drag&drop plugging (63k total, all native code), while still allowing you to use the legacy jquery-ui version (186k), or a new static grid version (34k, no user drag&drop but full API support). You will need to decide which version to use as `gridstack.all.js` no longer exist (same as `gridstack-jq.js`) - see include info at top.
+v3 has a new HTML5 drag&drop plugging (63k total, all native code), while still allowing you to use the legacy jquery-ui version instead (188k), or a new static grid version (34k, no user drag&drop but full API support). You will need to decide which version to use as `gridstack.all.js` no longer exist (same is now `gridstack-jq.js`) - see [include info](#include).
+
+Note: HTML5 is almost on parity with the old jquery-ui based drag&drop. the `containment` (prevent a child from being dragged outside it's parent) and `revert` (not clear what it for yet) are not yet implemented in initial release of v3.0.0
 
-Some breaking changes:
+Breaking changes:
 
 1. include (as mentioned) need to change
 
-2. `GridStack.update(el, opt)` now takes `GridStackWidget` options instead, BUT legacy call in JS will continue working the same for now
+2. `GridStack.update(el, opt)` now takes single `GridStackWidget` options instead of only supporting (x,y,w,h) BUT legacy call in JS will continue working the same for now. That method is a complete re-write and does the right constrain and updates now for all the available params.
+
+3. `locked()`, `move()`, `resize()`, `minWidth()`, `minHeight()`, `maxWidth()`, `maxHeight()` methods are hidden from Typescript (JS can still call for now) as they are just 1 liner wrapper around `update(el, opt)` anyway and will go away soon. (ex: `move(el, x, y)` => `update(el, {x, y})`)
 
-3. item attribute like `data-gs-min-width` is now `gs-min-w`. We removed 'data-' from all attributes, and shorten 'width|height' to just 'w|h' to require typing and more efficient.
+4. item attribute like `data-gs-min-width` is now `gs-min-w`. We removed 'data-' from all attributes, and shorten 'width|height' to just 'w|h' to require less typing and more efficient (2k saved in .js alone!).
 
-4. `GridStackWidget` used in most API `width|height|minWidth|minHeight|maxWidth|maxHeight` are now shorter `w|h|minW|minH|maxW|maxH` as well
+5. `GridStackWidget` used in most API `width|height|minWidth|minHeight|maxWidth|maxHeight` are now shorter `w|h|minW|minH|maxW|maxH` as well
 
 # jQuery Application
 
 We now have a native HTML5 drag'n'drop through the plugin system (default), but the jquery-ui version can be used instead. It will bundle `jquery` (3.5.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) in `gridstack-jq.js`. IFF your app needs to bring your 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 JQ libs. But note that there are issue with jQuery and ES6 import (see [1306](https://github.com/gridstack/gridstack.js/issues/1306)).
 
-NOTE: v2.x / v3.0.0 does not currently support importing GridStack Drag&Drop without also including our jquery + jquery-ui. Still trying to figure how to make that bundle possible. You will have to use 1.x for now...
+NOTE: v2.x / v3.x does not currently support importing GridStack Drag&Drop without also including our jquery + jquery-ui. Still trying to figure how to make that bundle possible. You will have to use 1.x for now...
 
 As for events, you can still use `$(".grid-stack").on(...)` for the version that uses jquery-ui for things we don't support.
 

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/)*
 
-- [2.2.0-dev](#220-dev)
+- [3.3.0 (2020-11-29)](#330-2020-11-29)
 - [2.2.0 (2020-11-7)](#220-2020-11-7)
 - [2.1.0 (2020-10-28)](#210-2020-10-28)
 - [2.0.2 (2020-10-05)](#202-2020-10-05)
@@ -41,8 +41,9 @@ Change log
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
-## 2.2.0-dev
+## 3.3.0 (2020-11-29)
 
+- the big news is we finally have a native HTML5 drag&drop plugin (zero jquery)! Huge thanks to [@rhlin](https://github.com/rhlin) for creating this in stealth mode. Read all about it in main doc.
 - we now have a React example, in addition to Vue - Angular is next!. thanks [@eloparco](https://github.com/eloparco)
 - fix placeholder not having custom `GridStackOptions.itemClass`. thanks [@pablosichert](https://github.com/pablosichert)
 - fix [1484](https://github.com/gridstack/gridstack.js/issues/1484) dragging between 2 grids and back (regression in 2.0.1) 
@@ -51,6 +52,7 @@ Change log
 Hiding `locked()`, `move()`, `resize()`, `minWidth()`, etc... as they just simply call update() which does all the constrain now as well!
 - del `ddPlugin` grid option as we only have one drag&drop plugin at runtime, which is defined by the include you use (HTML5 vs jquery vs none)
 -  change attribute like `data-gs-min-width` is now `gs-min-w`. We removed 'data-' from all attributes, and shorten 'width|height' to just 'w|h' to require typing and more efficient [1491](https://github.com/gridstack/gridstack.js/pull/1491)
+- **** see [migrating to v3](https://github.com/gridstack/gridstack.js#migrating-to-v3) ****
 
 ## 2.2.0 (2020-11-7)
 

src/gridstack.ts

@@ -1396,13 +1396,13 @@ export class GridStack {
   /** @internal */
   public locked(els: GridStackElement, locked: boolean): GridStack { return this.update(els, {locked}) }
   /** @internal */
-  public maxW(els: GridStackElement, maxW: number): GridStack { return this.update(els, {maxW}) }
+  public maxWidth(els: GridStackElement, maxW: number): GridStack { return this.update(els, {maxW}) }
   /** @internal */
-  public minW(els: GridStackElement, minW: number): GridStack {  return this.update(els, {minW}) }
+  public minWidth(els: GridStackElement, minW: number): GridStack {  return this.update(els, {minW}) }
   /** @internal */
-  public maxH(els: GridStackElement, maxH: number): GridStack { return this.update(els, {maxH}) }
+  public maxHeight(els: GridStackElement, maxH: number): GridStack { return this.update(els, {maxH}) }
   /** @internal */
-  public minH(els: GridStackElement, minH: number): GridStack { return this.update(els, {minH}) }
+  public minHeight(els: GridStackElement, minH: number): GridStack { return this.update(els, {minH}) }
   /** @internal */
   public move(els: GridStackElement, x?: number, y?: number): GridStack { return this.update(els, {x, y}) }
   /** @internal */