diff --git a/README.md b/README.md index 51483b3df..8608589b3 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,7 @@ Join us on Slack: https://gridstackjs.troolee.com - [Touch devices support](#touch-devices-support) - [Migrating to v0.6.x](#migrating-to-v06x) - [Migrating to v1.0.0](#migrating-to-v100) + - [jQuery Application](#jquery-application) - [Migrating to v2.0.0](#migrating-to-v200) - [Changes](#changes) - [The Team](#the-team) @@ -79,8 +80,8 @@ npm install --save gridstack * Using CDN (minimized): ```html - - + + ``` if you need to debug, look at the git demo/ examples for non min includes. @@ -94,7 +95,7 @@ creating items dynamically... ``` @@ -133,7 +134,7 @@ You can easily extend or patch gridstack with code like this: ```js // extend gridstack with our own custom method GridStack.prototype.printCount = function() { - console.log('grid has ' + this.grid.nodes.length + ' items'); + console.log('grid has ' + this.engine.nodes.length + ' items'); }; var grid = GridStack.init(); @@ -163,7 +164,7 @@ GridStack.init( {column: N} ); 2) include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly. ```html - +
...
``` @@ -277,15 +278,16 @@ starting in 0.6.x `change` event are no longer sent (for pretty much most nodes! 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. 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, also see note below. +1. see [Migrating to v0.6.x](#migrating-to-v06x) if you didn't already -2. code change: +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, also see note below. + +3. code change: **OLD** initializing code + adding a widget + adding an event: ```js // initialization returned Jquery element, requiring second call to get GridStack var -$('.grid-stack').gridstack(opts?); -var grid = $('.grid-stack').data('gridstack'); +var grid = $('.grid-stack').gridstack(opts?).data('gridstack'); // returned Jquery element grid.addWidget($('
test
'), undefined, undefined, 2, undefined, true); @@ -293,6 +295,8 @@ grid.addWidget($('
test
') // jquery event handler $('.grid-stack').on('added', function(e, items) {/* items contains info */}); +// grid access after init +var grid = $('.grid-stack').data('gridstack'); ``` **NEW** ```js @@ -306,9 +310,9 @@ grid.addWidget('
test
', { // event handler 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... ``` - 3. see [Migrating to v0.6.x](#migrating-to-v06x) if you didn't already - Other vars/global changes ``` `GridStackUI` --> `GridStack` @@ -320,9 +324,9 @@ Other vars/global changes Recommend looking at the [many samples](./demo) for more code examples. -**NOTE: jQuery Applications** +### jQuery Application -We're working on implementing HTML5 drag'n'drop through the plugin system. Right now it is still jquery-ui based. Because of that we are still bundling `jquery` (3.4.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) internally in `gridstack.all.js`. IFF your app needs to bring it's 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 libs. +We're working on implementing HTML5 drag'n'drop through the plugin system. Right now it is still jquery-ui based. Because of that we are still bundling `jquery` (3.4.1) + `jquery-ui` (1.12.1 minimal drag|drop|resize) internally in `gridstack.all.js`. IFF your app needs to bring it's 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 libs. ## Migrating to v2.0.0 @@ -349,4 +353,4 @@ View our change log [here](https://github.com/gridstack/gridstack.js/tree/develo The Team ======== -gridstack.js is currently maintained by [Dylan Weiss](https://github.com/radiolips) and [Alain Dumesny](https://github.com/adumesny), originally created by [Pavel Reznikov](https://github.com/troolee). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help. +gridstack.js is currently maintained by [Alain Dumesny](https://github.com/adumesny) and [Dylan Weiss](https://github.com/radiolips), originally created by [Pavel Reznikov](https://github.com/troolee). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help. diff --git a/demo/float.html b/demo/float.html index edf7c094e..fe0de2a96 100644 --- a/demo/float.html +++ b/demo/float.html @@ -20,7 +20,6 @@

Float grid demo

- + + + +
+

Locked demo

+
+ Add Widget + float: true +
+

+
+
+ + + + diff --git a/doc/CHANGES.md b/doc/CHANGES.md index bacab24d5..aef8ae0ff 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -5,7 +5,8 @@ Change log **Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)* -- [1.1.0-dev (upcoming)](#110-dev-upcoming) +- [1.1.1-dev (upcoming)](#111-dev-upcoming) +- [1.1.1 (2020-03-17)](#111-2020-03-17) - [1.1.0 (2020-02-29)](#110-2020-02-29) - [v1.0.0 (2020-02-23)](#v100-2020-02-23) - [v0.6.4 (2020-02-17)](#v064-2020-02-17) @@ -32,13 +33,18 @@ Change log -## 1.1.0-dev (upcoming) +## 1.1.1-dev (upcoming) + +- fix [1229](https://github.com/gridstack/gridstack.js/issues/1229) `staticGrid` no longer disable oneColumnMode +- add `getGridItems()` to return list of HTML grid items + +## 1.1.1 (2020-03-17) - fix [1187](https://github.com/gridstack/gridstack.js/issues/1187) IE support for `CustomEvent` polyfill - thanks [@phil-blais](https://github.com/phil-blais) - fix [1204](https://github.com/gridstack/gridstack.js/issues/1204) destroy drag&drop when removing node(s) instead of just disabling it. -- include SASS source files to npm package again [1193](https://github.com/gridstack/gridstack.js/pull/1193) - include SASS source files to npm package again [1193](https://github.com/gridstack/gridstack.js/pull/1193) -- fix [1217](https://github.com/gridstack/gridstack.js/issues/1217) If I set `cellHeight` to some `vh`, only first grid will take `vh`, rest will use `px` -- add `getGridItems()` to return list of HTML grid items +- fix [1181](https://github.com/gridstack/gridstack.js/issues/1181) Locked widgets are still moveable by other widgets. +- fix [1217](https://github.com/gridstack/gridstack.js/issues/1217) If I set cellHeight to some vh, only first grid will take vh, rest will use px +- include SASS source files to npm package again [1193](https://github.com/gridstack/gridstack.js/pull/1193) ## 1.1.0 (2020-02-29) diff --git a/doc/README.md b/doc/README.md index 281ff7799..da522f6a6 100644 --- a/doc/README.md +++ b/doc/README.md @@ -100,7 +100,7 @@ gridstack.js API - `removeTimeout` - time in milliseconds before widget is being removed while dragging outside of the grid. (default: `2000`) - `row` - fix grid number of rows. This is a shortcut of writing `minRow:N, maxRow:N`. (default `0` no constrain) - `rtl` - if `true` turns grid to RTL. Possible values are `true`, `false`, `'auto'` (default: `'auto'`) See [example](http://gridstackjs.com/demo/rtl.html) -- `staticGrid` - makes grid static (default `false`). If true widgets are not movable/resizable. You don't even need jQueryUI draggable/resizable. A CSS class `grid-stack-static` is also added to the container. +- `staticGrid` - removes drag&drop&resize (default `false`). If `true` widgets are not movable/resizable by the user, but code can still move and oneColumnMode will still work. You don't even need jQueryUI draggable/resizable. A CSS class `grid-stack-static` is also added to the container. - `verticalMargin` - vertical gap size (default: `20`). Can be: * an integer (px) * a string (ex: '2em', '20px', '2rem') diff --git a/spec/gridstack-spec.js b/spec/gridstack-spec.js index 33ccd79ee..79afec38e 100644 --- a/spec/gridstack-spec.js +++ b/spec/gridstack-spec.js @@ -68,6 +68,7 @@ describe('gridstack', function() { staticGrid: true }; let grid = GridStack.init(options); + expect($('.grid-stack').hasClass('grid-stack-static')).toBe(true); $('.grid-stack').removeClass('grid-stack-static'); grid._setStaticClass(); expect($('.grid-stack').hasClass('grid-stack-static')).toBe(true); @@ -79,6 +80,7 @@ describe('gridstack', function() { staticGrid: false }; let grid = GridStack.init(options); + expect($('.grid-stack').hasClass('grid-stack-static')).toBe(false); $('.grid-stack').addClass('grid-stack-static'); grid._setStaticClass(); expect($('.grid-stack').hasClass('grid-stack-static')).toBe(false); diff --git a/yarn.lock b/yarn.lock index 9b36561c1..5adff9846 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4497,9 +4497,9 @@ minimist@0.0.8: integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0= minimist@^1.1.3, minimist@^1.2.0, minimist@~1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284" - integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ= + version "1.2.2" + resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.2.tgz#b00a00230a1108c48c169e69a291aafda3aacd63" + integrity sha512-rIqbOrKb8GJmx/5bc2M0QchhUouMXSpd1RTclXsB41JdL+VtnojfaJR+h7F9k18/4kHUsBFgk80Uk+q569vjPA== minimist@~0.0.1: version "0.0.10"