Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 000f090

Browse files
adumesnyadumesny
authored
Merge pull request gridstack#1494 from adumesny/develop
doc for v3 release
2 parents 570a55f + f6e972d commit 000f090

File tree

3 files changed

+33
-16
lines changed

3 files changed

+33
-16
lines changed

‎README.md

Lines changed: 25 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,17 +71,28 @@ npm install --save gridstack
7171
ES6 or Typescript
7272

7373
```js
74-
import GridStack from 'gridstack';
7574
import 'gridstack/dist/gridstack.min.css';
75+
import GridStack from 'gridstack';
76+
// THEN to get HTML5 drag&drop
77+
import 'gridstack/dist/h5/gridstack-dd-native';
78+
// OR to get legacy jquery-ui drag&drop
79+
import 'gridstack/dist/jq/gridstack-dd-jqueryui';
80+
// OR nothing to get static grids (API driven, no user drag&drop)
7681
```
77-
78-
alternatively in html
82+
Alternatively in html
7983

8084
```html
8185
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
86+
<!-- HTML5 drag&drop (63k) -->
8287
<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
88+
<!-- OR jquery-ui drag&drop (188k) -->
89+
<script src="node_modules/gridstack/dist/gridstack-jq.js"></script>
90+
<!-- OR static grid (34k) -->
91+
<script src="node_modules/gridstack/dist/gridstack-static.js"></script>
8392
```
8493

94+
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)
95+
8596
## Basic usage
8697

8798
creating items dynamically...
@@ -129,7 +140,7 @@ see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example
129140

130141
## Requirements
131142

132-
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 %).
143+
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 %).
133144

134145
## API Documentation
135146

@@ -362,23 +373,27 @@ v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and
362373
363374
make sure to read v2 migration first!
364375
365-
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.
376+
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).
377+
378+
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
366379
367-
Some breaking changes:
380+
Breaking changes:
368381
369382
1. include (as mentioned) need to change
370383
371-
2. `GridStack.update(el, opt)` now takes `GridStackWidget` options instead, BUT legacy call in JS will continue working the same for now
384+
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.
385+
386+
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})`)
372387
373-
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.
388+
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!).
374389
375-
4. `GridStackWidget` used in most API `width|height|minWidth|minHeight|maxWidth|maxHeight` are now shorter `w|h|minW|minH|maxW|maxH` as well
390+
5. `GridStackWidget` used in most API `width|height|minWidth|minHeight|maxWidth|maxHeight` are now shorter `w|h|minW|minH|maxW|maxH` as well
376391
377392
# jQuery Application
378393
379394
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)).
380395
381-
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...
396+
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...
382397
383398
As for events, you can still use `$(".grid-stack").on(...)` for the version that uses jquery-ui for things we don't support.
384399

‎doc/CHANGES.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ Change log
55
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
66
**Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)*
77

8-
- [2.2.0-dev](#220-dev)
8+
- [3.3.0 (2020-11-29)](#330-2020-11-29)
99
- [2.2.0 (2020-11-7)](#220-2020-11-7)
1010
- [2.1.0 (2020-10-28)](#210-2020-10-28)
1111
- [2.0.2 (2020-10-05)](#202-2020-10-05)
@@ -41,8 +41,9 @@ Change log
4141

4242
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
4343

44-
## 2.2.0-dev
44+
## 3.3.0 (2020-11-29)
4545

46+
- 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.
4647
- we now have a React example, in addition to Vue - Angular is next!. thanks [@eloparco](https://github.com/eloparco)
4748
- fix placeholder not having custom `GridStackOptions.itemClass`. thanks [@pablosichert](https://github.com/pablosichert)
4849
- 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
5152
Hiding `locked()`, `move()`, `resize()`, `minWidth()`, etc... as they just simply call update() which does all the constrain now as well!
5253
- 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)
5354
- 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)
55+
- **** see [migrating to v3](https://github.com/gridstack/gridstack.js#migrating-to-v3) ****
5456

5557
## 2.2.0 (2020-11-7)
5658

‎src/gridstack.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1396,13 +1396,13 @@ export class GridStack {
13961396
/** @internal */
13971397
public locked(els: GridStackElement, locked: boolean): GridStack { return this.update(els, {locked}) }
13981398
/** @internal */
1399-
public maxW(els: GridStackElement, maxW: number): GridStack { return this.update(els, {maxW}) }
1399+
public maxWidth(els: GridStackElement, maxW: number): GridStack { return this.update(els, {maxW}) }
14001400
/** @internal */
1401-
public minW(els: GridStackElement, minW: number): GridStack { return this.update(els, {minW}) }
1401+
public minWidth(els: GridStackElement, minW: number): GridStack { return this.update(els, {minW}) }
14021402
/** @internal */
1403-
public maxH(els: GridStackElement, maxH: number): GridStack { return this.update(els, {maxH}) }
1403+
public maxHeight(els: GridStackElement, maxH: number): GridStack { return this.update(els, {maxH}) }
14041404
/** @internal */
1405-
public minH(els: GridStackElement, minH: number): GridStack { return this.update(els, {minH}) }
1405+
public minHeight(els: GridStackElement, minH: number): GridStack { return this.update(els, {minH}) }
14061406
/** @internal */
14071407
public move(els: GridStackElement, x?: number, y?: number): GridStack { return this.update(els, {x, y}) }
14081408
/** @internal */

0 commit comments

Comments
 (0)