@@ -31,9 +28,8 @@

Widget added

diff --git a/demo/index.html b/demo/index.html index a61462c88..e6a2e8439 100644 --- a/demo/index.html +++ b/demo/index.html @@ -8,7 +8,7 @@

Demos

Advance
AniJS
AniJS Animation
Column
Float grid
Knockout.js

knockout.js Demo

Nested grids demo

Responsive grid demo

RTL Demo

Serialization demo

Two grids demo

Many Columns demo

' + i + '

gridstack.js tests

{ left:20, top: 20 }); +grid.removeAll(false); diff --git a/src/gridstack.d.ts b/src/gridstack.d.ts index ce4a18515..314debe6f 100644 --- a/src/gridstack.d.ts +++ b/src/gridstack.d.ts @@ -9,7 +9,10 @@ // TypeScript Version: 2.8 interface JQuery { - gridstack(options: GridstackOptions): JQuery; + /** initializing the element will return the grid or grids if multiple were present */ + gridstack(options: GridstackOptions): GridStack | GridStack[]; + + /** method to access the grid after the fact from the element */ data(key: 'gridstack'): GridStack; } @@ -30,8 +33,7 @@ interface GridStack { * See also `makeWidget()`. * * @example - * $('.grid-stack').gridstack(); - * var grid = $('.grid-stack').data('gridstack'); + * var grid = $('.grid-stack').gridstack(); * grid.addWidget(el, {width: 3, autoPosition: true}); * * @param el widget to add @@ -44,8 +46,7 @@ interface GridStack { * Legacy: Spelled out version of the widgets options, recommend use new version instead. * * @example - * $('.grid-stack').gridstack(); - * var grid = $('.grid-stack').data('gridstack'); + * var grid = $('.grid-stack').gridstack(); * grid.addWidget(el, 0, 0, 3, 2, true); * * @param el widget to add @@ -194,10 +195,9 @@ interface GridStack { * @param el widget to convert. * * @example - * $('.grid-stack').gridstack(); + * var grid = $('.grid-stack').gridstack(); * $('.grid-stack').append('

') - * var grid = $('.grid-stack').data('gridstack'); * grid.makeWidget('gsi-1'); */ makeWidget(el: GridStackElement): JQuery; diff --git a/src/gridstack.js b/src/gridstack.js index b56c7be11..b7e50bbec 100644 --- a/src/gridstack.js +++ b/src/gridstack.js @@ -2005,14 +2005,21 @@ scope.GridStackUI.Engine = GridStackEngine; scope.GridStackUI.GridStackDragDropPlugin = GridStackDragDropPlugin; + /** + * initializing the element will return the grid or grids if multiple were present + */ $.fn.gridstack = function(opts) { - return this.each(function() { + var grids = []; + this.each(function() { var o = $(this); - if (!o.data('gridstack')) { - o - .data('gridstack', new GridStack(this, opts)); + var grid = o.data('gridstack'); + if (!grid) { + grid = new GridStack(this, opts); + o.data('gridstack', grid); } + grids.push(grid); }); + return grids.length > 1 ? grids : grids[0]; }; return scope.GridStackUI; From 594fbe55a4f70c5feedc24a3558f8225f8f14036 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sat, 15 Feb 2020 16:40:59 -0800 Subject: [PATCH 02/44] Revert "`gridstack()` init method return GridStack ** BREAKING CHANGE***" --- demo/anijs.html | 14 ++- demo/column.html | 3 +- demo/float.html | 62 +++++------ demo/index.html | 2 +- demo/knockout.html | 6 +- demo/knockout2.html | 6 +- demo/nested.html | 4 +- demo/responsive.html | 2 +- demo/right-to-left(rtl).html | 6 +- demo/serialization.html | 90 ++++++++-------- demo/two.html | 4 +- doc/CHANGES.md | 14 +-- doc/README.md | 6 +- spec/e2e/html/810-many-columns.html | 21 ++-- spec/e2e/html/gridstack-with-height.html | 34 +++--- spec/gridstack-spec.js | 125 ++++++++++++----------- spec/gridstack-tests.ts | 20 ---- src/gridstack.d.ts | 14 +-- src/gridstack.js | 15 +-- 19 files changed, 227 insertions(+), 221 deletions(-) delete mode 100644 spec/gridstack-tests.ts diff --git a/demo/anijs.html b/demo/anijs.html index bc4b451c3..6636ac07b 100644 --- a/demo/anijs.html +++ b/demo/anijs.html @@ -10,9 +10,12 @@ + +

@@ -28,8 +31,9 @@

Widget added

diff --git a/demo/index.html b/demo/index.html index e6a2e8439..a61462c88 100644 --- a/demo/index.html +++ b/demo/index.html @@ -8,7 +8,7 @@

Demos

Advance
AniJS Animation
AniJS
Column
Float grid
Knockout.js

knockout.js Demo

Nested grids demo

Responsive grid demo

RTL Demo

Serialization demo

Two grids demo

Many Columns demo

' + i + '

gridstack.js tests

{ left:20, top: 20 }); -grid.removeAll(false); diff --git a/src/gridstack.d.ts b/src/gridstack.d.ts index 314debe6f..ce4a18515 100644 --- a/src/gridstack.d.ts +++ b/src/gridstack.d.ts @@ -9,10 +9,7 @@ // TypeScript Version: 2.8 interface JQuery { - /** initializing the element will return the grid or grids if multiple were present */ - gridstack(options: GridstackOptions): GridStack | GridStack[]; - - /** method to access the grid after the fact from the element */ + gridstack(options: GridstackOptions): JQuery; data(key: 'gridstack'): GridStack; } @@ -33,7 +30,8 @@ interface GridStack { * See also `makeWidget()`. * * @example - * var grid = $('.grid-stack').gridstack(); + * $('.grid-stack').gridstack(); + * var grid = $('.grid-stack').data('gridstack'); * grid.addWidget(el, {width: 3, autoPosition: true}); * * @param el widget to add @@ -46,7 +44,8 @@ interface GridStack { * Legacy: Spelled out version of the widgets options, recommend use new version instead. * * @example - * var grid = $('.grid-stack').gridstack(); + * $('.grid-stack').gridstack(); + * var grid = $('.grid-stack').data('gridstack'); * grid.addWidget(el, 0, 0, 3, 2, true); * * @param el widget to add @@ -195,9 +194,10 @@ interface GridStack { * @param el widget to convert. * * @example - * var grid = $('.grid-stack').gridstack(); + * $('.grid-stack').gridstack(); * $('.grid-stack').append('

') + * var grid = $('.grid-stack').data('gridstack'); * grid.makeWidget('gsi-1'); */ makeWidget(el: GridStackElement): JQuery; diff --git a/src/gridstack.js b/src/gridstack.js index b7e50bbec..b56c7be11 100644 --- a/src/gridstack.js +++ b/src/gridstack.js @@ -2005,21 +2005,14 @@ scope.GridStackUI.Engine = GridStackEngine; scope.GridStackUI.GridStackDragDropPlugin = GridStackDragDropPlugin; - /** - * initializing the element will return the grid or grids if multiple were present - */ $.fn.gridstack = function(opts) { - var grids = []; - this.each(function() { + return this.each(function() { var o = $(this); - var grid = o.data('gridstack'); - if (!grid) { - grid = new GridStack(this, opts); - o.data('gridstack', grid); + if (!o.data('gridstack')) { + o + .data('gridstack', new GridStack(this, opts)); } - grids.push(grid); }); - return grids.length > 1 ? grids : grids[0]; }; return scope.GridStackUI; From 8a6ff89087b98c9209542171341232f74ff03057 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sat, 15 Feb 2020 17:13:37 -0800 Subject: [PATCH 03/44] RemoveWidget() now call _triggerChangeEvent() * fix for #1142 * make sure to call any other change when adding/removing widgets * this right now can call extra uncessary change CB at times, but better than not calling on nodes that changed. --- spec/e2e/html/1142_change_event_missing.html | 48 ++++++++++++++++++++ src/gridstack.js | 6 +-- 2 files changed, 51 insertions(+), 3 deletions(-) create mode 100644 spec/e2e/html/1142_change_event_missing.html diff --git a/spec/e2e/html/1142_change_event_missing.html b/spec/e2e/html/1142_change_event_missing.html new file mode 100644 index 000000000..f2dbf634e --- /dev/null +++ b/spec/e2e/html/1142_change_event_missing.html @@ -0,0 +1,48 @@ + + + + + + + Codestin Search App + + + + + + + + + +

1 click to delete

2 missing change event

+ + + + \ No newline at end of file diff --git a/src/gridstack.js b/src/gridstack.js index b56c7be11..8ddba57d1 100644 --- a/src/gridstack.js +++ b/src/gridstack.js @@ -1453,7 +1453,7 @@ this._prepareElement(el, true); this._updateContainerHeight(); this._triggerAddEvent(); - // this._triggerChangeEvent(true); already have AddEvent + this._triggerChangeEvent(true); // trigger any other changes return el; }; @@ -1463,7 +1463,7 @@ this._prepareElement(el, true); this._updateContainerHeight(); this._triggerAddEvent(); - // this._triggerChangeEvent(true); already have AddEvent + this._triggerChangeEvent(true); // trigger any other changes return el; }; @@ -1485,7 +1485,7 @@ el.removeData('_gridstack_node'); this.grid.removeNode(node, detachNode); this._triggerRemoveEvent(); - // this._triggerChangeEvent(true); already have removeEvent + this._triggerChangeEvent(true); // trigger any other changes }; GridStack.prototype.removeAll = function(detachNode) { From f4c5d1c104ee832de610e323bdfbc55b4e6ea499 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sat, 15 Feb 2020 17:15:25 -0800 Subject: [PATCH 04/44] updated readme --- doc/CHANGES.md | 1 + 1 file changed, 1 insertion(+) diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 1ba3d229e..e80b3c285 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -31,6 +31,7 @@ Change log ## v0.6.3-dev (upcoming changes) +- fix [#1142](https://github.com/gridstack/gridstack.js/issues/1142) RemoveWidget() doesn't also trigger change events when it should - del `bower` since dead for a while now (https://snyk.io/blog/bower-is-dead/) ## v0.6.3 (2020-02-05) From 2c943749e5f6f98de93b0448860d3ca8ca3cd671 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 16 Feb 2020 08:46:05 -0800 Subject: [PATCH 05/44] optimized `change` callback * save original x,y,w,h values and only call those that changed (and not just tempory flag _dirty) * getting all the test cases was tricky. Used all demos with some mods. * related to #1147 which fixes #1142 --- demo/column.html | 2 ++ demo/two.html | 7 ++++++ doc/CHANGES.md | 5 ++-- src/gridstack.js | 59 ++++++++++++++++++++++++++++-------------------- 4 files changed, 46 insertions(+), 27 deletions(-) diff --git a/demo/column.html b/demo/column.html index d20388238..48052e306 100644 --- a/demo/column.html +++ b/demo/column.html @@ -62,7 +62,9 @@

setColumn() grid demo

{x: 2, y: 0, width: 2, height: 1}, {x: 5, y: 1, width: 1, height: 1}, {x: 5, y: 0, width: 2, height: 1}, + // {x: 0, y: 0, width: 1, height: 1}, // conflict {text: ' auto'}, // autoPosition testing + // {x: 4, y: 0, width: 1, height: 1}, // same auto-pos {x: 5, y: 3, width: 2, height: 1}, {x: 0, y: 4, width: 12, height: 1} ]; diff --git a/demo/two.html b/demo/two.html index a68c035cd..a92573931 100644 --- a/demo/two.html +++ b/demo/two.html @@ -11,6 +11,13 @@ + + diff --git a/doc/CHANGES.md b/doc/CHANGES.md index e80b3c285..0d4605663 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -31,8 +31,9 @@ Change log ## v0.6.3-dev (upcoming changes) -- fix [#1142](https://github.com/gridstack/gridstack.js/issues/1142) RemoveWidget() doesn't also trigger change events when it should -- del `bower` since dead for a while now (https://snyk.io/blog/bower-is-dead/) +- fix [#1142](https://github.com/gridstack/gridstack.js/issues/1142) add/remove widget will also trigger change events when it should. +- optimized `change` callback to save original x,y,w,h values and only call those that changed [1148](https://github.com/gridstack/gridstack.js/pull/1148) +- delete `bower` since [dead](https://snyk.io/blog/bower-is-dead) for a while now ## v0.6.3 (2020-02-05) diff --git a/src/gridstack.js b/src/gridstack.js index 8ddba57d1..2bf792c1c 100644 --- a/src/gridstack.js +++ b/src/gridstack.js @@ -473,13 +473,26 @@ this.nodes.forEach(function(n) { delete n._dirty; }); }; - GridStackEngine.prototype.getDirtyNodes = function() { + GridStackEngine.prototype.getDirtyNodes = function(verify) { + // compare original X,Y,W,H (or entire node?) instead as _dirty can be a temporary state + if (verify) { + var dirtNodes = []; + this.nodes.forEach(function (n) { + if (n._dirty) { + if (n.y === n._origY && n.x === n._origX && n.width === n._origW && n.height === n._origH) { + delete n._dirty; + } else { + dirtNodes.push(n); + } + } + }); + return dirtNodes; + } + return this.nodes.filter(function(n) { return n._dirty; }); }; GridStackEngine.prototype.addNode = function(node, triggerAddEvent) { - var prev = {x: node.x, y: node.y, width: node.width, height: node.height}; - node = this._prepareNode(node); if (node.maxWidth !== undefined) { node.width = Math.min(node.width, node.maxWidth); } @@ -511,10 +524,6 @@ if (triggerAddEvent) { this._addedNodes.push(node); } - // use single equal as they come as string/undefined but end as number.... - if (!node._dirty && (prev.x != node.x || prev.y != node.y || prev.width != node.width || prev.height != node.height)) { - node._dirty = true; - } this._fixCollisions(node); this._packNodes(); @@ -671,6 +680,11 @@ } }; + /** + * Construct a grid from the given element and options + * @param {GridStackElement} el + * @param {GridstackOptions} opts + */ var GridStack = function(el, opts) { var self = this; var oneColumnMode, _prevColumn, isAutoCellHeight; @@ -809,6 +823,7 @@ this._prepareElement(item.el); }, this); } + this.grid._saveInitial(); // initial start of items this.setAnimation(this.opts.animate); @@ -1018,19 +1033,20 @@ GridStack.prototype._triggerChangeEvent = function(/*forceTrigger*/) { if (this.grid._batchMode) { return; } - // TODO: compare original X,Y,W,H (or entire node?) instead as _dirty can be a temporary state - var elements = this.grid.getDirtyNodes(); + var elements = this.grid.getDirtyNodes(true); // verify they really changed if (elements && elements.length) { this.grid._layoutsNodesChange(elements); this.container.trigger('change', [elements]); - this.grid.cleanNodes(); // clear dirty flags now that we called } + this.grid._saveInitial(); // we called, now reset initial values & dirty flags }; GridStack.prototype._triggerAddEvent = function() { if (this.grid._batchMode) { return; } if (this.grid._addedNodes && this.grid._addedNodes.length > 0) { this.grid._layoutsNodesChange(this.grid._addedNodes); + // prevent added nodes from also triggering 'change' event (which is called next) + this.grid._addedNodes.forEach(function (n) { delete n._dirty; }); this.container.trigger('added', [this.grid._addedNodes]); this.grid._addedNodes = []; } @@ -1450,12 +1466,7 @@ el = $(el); this._writeAttr(el, node); this.container.append(el); - this._prepareElement(el, true); - this._updateContainerHeight(); - this._triggerAddEvent(); - this._triggerChangeEvent(true); // trigger any other changes - - return el; + return this.makeWidget(el); }; GridStack.prototype.makeWidget = function(el) { @@ -1697,11 +1708,12 @@ this.grid._sortNodes(); var nodes = this.grid.nodes; this.grid.nodes = []; // pretend we have no nodes to conflict layout to start with... - nodes.forEach(function(n) { - if (!n.noMove && !n.locked) { - n.autoPosition = true; + nodes.forEach(function(node) { + if (!node.noMove && !node.locked) { + node.autoPosition = true; } - this.grid.addNode(n, false); // 'false' for add event trigger + this.grid.addNode(node, false); // 'false' for add event trigger... + node._dirty = true; // force attr update }, this); this.commit(); }; @@ -1833,8 +1845,6 @@ }, this); } }, this); - - this._saveInitial(); // reset current value now that we diffed. } /** @@ -1923,9 +1933,6 @@ }, this); this.commit(); delete this._ignoreLayoutsNodeChange; - - // save this initial layout so we can see what changed and apply changes to other layouts better (diff) - this._saveInitial(); } /** called to save initial position/size */ @@ -1935,6 +1942,7 @@ n._origY = n.y; n._origW = n.width; n._origH = n.height; + delete n._dirty; }); } @@ -1992,6 +2000,7 @@ if (!val) { this.grid._packNodes(); this.grid._notify(); + this._triggerChangeEvent(); } }; From 87cc0ec744d605ae368c6fd04b1289a0ce53fca0 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 16 Feb 2020 18:07:56 -0800 Subject: [PATCH 06/44] fix nested grids with different `acceptWidgets` class * fix for #1143 * added sample test where parent and nested grid have different drop class support * while this.dd.droppable.accept() does check for el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets) to prevent wrong items from being dropped, the problem was that `dropover|dropout|drop` handlers did NOT return false so the parent grid was getting them as well, causing error --- doc/CHANGES.md | 1 + .../html/1143_nested_acceptWidget_types.html | 84 +++++++++++++++++++ src/gridstack.js | 3 + 3 files changed, 88 insertions(+) create mode 100644 spec/e2e/html/1143_nested_acceptWidget_types.html diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 0d4605663..3ba16de67 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -31,6 +31,7 @@ Change log ## v0.6.3-dev (upcoming changes) +- fix [#1143](https://github.com/gridstack/gridstack.js/issues/1143) nested grids with different `acceptWidgets` class - fix [#1142](https://github.com/gridstack/gridstack.js/issues/1142) add/remove widget will also trigger change events when it should. - optimized `change` callback to save original x,y,w,h values and only call those that changed [1148](https://github.com/gridstack/gridstack.js/pull/1148) - delete `bower` since [dead](https://snyk.io/blog/bower-is-dead) for a while now diff --git a/spec/e2e/html/1143_nested_acceptWidget_types.html b/spec/e2e/html/1143_nested_acceptWidget_types.html new file mode 100644 index 000000000..066b18ea0 --- /dev/null +++ b/spec/e2e/html/1143_nested_acceptWidget_types.html @@ -0,0 +1,84 @@ + + + + + + + Codestin Search App + + + + + + + + + + + + +

+ Drag me in into the dashboard! +

+ This nested grid accepts new widget with class "newWidget"
+ The parent grid also accepts new widget but with a differenent class 'otherWidgetType'
+

+ +

+ + + + diff --git a/src/gridstack.js b/src/gridstack.js index 2bf792c1c..fbdc490d0 100644 --- a/src/gridstack.js +++ b/src/gridstack.js @@ -968,6 +968,7 @@ el.data('_gridstack_node_orig', origNode); el.on('drag', onDrag); + return false; // prevent parent from receiving msg (which may be grid as well) }) .on(self.container, 'dropout', function(event, ui) { // jquery-ui bug. Must verify widget is being dropped out @@ -986,6 +987,7 @@ self.placeholder.detach(); self._updateContainerHeight(); el.data('_gridstack_node', el.data('_gridstack_node_orig')); + return false; // prevent parent from receiving msg (which may be grid as well) }) .on(self.container, 'drop', function(event, ui) { self.placeholder.detach(); @@ -1027,6 +1029,7 @@ $(ui.draggable).removeData('_gridstack_node'); $(ui.draggable).removeData('_gridstack_node_orig'); self.container.trigger('dropped', [originalNode, node]); + return false; // prevent parent from receiving msg (which may be grid as well) }); } }; From fa5073e36265f75da197bec17d56b68cd4e4d36a Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 16 Feb 2020 19:23:47 -0800 Subject: [PATCH 07/44] added info on how to extend library * doc for #1087 --- README.md | 19 +++++++++++++++++++ demo/two.html | 7 ------- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 0ed49c507..b9eedc38f 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,7 @@ Join us on Slack: https://gridstackjs.troolee.com - [Basic usage](#basic-usage) - [Requirements](#requirements) - [API Documentation](#api-documentation) + - [Extend Library](#extend-library) - [Touch devices support](#touch-devices-support) - [gridstack.js for specific frameworks](#gridstackjs-for-specific-frameworks) - [Change grid columns](#change-grid-columns) @@ -127,6 +128,24 @@ Using gridstack.js with jQuery UI Documentation can be found [here](https://github.com/gridstack/gridstack.js/tree/develop/doc). +## Extend Library + +You can easily extend or patch gridstack with code like this: + +```javascript +$(function () { + // extend gridstack with our own custom method + window.GridStackUI.prototype.printCount = function() { + console.log('grid has ' + this.grid.nodes.length + ' items'); + }; + + $('.grid-stack').gridstack(); + + // you can now call on any grid this... + $('.grid-stack').data('gridstack').printCount(); + }); +``` + ## Touch devices support Please use [jQuery UI Touch Punch](https://github.com/furf/jquery-ui-touch-punch) to make jQuery UI Draggable/Resizable diff --git a/demo/two.html b/demo/two.html index a92573931..a68c035cd 100644 --- a/demo/two.html +++ b/demo/two.html @@ -11,13 +11,6 @@ - - From e655503b4664e1d5a3114fe0e5733aa249a8b0af Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 16 Feb 2020 23:43:23 -0800 Subject: [PATCH 08/44] WebComponent support * insert style before our grid (instead of head) to support webcomponent * fix #540 * tested on Chrome, FF, Edge, IE11 and all our demos *Note: I didn't have a way to test webcomponent support, but this should do it. --- README.md | 2 +- doc/CHANGES.md | 1 + src/gridstack.js | 34 ++++++++++++++++++---------------- 3 files changed, 20 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index b9eedc38f..3a493ef7b 100644 --- a/README.md +++ b/README.md @@ -143,7 +143,7 @@ $(function () { // you can now call on any grid this... $('.grid-stack').data('gridstack').printCount(); - }); +}); ``` ## Touch devices support diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 3ba16de67..11e2adbc9 100644 --- a/doc/CHANGES.md +++ b/doc/CHANGES.md @@ -31,6 +31,7 @@ Change log ## v0.6.3-dev (upcoming changes) +- fix [#540](https://github.com/gridstack/gridstack.js/issues/540) WebComponent support: CSS file now insert before grid instead of 'head' - fix [#1143](https://github.com/gridstack/gridstack.js/issues/1143) nested grids with different `acceptWidgets` class - fix [#1142](https://github.com/gridstack/gridstack.js/issues/1142) add/remove widget will also trigger change events when it should. - optimized `change` callback to save original x,y,w,h values and only call those that changed [1148](https://github.com/gridstack/gridstack.js/pull/1148) diff --git a/src/gridstack.js b/src/gridstack.js index fbdc490d0..19f220f53 100644 --- a/src/gridstack.js +++ b/src/gridstack.js @@ -75,22 +75,23 @@ return Utils.sortBy(nodes, function(n) { return (n.x + n.y * column); }); }, - createStylesheet: function(id) { - var style = document.createElement('style'); - style.setAttribute('type', 'text/css'); - style.setAttribute('data-gs-style-id', id); - if (style.styleSheet) { - style.styleSheet.cssText = ''; - } else { - style.appendChild(document.createTextNode('')); - } - document.getElementsByTagName('head')[0].appendChild(style); - return style.sheet; - }, + createStylesheet: function(id, parent) { + var style = document.createElement('style'); + style.setAttribute('type', 'text/css'); + style.setAttribute('data-gs-style-id', id); + if (style.styleSheet) { + style.styleSheet.cssText = ''; + } else { + style.appendChild(document.createTextNode('')); + } + if (!parent) { parent = document.getElementsByTagName('head')[0]; } // default to head + parent.insertBefore(style, parent.firstChild); + return style.sheet; + }, - removeStylesheet: function(id) { - $('STYLE[data-gs-style-id=' + id + ']').remove(); - }, + removeStylesheet: function(id) { + $('STYLE[data-gs-style-id=' + id + ']').remove(); + }, insertCSSRule: function(sheet, selector, rules, index) { if (typeof sheet.insertRule === 'function') { @@ -1068,7 +1069,8 @@ Utils.removeStylesheet(this._stylesId); } this._stylesId = 'gridstack-style-' + (Math.random() * 100000).toFixed(); - this._styles = Utils.createStylesheet(this._stylesId); + // insert style to parent (instead of 'head') to support WebComponent + this._styles = Utils.createStylesheet(this._stylesId, this.container.get(0).parentNode); if (this._styles !== null) { this._styles._max = 0; } From 754cf7764f60f56827b764cf7023c78f92890204 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Sun, 16 Feb 2020 23:45:36 -0800 Subject: [PATCH 09/44] lint fix --- src/gridstack.js | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/src/gridstack.js b/src/gridstack.js index 19f220f53..6436a9317 100644 --- a/src/gridstack.js +++ b/src/gridstack.js @@ -75,23 +75,23 @@ return Utils.sortBy(nodes, function(n) { return (n.x + n.y * column); }); }, - createStylesheet: function(id, parent) { - var style = document.createElement('style'); - style.setAttribute('type', 'text/css'); - style.setAttribute('data-gs-style-id', id); - if (style.styleSheet) { - style.styleSheet.cssText = ''; - } else { - style.appendChild(document.createTextNode('')); - } - if (!parent) { parent = document.getElementsByTagName('head')[0]; } // default to head - parent.insertBefore(style, parent.firstChild); - return style.sheet; - }, + createStylesheet: function(id, parent) { + var style = document.createElement('style'); + style.setAttribute('type', 'text/css'); + style.setAttribute('data-gs-style-id', id); + if (style.styleSheet) { + style.styleSheet.cssText = ''; + } else { + style.appendChild(document.createTextNode('')); + } + if (!parent) { parent = document.getElementsByTagName('head')[0]; } // default to head + parent.insertBefore(style, parent.firstChild); + return style.sheet; + }, - removeStylesheet: function(id) { - $('STYLE[data-gs-style-id=' + id + ']').remove(); - }, + removeStylesheet: function(id) { + $('STYLE[data-gs-style-id=' + id + ']').remove(); + }, insertCSSRule: function(sheet, selector, rules, index) { if (typeof sheet.insertRule === 'function') { From 858e8ddaacde6cb591c36ca201e1c869d1d10085 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Mon, 17 Feb 2020 07:42:06 -0800 Subject: [PATCH 10/44] 0.6.4 release --- README.md | 14 +++++++------- doc/CHANGES.md | 9 +++++++-- package.json | 2 +- src/gridstack-extra.scss | 2 +- src/gridstack-poly.js | 2 +- src/gridstack.d.ts | 2 +- src/gridstack.jQueryUI.js | 2 +- src/gridstack.js | 2 +- src/gridstack.scss | 2 +- 9 files changed, 21 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 3a493ef7b..fee89d4d6 100644 --- a/README.md +++ b/README.md @@ -73,19 +73,19 @@ $ yarn install gridstack * Using CDN (minimized): ```html - + - + ``` * Using CDN (debug): ```html - + - - - + + + ``` ## Basic usage @@ -195,7 +195,7 @@ $('.grid-stack').gridstack( {column: N} ); 2) include `gridstack-extra.css` if **N < 12** (else custom CSS - see next). Without these, things will not render/work correctly. ```html - +

...

``` diff --git a/doc/CHANGES.md b/doc/CHANGES.md index 11e2adbc9..7d369cec7 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/)* -- [v0.6.3-dev (upcoming changes)](#v063-dev-upcoming-changes) +- [v0.6.4-dev (upcoming changes)](#v064-dev-upcoming-changes) +- [v0.6.4 (2020-02-17)](#v064-2020-02-17) - [v0.6.3 (2020-02-05)](#v063-2020-02-05) - [v0.6.2 (2020-02-03)](#v062-2020-02-03) - [v0.6.1 (2020-02-02)](#v061-2020-02-02) @@ -29,7 +30,11 @@ Change log -## v0.6.3-dev (upcoming changes) +## v0.6.4-dev (upcoming changes) + +- TBD + +## v0.6.4 (2020-02-17) - fix [#540](https://github.com/gridstack/gridstack.js/issues/540) WebComponent support: CSS file now insert before grid instead of 'head' - fix [#1143](https://github.com/gridstack/gridstack.js/issues/1143) nested grids with different `acceptWidgets` class diff --git a/package.json b/package.json index d40ee3b44..17e453570 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "gridstack", - "version": "0.6.3-dev", + "version": "0.6.4-dev", "description": "gridstack.js for dashboard layout and creation, with many wrappers (React, Angular, Ember, knockout...)", "main": "dist/gridstack.js", "repository": { diff --git a/src/gridstack-extra.scss b/src/gridstack-extra.scss index 239c58cda..297995b3e 100644 --- a/src/gridstack-extra.scss +++ b/src/gridstack-extra.scss @@ -1,5 +1,5 @@ /*! - * gridstack 0.6.3-dev extra CSS for [2-11] columns (non default) + * gridstack 0.6.4-dev extra CSS for [2-11] columns (non default) * https://gridstackjs.com/ * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov * gridstack.js may be freely distributed under the MIT license. diff --git a/src/gridstack-poly.js b/src/gridstack-poly.js index 84ff52cda..9ac9454de 100644 --- a/src/gridstack-poly.js +++ b/src/gridstack-poly.js @@ -1,4 +1,4 @@ -/** gridstack.js 0.6.3-dev - IE and older browsers Polyfills for this library @preserve*/ +/** gridstack.js 0.6.4-dev - IE and older browsers Polyfills for this library @preserve*/ /** * https://gridstackjs.com/ * (c) 2019-2020 Alain Dumesny diff --git a/src/gridstack.d.ts b/src/gridstack.d.ts index ce4a18515..abcec6545 100644 --- a/src/gridstack.d.ts +++ b/src/gridstack.d.ts @@ -1,4 +1,4 @@ -// Type definitions for Gridstack 0.6.3-dev +// Type definitions for Gridstack 0.6.4-dev // Project: https://gridstackjs.com/ // Definitions by: Pascal Senn // Ricky Blankenaufulland diff --git a/src/gridstack.jQueryUI.js b/src/gridstack.jQueryUI.js index 8af747008..880374522 100644 --- a/src/gridstack.jQueryUI.js +++ b/src/gridstack.jQueryUI.js @@ -1,4 +1,4 @@ -/** gridstack.js 0.6.3-dev - JQuery UI Drag&Drop plugin @preserve */ +/** gridstack.js 0.6.4-dev - JQuery UI Drag&Drop plugin @preserve */ /** * https://gridstackjs.com/ * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov diff --git a/src/gridstack.js b/src/gridstack.js index 6436a9317..e7c2c7ae2 100644 --- a/src/gridstack.js +++ b/src/gridstack.js @@ -1,5 +1,5 @@ /** - * gridstack.js 0.6.3-dev + * gridstack.js 0.6.4-dev * https://gridstackjs.com/ * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov * gridstack.js may be freely distributed under the MIT license. diff --git a/src/gridstack.scss b/src/gridstack.scss index d536c80ad..7d5ae3364 100644 --- a/src/gridstack.scss +++ b/src/gridstack.scss @@ -1,5 +1,5 @@ /*! - * required gridstack 0.6.3-dev CSS for default 12 and 1 columnMode size. Use gridstack-extra.css for others + * required gridstack 0.6.4-dev CSS for default 12 and 1 columnMode size. Use gridstack-extra.css for others * https://gridstackjs.com/ * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov * gridstack.js may be freely distributed under the MIT license. From 76b7a74ffbb798bc241b0919480e7e5101138b97 Mon Sep 17 00:00:00 2001 From: Alain Dumesny Date: Mon, 17 Feb 2020 19:19:58 -0800 Subject: [PATCH 11/44] removed jQuery from all API **BREAKING** BIG, BIG change for v1.0.0 release! * all calls/return take HTLMElement | string, not JQuery anymore * the `change|removed|added` events are now using standard calls with CustomEvent (rest are still JQ based) but all share basic same callback signature still. * added `grid.on(eventName, callback)` / `grid.off(eventName)` to hide native JQ events mix * updated all demos+doc to only plain DOM manipulation (only custom drag&drop jq UI remain) * created how to upgrade to 1.0.0 section * part of #1084 **Note**: had to modify jquery and jquery-ui loading (look for [alain] comment) to be able to compile it in and still work with webpack. Also (API break) * `setColumn(N)` is now `column(N)` and new `getColumn()` (matches other set/get methods) RANT: I hate git... must have wasted half day doing a rebase from develop on jquery branch only to scrap that and start over with latest and dumping my changes. --- .eslintignore | 1 + .travis.yml | 2 +- Gruntfile.js | 11 +- README.md | 193 +- demo/advance.html | 61 +- demo/anijs.html | 62 +- demo/column.html | 130 +- demo/experiment/test.html | 86 + demo/experiment/test2.html | 37 + demo/float.html | 68 +- demo/index.html | 1 - demo/knockout.html | 65 +- demo/knockout2.html | 99 - demo/nested.html | 48 +- demo/responsive.html | 86 +- demo/right-to-left(rtl).html | 65 +- demo/serialization.html | 114 +- demo/two.html | 120 +- doc/CHANGES.md | 22 +- doc/README.md | 124 +- karma.conf.js | 5 +- package.json | 40 +- .../1017-items-no-x-y-for-autoPosition.html | 16 +- spec/e2e/html/1142_change_event_missing.html | 22 +- .../html/1143_nested_acceptWidget_types.html | 49 +- spec/e2e/html/1155-max-row.html | 40 + spec/e2e/html/810-many-columns.html | 46 +- spec/e2e/html/events.html | 101 + spec/e2e/html/gridstack-with-height.html | 52 - spec/gridstack-engine-spec.js | 20 +- spec/gridstack-spec.js | 230 +- spec/gridstack-tests.ts | 24 + spec/utils-spec.js | 2 +- src/gridstack-extra.scss | 2 +- src/gridstack-poly.js | 2 +- src/gridstack.d.ts | 219 +- src/gridstack.jQueryUI.js | 19 +- src/gridstack.js | 399 +- src/gridstack.scss | 2 +- src/jquery-ui.js | 3 +- src/jquery.js | 10598 ++++++++++++++++ yarn.lock | 1473 ++- 42 files changed, 12831 insertions(+), 1928 deletions(-) create mode 100644 demo/experiment/test.html create mode 100644 demo/experiment/test2.html delete mode 100644 demo/knockout2.html create mode 100644 spec/e2e/html/1155-max-row.html create mode 100644 spec/e2e/html/events.html delete mode 100644 spec/e2e/html/gridstack-with-height.html create mode 100644 spec/gridstack-tests.ts create mode 100644 src/jquery.js diff --git a/.eslintignore b/.eslintignore index f89435d1d..62f10bcb9 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,5 @@ dist/*.js demo/* spec/* +src/jquery.js src/jquery-ui.js diff --git a/.travis.yml b/.travis.yml index b67c2f3a1..e8b0fe1e0 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,6 +1,6 @@ language: node_js node_js: -- 8.11.1 +- 8.17.0 dist: trusty sudo: required addons: diff --git a/Gruntfile.js b/Gruntfile.js index cfdf45b2c..144d25ea2 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -10,8 +10,14 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-contrib-connect'); grunt.loadNpmTasks('grunt-protractor-webdriver'); + const sass = require('node-sass'); + grunt.initConfig({ sass: { + options: { + implementation: sass, + sourceMap: true + }, dist: { files: { 'dist/gridstack.css': 'src/gridstack.scss', @@ -37,8 +43,10 @@ module.exports = function(grunt) { files: { 'dist/gridstack.js': ['src/gridstack.js'], 'dist/gridstack.d.ts': ['src/gridstack.d.ts'], + 'dist/gridstack.all.d.ts': ['src/gridstack.d.ts'], 'dist/gridstack.jQueryUI.js': ['src/gridstack.jQueryUI.js'], 'dist/gridstack-poly.js': ['src/gridstack-poly.js'], + 'dist/jquery.js': ['src/jquery.js'], 'dist/jquery-ui.js': ['src/jquery-ui.js'], } } @@ -57,8 +65,9 @@ module.exports = function(grunt) { 'dist/gridstack.min.js': ['src/gridstack.js'], 'dist/gridstack.jQueryUI.min.js': ['src/gridstack.jQueryUI.js'], 'dist/gridstack-poly.min.js': ['src/gridstack-poly.js'], + 'dist/jquery.min.js': ['src/jquery.js'], 'dist/jquery-ui.min.js': ['src/jquery-ui.js'], - 'dist/gridstack.all.js': ['src/gridstack-poly.js', 'src/gridstack.js', 'src/jquery-ui.js', 'src/gridstack.jQueryUI.js'] + 'dist/gridstack.all.js': ['src/gridstack-poly.js', 'src/jquery.js', 'src/gridstack.js', 'src/jquery-ui.js', 'src/gridstack.jQueryUI.js'] } } }, diff --git a/README.md b/README.md index fee89d4d6..1c9a3422a 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,21 @@ gridstack.js ============ -[![Build Status](https://travis-ci.org/gridstack/gridstack.js.svg?branch=develop)](https://travis-ci.org/gridstack/gridstack.js) -[![Coverage Status](https://coveralls.io/repos/github/gridstack/gridstack.js/badge.svg?branch=develop)](https://coveralls.io/github/gridstack/gridstack.js?branch=develop) +[![NPM version](https://img.shields.io/npm/v/gridstack.svg)](https://www.npmjs.com/package/gridstack) [![Dependency Status](https://david-dm.org/gridstack/gridstack.js.svg)](https://david-dm.org/gridstack/gridstack.js) [![devDependency Status](https://david-dm.org/gridstack/gridstack.js/dev-status.svg)](https://david-dm.org/gridstack/gridstack.js#info=devDependencies) +[![Coverage Status](https://coveralls.io/repos/github/gridstack/gridstack.js/badge.svg?branch=develop)](https://coveralls.io/github/gridstack/gridstack.js?branch=develop) +[![downloads](https://img.shields.io/npm/dm/gridstack.svg)](https://www.npmjs.com/package/gridstack) +[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/alaind831) -Mobile-friendly Javascript library for dashboard layout and creation. Making a drag-and-drop, multi-column dashboard has never been easier. Allows you to build draggable, responsive bootstrap v3-friendly layouts. It also has multiple bindings and works great with [React](https://reactjs.org/), [Angular](https://angular.io/), [Knockout.js](http://knockoutjs.com), [Ember](https://www.emberjs.com/) and others, and comes with a Typescript definition out of the box. +Mobile-friendly Javascript library (with Typescript bindings) for dashboard layout and creation. Making a drag-and-drop, multi-column responsive dashboard has never been easier. Allows you to build draggable, responsive bootstrap v4-friendly layouts. It also has multiple bindings and works great with [React](https://reactjs.org/), [Angular](https://angular.io/), [Knockout.js](http://knockoutjs.com), [Ember](https://www.emberjs.com/) and others. Includes Typescript defines. -Inspired by no-longer maintained gridster.js, built with love. +Inspired by no-longer maintained gridster, built with love. Please visit http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/). +If you find this lib useful, please [donate](https://www.paypal.me/alaind831) and help support it! + Join us on Slack: https://gridstackjs.troolee.com [![Slack Status](https://gridstackjs.troolee.com/badge.svg)](https://gridstackjs.troolee.com) @@ -28,12 +32,12 @@ Join us on Slack: https://gridstackjs.troolee.com - [Requirements](#requirements) - [API Documentation](#api-documentation) - [Extend Library](#extend-library) - - [Touch devices support](#touch-devices-support) - [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) - - [Migrating to v0.3.0](#migrating-to-v030) + - [Touch devices support](#touch-devices-support) + - [Migrating to v1.0.0](#migrating-to-v100) - [Changes](#changes) - [The Team](#the-team) @@ -43,7 +47,7 @@ Join us on Slack: https://gridstackjs.troolee.com Demo and examples ==== -Please visit http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/). +Please visit http://gridstackjs.com and [these demos](http://gridstackjs.com/demo/) Usage @@ -56,39 +60,43 @@ Usage [![NPM version](https://img.shields.io/npm/v/gridstack.svg)](https://www.npmjs.com/package/gridstack) ```bash -$ yarn install gridstack +yarn install gridstack +or +npm install --save gridstack ``` ## Include * local: - ```html - - + ``` * Using CDN (minimized): ```html - - - + + ``` -* Using CDN (debug): +if you need to debug, look at the git demo/ examples for non min includes. + +## Basic usage + +creating items dynamically... ```html - - - - - +

+ + ``` -## Basic usage +... or DOM created items ```html

@@ -101,9 +109,7 @@ $ yarn install gridstack

``` @@ -111,17 +117,7 @@ see [jsfiddle sample](https://jsfiddle.net/adumesny/jqhkry7g) as running example ## Requirements -* [jQuery](http://jquery.com) (>= 1.8) -* `Array.prototype.find`, and `Number.isNaN()` for IE and older browsers. - * Note: as of v0.5.4 We supply a separate `gridstack-poly.js` for that -(part of `gridstack.all.js`) or you can look at other pollyfills -([core.js](https://github.com/zloirock/core-js#ecmascript-6-array) and [mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)). - -Using gridstack.js with jQuery UI - -* [jQuery UI](http://jqueryui.com) (>= 1.12.0). Minimum required components: Draggable, Droppable, Resizable (Widget, Mouse, core). - * Note: as of v0.5.4 we include this subset as `jquery-ui.js` (and min.js) which is part of `gridstack.all.js`. If you wish to bring your own lib, include the individual gridstack parts instead of all.js -* (Optional) [jquery-ui-touch-punch](https://github.com/furf/jquery-ui-touch-punch) for touch-based devices support +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.all.js` and `gridstack.css` (layouts are done using CSS column based %). ## API Documentation @@ -132,48 +128,18 @@ Documentation can be found [here](https://github.com/gridstack/gridstack.js/tree You can easily extend or patch gridstack with code like this: -```javascript -$(function () { - // extend gridstack with our own custom method - window.GridStackUI.prototype.printCount = function() { - console.log('grid has ' + this.grid.nodes.length + ' items'); - }; - - $('.grid-stack').gridstack(); - - // you can now call on any grid this... - $('.grid-stack').data('gridstack').printCount(); -}); -``` - -## Touch devices support - -Please use [jQuery UI Touch Punch](https://github.com/furf/jquery-ui-touch-punch) to make jQuery UI Draggable/Resizable -working on touch-based devices. - -```html - - - - +```js +// extend gridstack with our own custom method +GridStack.prototype.printCount = function() { + console.log('grid has ' + this.grid.nodes.length + ' items'); +}; - -``` +var grid = GridStack.init(); -Also `alwaysShowResizeHandle` option may be useful: - -```javascript -$(function () { - var options = { - alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) - }; - $('.grid-stack').gridstack(options); -}); +// you can now call +grid.printCount(); ``` -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... @@ -190,7 +156,7 @@ GridStack makes it very easy if you need [1-12] columns out of the box (default 1) Change the `column` grid option when creating a grid to your number N ```js -$('.grid-stack').gridstack( {column: N} ); +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. @@ -260,32 +226,85 @@ and also have the `.grid-stack-N` prefix to support letting the user change colu You can override default `resizable`/`draggable` options. For instance to enable other then bottom right resizing handle you can init gridstack like: -```javascript -$('.grid-stack').gridstack({ +```js +GridStack.init({ resizable: { handles: 'e, se, s, sw, w' } }); ``` -Note: It's not recommended to enable `nw`, `n`, `ne` resizing handles. Their behaviour may be unexpected. - -## Migrating to v0.3.0 +Note: It's not recommended to enable `nw`, `n`, `ne` resizing handles. Their behavior may be unexpected. -As of v0.3.0, gridstack introduces a new plugin system. The drag'n'drop functionality has been modified to take advantage of this system. Because of this, and to avoid dependency on core code from jQuery UI, the plugin functionality was moved to a separate file. +## Touch devices support -To ensure gridstack continues to work, either include the additional `gridstack.jQueryUI.js` file into your HTML or use `gridstack.all.js`: +Please use [jQuery UI Touch Punch](https://github.com/furf/jquery-ui-touch-punch) to make jQuery UI Draggable/Resizable +working on touch-based devices. -```html - - -``` -or ```html + ``` -We're working on implementing support for other drag'n'drop libraries through the new plugin system. +Also `alwaysShowResizeHandle` option may be useful: + +```js +var options = { + alwaysShowResizeHandle: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) +}; +GridStack.init(options); +``` + +If you're still experiencing issues on touch devices please check [#444](https://github.com/gridstack/gridstack.js/issues/444) + + +## Migrating to v1.0.0 + +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) and is recommended you do that as internal dependencies will change. Right now jquery+jquery-ui (trimmed versions) are still being used internally for a short while. + +2. 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('grid-stack'); + +// returned Jquery element +grid.addWidget($('

test

'), {width: 2}); + +// jquery event handler +$('.grid-stack').on('added', function(e, items) {/* items contains info */}); + +``` +**NEW** +```js +// element identifier defaults to '.grid-stack', returns the grid +// for Typescript use window.GridStack.init() +var grid = GridStack.init(opts?, element?); + +// returns DOM element +grid.addWidget('

test

', {width: 2}); + +// event handler +grid.on('added', function(e, items) {/* items contains info */}); + +``` + +Other vars/global changes +``` +`GridStackUI` --> `GridStack` +`GridStackUI.GridStackEngine` --> `GridStack.Engine` +`grid.container` (jquery grid wrapper) --> `grid.el` (grid DOM element) +`grid.grid` (GridStackEngine) --> `grid.engine` +`grid.setColumn(N)` --> `grid.column(N)` and new `grid.column()` to get value, old API still supported though +``` + +Recommend looking at the [many samples](../demo) for more code examples. + +We're working on implementing support for other drag'n'drop libraries through the plugin system. Right now it is still jquery-ui based (but minimal build content) Changes ===== diff --git a/demo/advance.html b/demo/advance.html index f80232148..08a26f36f 100644 --- a/demo/advance.html +++ b/demo/advance.html @@ -12,9 +12,10 @@ - - + + + + + + +

Drag demo

+

+

Manual

HTML5 D&D

+ + + + + \ No newline at end of file diff --git a/demo/experiment/test2.html b/demo/experiment/test2.html new file mode 100644 index 000000000..9afe50593 --- /dev/null +++ b/demo/experiment/test2.html @@ -0,0 +1,37 @@ + + + + + + + + +

Drag the W3Schools image into the rectangle:

+ +

+
+

+ + + \ No newline at end of file diff --git a/demo/float.html b/demo/float.html index da61a03d1..dbc66085b 100644 --- a/demo/float.html +++ b/demo/float.html @@ -7,10 +7,9 @@ Codestin Search App - - - + + @@ -18,8 +17,8 @@

Float grid demo

- - float: true + Add Widget + float: true

@@ -27,41 +26,32 @@

Float grid demo

diff --git a/demo/index.html b/demo/index.html index a61462c88..3d4e51cf0 100644 --- a/demo/index.html +++ b/demo/index.html @@ -12,7 +12,6 @@

Demos

diff --git a/demo/knockout.html b/demo/knockout.html index b0bfab6aa..1021503a2 100644 --- a/demo/knockout.html +++ b/demo/knockout.html @@ -8,10 +8,11 @@ - - + + + @@ -34,10 +35,8 @@

knockout.js Demo

this.widgets = controller.widgets; this.afterAddWidget = function (items) { - if (grid == null) { - grid = $(componentInfo.element).find('.grid-stack').gridstack({ - auto: false - }).data('gridstack'); + if (!grid ) { + grid = GridStack.init({auto: false}); } var item = items.find(function (i) { return i.nodeType == 1 }); @@ -55,45 +54,43 @@

knockout.js Demo

[ '

', '

', - '

', + '

', '

' ].join('') }); - $(function () { - var Controller = function (widgets) { - var self = this; + var Controller = function (widgets) { + var self = this; - this.widgets = ko.observableArray(widgets); + this.widgets = ko.observableArray(widgets); - this.addNewWidget = function () { - this.widgets.push({ - x: 0, - y: 0, - width: Math.floor(1 + 3 * Math.random()), - height: Math.floor(1 + 3 * Math.random()), - auto_position: true - }); - return false; - }; + this.addNewWidget = function () { + this.widgets.push({ + x: 0, + y: 0, + width: Math.floor(1 + 3 * Math.random()), + height: Math.floor(1 + 3 * Math.random()), + auto_position: true + }); + return false; + }; - this.deleteWidget = function (item) { - self.widgets.remove(item); - return false; - }; + this.deleteWidget = function (item) { + self.widgets.remove(item); + return false; }; + }; - var widgets = [ - {x: 0, y: 0, width: 2, height: 2, id: '0'}, - {x: 2, y: 0, width: 4, height: 2, id: '1'}, - {x: 6, y: 0, width: 2, height: 4, id: '2'}, - {x: 1, y: 2, width: 4, height: 2, id: '3'} - ]; + var widgets = [ + {x: 0, y: 0, width: 2, height: 2, id: '0'}, + {x: 2, y: 0, width: 4, height: 2, id: '1'}, + {x: 6, y: 0, width: 2, height: 4, id: '2'}, + {x: 1, y: 2, width: 4, height: 2, id: '3'} + ]; - var controller = new Controller(widgets); - ko.applyBindings(controller); - }); + var controller = new Controller(widgets); + ko.applyBindings(controller); diff --git a/demo/knockout2.html b/demo/knockout2.html deleted file mode 100644 index c7d563362..000000000 --- a/demo/knockout2.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - - - - Codestin Search App - - - - - - - - - - -

knockout.js Demo

- Add Widget -

-
-

- - - - - - diff --git a/demo/nested.html b/demo/nested.html index fde47e225..17203189b 100644 --- a/demo/nested.html +++ b/demo/nested.html @@ -8,9 +8,9 @@ - - + + - - + + + @@ -39,10 +40,8 @@

RTL Demo

this.widgets = controller.widgets; this.afterAddWidget = function (items) { - if (grid == null) { - grid = $(componentInfo.element).find('.grid-stack').gridstack({ - auto: false - }).data('gridstack'); + if (!grid) { + grid = GridStack.init({auto: false}); } var item = items.find(function (i) { return i.nodeType == 1 }); @@ -66,40 +65,38 @@

RTL Demo

].join('') }); - $(function () { - var Controller = function (widgets) { - var self = this; + var Controller = function (widgets) { + var self = this; - this.widgets = ko.observableArray(widgets); + this.widgets = ko.observableArray(widgets); - this.addNewWidget = function () { - this.widgets.push({ - x: 0, - y: 0, - width: Math.floor(1 + 3 * Math.random()), - height: Math.floor(1 + 3 * Math.random()), - auto_position: true, - index: 'auto' - }); - return false; - }; + this.addNewWidget = function () { + this.widgets.push({ + x: 0, + y: 0, + width: Math.floor(1 + 3 * Math.random()), + height: Math.floor(1 + 3 * Math.random()), + auto_position: true, + index: 'auto' + }); + return false; + }; - this.deleteWidget = function (item) { - self.widgets.remove(item); - return false; - }; + this.deleteWidget = function (item) { + self.widgets.remove(item); + return false; }; + }; - var widgets = [ - {x: 0, y: 0, width: 2, height: 2, index: 1}, - {x: 2, y: 0, width: 4, height: 2, index: 2}, - {x: 6, y: 0, width: 2, height: 4, index: 3}, - {x: 1, y: 2, width: 4, height: 2, index: 4} - ]; + var widgets = [ + {x: 0, y: 0, width: 2, height: 2, index: 1}, + {x: 2, y: 0, width: 4, height: 2, index: 2}, + {x: 6, y: 0, width: 2, height: 4, index: 3}, + {x: 1, y: 2, width: 4, height: 2, index: 4} + ]; - var controller = new Controller(widgets); - ko.applyBindings(controller); - }); + var controller = new Controller(widgets); + ko.applyBindings(controller); diff --git a/demo/serialization.html b/demo/serialization.html index 4bff15491..5e9f78fcf 100644 --- a/demo/serialization.html +++ b/demo/serialization.html @@ -8,17 +8,17 @@ - - + +

Serialization demo

- Save Grid - Load Grid - Clear Grid + Save + Load + Clear

@@ -26,73 +26,53 @@

Serialization demo

diff --git a/demo/two.html b/demo/two.html index a68c035cd..a94b1009c 100644 --- a/demo/two.html +++ b/demo/two.html @@ -10,9 +10,9 @@ - - + + @@ -37,12 +37,12 @@

This nested grid accepts new widget with class "newWidget"
- The parent grid also accepts new widget but with a differenent class 'otherWidgetType'
-

+ The parent grid also accepts new widget but with a different class 'otherWidgetType'
+

@@ -58,26 +58,23 @@

diff --git a/spec/e2e/html/1155-max-row.html b/spec/e2e/html/1155-max-row.html new file mode 100644 index 000000000..f22dda505 --- /dev/null +++ b/spec/e2e/html/1155-max-row.html @@ -0,0 +1,40 @@ + + + + + + + Codestin Search App + + + + + + + + + +

maxRow Test

+
+

+ + + + diff --git a/spec/e2e/html/810-many-columns.html b/spec/e2e/html/810-many-columns.html index 85131fe16..fc280f513 100644 --- a/spec/e2e/html/810-many-columns.html +++ b/spec/e2e/html/810-many-columns.html @@ -9,7 +9,7 @@ - + @@ -18,7 +18,7 @@

Many Columns demo

- + Add Widget

@@ -26,31 +26,23 @@

Many Columns demo

diff --git a/spec/e2e/html/events.html b/spec/e2e/html/events.html new file mode 100644 index 000000000..94d54f783 --- /dev/null +++ b/spec/e2e/html/events.html @@ -0,0 +1,101 @@ + + + + + + + Codestin Search App + + + + + + + + + +

Events test

Add Widget

+
+

+ + + + diff --git a/spec/e2e/html/gridstack-with-height.html b/spec/e2e/html/gridstack-with-height.html deleted file mode 100644 index 97cc86ce0..000000000 --- a/spec/e2e/html/gridstack-with-height.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - Codestin Search App - - - - - - - - - -

gridstack.js tests

-
-

- - - - diff --git a/spec/gridstack-engine-spec.js b/spec/gridstack-engine-spec.js index f073ff1ff..25c598d86 100644 --- a/spec/gridstack-engine-spec.js +++ b/spec/gridstack-engine-spec.js @@ -6,14 +6,14 @@ describe('gridstack engine', function() { beforeEach(function() { w = window; - e = w.GridStackUI.Engine; + e = GridStack.Engine; }); describe('test constructor', function() { var engine; beforeAll(function() { - engine = new GridStackUI.Engine(12); + engine = new GridStack.Engine(12); }); it('should be setup properly', function() { @@ -28,7 +28,7 @@ describe('gridstack engine', function() { var engine; beforeAll(function() { - engine = new GridStackUI.Engine(12); + engine = new GridStack.Engine(12); }); it('should prepare a node', function() { @@ -53,7 +53,7 @@ describe('gridstack engine', function() { var engine; beforeAll(function() { - engine = new GridStackUI.Engine(12, null, true); + engine = new GridStack.Engine(12, null, true); engine.nodes = [ engine._prepareNode({x: 3, y: 2, width: 3, height: 2}) ]; @@ -74,7 +74,7 @@ describe('gridstack engine', function() { var engine; beforeAll(function() { - engine = new GridStackUI.Engine(12, null, true); + engine = new GridStack.Engine(12, null, true); engine.nodes = [ engine._prepareNode({x: 0, y: 0, width: 1, height: 1, idx: 1, _dirty: true}), engine._prepareNode({x: 3, y: 2, width: 3, height: 2, idx: 2, _dirty: true}), @@ -112,7 +112,7 @@ describe('gridstack engine', function() { var engine; beforeAll(function() { - engine = new GridStackUI.Engine(12); + engine = new GridStack.Engine(12); }); it('should work on not float grids', function() { @@ -140,7 +140,7 @@ describe('gridstack engine', function() { var engine; beforeAll(function() { - engine = new GridStackUI.Engine(12, null, true); + engine = new GridStack.Engine(12, null, true); }); it('should work on float grids', function() { @@ -164,7 +164,7 @@ describe('gridstack engine', function() { }; spyOn(spy, 'callback'); - engine = new GridStackUI.Engine(12, spy.callback, true); + engine = new GridStack.Engine(12, spy.callback, true); engine.nodes = [ engine._prepareNode({x: 0, y: 0, width: 1, height: 1, idx: 1, _dirty: true}), @@ -223,7 +223,7 @@ describe('gridstack engine', function() { }; beforeEach(function() { - engine = new GridStackUI.Engine(12, null, false); + engine = new GridStack.Engine(12, null, false); }); it('shouldn\'t pack one node with y coord eq 0', function() { @@ -290,7 +290,7 @@ describe('gridstack engine', function() { var engine; beforeAll(function() { - engine = new GridStackUI.Engine(12); + engine = new GridStack.Engine(12); }); it('should return true for changed x', function() { diff --git a/spec/gridstack-spec.js b/spec/gridstack-spec.js index b96997e9a..a8aaa49cd 100644 --- a/spec/gridstack-spec.js +++ b/spec/gridstack-spec.js @@ -26,7 +26,7 @@ describe('gridstack', function() { beforeEach(function() { w = window; - e = w.GridStackUI.Engine; + e = GridStack.Engine; }); describe('setup of gridstack', function() { @@ -114,7 +114,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); $('.grid-stack').removeClass('grid-stack-animate'); grid.setAnimation(true); expect($('.grid-stack').hasClass('grid-stack-animate')).toBe(true); @@ -124,7 +124,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); $('.grid-stack').addClass('grid-stack-animate'); grid.setAnimation(false); expect($('.grid-stack').hasClass('grid-stack-animate')).toBe(false); @@ -144,7 +144,7 @@ describe('gridstack', function() { verticalMargin: 10, staticGrid: true }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); $('.grid-stack').removeClass('grid-stack-static'); grid._setStaticClass(); expect($('.grid-stack').hasClass('grid-stack-static')).toBe(true); @@ -155,7 +155,7 @@ describe('gridstack', function() { verticalMargin: 10, staticGrid: false }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); $('.grid-stack').addClass('grid-stack-static'); grid._setStaticClass(); expect($('.grid-stack').hasClass('grid-stack-static')).toBe(false); @@ -174,7 +174,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var container = $('.grid-stack'); var pixel = {top: 500, left: 200}; var cell = grid.getCellFromPixel(pixel); @@ -186,7 +186,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var pixel = {top: 500, left: 200}; var cell = grid.getCellFromPixel(pixel, false); expect(cell.x).toBe(2); @@ -197,7 +197,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var pixel = {top: 500, left: 200}; var cell = grid.getCellFromPixel(pixel, true); expect(cell.x).toBe(2); @@ -218,7 +218,7 @@ describe('gridstack', function() { verticalMargin: 10, column: 12 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var res = Math.round($('.grid-stack').outerWidth() / 12); expect(grid.cellWidth()).toBe(res); }); @@ -228,7 +228,7 @@ describe('gridstack', function() { verticalMargin: 10, column: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var res = Math.round($('.grid-stack').outerWidth() / 10); expect(grid.cellWidth()).toBe(res); }); @@ -249,10 +249,11 @@ describe('gridstack', function() { verticalMargin: verticalMargin, column: 12 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var container = $('.grid-stack'); - var grid = container.data('gridstack'); - var rows = container.attr('data-gs-current-height'); + var rows = parseInt(container.attr('data-gs-current-row')); + + expect(grid.getRow()).toBe(rows); expect(grid.cellHeight()).toBe(cellHeight); expect(parseInt(container.css('height'))).toBe(rows * cellHeight + (rows-1) * verticalMargin); @@ -273,7 +274,7 @@ describe('gridstack', function() { }); }); - describe('grid.setColumn', function() { + describe('grid.column', function() { beforeEach(function() { document.body.insertAdjacentHTML('afterbegin', gridstackHTML); }); @@ -281,29 +282,29 @@ describe('gridstack', function() { document.body.removeChild(document.getElementById('gs-cont')); }); it('should have no changes', function() { - var grid = $('.grid-stack').gridstack().data('gridstack'); - expect(grid.opts.column).toBe(12); - grid.setColumn(12); - expect(grid.opts.column).toBe(12); + var grid = GridStack.init(); + expect(grid.column()).toBe(12); + grid.column(12); + expect(grid.column()).toBe(12); }); it('should SMALL change column number, no relayout', function() { var options = { column: 12 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); - grid.setColumn(10, false); - expect(grid.opts.column).toBe(10); + grid.column(10, false); + expect(grid.column()).toBe(10); for (var j = 0; j < items.length; j++) { expect(parseInt($(items[j]).attr('data-gs-y'), 10)).toBe(0); } - grid.setColumn(9, true); - expect(grid.opts.column).toBe(9); + grid.column(9, true); + expect(grid.column()).toBe(9); for (var j = 0; j < items.length; j++) { expect(parseInt($(items[j]).attr('data-gs-y'), 10)).toBe(0); } - grid.setColumn(12); - expect(grid.opts.column).toBe(12); + grid.column(12); + expect(grid.column()).toBe(12); for (var j = 0; j < items.length; j++) { expect(parseInt($(items[j]).attr('data-gs-y'), 10)).toBe(0); } @@ -313,7 +314,7 @@ describe('gridstack', function() { column: 12, float: true }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var el1 = $('#item1') var el2 = $('#item2') @@ -328,8 +329,8 @@ describe('gridstack', function() { expect(parseInt(el2.attr('data-gs-width'))).toBe(4); expect(parseInt(el2.attr('data-gs-height'))).toBe(4); // 1 column will have item1, item2 - grid.setColumn(1); - expect(grid.opts.column).toBe(1); + grid.column(1); + expect(grid.column()).toBe(1); expect(parseInt(el1.attr('data-gs-x'))).toBe(0); expect(parseInt(el1.attr('data-gs-y'))).toBe(0); expect(parseInt(el1.attr('data-gs-width'))).toBe(1); @@ -341,7 +342,7 @@ describe('gridstack', function() { expect(parseInt(el2.attr('data-gs-height'))).toBe(4); // add default 1x1 item to the end (1 column) - var el3 = grid.addWidget(widgetHTML); + var el3 = $(grid.addWidget(widgetHTML)); expect(el3).not.toBe(null); expect(parseInt(el3.attr('data-gs-x'))).toBe(0); expect(parseInt(el3.attr('data-gs-y'))).toBe(6); @@ -349,8 +350,8 @@ describe('gridstack', function() { expect(parseInt(el3.attr('data-gs-height'))).toBe(1); // back to 12 column and initial layout (other than new item3) - grid.setColumn(12); - expect(grid.opts.column).toBe(12); + grid.column(12); + expect(grid.column()).toBe(12); expect(parseInt(el1.attr('data-gs-x'))).toBe(0); expect(parseInt(el1.attr('data-gs-y'))).toBe(0); expect(parseInt(el1.attr('data-gs-width'))).toBe(4); @@ -367,8 +368,8 @@ describe('gridstack', function() { expect(parseInt(el3.attr('data-gs-height'))).toBe(1); // back to 1 column, move item2 to beginning to [3][1][2] vertically - grid.setColumn(1); - expect(grid.opts.column).toBe(1); + grid.column(1); + expect(grid.column()).toBe(1); grid.move(el3, 0, 0); expect(parseInt(el3.attr('data-gs-x'))).toBe(0); expect(parseInt(el3.attr('data-gs-y'))).toBe(0); @@ -386,8 +387,8 @@ describe('gridstack', function() { expect(parseInt(el2.attr('data-gs-height'))).toBe(4); // back to 12 column, el3 to be beginning still, but [1][2] to be in 1 columns still but wide 4x2 and 4x still - grid.setColumn(12); - expect(grid.opts.column).toBe(12); + grid.column(12); + expect(grid.column()).toBe(12); expect(parseInt(el3.attr('data-gs-x'))).toBe(0); expect(parseInt(el3.attr('data-gs-y'))).toBe(0); expect(parseInt(el3.attr('data-gs-width'))).toBe(1); @@ -404,9 +405,9 @@ describe('gridstack', function() { expect(parseInt(el2.attr('data-gs-height'))).toBe(4); // 2 column will have item1, item2, item3 in 1 column still but half the width - grid.setColumn(1); // test convert from small, should use 12 layout still - grid.setColumn(2); - expect(grid.opts.column).toBe(2); + grid.column(1); // test convert from small, should use 12 layout still + grid.column(2); + expect(grid.column()).toBe(2); expect(parseInt(el3.attr('data-gs-x'))).toBe(0); expect(parseInt(el3.attr('data-gs-y'))).toBe(0); @@ -437,10 +438,10 @@ describe('gridstack', function() { column: 12, float: true }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); - var el1 = grid.addWidget(widgetHTML, {width:1, height:1}); - var el2 = grid.addWidget(widgetHTML, {x:2, y:0, width:2, height:1}); - var el3 = grid.addWidget(widgetHTML, {x:1, y:0, width:1, height:2}); + var grid = GridStack.init(options); + var el1 = $(grid.addWidget(widgetHTML, {width:1, height:1})); + var el2 = $(grid.addWidget(widgetHTML, {x:2, y:0, width:2, height:1})); + var el3 = $(grid.addWidget(widgetHTML, {x:1, y:0, width:1, height:2})); // items are item1[1x1], item3[1x1], item2[2x1] expect(parseInt(el1.attr('data-gs-x'))).toBe(0); @@ -459,7 +460,7 @@ describe('gridstack', function() { expect(parseInt(el2.attr('data-gs-height'))).toBe(1); // items are item1[1x1], item3[1x2], item2[1x1] in 1 column - grid.setColumn(1); + grid.column(1); expect(parseInt(el1.attr('data-gs-x'))).toBe(0); expect(parseInt(el1.attr('data-gs-y'))).toBe(0); expect(parseInt(el1.attr('data-gs-width'))).toBe(1); @@ -481,10 +482,10 @@ describe('gridstack', function() { oneColumnModeDomSort: true, float: true }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); - var el1 = grid.addWidget(widgetHTML, {width:1, height:1}); - var el2 = grid.addWidget(widgetHTML, {x:2, y:0, width:2, height:1}); - var el3 = grid.addWidget(widgetHTML, {x:1, y:0, width:1, height:2}); + var grid = GridStack.init(options); + var el1 = $(grid.addWidget(widgetHTML, {width:1, height:1})); + var el2 = $(grid.addWidget(widgetHTML, {x:2, y:0, width:2, height:1})); + var el3 = $(grid.addWidget(widgetHTML, {x:1, y:0, width:1, height:2})); // items are item1[1x1], item3[1x1], item2[2x1] expect(parseInt(el1.attr('data-gs-x'))).toBe(0); @@ -503,7 +504,7 @@ describe('gridstack', function() { expect(parseInt(el2.attr('data-gs-height'))).toBe(1); // items are item1[1x1], item2[1x1], item3[1x2] in 1 column dom ordered - grid.setColumn(1); + grid.column(1); expect(parseInt(el1.attr('data-gs-x'))).toBe(0); expect(parseInt(el1.attr('data-gs-y'))).toBe(0); expect(parseInt(el1.attr('data-gs-width'))).toBe(1); @@ -533,7 +534,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); for (var i = 0; i < items.length; i++) { grid.minWidth(items[i], 2); @@ -556,7 +557,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); for (var i = 0; i < items.length; i++) { grid.maxWidth(items[i], 2); @@ -579,7 +580,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); for (var i = 0; i < items.length; i++) { grid.minHeight(items[i], 2); @@ -602,7 +603,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); for (var i = 0; i < items.length; i++) { grid.maxHeight(items[i], 2); @@ -625,7 +626,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var shouldBeFalse = grid.isAreaEmpty(1, 1, 1, 1); expect(shouldBeFalse).toBe(false); }); @@ -634,7 +635,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var shouldBeTrue = grid.isAreaEmpty(5, 5, 1, 1); expect(shouldBeTrue).toBe(true); }); @@ -648,21 +649,21 @@ describe('gridstack', function() { document.body.removeChild(document.getElementById('gs-cont')); }); it('should remove all children by default', function() { - var grid = $('.grid-stack').gridstack().data('gridstack'); + var grid = GridStack.init(); grid.removeAll(); - expect(grid.grid.nodes).toEqual([]); + expect(grid.engine.nodes).toEqual([]); expect(document.getElementById('item1')).toBe(null); }); it('should remove all children', function() { - var grid = $('.grid-stack').gridstack().data('gridstack'); + var grid = GridStack.init(); grid.removeAll(true); - expect(grid.grid.nodes).toEqual([]); + expect(grid.engine.nodes).toEqual([]); expect(document.getElementById('item1')).toBe(null); }); it('should remove gridstack part, leave DOM behind', function() { - var grid = $('.grid-stack').gridstack().data('gridstack'); + var grid = GridStack.init(); grid.removeAll(false); - expect(grid.grid.nodes).toEqual([]); + expect(grid.engine.nodes).toEqual([]); expect(document.getElementById('item1')).not.toBe(null); }); }); @@ -675,25 +676,25 @@ describe('gridstack', function() { document.body.removeChild(document.getElementById('gs-cont')); }); it('should remove first item (default), then second (true), then third (false)', function() { - var grid = $('.grid-stack').gridstack().data('gridstack'); - expect(grid.grid.nodes.length).toEqual(2); + var grid = GridStack.init(); + expect(grid.engine.nodes.length).toEqual(2); var el1 = document.getElementById('item1'); expect(el1).not.toBe(null); grid.removeWidget(el1); - expect(grid.grid.nodes.length).toEqual(1); + expect(grid.engine.nodes.length).toEqual(1); expect(document.getElementById('item1')).toBe(null); expect(document.getElementById('item2')).not.toBe(null); var el2 = document.getElementById('item2'); grid.removeWidget(el2, true); - expect(grid.grid.nodes.length).toEqual(0); + expect(grid.engine.nodes.length).toEqual(0); expect(document.getElementById('item2')).toBe(null); var el3 = grid.addWidget(widgetHTML); expect(el3).not.toBe(null); grid.removeWidget(el3, false); - expect(grid.grid.nodes.length).toEqual(0); + expect(grid.engine.nodes.length).toEqual(0); expect(document.getElementById('item3')).not.toBe(null); }); }); @@ -711,7 +712,7 @@ describe('gridstack', function() { verticalMargin: 10, float: true }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); var $el; var $oldEl; @@ -727,7 +728,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); var $el; var $oldEl; @@ -751,7 +752,7 @@ describe('gridstack', function() { document.body.removeChild(document.getElementById('gs-cont')); }); it('should keep all widget options the same (autoPosition off', function() { - var grid = $('.grid-stack').gridstack({float: true}).data('gridstack');; + var grid = GridStack.init({float: true});; var widget = grid.addWidget(widgetHTML, 6, 7, 2, 3, false, 1, 4, 2, 5, 'coolWidget'); var $widget = $(widget); expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(6); @@ -804,7 +805,7 @@ describe('gridstack', function() { document.body.removeChild(document.getElementById('gs-cont')); }); it('should change x, y coordinates for widgets.', function() { - var grid = $('.grid-stack').gridstack({float: true}).data('gridstack'); + var grid = GridStack.init({float: true}); var widget = grid.addWidget(widgetHTML, 9, 7, 2, 3, true); var $widget = $(widget); expect(parseInt($widget.attr('data-gs-x'), 10)).not.toBe(9); @@ -820,7 +821,7 @@ describe('gridstack', function() { document.body.removeChild(document.getElementById('gs-cont')); }); it('should autoPosition (missing X,Y)', function() { - var grid = $('.grid-stack').gridstack().data('gridstack'); + var grid = GridStack.init(); var widget = grid.addWidget(widgetHTML, {height: 2, id: 'optionWidget'}); var $widget = $(widget); expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8); @@ -835,7 +836,7 @@ describe('gridstack', function() { expect($widget.attr('data-gs-id')).toBe('optionWidget'); }); it('should autoPosition (missing X)', function() { - var grid = $('.grid-stack').gridstack().data('gridstack'); + var grid = GridStack.init(); var widget = grid.addWidget(widgetHTML, {y: 9, height: 2, id: 'optionWidget'}); var $widget = $(widget); expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8); @@ -850,7 +851,7 @@ describe('gridstack', function() { expect($widget.attr('data-gs-id')).toBe('optionWidget'); }); it('should autoPosition (missing Y)', function() { - var grid = $('.grid-stack').gridstack().data('gridstack'); + var grid = GridStack.init(); var widget = grid.addWidget(widgetHTML, {x: 9, height: 2, id: 'optionWidget'}); var $widget = $(widget); expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8); @@ -865,7 +866,7 @@ describe('gridstack', function() { expect($widget.attr('data-gs-id')).toBe('optionWidget'); }); it('should autoPosition (correct X, missing Y)', function() { - var grid = $('.grid-stack').gridstack().data('gridstack'); + var grid = GridStack.init(); var widget = grid.addWidget(widgetHTML, {x: 8, height: 2, id: 'optionWidget'}); var $widget = $(widget); expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8); @@ -880,7 +881,7 @@ describe('gridstack', function() { expect($widget.attr('data-gs-id')).toBe('optionWidget'); }); it('should autoPosition (empty options)', function() { - var grid = $('.grid-stack').gridstack().data('gridstack'); + var grid = GridStack.init(); var widget = grid.addWidget(widgetHTML, {}); var $widget = $(widget); expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8); @@ -904,7 +905,7 @@ describe('gridstack', function() { document.body.removeChild(document.getElementById('gs-cont')); }); it('should use default', function() { - var grid = $('.grid-stack').gridstack().data('gridstack'); + var grid = GridStack.init(); var widget = grid.addWidget(widgetHTML, {x: 'foo', y: null, width: 'bar', height: ''}); var $widget = $(widget); expect(parseInt($widget.attr('data-gs-x'), 10)).toBe(8); @@ -922,7 +923,7 @@ describe('gridstack', function() { document.body.removeChild(document.getElementById('gs-cont')); }); it('should clear x position', function() { - var grid = $('.grid-stack').gridstack({float: true}).data('gridstack'); + var grid = GridStack.init({float: true}); var widgetHTML = '

'; var widget = grid.addWidget(widgetHTML, null, null, undefined); var $widget = $(widget); @@ -939,7 +940,7 @@ describe('gridstack', function() { document.body.removeChild(document.getElementById('gs-cont')); }); it('should match true/false only', function() { - var grid = $('.grid-stack').gridstack({float: true}).data('gridstack'); + var grid = GridStack.init({float: true}); expect(grid.float()).toBe(true); grid.float(0); expect(grid.float()).toBe(false); @@ -964,21 +965,21 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); grid.destroy(); expect($('.grid-stack').length).toBe(0); - expect(grid.grid).toBe(null); + expect(grid.engine).toBe(null); }); it('should cleanup gridstack but leave elements', function() { var options = { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); grid.destroy(false); expect($('.grid-stack').length).toBe(1); expect($('.grid-stack-item').length).toBe(2); - expect(grid.grid).toBe(null); + expect(grid.engine).toBe(null); grid.destroy(); }); }); @@ -995,7 +996,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); grid.resize(items[0], 5, 5); expect(parseInt($(items[0]).attr('data-gs-width'), 10)).toBe(5); @@ -1016,7 +1017,7 @@ describe('gridstack', function() { verticalMargin: 10, float: true }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); grid.move(items[0], 5, 5); expect(parseInt($(items[0]).attr('data-gs-x'), 10)).toBe(5); @@ -1036,10 +1037,10 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); grid._updateElement(items[0], function(el, node) { - var newNode = grid.grid.moveNode(node); + var newNode = grid.engine.moveNode(node); expect(newNode).toBe(node); }); }); @@ -1048,14 +1049,14 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); grid.minWidth(items[0], 1); grid.maxWidth(items[0], 2); grid.minHeight(items[0], 1); grid.maxHeight(items[0], 2); grid._updateElement(items[0], function(el, node) { - var newNode = grid.grid.moveNode(node); + var newNode = grid.engine.moveNode(node); expect(newNode).toBe(node); }); }); @@ -1074,7 +1075,7 @@ describe('gridstack', function() { verticalMargin: 10, float: true }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); grid.update(items[0], 5, 5, 5 ,5); expect(parseInt($(items[0]).attr('data-gs-width'), 10)).toBe(5); @@ -1096,7 +1097,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var vm = grid.verticalMargin(); expect(vm).toBe(10); }); @@ -1105,7 +1106,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); grid.verticalMargin(11); expect(grid.verticalMargin()).toBe(11); }); @@ -1114,18 +1115,17 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10, }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); expect(grid.verticalMargin()).toBe(10); grid.verticalMargin(10); expect(grid.verticalMargin()).toBe(10); - // expect(console.warn).toHaveBeenCalledWith('gridstack.js: Option `height` is deprecated in v0.5.3 and has been replaced with `maxRow`. It will be **completely** removed in v1.0'); }); it('should not update styles', function() { var options = { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); spyOn(grid, '_updateStyles'); grid.verticalMargin(11, true); expect(grid._updateStyles).not.toHaveBeenCalled(); @@ -1145,7 +1145,7 @@ describe('gridstack', function() { verticalMargin: 10, rtl: true }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); expect($('.grid-stack').hasClass('grid-stack-rtl')).toBe(true); }); it('should not add grid-stack-rtl class', function() { @@ -1153,7 +1153,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); expect($('.grid-stack').hasClass('grid-stack-rtl')).toBe(false); }); }); @@ -1172,7 +1172,7 @@ describe('gridstack', function() { minWidth: 1, disableDrag: true }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); expect(grid.opts.disableDrag).toBe(true); grid.enableMove(true, true); @@ -1187,7 +1187,7 @@ describe('gridstack', function() { verticalMargin: 10, minWidth: 1 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); grid.enableMove(false); for (var i = 0; i < items.length; i++) { @@ -1211,7 +1211,7 @@ describe('gridstack', function() { minWidth: 1, disableResize: true }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); expect(grid.opts.disableResize).toBe(true); grid.enableResize(true, true); @@ -1226,7 +1226,7 @@ describe('gridstack', function() { verticalMargin: 10, minWidth: 1 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); grid.enableResize(false); for (var i = 0; i < items.length; i++) { @@ -1249,7 +1249,7 @@ describe('gridstack', function() { verticalMargin: 10, minWidth: 1 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); grid.enableResize(false); grid.enableMove(false); @@ -1277,7 +1277,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); for (var i = 0; i < items.length; i++) { grid.locked(items[i], true); @@ -1289,7 +1289,7 @@ describe('gridstack', function() { cellHeight: 80, verticalMargin: 10 }; - var grid = $('.grid-stack').gridstack(options).data('gridstack'); + var grid = GridStack.init(options); var items = $('.grid-stack-item'); for (var i = 0; i < items.length; i++) { grid.locked(items[i], false); @@ -1343,9 +1343,9 @@ describe('gridstack', function() { document.body.removeChild(document.getElementById('gs-cont')); }); it('should move all 3 items to top-left with no space', function() { - var grid = $('.grid-stack').gridstack({float: true}).data('gridstack'); + var grid = GridStack.init({float: true}); - var el3 = grid.addWidget(widgetHTML, {x: 3, y: 5}); + var el3 = $(grid.addWidget(widgetHTML, {x: 3, y: 5})); expect(parseInt(el3.attr('data-gs-x'))).toBe(3); expect(parseInt(el3.attr('data-gs-y'))).toBe(5); @@ -1354,9 +1354,9 @@ describe('gridstack', function() { expect(parseInt(el3.attr('data-gs-y'))).toBe(0); }); it('not move locked item', function() { - var grid = $('.grid-stack').gridstack({float: true}).data('gridstack'); + var grid = GridStack.init({float: true}); - var el3 = grid.addWidget(widgetHTML, {x: 3, y: 5, locked: true, noMove: true}); + var el3 = $(grid.addWidget(widgetHTML, {x: 3, y: 5, locked: true, noMove: true})); expect(parseInt(el3.attr('data-gs-x'))).toBe(3); expect(parseInt(el3.attr('data-gs-y'))).toBe(5); @@ -1379,19 +1379,25 @@ describe('gridstack', function() { document.body.removeChild(document.getElementById('gs-cont')); }); it('warning if OLD setGridWidth is called', function() { - var grid = $('.grid-stack').gridstack().data('gridstack'); + var grid = GridStack.init(); grid.setGridWidth(11); // old 0.5.2 API - expect(grid.opts.column).toBe(11); - expect(console.warn).toHaveBeenCalledWith('gridstack.js: Function `setGridWidth` is deprecated in v0.5.3 and has been replaced with `setColumn`. It will be **completely** removed in v1.0'); + expect(grid.column()).toBe(11); + expect(console.warn).toHaveBeenCalledWith('gridstack.js: Function `setGridWidth` is deprecated in v0.5.3 and has been replaced with `column`. It will be **completely** removed in v1.0'); + }); + it('warning if OLD setColumn is called', function() { + var grid = GridStack.init(); + grid.setColumn(10); // old 0.6.4 API + expect(grid.column()).toBe(10); + expect(console.warn).toHaveBeenCalledWith('gridstack.js: Function `setColumn` is deprecated in v0.6.4 and has been replaced with `column`. It will be **completely** removed in v1.0'); }); it('warning if OLD grid height is set', function() { - var grid = $('.grid-stack').gridstack({height: 10}).data('gridstack'); // old 0.5.2 Opt now maxRow + var grid = GridStack.init({height: 10}); // old 0.5.2 Opt now maxRow expect(grid.opts.maxRow).toBe(10); - expect(grid.grid.maxRow).toBe(10); + expect(grid.engine.maxRow).toBe(10); expect(console.warn).toHaveBeenCalledWith('gridstack.js: Option `height` is deprecated in v0.5.3 and has been replaced with `maxRow`. It will be **completely** removed in v1.0'); }); it('warning if OLD oneColumnModeClass is set (no changes)', function() { - $('.grid-stack').gridstack({oneColumnModeClass: 'foo'}).data('gridstack'); // deleted 0.6.3 Opt + GridStack.init({oneColumnModeClass: 'foo'}); // deleted 0.6.3 Opt expect(console.warn).toHaveBeenCalledWith('gridstack.js: Option `oneColumnModeClass` is deprecated in v0.6.3. Use class `.grid-stack-1` instead'); }); }); diff --git a/spec/gridstack-tests.ts b/spec/gridstack-tests.ts new file mode 100644 index 000000000..94a7e00bb --- /dev/null +++ b/spec/gridstack-tests.ts @@ -0,0 +1,24 @@ +import { GridStack, GridstackOptions, MousePosition } from '../src/gridstack'; + +var options: GridstackOptions = { + float: true +}; + +var grid: GridStack = GridStack.init(options); +var gsFromElement: GridStack = GridStack.get(); +var gsFromElement2: GridStack = ($('.grid-stack').get(0) as any).gridstack; + +if (gsFromElement !== grid) throw Error('These should match!'); +if (gsFromElement2 !== grid) throw Error('These should match!'); + +var gridItem = '

Hello

' + +grid.addWidget(gridItem, {width: 2}); +grid.addWidget(gridItem, 1, 2, 3, 4, true); +grid.makeWidget(document.createElement('div')); +grid.batchUpdate(); +grid.cellHeight();; +grid.cellHeight(2); +grid.cellWidth(); +grid.getCellFromPixel({ left:20, top: 20 }); +grid.removeAll(false); diff --git a/spec/utils-spec.js b/spec/utils-spec.js index 8725c64cd..c2259eb43 100644 --- a/spec/utils-spec.js +++ b/spec/utils-spec.js @@ -4,7 +4,7 @@ describe('gridstack utils', function() { var utils; beforeEach(function() { - utils = window.GridStackUI.Utils; + utils = GridStack.Utils; }); describe('setup of utils', function() { diff --git a/src/gridstack-extra.scss b/src/gridstack-extra.scss index 297995b3e..ddbd5404c 100644 --- a/src/gridstack-extra.scss +++ b/src/gridstack-extra.scss @@ -1,5 +1,5 @@ /*! - * gridstack 0.6.4-dev extra CSS for [2-11] columns (non default) + * gridstack 1.0.0 extra CSS for [2-11] columns (non default) * https://gridstackjs.com/ * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov * gridstack.js may be freely distributed under the MIT license. diff --git a/src/gridstack-poly.js b/src/gridstack-poly.js index 9ac9454de..0deccf6ab 100644 --- a/src/gridstack-poly.js +++ b/src/gridstack-poly.js @@ -1,4 +1,4 @@ -/** gridstack.js 0.6.4-dev - IE and older browsers Polyfills for this library @preserve*/ +/** gridstack.js 1.0.0 - IE and older browsers Polyfills for this library @preserve*/ /** * https://gridstackjs.com/ * (c) 2019-2020 Alain Dumesny diff --git a/src/gridstack.d.ts b/src/gridstack.d.ts index abcec6545..a0a9dfc0f 100644 --- a/src/gridstack.d.ts +++ b/src/gridstack.d.ts @@ -1,4 +1,4 @@ -// Type definitions for Gridstack 0.6.4-dev +// Type definitions for Gridstack 1.0.0 // Project: https://gridstackjs.com/ // Definitions by: Pascal Senn // Ricky Blankenaufulland @@ -8,9 +8,8 @@ // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped initially, but now part of gridstack.js // TypeScript Version: 2.8 -interface JQuery { - gridstack(options: GridstackOptions): JQuery; - data(key: 'gridstack'): GridStack; +interface Window { + GridStack: GridStack; } /* Other items in https://github.com/gridstack/gridstack.js/blob/develop/doc/README.md @@ -19,9 +18,46 @@ interface JQuery { * Events */ -type GridStackElement = string | HTMLElement | JQuery; +type GridStackElement = string | HTMLElement; +interface GridStackHTMLElement extends HTMLElement { + /** grid's parent DOM element points back to grid class */ + gridstack: GridStack; +} +type GridStackEvent = 'added' | 'change' | 'disable' | 'dragstart' | 'dragstop' | 'dropped' | + 'enable' | 'removed' | 'resize' | 'resizestart' | 'gsresizestop'; interface GridStack { + /** + * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will + * simply return the existing instance (ignore any passed options). There is also a version that support + * multiple grids initialization. + * @param options grid options (optional) + * @param el element to convert to a grid (default to '.grid-stack' class selector) + * + * @example + * var grid = window.GridStack.init(); + * // Note: the HTMLElement (of type GridStackHTMLElement) will itself store a `gridstack: GridStack` value that can be retrieve later + * var grid = document.querySelector('.grid-stack').gridstack; + */ + init(options?: GridstackOptions, el?: GridStackElement): GridStack; + + /** + * Will initialize a list of elements (given a selector) and return an array of grids. + * @param options grid options (optional) + * @param selector element to convert to grids (default to '.grid-stack' class selector) + * + * @example + * var grids = window.GridStack.initAll(); + * grids.forEach(...) + */ + initAll(options?: GridstackOptions, selector?: string): GridStack[]; + + /** the HTML element tied to this grid after it's been initialized */ + el: GridStackHTMLElement; + + /** engine used to implement non DOM grid functionality */ + engine: GridStackEngine; + /** * Creates new widget and returns it. * @@ -30,22 +66,20 @@ interface GridStack { * See also `makeWidget()`. * * @example - * $('.grid-stack').gridstack(); - * var grid = $('.grid-stack').data('gridstack'); + * var grid = GridStack.init(); * grid.addWidget(el, {width: 3, autoPosition: true}); * * @param el widget to add * @param options widget position/size options (optional) */ - addWidget(el: GridStackElement, options ? : GridstackWidget): JQuery; + addWidget(el: GridStackElement, options ? : GridstackWidget): HTMLElement; /** * Creates new widget and returns it. * Legacy: Spelled out version of the widgets options, recommend use new version instead. * * @example - * $('.grid-stack').gridstack(); - * var grid = $('.grid-stack').data('gridstack'); + * var grid = GridStack.init(); * grid.addWidget(el, 0, 0, 3, 2, true); * * @param el widget to add @@ -61,10 +95,10 @@ interface GridStack { * @param id value for `data-gs-id` (optional) */ addWidget(el: GridStackElement, x ? : number, y ? : number, width ? : number, height ? : number, autoPosition ? : boolean, - minWidth ? : number, maxWidth ? : number, minHeight ? : number, maxHeight ? : number, id ? : number | string): JQuery; + minWidth ? : number, maxWidth ? : number, minHeight ? : number, maxHeight ? : number, id ? : number | string): HTMLElement; /** - * Initializes batch updates. You will see no changes until commit method is called. + * Initializes batch updates. You will see no changes until `commit()` method is called. */ batchUpdate(): void; @@ -101,6 +135,21 @@ interface GridStack { */ compact(): void; + /** + * set the number of columns in the grid. Will update existing widgets to conform to new number of columns, + * as well as cache the original layout so you can revert back to previous positions without loss. + * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [1-11], + * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns) + * @param column - Integer > 0 (default 12). + * @param doNotPropagate if true existing widgets will not be updated (optional) + */ + column(column: number, doNotPropagate ? : boolean): void; + + /** + * get the number of columns in the grid (default 12) + */ + column(): number; + /** * Destroys a grid instance. * @param detachGrid if false nodes and grid will not be removed from the DOM (Optional. Default true). @@ -125,9 +174,6 @@ interface GridStack { /** * Enables/disables widget moving. - * This is a shortcut for: - * @example - * grid.movable(this.container.children('.' + this.opts.itemClass), doEnable); * * @param doEnable * @param includeNewWidgets will force new widgets to be draggable as per @@ -140,10 +186,6 @@ interface GridStack { * @param doEnable * @param includeNewWidgets will force new widgets to be draggable as per * doEnable`s value by changing the disableResize grid option. - * - * This is a shortcut for: - * @example - * grid.resizable(this.container.children('.' + this.opts.itemClass), doEnable); */ enableResize(doEnable: boolean, includeNewWidgets: boolean): void; @@ -158,8 +200,6 @@ interface GridStack { */ float(): boolean; - - /** * Get the position of the cell under a pixel on screen. * @param position the position of the pixel to resolve in @@ -171,6 +211,9 @@ interface GridStack { */ getCellFromPixel(position: MousePosition, useOffset ? : boolean): CellPosition; + /** returns the current number of rows */ + getRow(): number; + /** * Checks if specified area is empty. * @param x the position x. @@ -188,19 +231,18 @@ interface GridStack { locked(el: GridStackElement, val: boolean): void; /** - * If you add elements to your gridstack container by hand, you have to tell gridstack afterwards to make them widgets. + * If you add elements to your grid by hand, you have to tell gridstack afterwards to make them widgets. * If you want gridstack to add the elements for you, use addWidget instead. * Makes the given element a widget and returns it. * @param el widget to convert. * * @example - * $('.grid-stack').gridstack(); - * $('.grid-stack').append('

') - * var grid = $('.grid-stack').data('gridstack'); * grid.makeWidget('gsi-1'); */ - makeWidget(el: GridStackElement): JQuery; + makeWidget(el: GridStackElement): HTMLElement; /** * Set the maxWidth for a widget. @@ -245,6 +287,27 @@ interface GridStack { */ move(el: GridStackElement, x: number, y: number): void; + /** + * unsubscribe from the 'on' event below + * @param name of the event (see possible values) + */ + off(name: GridStackEvent): void; + + /** + * Event handler that extracts our CustomEvent data out automatically for receiving custom + * notifications (see doc for supported events) + * @param name of the event (see possible values) + * @param callback function called with event and optional second/third param + * (see README documentation for each signature). + * + * @example + * grid.on('added', function(e, items) { log('added ', items)} ); + * + * Note: in some cases it is the same as calling native handler and parsing the event. + * grid.el.addEventListener('added', function(event) { log('added ', event.detail)} ); + */ + on(name: GridStackEvent, callback: (event: CustomEvent, arg2?: GridStackNode[] | Object, arg3?: Object) => void): void; + /** * Removes widget from the grid. * @param el widget to modify @@ -279,16 +342,6 @@ interface GridStack { */ setAnimation(doAnimate: boolean): void; - /** - * Modify number of columns in the grid. Will update existing widgets to conform to new number of columns, - * as well as cache the original layout so you can revert back to previous positions without loss. - * Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [1-11], - * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns) - * @param column - Integer > 0 (default 12). - * @param doNotPropagate if true existing widgets will not be updated (optional) - */ - setColumn(column: number, doNotPropagate ? : boolean): void; - /** * Toggle the grid static state. Also toggle the grid-stack-static class. * @param staticValue if true the grid become static. @@ -338,6 +391,20 @@ interface GridStack { willItFit(x: number, y: number, width: number, height: number, autoPosition: boolean): boolean; } +/** + * Defines the GridStack engine that does most no DOM grid manipulation. + * See GridStack methods and vars for descriptions. + * + * NOTE: values should not be modified - call the GridStack API instead + */ +interface GridStackEngine { + column: number; + float: boolean; + maxRow: number; + nodes: GridStackNode[]; + getRow(): number; +} + /** * Defines the coordinates of an object */ @@ -365,6 +432,10 @@ interface CellPosition { * @param maxWidth maximum width allowed during resize/creation (default?: undefined = un-constrained) * @param minHeight minimum height allowed during resize/creation (default?: undefined = un-constrained) * @param maxHeight maximum height allowed during resize/creation (default?: undefined = un-constrained) + * @param noResize prevent resizing (default?: undefined = un-constrained) + * @param noMove prevents moving (default?: undefined = un-constrained) + * @param locked prevents moving and resizing (default?: undefined = un-constrained) + * @param resizeHandles widgets can have their own resize handles. For example 'e,w' will make the particular widget only resize east and west. * @param id value for `data-gs-id` stored on the widget (default?: undefined) */ interface GridstackWidget { @@ -377,19 +448,29 @@ interface GridstackWidget { maxWidth ? : number; minHeight ? : number; maxHeight ? : number; + noResize ? : boolean; + noMove ? : boolean; + locked ? : boolean; + resizeHandles ?: string; id ? : number | string; } -declare namespace GridStackUI { - interface Utils { - /** - * Sorts array of nodes - * @param nodes array to sort - * @param dir 1 for asc, -1 for desc (optional) - * @param width width of the grid. If undefined the width will be calculated automatically (optional). - **/ - sort(nodes: HTMLElement[], dir ? : number, width ? : number): void; - } +/** + * internal descriptions describing the items in the grid + */ +interface GridStackNode extends GridstackWidget { + el: HTMLElement; + _grid: GridStack; +} + +interface Utils { + /** + * Sorts array of nodes + * @param nodes array to sort + * @param dir 1 for asc, -1 for desc (optional) + * @param width width of the grid. If undefined the width will be calculated automatically (optional). + **/ + sort(nodes: GridStackNode[], dir ? : number, width ? : number): void; } /** @@ -430,10 +511,15 @@ interface GridstackOptions { cellHeight ? : number | string; /** - * (internal?) unit for cellHeight (default? 'px') + * (internal) unit for cellHeight (default? 'px') which is set when a string cellHeight with a unit is passed (ex: '10rem') */ cellHeightUnit ? : string; + /** + * number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns + */ + column ? : number; + /** class that implement drag'n'drop functionality for gridstack. If false grid will be static. * (default?: null - first available plugin will be used) */ @@ -442,11 +528,14 @@ interface GridstackOptions { /** disallows dragging of widgets (default?: false) */ disableDrag ? : boolean; + /** disables the onColumnMode when the window width is less than minWidth (default?: false) */ + disableOneColumnMode ? : boolean; + /** disallows resizing of widgets (default?: false). */ disableResize ? : boolean; /** - * allows to override jQuery UI draggable options. (default?: { handle?: '.grid-stack-item-content', scroll?: true, appendTo?: 'body', containment: null }) + * allows to override UI draggable options. (default?: { handle?: '.grid-stack-item-content', scroll?: true, appendTo?: 'body', containment: null }) */ draggable ? : {}; @@ -455,6 +544,11 @@ interface GridstackOptions { */ dragOut ? : boolean; + /** + * enable floating widgets (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/float.html) + */ + float ? : boolean; + /** * draggable handle selector (default?: '.grid-stack-item-content') */ @@ -464,33 +558,20 @@ interface GridstackOptions { handleClass ? : string; /** - * number of columns (default?: 12). Note: IF you change this, CSS also have to change. See https://github.com/gridstack/gridstack.js#change-grid-columns + * widget class (default?: 'grid-stack-item') */ - column ? : number; + itemClass ? : string; /** * maximum rows amount. Default? is 0 which means no maximum rows */ maxRow ? : number; - /** - * enable floating widgets (default?: false) See example (http://gridstack.github.io/gridstack.js/demo/float.html) - */ - float ? : boolean; - - /** - * widget class (default?: 'grid-stack-item') - */ - itemClass ? : string; - /** * minimal width. If window width is less, grid will be shown in one column mode (default?: 768) */ minWidth ? : number; - /** disables the onColumnMode when the window width is less than minWidth (default?: false) */ - disableOneColumnMode ? : boolean; - /** * set to true if you want oneColumnMode to use the DOM order and ignore x,y from normal multi column * layouts during sorting. This enables you to have custom 1 column layout that differ from the rest. (default?: false) @@ -506,12 +587,12 @@ interface GridstackOptions { placeholderText ? : string; /** - * allows to override jQuery UI resizable options. (default?: { autoHide?: true, handles?: 'se' }) + * allows to override UI resizable options. (default?: { autoHide?: true, handles?: 'se' }) */ resizable ? : {}; /** - * if true widgets could be removed by dragging outside of the grid. It could also be a jQuery selector string, + * if true widgets could be removed by dragging outside of the grid. It could also be a selector string, * in this case widgets will be removed by dropping them there (default?: false) * See example (http://gridstack.github.io/gridstack.js/demo/two.html) */ @@ -529,9 +610,9 @@ interface GridstackOptions { rtl ? : boolean | 'auto'; /** - * 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. + * makes grid static (default?: false). If `true` widgets are not movable/resizable. + * You don't even need draggable/resizable. A CSS class + * 'grid-stack-static' is also added to the element. */ staticGrid ? : boolean; @@ -543,7 +624,7 @@ interface GridstackOptions { verticalMargin ? : number | string; /** - * (internal?) unit for verticalMargin (default? 'px') + * (internal) unit for verticalMargin (default? 'px') set when `verticalMargin` is set as string with unit (ex: 2rem') */ verticalMarginUnit ? : string; } \ No newline at end of file diff --git a/src/gridstack.jQueryUI.js b/src/gridstack.jQueryUI.js index 880374522..315ccfd58 100644 --- a/src/gridstack.jQueryUI.js +++ b/src/gridstack.jQueryUI.js @@ -1,31 +1,32 @@ -/** gridstack.js 0.6.4-dev - JQuery UI Drag&Drop plugin @preserve */ +/** gridstack.js 1.0.0 - JQuery UI Drag&Drop plugin @preserve */ /** * https://gridstackjs.com/ * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov * gridstack.js may be freely distributed under the MIT license. */ (function(factory) { + /* we compile this in so no need for required loading if (typeof define === 'function' && define.amd) { define(['jquery', 'gridstack', 'exports'], factory); } else if (typeof exports !== 'undefined') { try { jQuery = require('jquery'); } catch (e) {} try { gridstack = require('gridstack'); } catch (e) {} - factory(jQuery, gridstack.GridStackUI, exports); - } else { - factory(jQuery, GridStackUI, window); + factory(jQuery, gridstack.GridStack, exports); + } else */{ + factory(jQuery, GridStack, window); } -})(function($, GridStackUI, scope) { +})(function($, GridStack, scope) { /** * @class JQueryUIGridStackDragDropPlugin * jQuery UI implementation of drag'n'drop gridstack plugin. */ function JQueryUIGridStackDragDropPlugin(grid) { - GridStackUI.GridStackDragDropPlugin.call(this, grid); + GridStack.DragDropPlugin.call(this, grid); } - GridStackUI.GridStackDragDropPlugin.registerPlugin(JQueryUIGridStackDragDropPlugin); + GridStack.DragDropPlugin.registerPlugin(JQueryUIGridStackDragDropPlugin); - JQueryUIGridStackDragDropPlugin.prototype = Object.create(GridStackUI.GridStackDragDropPlugin.prototype); + JQueryUIGridStackDragDropPlugin.prototype = Object.create(GridStack.DragDropPlugin.prototype); JQueryUIGridStackDragDropPlugin.prototype.constructor = JQueryUIGridStackDragDropPlugin; JQueryUIGridStackDragDropPlugin.prototype.resizable = function(el, opts) { @@ -57,7 +58,7 @@ } else { el.draggable($.extend({}, this.grid.opts.draggable, { containment: (this.grid.opts.isNested && !this.grid.opts.dragOut) ? - this.grid.container.parent() : + this.grid.$el.parent() : (this.grid.opts.draggable.containment || null), start: opts.start || function() {}, stop: opts.stop || function() {}, diff --git a/src/gridstack.js b/src/gridstack.js index e7c2c7ae2..f77cbc5e4 100644 --- a/src/gridstack.js +++ b/src/gridstack.js @@ -1,11 +1,12 @@ /** - * gridstack.js 0.6.4-dev + * gridstack.js 1.0.0 * https://gridstackjs.com/ * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov * gridstack.js may be freely distributed under the MIT license. * @preserve */ (function(factory) { + /* [alain] we compile jquery with our code, so no need to 'load' externally if (typeof define === 'function' && define.amd) { define(['jquery', 'exports'], factory); } else if (typeof exports !== 'undefined') { @@ -14,7 +15,7 @@ try { jQueryModule = require('jquery'); } catch (e) {} factory(jQueryModule || window.jQuery, exports); - } else { + } else */{ factory(window.jQuery, window); } })(function($, scope) { @@ -326,7 +327,7 @@ // For Meteor support: https://github.com/gridstack/gridstack.js/pull/272 GridStackEngine.prototype.getNodeDataByDOMEl = function(el) { - return this.nodes.find(function(n) { return el.get(0) === n.el.get(0); }); + return this.nodes.find(function(node) { return el === node.el }); }; GridStackEngine.prototype._fixCollisions = function(node) { @@ -587,7 +588,7 @@ })); } if (this.maxRow) { - res &= clone.getGridHeight() <= this.maxRow; + res &= clone.getRow() <= this.maxRow; } return res; @@ -605,7 +606,7 @@ 0, this.nodes.map(function(n) { return $.extend({}, n); })); clone.addNode(node); - return clone.getGridHeight() <= this.maxRow; + return clone.getRow() <= this.maxRow; }; GridStackEngine.prototype.isNodeChangedPosition = function(node, x, y, width, height) { @@ -663,7 +664,7 @@ return node; }; - GridStackEngine.prototype.getGridHeight = function() { + GridStackEngine.prototype.getRow = function() { return this.nodes.reduce(function(memo, n) { return Math.max(memo, n.y + n.height); }, 0); }; @@ -682,7 +683,7 @@ }; /** - * Construct a grid from the given element and options + * Construct a grid item from the given element and options * @param {GridStackElement} el * @param {GridstackOptions} opts */ @@ -692,22 +693,24 @@ opts = opts || {}; - this.container = $(el); + this.$el = $(el); // TODO: legacy code + this.el = this.$el.get(0); // exposed HTML element to the user obsoleteOpts(opts, 'width', 'column', 'v0.5.3'); obsoleteOpts(opts, 'height', 'maxRow', 'v0.5.3'); obsoleteOptsDel(opts, 'oneColumnModeClass', 'v0.6.3', '. Use class `.grid-stack-1` instead'); // container attributes - obsoleteAttr(this.container, 'data-gs-width', 'data-gs-column', 'v0.5.3'); - obsoleteAttr(this.container, 'data-gs-height', 'data-gs-max-row', 'v0.5.3'); + obsoleteAttr(this.$el, 'data-gs-width', 'data-gs-column', 'v0.5.3'); + obsoleteAttr(this.$el, 'data-gs-height', 'data-gs-max-row', 'v0.5.3'); + obsoleteAttr(this.$el, 'data-gs-current-height', 'data-gs-current-row', 'v1.0.0'); opts.itemClass = opts.itemClass || 'grid-stack-item'; - var isNested = this.container.closest('.' + opts.itemClass).length > 0; + var isNested = this.$el.closest('.' + opts.itemClass).length > 0; this.opts = Utils.defaults(opts, { - column: parseInt(this.container.attr('data-gs-column')) || 12, - maxRow: parseInt(this.container.attr('data-gs-max-row')) || 0, + column: parseInt(this.$el.attr('data-gs-column')) || 12, + maxRow: parseInt(this.$el.attr('data-gs-max-row')) || 0, itemClass: 'grid-stack-item', placeholderClass: 'grid-stack-placeholder', placeholderText: '', @@ -720,7 +723,7 @@ float: false, staticGrid: false, _class: 'grid-stack-instance-' + (Math.random() * 10000).toFixed(0), - animate: Boolean(this.container.attr('data-gs-animate')) || false, + animate: Boolean(this.$el.attr('data-gs-animate')) || false, alwaysShowResizeHandle: opts.alwaysShowResizeHandle || false, resizable: Utils.defaults(opts.resizable || {}, { autoHide: !(opts.alwaysShowResizeHandle || false), @@ -756,11 +759,11 @@ this.dd = new this.opts.ddPlugin(this); if (this.opts.rtl === 'auto') { - this.opts.rtl = this.container.css('direction') === 'rtl'; + this.opts.rtl = this.$el.css('direction') === 'rtl'; } if (this.opts.rtl) { - this.container.addClass('grid-stack-rtl'); + this.$el.addClass('grid-stack-rtl'); } this.opts.isNested = isNested; @@ -774,17 +777,17 @@ } this.verticalMargin(this.opts.verticalMargin, true); - this.container.addClass(this.opts._class); + this.$el.addClass(this.opts._class); this._setStaticClass(); if (isNested) { - this.container.addClass('grid-stack-nested'); + this.$el.addClass('grid-stack-nested'); } this._initStyles(); - this.grid = new GridStackEngine(this.opts.column, function(nodes, detachNode) { + this.engine = new GridStackEngine(this.opts.column, function(nodes, detachNode) { detachNode = (detachNode === undefined ? true : detachNode); var maxHeight = 0; this.nodes.forEach(function(n) { @@ -793,10 +796,10 @@ nodes.forEach(function(n) { if (detachNode && n._id === null) { if (n.el) { - n.el.remove(); + $(n.el).remove(); } } else { - n.el + $(n.el) .attr('data-gs-x', n.x) .attr('data-gs-y', n.y) .attr('data-gs-width', n.width) @@ -809,13 +812,13 @@ if (this.opts.auto) { var elements = []; var _this = this; - this.container.children('.' + this.opts.itemClass + ':not(.' + this.opts.placeholderClass + ')') + this.$el.children('.' + this.opts.itemClass + ':not(.' + this.opts.placeholderClass + ')') .each(function(index, el) { el = $(el); var x = parseInt(el.attr('data-gs-x')); var y = parseInt(el.attr('data-gs-y')); elements.push({ - el: el, + el: el.get(0), // if x,y are missing (autoPosition) add them to end of list - but keep their respective DOM order i: (Number.isNaN(x) ? 1000 : x) + (Number.isNaN(y) ? 1000 : y) * _this.opts.column }); @@ -824,7 +827,7 @@ this._prepareElement(item.el); }, this); } - this.grid._saveInitial(); // initial start of items + this.engine._saveInitial(); // initial start of items this.setAnimation(this.opts.animate); @@ -852,11 +855,11 @@ if (!self.opts.disableOneColumnMode && (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) <= self.opts.minWidth) { if (self.oneColumnMode) { return; } self.oneColumnMode = true; - self.setColumn(1); + self.column(1); } else { if (!self.oneColumnMode) { return; } self.oneColumnMode = false; - self.setColumn(self._prevColumn); + self.column(self._prevColumn); } }; @@ -901,36 +904,36 @@ if (!node._added) { node._added = true; - node.el = el; + node.el = el.get(0); node.autoPosition = true; node.x = x; node.y = y; - self.grid.cleanNodes(); - self.grid.beginUpdate(node); - self.grid.addNode(node); + self.engine.cleanNodes(); + self.engine.beginUpdate(node); + self.engine.addNode(node); - self.container.append(self.placeholder); + self.$el.append(self.placeholder); self.placeholder .attr('data-gs-x', node.x) .attr('data-gs-y', node.y) .attr('data-gs-width', node.width) .attr('data-gs-height', node.height) .show(); - node.el = self.placeholder; + node.el = self.placeholder.get(0); node._beforeDragX = node.x; node._beforeDragY = node.y; self._updateContainerHeight(); } - if (!self.grid.canMoveNode(node, x, y)) { + if (!self.engine.canMoveNode(node, x, y)) { return; } - self.grid.moveNode(node, x, y); + self.engine.moveNode(node, x, y); self._updateContainerHeight(); }; this.dd - .droppable(self.container, { + .droppable(self.$el, { accept: function(el) { el = $(el); var node = el.data('_gridstack_node'); @@ -940,7 +943,7 @@ return el.is(self.opts.acceptWidgets === true ? '.grid-stack-item' : self.opts.acceptWidgets); } }) - .on(self.container, 'dropover', function(event, ui) { + .on(self.$el, 'dropover', function(event, ui) { var el = $(ui.draggable); var width, height; @@ -963,7 +966,7 @@ draggingElement = el; - var node = self.grid._prepareNode({width: width, height: height, _added: false, _temporary: true}); + var node = self.engine._prepareNode({width: width, height: height, _added: false, _temporary: true}); node.isOutOfGrid = true; el.data('_gridstack_node', node); el.data('_gridstack_node_orig', origNode); @@ -971,7 +974,7 @@ el.on('drag', onDrag); return false; // prevent parent from receiving msg (which may be grid as well) }) - .on(self.container, 'dropout', function(event, ui) { + .on(self.$el, 'dropout', function(event, ui) { // jquery-ui bug. Must verify widget is being dropped out // check node variable that gets set when widget is out of grid var el = $(ui.draggable); @@ -984,13 +987,13 @@ } el.unbind('drag', onDrag); node.el = null; - self.grid.removeNode(node); + self.engine.removeNode(node); self.placeholder.detach(); self._updateContainerHeight(); el.data('_gridstack_node', el.data('_gridstack_node_orig')); return false; // prevent parent from receiving msg (which may be grid as well) }) - .on(self.container, 'drop', function(event, ui) { + .on(self.$el, 'drop', function(event, ui) { self.placeholder.detach(); var node = $(ui.draggable).data('_gridstack_node'); @@ -1003,7 +1006,7 @@ originalNode._grid._triggerRemoveEvent(); } $(ui.helper).remove(); - node.el = el; + node.el = el.get(0); self.placeholder.hide(); Utils.removePositioningStyles(el); el.find('div.ui-resizable-handle').remove(); @@ -1018,59 +1021,64 @@ .removeData('draggable') .removeClass('ui-draggable ui-draggable-dragging ui-draggable-disabled') .unbind('drag', onDrag); - self.container.append(el); + self.$el.append(el); self._prepareElementsByNode(el, node); self._updateContainerHeight(); - self.grid._addedNodes.push(node); + self.engine._addedNodes.push(node); self._triggerAddEvent(); self._triggerChangeEvent(); - self.grid.endUpdate(); + self.engine.endUpdate(); $(ui.draggable).unbind('drag', onDrag); $(ui.draggable).removeData('_gridstack_node'); $(ui.draggable).removeData('_gridstack_node_orig'); - self.container.trigger('dropped', [originalNode, node]); + self.$el.trigger('dropped', [originalNode, node]); return false; // prevent parent from receiving msg (which may be grid as well) }); } }; GridStack.prototype._triggerChangeEvent = function(/*forceTrigger*/) { - if (this.grid._batchMode) { return; } - var elements = this.grid.getDirtyNodes(true); // verify they really changed + if (this.engine._batchMode) { return; } + var elements = this.engine.getDirtyNodes(true); // verify they really changed if (elements && elements.length) { - this.grid._layoutsNodesChange(elements); - this.container.trigger('change', [elements]); + this.engine._layoutsNodesChange(elements); + this._triggerEvent('change', elements); } - this.grid._saveInitial(); // we called, now reset initial values & dirty flags + this.engine._saveInitial(); // we called, now reset initial values & dirty flags }; GridStack.prototype._triggerAddEvent = function() { - if (this.grid._batchMode) { return; } - if (this.grid._addedNodes && this.grid._addedNodes.length > 0) { - this.grid._layoutsNodesChange(this.grid._addedNodes); + if (this.engine._batchMode) { return; } + if (this.engine._addedNodes && this.engine._addedNodes.length > 0) { + this.engine._layoutsNodesChange(this.engine._addedNodes); // prevent added nodes from also triggering 'change' event (which is called next) - this.grid._addedNodes.forEach(function (n) { delete n._dirty; }); - this.container.trigger('added', [this.grid._addedNodes]); - this.grid._addedNodes = []; + this.engine._addedNodes.forEach(function (n) { delete n._dirty; }); + this._triggerEvent('added', this.engine._addedNodes); + this.engine._addedNodes = []; } }; GridStack.prototype._triggerRemoveEvent = function() { - if (this.grid._batchMode) { return; } - if (this.grid._removedNodes && this.grid._removedNodes.length > 0) { - this.container.trigger('removed', [this.grid._removedNodes]); - this.grid._removedNodes = []; + if (this.engine._batchMode) { return; } + if (this.engine._removedNodes && this.engine._removedNodes.length > 0) { + this._triggerEvent('removed', this.engine._removedNodes); + this.engine._removedNodes = []; } }; + GridStack.prototype._triggerEvent = function(name, data) { + var event = new CustomEvent(name, {detail: data}); + this.el.dispatchEvent(event); + }; + GridStack.prototype._initStyles = function() { if (this._stylesId) { Utils.removeStylesheet(this._stylesId); } this._stylesId = 'gridstack-style-' + (Math.random() * 100000).toFixed(); // insert style to parent (instead of 'head') to support WebComponent - this._styles = Utils.createStylesheet(this._stylesId, this.container.get(0).parentNode); + this._styles = Utils.createStylesheet(this._stylesId, this.el.parentNode); if (this._styles !== null) { this._styles._max = 0; } @@ -1146,29 +1154,29 @@ }; GridStack.prototype._updateContainerHeight = function() { - if (this.grid._batchMode) { return; } - var height = this.grid.getGridHeight(); + if (this.engine._batchMode) { return; } + var row = this.engine.getRow(); // check for css min height. Each row is cellHeight + verticalMargin, until last one which has no margin below - var cssMinHeight = parseInt(this.container.css('min-height')); + var cssMinHeight = parseInt(this.$el.css('min-height')); if (cssMinHeight > 0) { var verticalMargin = this.opts.verticalMargin; - var minHeight = Math.round((cssMinHeight + verticalMargin) / (this.cellHeight() + verticalMargin)); - if (height < minHeight) { - height = minHeight; + var minRow = Math.round((cssMinHeight + verticalMargin) / (this.cellHeight() + verticalMargin)); + if (row < minRow) { + row = minRow; } } - this.container.attr('data-gs-current-height', height); + this.$el.attr('data-gs-current-row', row); if (!this.opts.cellHeight) { return ; } if (!this.opts.verticalMargin) { - this.container.css('height', (height * (this.opts.cellHeight)) + this.opts.cellHeightUnit); + this.$el.css('height', (row * (this.opts.cellHeight)) + this.opts.cellHeightUnit); } else if (this.opts.cellHeightUnit === this.opts.verticalMarginUnit) { - this.container.css('height', (height * (this.opts.cellHeight + this.opts.verticalMargin) - + this.$el.css('height', (row * (this.opts.cellHeight + this.opts.verticalMargin) - this.opts.verticalMargin) + this.opts.cellHeightUnit); } else { - this.container.css('height', 'calc(' + ((height * (this.opts.cellHeight)) + this.opts.cellHeightUnit) + - ' + ' + ((height * (this.opts.verticalMargin - 1)) + this.opts.verticalMarginUnit) + ')'); + this.$el.css('height', 'calc(' + ((row * (this.opts.cellHeight)) + this.opts.cellHeightUnit) + + ' + ' + ((row * (this.opts.verticalMargin - 1)) + this.opts.verticalMarginUnit) + ')'); } }; @@ -1218,8 +1226,8 @@ var distance = ui.position.top - node._prevYPix; node._prevYPix = ui.position.top; Utils.updateScrollPosition(el[0], ui, distance); - if (el.data('inTrashZone') || x < 0 || x >= self.grid.column || y < 0 || - (!self.grid.float && y > self.grid.getGridHeight())) { + if (el.data('inTrashZone') || x < 0 || x >= self.engine.column || y < 0 || + (!self.engine.float && y > self.engine.getRow())) { if (!node._temporaryRemoved) { if (self.opts.removable === true) { self._setupRemovingTimeout(el); @@ -1230,7 +1238,7 @@ self.placeholder.detach(); self.placeholder.hide(); - self.grid.removeNode(node); + self.engine.removeNode(node); self._updateContainerHeight(); node._temporaryRemoved = true; @@ -1241,15 +1249,15 @@ self._clearRemovingTimeout(el); if (node._temporaryRemoved) { - self.grid.addNode(node); + self.engine.addNode(node); self.placeholder .attr('data-gs-x', x) .attr('data-gs-y', y) .attr('data-gs-width', width) .attr('data-gs-height', height) .show(); - self.container.append(self.placeholder); - node.el = self.placeholder; + self.$el.append(self.placeholder); + node.el = self.placeholder.get(0); node._temporaryRemoved = false; } } @@ -1261,7 +1269,7 @@ // width and height are undefined if not resizing var lastTriedWidth = width !== undefined ? width : node.lastTriedWidth; var lastTriedHeight = height !== undefined ? height : node.lastTriedHeight; - if (!self.grid.canMoveNode(node, x, y, width, height) || + if (!self.engine.canMoveNode(node, x, y, width, height) || (node.lastTriedX === x && node.lastTriedY === y && node.lastTriedWidth === lastTriedWidth && node.lastTriedHeight === lastTriedHeight)) { return; @@ -1270,7 +1278,7 @@ node.lastTriedY = y; node.lastTriedWidth = width; node.lastTriedHeight = height; - self.grid.moveNode(node, x, y, width, height); + self.engine.moveNode(node, x, y, width, height); self._updateContainerHeight(); if (event.type === 'resize') { @@ -1279,23 +1287,23 @@ }; var onStartMoving = function(event, ui) { - self.container.append(self.placeholder); + self.$el.append(self.placeholder); var o = $(this); - self.grid.cleanNodes(); - self.grid.beginUpdate(node); + self.engine.cleanNodes(); + self.engine.beginUpdate(node); cellWidth = self.cellWidth(); var strictCellHeight = self.cellHeight(); // TODO: cellHeight = cellHeight() causes issue (i.e. remove strictCellHeight above) otherwise // when sizing up we jump almost right away to next size instead of half way there. Not sure // why as we don't use ceil() in many places but round() instead. - cellHeight = self.container.height() / parseInt(self.container.attr('data-gs-current-height')); + cellHeight = self.$el.height() / parseInt(self.$el.attr('data-gs-current-row')); self.placeholder .attr('data-gs-x', o.attr('data-gs-x')) .attr('data-gs-y', o.attr('data-gs-y')) .attr('data-gs-width', o.attr('data-gs-width')) .attr('data-gs-height', o.attr('data-gs-height')) .show(); - node.el = self.placeholder; + node.el = self.placeholder.get(0); node._beforeDragX = node.x; node._beforeDragY = node.y; node._prevYPix = ui.position.top; @@ -1319,7 +1327,7 @@ // var forceNotify = false; what is the point of calling 'change' event with no data, when the 'removed' event is already called ? self.placeholder.detach(); - node.el = o; + node.el = o.get(0); self.placeholder.hide(); if (node._isAboutToRemove) { @@ -1347,24 +1355,24 @@ node.x = node._beforeDragX; node.y = node._beforeDragY; node._temporaryRemoved = false; - self.grid.addNode(node); + self.engine.addNode(node); } } self._updateContainerHeight(); self._triggerChangeEvent(/*forceNotify*/); - self.grid.endUpdate(); + self.engine.endUpdate(); var nestedGrids = o.find('.grid-stack'); if (nestedGrids.length && event.type === 'resizestop') { nestedGrids.each(function(index, el) { - $(el).data('gridstack').onResizeHandler(); + el.gridstack.onResizeHandler(); }); o.find('.grid-stack-item').trigger('resizestop'); o.find('.grid-stack-item').trigger('gsresizestop'); } if (event.type === 'resizestop') { - self.container.trigger('gsresizestop', o); + self.$el.trigger('gsresizestop', o); } }; @@ -1397,8 +1405,8 @@ el = $(el); el.addClass(this.opts.itemClass); - var node = this._readAttr(el, {el: el, _grid: self}); - node = self.grid.addNode(node, triggerAddEvent); + var node = this._readAttr(el, {el: el.get(0), _grid: self}); + node = self.engine.addNode(node, triggerAddEvent); el.data('_gridstack_node', node); this._prepareElementsByNode(el, node); @@ -1448,29 +1456,29 @@ GridStack.prototype.setAnimation = function(enable) { if (enable) { - this.container.addClass('grid-stack-animate'); + this.$el.addClass('grid-stack-animate'); } else { - this.container.removeClass('grid-stack-animate'); + this.$el.removeClass('grid-stack-animate'); } }; - GridStack.prototype.addWidget = function(el, node, y, width, height, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id) { + GridStack.prototype.addWidget = function(el, opt, y, width, height, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id) { // new way of calling with an object - make sure all items have been properly initialized - if (node === undefined || typeof node === 'object') { - // Tempting to initialize the passed in node with default and valid values, but this break knockout demos + if (opt === undefined || typeof opt === 'object') { + // Tempting to initialize the passed in opt with default and valid values, but this break knockout demos // as the actual value are filled in when _prepareElement() calls el.attr('data-gs-xyz) before adding the node. - // node = this.grid._prepareNode(node); - node = node || {}; + // opt = this.engine._prepareNode(opt); + opt = opt || {}; } else { // old legacy way of calling with items spelled out - call us back with single object instead (so we can properly initialized values) - return this.addWidget(el, {x: node, y: y, width: width, height: height, autoPosition: autoPosition, + return this.addWidget(el, {x: opt, y: y, width: width, height: height, autoPosition: autoPosition, minWidth: minWidth, maxWidth: maxWidth, minHeight: minHeight, maxHeight: maxHeight, id: id}); } el = $(el); - this._writeAttr(el, node); - this.container.append(el); + this._writeAttr(el, opt); + this.$el.append(el); return this.makeWidget(el); }; @@ -1481,12 +1489,12 @@ this._triggerAddEvent(); this._triggerChangeEvent(true); // trigger any other changes - return el; + return el.get(0); }; GridStack.prototype.willItFit = function(x, y, width, height, autoPosition) { var node = {x: x, y: y, width: width, height: height, autoPosition: autoPosition}; - return this.grid.canBePlacedWithRespectToHeight(node); + return this.engine.canBePlacedWithRespectToHeight(node); }; GridStack.prototype.removeWidget = function(el, detachNode) { @@ -1495,11 +1503,11 @@ var node = el.data('_gridstack_node'); // For Meteor support: https://github.com/gridstack/gridstack.js/pull/272 if (!node) { - node = this.grid.getNodeDataByDOMEl(el); + node = this.engine.getNodeDataByDOMEl(el.get(0)); } el.removeData('_gridstack_node'); - this.grid.removeNode(node, detachNode); + this.engine.removeNode(node, detachNode); this._triggerRemoveEvent(); this._triggerChangeEvent(true); // trigger any other changes }; @@ -1507,9 +1515,9 @@ GridStack.prototype.removeAll = function(detachNode) { if (detachNode !== false) { // remove our data structure before list gets emptied and DOM elements stay behind - this.grid.nodes.forEach(function(node) { node.el.removeData('_gridstack_node') }); + this.engine.nodes.forEach(function(node) { $(node.el).removeData('_gridstack_node') }); } - this.grid.removeAll(detachNode); + this.engine.removeAll(detachNode); this._triggerRemoveEvent(); }; @@ -1518,13 +1526,13 @@ this.disable(); if (detachGrid !== undefined && !detachGrid) { this.removeAll(false); - this.container.removeData('gridstack'); + delete this.$el.get(0).gridstack; } else { - this.container.remove(); + this.$el.remove(); } Utils.removeStylesheet(this._stylesId); - if (this.grid) { - this.grid = null; + if (this.engine) { + this.engine = null; } }; @@ -1565,29 +1573,29 @@ }; GridStack.prototype.enableMove = function(doEnable, includeNewWidgets) { - this.movable(this.container.children('.' + this.opts.itemClass), doEnable); + this.movable(this.$el.children('.' + this.opts.itemClass), doEnable); if (includeNewWidgets) { this.opts.disableDrag = !doEnable; } }; GridStack.prototype.enableResize = function(doEnable, includeNewWidgets) { - this.resizable(this.container.children('.' + this.opts.itemClass), doEnable); + this.resizable(this.$el.children('.' + this.opts.itemClass), doEnable); if (includeNewWidgets) { this.opts.disableResize = !doEnable; } }; GridStack.prototype.disable = function() { - this.movable(this.container.children('.' + this.opts.itemClass), false); - this.resizable(this.container.children('.' + this.opts.itemClass), false); - this.container.trigger('disable'); + this.movable(this.$el.children('.' + this.opts.itemClass), false); + this.resizable(this.$el.children('.' + this.opts.itemClass), false); + this.$el.trigger('disable'); }; GridStack.prototype.enable = function() { - this.movable(this.container.children('.' + this.opts.itemClass), true); - this.resizable(this.container.children('.' + this.opts.itemClass), true); - this.container.trigger('enable'); + this.movable(this.$el.children('.' + this.opts.itemClass), true); + this.resizable(this.$el.children('.' + this.opts.itemClass), true); + this.$el.trigger('enable'); }; GridStack.prototype.locked = function(el, val) { @@ -1664,15 +1672,15 @@ if (!node) { return; } var self = this; - self.grid.cleanNodes(); - self.grid.beginUpdate(node); + self.engine.cleanNodes(); + self.engine.beginUpdate(node); callback.call(this, el, node); self._updateContainerHeight(); self._triggerChangeEvent(); - self.grid.endUpdate(); + self.engine.endUpdate(); }; GridStack.prototype.resize = function(el, width, height) { @@ -1680,7 +1688,7 @@ width = (width !== null && width !== undefined) ? width : node.width; height = (height !== null && height !== undefined) ? height : node.height; - this.grid.moveNode(node, node.x, node.y, width, height); + this.engine.moveNode(node, node.x, node.y, width, height); }); }; @@ -1689,7 +1697,7 @@ x = (x !== null && x !== undefined) ? x : node.x; y = (y !== null && y !== undefined) ? y : node.y; - this.grid.moveNode(node, x, y, node.width, node.height); + this.engine.moveNode(node, x, y, node.width, node.height); }); }; @@ -1700,7 +1708,7 @@ width = (width !== null && width !== undefined) ? width : node.width; height = (height !== null && height !== undefined) ? height : node.height; - this.grid.moveNode(node, x, y, width, height); + this.engine.moveNode(node, x, y, width, height); }); }; @@ -1708,16 +1716,16 @@ * relayout grid items to reclaim any empty space */ GridStack.prototype.compact = function() { - if (this.grid.nodes.length === 0) { return; } + if (this.engine.nodes.length === 0) { return; } this.batchUpdate(); - this.grid._sortNodes(); - var nodes = this.grid.nodes; - this.grid.nodes = []; // pretend we have no nodes to conflict layout to start with... + this.engine._sortNodes(); + var nodes = this.engine.nodes; + this.engine.nodes = []; // pretend we have no nodes to conflict layout to start with... nodes.forEach(function(node) { if (!node.noMove && !node.locked) { node.autoPosition = true; } - this.grid.addNode(node, false); // 'false' for add event trigger... + this.engine.addNode(node, false); // 'false' for add event trigger node._dirty = true; // force attr update }, this); this.commit(); @@ -1749,7 +1757,7 @@ return this.opts.cellHeight; } // compute the height taking margin into account (each row has margin other than last one) - var o = this.container.children('.' + this.opts.itemClass).first(); + var o = this.$el.children('.' + this.opts.itemClass).first(); var height = o.attr('data-gs-height'); var verticalMargin = this.opts.verticalMargin; return Math.round((o.outerHeight() - (height - 1) * verticalMargin) / height); @@ -1770,34 +1778,34 @@ GridStack.prototype.cellWidth = function() { // TODO: take margin into account ($horizontal_padding in .scss) to make cellHeight='auto' square ? (see 810-many-columns.html) - return Math.round(this.container.outerWidth() / this.opts.column); + return Math.round(this.$el.outerWidth() / this.opts.column); }; GridStack.prototype.getCellFromPixel = function(position, useOffset) { var containerPos = (useOffset !== undefined && useOffset) ? - this.container.offset() : this.container.position(); + this.$el.offset() : this.$el.position(); var relativeLeft = position.left - containerPos.left; var relativeTop = position.top - containerPos.top; - var columnWidth = Math.floor(this.container.width() / this.opts.column); - var rowHeight = Math.floor(this.container.height() / parseInt(this.container.attr('data-gs-current-height'))); + var columnWidth = Math.floor(this.$el.width() / this.opts.column); + var rowHeight = Math.floor(this.$el.height() / parseInt(this.$el.attr('data-gs-current-row'))); return {x: Math.floor(relativeLeft / columnWidth), y: Math.floor(relativeTop / rowHeight)}; }; GridStack.prototype.batchUpdate = function() { - this.grid.batchUpdate(); + this.engine.batchUpdate(); }; GridStack.prototype.commit = function() { - this.grid.commit(); + this.engine.commit(); this._triggerRemoveEvent(); this._triggerAddEvent(); this._triggerChangeEvent(); }; GridStack.prototype.isAreaEmpty = function(x, y, width, height) { - return this.grid.isAreaEmpty(x, y, width, height); + return this.engine.isAreaEmpty(x, y, width, height); }; GridStack.prototype.setStatic = function(staticValue) { @@ -1811,9 +1819,9 @@ var staticClassName = 'grid-stack-static'; if (this.opts.staticGrid === true) { - this.container.addClass(staticClassName); + this.$el.addClass(staticClassName); } else { - this.container.removeClass(staticClassName); + this.$el.removeClass(staticClassName); } }; @@ -1952,13 +1960,18 @@ } /** - * Modify number of columns in the grid. Will attempt to update existing widgets - * to conform to new number of columns. Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [1-11], + * set/get number of columns in the grid. Will attempt to update existing widgets + * to conform to new number of columns. Requires `gridstack-extra.css` or `gridstack-extra.min.css` for [2-11], * else you will need to generate correct CSS (see https://github.com/gridstack/gridstack.js#change-grid-columns) * @param column - Integer > 0 (default 12). * @param doNotPropagate if true existing widgets will not be updated (optional) */ - GridStack.prototype.setColumn = function(column, doNotPropagate) { + GridStack.prototype.column = function(column, doNotPropagate) { + // getter - returns the opts stored mode + if (column === undefined) { + return this.opts.column; + } + // setter if (this.opts.column === column) { return; } var oldColumn = this.opts.column; @@ -1970,9 +1983,9 @@ delete this._prevColumn; } - this.container.removeClass('grid-stack-' + oldColumn); - this.container.addClass('grid-stack-' + column); - this.opts.column = this.grid.column = column; + this.$el.removeClass('grid-stack-' + oldColumn); + this.$el.addClass('grid-stack-' + column); + this.opts.column = this.engine.column = column; if (doNotPropagate === true) { return; } @@ -1980,18 +1993,18 @@ var domNodes; if (this.opts.oneColumnModeDomSort && column === 1) { domNodes = []; - this.container.children('.' + this.opts.itemClass).each(function(index, el) { + this.$el.children('.' + this.opts.itemClass).each(function(index, el) { var node = $(el).data('_gridstack_node'); if (node) { domNodes.push(node); } }); if (!domNodes.length) { domNodes = undefined; } } - this.grid._updateNodeWidths(oldColumn, column, domNodes); + this.engine._updateNodeWidths(oldColumn, column, domNodes); // and trigger our event last... - this.grid._ignoreLayoutsNodeChange = true; + this.engine._ignoreLayoutsNodeChange = true; this._triggerChangeEvent(); - delete this.grid._ignoreLayoutsNodeChange; + delete this.engine._ignoreLayoutsNodeChange; }; GridStack.prototype.float = function(val) { @@ -2001,33 +2014,85 @@ } // setter - updates the mode and relayout if gravity is back on if (this.opts.float === val) { return; } - this.opts.float = this.grid.float = val || false; + this.opts.float = this.engine.float = val || false; if (!val) { - this.grid._packNodes(); - this.grid._notify(); + this.engine._packNodes(); + this.engine._notify(); this._triggerChangeEvent(); } }; + GridStack.prototype.getRow = function() { + return this.engine.getRow(); + } + + /** Event handler that extracts our CustomEvent data out automatically for receiving custom + * notifications (see doc for supported events) + */ + GridStack.prototype.on = function(eventName, callback) { + if (eventName === 'change' || eventName === 'added' || eventName === 'removed') { + // native CustomEvent handlers - cash the generic handlers so we can remove + this._gsEventHandler = this._gsEventHandler || {}; + this._gsEventHandler[eventName] = function(event) { callback(event, event.detail) }; + this.el.addEventListener(eventName, this._gsEventHandler[eventName]); + } else { + // still JQuery events + this.$el.on(eventName, callback); + } + } + + /** unsubscribe from the 'on' event */ + GridStack.prototype.off = function(eventName) { + if (eventName === 'change' || eventName === 'added' || eventName === 'removed') { + // remove native CustomEvent handlers + if (this._gsEventHandler && this._gsEventHandler[eventName]) { + this.el.removeEventListener(eventName, this._gsEventHandler[eventName]); + delete this._gsEventHandler[eventName]; + } + } else { + // still JQuery events + this.$el.off(eventName); + } + } + // legacy method renames - GridStack.prototype.setGridWidth = obsolete(GridStack.prototype.setColumn, - 'setGridWidth', 'setColumn', 'v0.5.3'); + GridStack.prototype.setGridWidth = obsolete(GridStack.prototype.column, 'setGridWidth', 'column', 'v0.5.3'); + GridStack.prototype.setColumn = obsolete(GridStack.prototype.column, 'setColumn', 'column', 'v0.6.4'); + GridStackEngine.prototype.getGridHeight = obsolete(GridStackEngine.prototype.getRow, 'getGridHeight', 'getRow', 'v1.0.0'); - scope.GridStackUI = GridStack; + scope.GridStack = GridStack; + scope.GridStack.Utils = Utils; + scope.GridStack.Engine = GridStackEngine; + scope.GridStack.DragDropPlugin = GridStackDragDropPlugin; - scope.GridStackUI.Utils = Utils; - scope.GridStackUI.Engine = GridStackEngine; - scope.GridStackUI.GridStackDragDropPlugin = GridStackDragDropPlugin; + /** + * initializing the HTML element, or selector string, into a grid will return the grid. Calling it again will + * simply return the existing instance (ignore any passed options). + */ + GridStack.init = function(opts, elOrString) { + if (!elOrString) { elOrString = '.grid-stack' } + var el = $(elOrString).get(0); + if (!el) return; + if (!el.gridstack) { + el.gridstack = new GridStack(el, opts); + } + return el.gridstack + }; - $.fn.gridstack = function(opts) { - return this.each(function() { - var o = $(this); - if (!o.data('gridstack')) { - o - .data('gridstack', new GridStack(this, opts)); + /** + * Will initialize a list of elements (given a selector) and return an array of grids. + */ + GridStack.initAll = function(opts, selector) { + if (!selector) { selector = '.grid-stack' } + var grids = []; + $(selector).each(function(index, el) { + if (!el.gridstack) { + el.gridstack = new GridStack(el, opts); } + grids.push(el.gridstack); }); + return grids; }; - return scope.GridStackUI; + return scope.GridStack; }); diff --git a/src/gridstack.scss b/src/gridstack.scss index 7d5ae3364..a6669b539 100644 --- a/src/gridstack.scss +++ b/src/gridstack.scss @@ -1,5 +1,5 @@ /*! - * required gridstack 0.6.4-dev CSS for default 12 and 1 columnMode size. Use gridstack-extra.css for others + * required gridstack 1.0.0 CSS for default 12 and 1 columnMode size. Use gridstack-extra.css for others * https://gridstackjs.com/ * (c) 2014-2020 Alain Dumesny, Dylan Weiss, Pavel Reznikov * gridstack.js may be freely distributed under the MIT license. diff --git a/src/jquery-ui.js b/src/jquery-ui.js index d6e1192f6..68b416b22 100644 --- a/src/jquery-ui.js +++ b/src/jquery-ui.js @@ -4,11 +4,12 @@ * Copyright jQuery Foundation and other contributors; Licensed MIT @preserve*/ (function( factory ) { + /* [alain] we compile this in so no need to load with AMD if ( typeof define === "function" && define.amd ) { // AMD. Register as an anonymous module. define([ "jquery" ], factory ); - } else { + } else */{ // Browser globals factory( jQuery ); diff --git a/src/jquery.js b/src/jquery.js new file mode 100644 index 000000000..638fceb98 --- /dev/null +++ b/src/jquery.js @@ -0,0 +1,10598 @@ +/*! + * jQuery JavaScript Library v3.4.1 + * https://jquery.com/ + * + * Includes Sizzle.js + * https://sizzlejs.com/ + * + * Copyright JS Foundation and other contributors + * Released under the MIT license + * https://jquery.org/license + * + * Date: 2019-05-01T21:04Z + */ +( function( global, factory ) { + + "use strict"; + + if ( typeof module === "object" && typeof module.exports === "object" ) { + + // For CommonJS and CommonJS-like environments where a proper `window` + // is present, execute the factory and get jQuery. + // For environments that do not have a `window` with a `document` + // (such as Node.js), expose a factory as module.exports. + // This accentuates the need for the creation of a real `window`. + // e.g. var jQuery = require("jquery")(window); + // See ticket #14549 for more info. + module.exports = global.document ? + factory( global, true ) : + function( w ) { + if ( !w.document ) { + throw new Error( "jQuery requires a window with a document" ); + } + return factory( w ); + }; + } else { + factory( global ); + } + +// Pass this if window is not defined yet +} )( typeof window !== "undefined" ? window : this, function( window, noGlobal ) { + +// Edge <= 12 - 13+, Firefox <=18 - 45+, IE 10 - 11, Safari 5.1 - 9+, iOS 6 - 9.1 +// throw exceptions when non-strict code (e.g., ASP.NET 4.5) accesses strict mode +// arguments.callee.caller (trac-13335). But as of jQuery 3.0 (2016), strict mode should be common +// enough that all such attempts are guarded in a try block. +"use strict"; + +var arr = []; + +var document = window.document; + +var getProto = Object.getPrototypeOf; + +var slice = arr.slice; + +var concat = arr.concat; + +var push = arr.push; + +var indexOf = arr.indexOf; + +var class2type = {}; + +var toString = class2type.toString; + +var hasOwn = class2type.hasOwnProperty; + +var fnToString = hasOwn.toString; + +var ObjectFunctionString = fnToString.call( Object ); + +var support = {}; + +var isFunction = function isFunction( obj ) { + + // Support: Chrome <=57, Firefox <=52 + // In some browsers, typeof returns "function" for HTML