Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 44 additions & 31 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ If you find this lib useful, please donate [PayPal](https://www.paypal.me/alaind
[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/alaind831)
[![Donate](https://img.shields.io/badge/Donate-Venmo-g.svg)](https://www.venmo.com/adumesny)

Join us on Slack: https://gridstackjs.troolee.com
Join us on Slack: https://gridstackjs.slack.com

[![Slack Status](https://gridstackjs.troolee.com/badge.svg)](https://gridstackjs.troolee.com)
[![Slack Status](https://gridstackjs.troolee.com/badge.svg)](https://gridstackjs.slack.com)
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
**Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)*
Expand All @@ -42,6 +42,7 @@ Join us on Slack: https://gridstackjs.troolee.com
- [Migrating to v3](#migrating-to-v3)
- [Migrating to v4](#migrating-to-v4)
- [Migrating to v5](#migrating-to-v5)
- [Migrating to v6](#migrating-to-v6)
- [jQuery Application](#jquery-application)
- [Changes](#changes)
- [The Team](#the-team)
Expand Down Expand Up @@ -71,44 +72,21 @@ ES6 or Typescript
```js
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 (support Mobile touch devices, h5 does not yet)
import 'gridstack/dist/jq/gridstack-dd-jqueryui';
// OR nothing to get static grids (API driven, no user drag&drop)
```

**Note**: `jquery` & `jquery-ui` are imported by name, so you will have to specify their location in your webpack (or equivalent) config file,
which means you can possibly bring your own version
```js
alias: {
'jquery': 'gridstack/dist/jq/jquery.js',
'jquery-ui': 'gridstack/dist/jq/jquery-ui.js',
'jquery.ui': 'gridstack/dist/jq/jquery-ui.js',
'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js',
},
```

Alternatively (single combined file) in html
Alternatively (single combined file, notice the -all.js) in html

```html
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<!-- HTML5 drag&drop (70k) -->
<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
<!-- OR jquery-ui drag&drop (195k) -->
<script src="node_modules/gridstack/dist/gridstack-jq.js"></script>
<!-- OR static grid (40k) -->
<script src="node_modules/gridstack/dist/gridstack-static.js"></script>
<script src="node_modules/gridstack/dist/gridstack-all.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 and currently the only one to support mobile/touch devices through `jquery.ui.touch-punch` (h5 version is planned). Read more at [migrating to v3](#migrating-to-v3)

**Note2**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this might break in the future).
**Note**: IE support was dropped in v2, but restored in v4.4 by an external contributor (I have no interest in testing+supporting obsolete browser so this likely will break again in the future).
You can use the es5 files and polyfill (larger) for older browser instead. For example:
```html
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<script src="node_modules/gridstack/dist/es5/gridstack-poly.js"></script>
<script src="node_modules/gridstack/dist/es5/gridstack-jq.js"></script>
<script src="node_modules/gridstack/dist/es5/gridstack-all.js"></script>
```


Expand Down Expand Up @@ -161,7 +139,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). v3.0.0 is a complete HTML5 re-write which removes all jquery 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 %).
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 is a complete HTML5 re-write removing need for jquery (still available for legacy apps). v6 is native mouse and touch event for mobile support, and no longer have jquery-ui version. All you need to include now is `gridstack-all.js` and `gridstack.min.css` (layouts are done using CSS column based %).

## Extend Library

Expand Down Expand Up @@ -455,9 +433,44 @@ make sure to read v4 migration first!
v5 does not have any breaking changes from v4, but a focus on nested grids in h5 mode:
You can now drag in/out of parent into nested child, with new API parameters values. See the release notes.

## Migrating to v6

the API did not really change from v5, but a complete re-write of Drag&Drop to use native mouseevent (instead of HTML draggable=true which is buggy on Mac Safari, and doesn't work on mobile devices) and touchevent (mobile), and we no longer have jquery ui option (wasn't working well for nested grids, didn't want to maintain legacy lib).

The main difference is you only need to include gridstack.js and get D&D (desktop and mobile) out of the box for the same size as h5 version.

# 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.13.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`.
This is **old and no longer apply to v6+**. You'll need to use v5.1.1 and before

```js
import 'gridstack/dist/gridstack.min.css';
import { GridStack } from 'gridstack';
import 'gridstack/dist/jq/gridstack-dd-jqueryui';
```
**Note**: `jquery` & `jquery-ui` are imported by name, so you will have to specify their location in your webpack (or equivalent) config file,
which means you can possibly bring your own version
```js
alias: {
'jquery': 'gridstack/dist/jq/jquery.js',
'jquery-ui': 'gridstack/dist/jq/jquery-ui.js',
'jquery.ui': 'gridstack/dist/jq/jquery-ui.js',
'jquery.ui.touch-punch': 'gridstack/dist/jq/jquery.ui.touch-punch.js',
},
```
Alternatively (single combined file) in html

```html
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
<!-- HTML5 drag&drop (70k) -->
<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
<!-- OR jquery-ui drag&drop (195k) -->
<script src="node_modules/gridstack/dist/gridstack-jq.js"></script>
<!-- OR static grid (40k) -->
<script src="node_modules/gridstack/dist/gridstack-static.js"></script>
```

We 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.13.1 minimal drag|drop|resize) + `jquery-ui-touch-punch` (1.0.8 for mobile support) in `gridstack-jq.js`.

**NOTE: in v4, v3**: we ES6 module import jquery & jquery-ui by name, so you need to specify location of those .js files, which means you might be able to bring your own version as well. See the include instructions.

Expand Down
6 changes: 3 additions & 3 deletions doc/CHANGES.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/)*

- [6.0.0-beta (TBD)](#600-beta-tbd)
- [6.0.0 (2022-08-21)](#600-2022-08-21)
- [5.1.1 (2022-06-16)](#511-2022-06-16)
- [5.1.0 (2022-05-21)](#510-2022-05-21)
- [5.0.0 (2022-01-10)](#500-2022-01-10)
Expand Down Expand Up @@ -69,9 +69,9 @@ Change log

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

## 6.0.0-beta (TBD)
## 6.0.0 (2022-08-21)
* converted previous HTML5 `draggable=true` based code to simple Mouse Events and Touch mobile support for drag&Drop.
* removed all jquery-ui related code, and D7D plugging as we only support native events now
* removed all jquery-ui related code, and D&D plugging as we only support native events now
* `alwaysShowResizeHandle` now support `'mobile'` which is the default, making it much easier (see doc)
* changed `commit()` to be `batchUpdate(false)` to make it easier to turn batch on/off. updated doc. old API remains for now

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "gridstack",
"version": "6.0.0-beta",
"version": "6.0.0",
"description": "TypeScript/JS lib for dashboard layout and creation, no external dependencies, with many wrappers (React, Angular, Vue, Ember, knockout...)",
"main": "./dist/gridstack.js",
"types": "./dist/gridstack.d.ts",
Expand Down
2 changes: 1 addition & 1 deletion src/dd-base-impl.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* dd-base-impl.ts 6.0.0-beta
* dd-base-impl.ts 6.0.0
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
*/

Expand Down
2 changes: 1 addition & 1 deletion src/dd-draggable.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* dd-draggable.ts 6.0.0-beta
* dd-draggable.ts 6.0.0
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
*/

Expand Down
2 changes: 1 addition & 1 deletion src/dd-droppable.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* dd-droppable.ts 6.0.0-beta
* dd-droppable.ts 6.0.0
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
*/

Expand Down
2 changes: 1 addition & 1 deletion src/dd-element.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* dd-elements.ts 6.0.0-beta
* dd-elements.ts 6.0.0
* Copyright (c) 2021 Alain Dumesny - see GridStack root license
*/

Expand Down
2 changes: 1 addition & 1 deletion src/dd-gridstack.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* dd-gridstack.ts 6.0.0-beta
* dd-gridstack.ts 6.0.0
* Copyright (c) 2021 Alain Dumesny - see GridStack root license
*/

Expand Down
2 changes: 1 addition & 1 deletion src/dd-manager.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* dd-manager.ts 6.0.0-beta
* dd-manager.ts 6.0.0
* Copyright (c) 2021 Alain Dumesny - see GridStack root license
*/

Expand Down
2 changes: 1 addition & 1 deletion src/dd-resizable-handle.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* dd-resizable-handle.ts 6.0.0-beta
* dd-resizable-handle.ts 6.0.0
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
*/

Expand Down
2 changes: 1 addition & 1 deletion src/dd-resizable.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* dd-resizable.ts 6.0.0-beta
* dd-resizable.ts 6.0.0
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
*/

Expand Down
2 changes: 1 addition & 1 deletion src/dd-touch.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* touch.ts 6.0.0-beta
* touch.ts 6.0.0
* Copyright (c) 2021 Alain Dumesny - see GridStack root license
*/

Expand Down
2 changes: 1 addition & 1 deletion src/gridstack-engine.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* gridstack-engine.ts 6.0.0-beta
* gridstack-engine.ts 6.0.0
* Copyright (c) 2021-2022 Alain Dumesny - see GridStack root license
*/

Expand Down
2 changes: 1 addition & 1 deletion src/gridstack-poly.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* gridstack-poly.ts 6.0.0-beta used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4)
* gridstack-poly.ts 6.0.0 used for IE and older browser support (not supported in v2-v4.3.1, but again in v4.4)
* Copyright (c) 2021 Alain Dumesny - see GridStack root license
*/

Expand Down
2 changes: 1 addition & 1 deletion src/gridstack.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* gridstack SASS styles 6.0.0-beta
* gridstack SASS styles 6.0.0
* Copyright (c) 2021 Alain Dumesny - see GridStack root license
*/

Expand Down
4 changes: 2 additions & 2 deletions src/gridstack.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* GridStack 6.0.0-beta
* GridStack 6.0.0
* https://gridstackjs.com/
*
* Copyright (c) 2021-2022 Alain Dumesny
Expand Down Expand Up @@ -1513,7 +1513,7 @@ export class GridStack {
return this;
}

static GDRev = '6.0.0-beta';
static GDRev = '6.0.0';

/*
* drag&drop empty stubs that will be implemented in dd-gridstack.ts for non static grid
Expand Down
2 changes: 1 addition & 1 deletion src/types.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* types.ts 6.0.0-beta
* types.ts 6.0.0
* Copyright (c) 2021 Alain Dumesny - see GridStack root license
*/

Expand Down
2 changes: 1 addition & 1 deletion src/utils.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/**
* utils.ts 6.0.0-beta
* utils.ts 6.0.0
* Copyright (c) 2021 Alain Dumesny - see GridStack root license
*/

Expand Down