diff --git a/README.md b/README.md index de3588efe..f8c84a300 100644 --- a/README.md +++ b/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 + + + + + ``` +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. diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 42e31cb15..499f61e31 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -5,7 +5,7 @@ Change log **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 -## 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) diff --git a/src/gridstack.ts b/src/gridstack.ts index 6ea9d987a..93d4c5491 100644 --- a/src/gridstack.ts +++ b/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 */