Skip to content

doc update #1465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
adumesny merged 1 commit into from
Nov 17, 2020
Merged

doc update #1465

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
49 changes: 25 additions & 24 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,15 @@ Join us on Slack: https://gridstackjs.troolee.com
- [Requirements](#requirements)
- [API Documentation](#api-documentation)
- [Extend Library](#extend-library)
- [gridstack.js for specific frameworks](#gridstackjs-for-specific-frameworks)
- [Change grid columns](#change-grid-columns)
- [Custom columns CSS](#custom-columns-css)
- [Override resizable/draggable options](#override-resizabledraggable-options)
- [Touch devices support](#touch-devices-support)
- [Migrating to v0.6](#migrating-to-v06)
- [Migrating to v1](#migrating-to-v1)
- [Migrating to v2](#migrating-to-v2)
- [gridstack.js for specific frameworks](#gridstackjs-for-specific-frameworks)
- [Migrating](#migrating)
- [Migrating to v0.6](#migrating-to-v06)
- [Migrating to v1](#migrating-to-v1)
- [Migrating to v2](#migrating-to-v2)
- [jQuery Application](#jquery-application)
- [Changes](#changes)
- [The Team](#the-team)
Expand Down Expand Up @@ -69,7 +70,7 @@ npm install --save gridstack
ES6 or Typescript

```js
import { GridStack } from 'gridstack';
import GridStack from 'gridstack';
import 'gridstack/dist/gridstack.min.css';
```

Expand Down Expand Up @@ -150,17 +151,6 @@ let grid = GridStack.init();
grid.printCount();
```

## gridstack.js for specific frameworks

search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...

- vue.js: see [demo v3](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue3js.html) or [demo v2](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue2js.html)
- React: [react gridstack example](https://github.com/Inder2108/react-gridstack-example)
- ember: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
- Angular9: [lb-gridstack](https://github.com/pfms84/lb-gridstack) Note: very old v0.3 gridstack instance. recommend for concept ONLY. Working on creating an Angular wrapper as that is we use ourself...
- AngularJS: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
- Rails: [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails)

## Change grid columns

GridStack makes it very easy if you need [1-12] columns out of the box (default is 12), but you always need **2 things** if you need to customize this:
Expand Down Expand Up @@ -277,20 +267,31 @@ GridStack.init(options);

If you're still experiencing issues on touch devices please check [#444](https://github.com/gridstack/gridstack.js/issues/444)

# gridstack.js for specific frameworks

search for ['gridstack' under NPM](https://www.npmjs.com/search?q=gridstack&ranking=popularity) for latest, more to come...

- vue.js: see [demo v3](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue3js.html) or [demo v2](https://github.com/gridstack/gridstack.js/blob/develop/demo/vue2js.html)
- React: [react-gridstack-example](https://github.com/Inder2108/react-gridstack-example/blob/master/src/App.js) or read on what [hooks to use](https://github.com/gridstack/gridstack.js/issues/735#issuecomment-329888796)
- ember: [ember-gridstack](https://github.com/yahoo/ember-gridstack)
- Angular9: [lb-gridstack](https://github.com/pfms84/lb-gridstack) Note: very old v0.3 gridstack instance so recommend for concept ONLY. You can do component or directive. Working on exposing the Angular component wrapper we use internally.
- AngularJS: [gridstack-angular](https://github.com/kdietrich/gridstack-angular)
- Rails: [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails)

# Migrating to v0.6
# Migrating
## Migrating to v0.6

starting in 0.6.x `change` event are no longer sent (for pretty much most nodes!) when an item is just added/deleted unless it also changes other nodes (was incorrect and causing inefficiencies). You may need to track `added|removed` [events](https://github.com/gridstack/gridstack.js/tree/develop/doc#events) if you didn't and relied on the old broken behavior.

# Migrating to v1
## Migrating to v1

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. see [Migrating to v0.6](#migrating-to-v06) if you didn't already
0. see previous step if not on v0.6 already

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, see [jquery app](#jquery-application) below.
1. your code only needs to `import GridStack from 'gridstack'` or 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, see [jquery app](#jquery-application) section.

3. code change:
2. code change:

**OLD** initializing code + adding a widget + adding an event:
```js
Expand Down Expand Up @@ -321,7 +322,7 @@ 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...
```
Other changes
Other rename changes

```js
`GridStackUI` --> `GridStack`
Expand All @@ -333,11 +334,11 @@ Other changes

Recommend looking at the [many samples](./demo) for more code examples.

# Migrating to v2
## Migrating to v2

make sure to read v1 migration first!

v2.x is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup to support ES6 modules. Your code might need to change from 1.x
v2 is a Typescript rewrite of 1.x, removing all jquery events, using classes and overall code cleanup to support ES6 modules. Your code might need to change from 1.x

1. In general methods that used no args (getter) vs setter can't be used in TS when the arguments differ (set/get are also not function calls so API would have changed). Instead we decided to have <b>all set methods return</b> `GridStack` to they can be chain-able (ex: `grid.float(true).cellHeight(10).column(6)`). Also legacy methods that used to take many parameters will now take a single object (typically `GridStackOptions` or `GridStackWidget`).

Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@
"url": "git+https://github.com/gridstack/gridstack.js.git"
},
"scripts": {
"build": "yarn --no-progress && rm -rf dist/* && grunt && webpack && tsc --stripInternal && doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
"build": "yarn --no-progress && rm -rf dist/* && grunt && webpack && tsc --stripInternal && yarn doc",
"w": "rm -rf dist/* && grunt && webpack",
"t": "rm -rf dist/* && grunt && tsc --stripInternal",
"doc": "doctoc ./README.md && doctoc ./doc/README.md && doctoc ./doc/CHANGES.md",
"test": "yarn lint && karma start karma.conf.js",
"lint": "tsc --noEmit && eslint src/*.ts",
"reset": "rm -rf dist node_modules",
Expand Down