diff --git a/README.md b/README.md index c47ad0a11..727b161ec 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,27 @@ -gridstack.js -============ - -[![Build Status](https://travis-ci.org/troolee/gridstack.js.svg?branch=master)](https://travis-ci.org/troolee/gridstack.js) -[![Coverage Status](https://coveralls.io/repos/github/troolee/gridstack.js/badge.svg?branch=master)](https://coveralls.io/github/troolee/gridstack.js?branch=master) -[![Dependency Status](https://david-dm.org/troolee/gridstack.js.svg)](https://david-dm.org/troolee/gridstack.js) -[![devDependency Status](https://david-dm.org/troolee/gridstack.js/dev-status.svg)](https://david-dm.org/troolee/gridstack.js#info=devDependencies) -[![Stories in Ready](https://badge.waffle.io/troolee/gridstack.js.png?label=ready&title=Ready)](http://waffle.io/troolee/gridstack.js) - -gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column grid. It allows you to build -draggable responsive bootstrap v3 friendly layouts. It also works great with [knockout.js](http://knockoutjs.com), [angular.js](https://angularjs.org) and touch devices. - -Inspired by [gridster.js](http://gridster.net). Built with love. - -Join gridstack.js on Slack: https://gridstackjs.troolee.com - -[![Slack Status](https://gridstackjs.troolee.com/badge.svg)](https://gridstackjs.troolee.com) - +gridstack.js +============ + +[![Build Status](https://travis-ci.org/troolee/gridstack.js.svg?branch=master)](https://travis-ci.org/troolee/gridstack.js) +[![Coverage Status](https://coveralls.io/repos/github/troolee/gridstack.js/badge.svg?branch=master)](https://coveralls.io/github/troolee/gridstack.js?branch=master) +[![Dependency Status](https://david-dm.org/troolee/gridstack.js.svg)](https://david-dm.org/troolee/gridstack.js) +[![devDependency Status](https://david-dm.org/troolee/gridstack.js/dev-status.svg)](https://david-dm.org/troolee/gridstack.js#info=devDependencies) +[![Stories in Ready](https://badge.waffle.io/troolee/gridstack.js.png?label=ready&title=Ready)](http://waffle.io/troolee/gridstack.js) + +gridstack.js is a jQuery plugin for widget layout. This is drag-and-drop multi-column grid. It allows you to build +draggable responsive bootstrap v3 friendly layouts. It also works great with [knockout.js](http://knockoutjs.com), [angular.js](https://angularjs.org) and touch devices. + +Inspired by [gridster.js](http://gridster.net). Built with love. + +Join gridstack.js on Slack: https://gridstackjs.troolee.com + +[![Slack Status](https://gridstackjs.troolee.com/badge.svg)](https://gridstackjs.troolee.com) + **Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)* -- [Demo](#demo) -- [Usage](#usage) +- [Demo ](#demo) +- [Usage ](#usage) - [Requirements](#requirements) - [Install](#install) - [Basic usage](#basic-usage) @@ -43,8 +43,8 @@ Join gridstack.js on Slack: https://gridstackjs.troolee.com - [Nested grids](#nested-grids) - [Resizing active grid](#resizing-active-grid) - [Using AniJS](#using-anijs) -- [The Team](#the-team) -- [Changes](#changes) +- [The Team ](#the-team) +- [Changes ](#changes) - [v0.2.5 (2016-03-02)](#v025-2016-03-02) - [v0.2.4 (2016-02-15)](#v024-2016-02-15) - [v0.2.3 (2015-06-23)](#v023-2015-06-23) @@ -52,533 +52,533 @@ Join gridstack.js on Slack: https://gridstackjs.troolee.com - [v0.2.1 (2014-12-09)](#v021-2014-12-09) - [v0.2.0 (2014-11-30)](#v020-2014-11-30) - [v0.1.0 (2014-11-18)](#v010-2014-11-18) -- [License](#license) +- [License ](#license) - - -Demo -==== - -Please visit http://troolee.github.io/gridstack.js/ for demo. Or check out [these example](http://troolee.github.io/gridstack.js/demo/). - - -Usage -===== - -## Requirements - -* [lodash.js](https://lodash.com) (>= 3.5.0, full build) -* [jQuery](http://jquery.com) (>= 1.11.0) -* [jQuery UI](http://jqueryui.com) (>= 1.11.0). Minimum required components: Core, Widget, Mouse, Draggable, Resizable -* (Optional) [jquery-ui-touch-punch](https://github.com/furf/jquery-ui-touch-punch) for touch-based devices support - -Note: You can still use [underscore.js](http://underscorejs.org) (>= 1.7.0) instead of lodash.js - -## Install - -* Using CDN: - -```html - - -``` - -* Using bower: - -```bash -$ bower install gridstack -``` - -* Using npm: - -[![NPM version](https://img.shields.io/npm/v/gridstack.svg)](https://www.npmjs.com/package/gridstack) - -```bash -$ npm install gridstack -``` - -You can download files from `dist` directory as well. - -## Basic usage - -```html -
-
-
-
-
-
-
-
- - -``` - -## Migrating to v0.2.5 - -As of v0.2.5 all methods and parameters are in camel case to respect [JavaScript Style Guide and Coding Conventions](http://www.w3schools.com/js/js_conventions.asp). -All old methods and parameters are marked as deprecated and still available but a warning will be displayed in js console. They will be available until v1.0 -when they will be completely removed. - -## API Documentation - -Please check out `doc/README.md` for more information about gridstack.js API. - -## Questions and Answers - -Please feel free to as a questions here in issues, using [Stackoverflow](http://stackoverflow.com/search?q=gridstack) or [Slack chat](https://gridstackjs.troolee.com). -We will glad to answer and help you as soon as we can. - -Also please check our FAQ `doc/FAQ.md` before asking in case the answer is already there. - -## 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 - - - - - - -``` - -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); -}); -``` - -## Use with knockout.js - -```javascript -ko.components.register('dashboard-grid', { - viewModel: { - createViewModel: function (controller, componentInfo) { - var ViewModel = function (controller, componentInfo) { - var grid = null; - - this.widgets = controller.widgets; - - this.afterAddWidget = function (items) { - if (grid == null) { - grid = $(componentInfo.element).find('.grid-stack').gridstack({ - auto: false - }).data('gridstack'); - } - - var item = _.find(items, function (i) { return i.nodeType == 1 }); - grid.addWidget(item); - ko.utils.domNodeDisposal.addDisposeCallback(item, function () { - grid.removeWidget(item); - }); - }; - }; - - return new ViewModel(controller, componentInfo); - } - }, - template: - [ - '
', - '
', - '
...
', - '
', - '
' - ].join('') -}); - -$(function () { - var Controller = function (widgets) { - this.widgets = ko.observableArray(widgets); - }; - - var widgets = [ - {x: 0, y: 0, width: 2, height: 2}, - {x: 2, y: 0, width: 4, height: 2}, - {x: 6, y: 0, width: 2, height: 4}, - {x: 1, y: 2, width: 4, height: 2} - ]; - - ko.applyBindings(new Controller(widgets)); -}); -``` - -and HTML: - -```html -
-``` - -See examples: [example 1](http://troolee.github.io/gridstack.js/demo/knockout.html), [example 2](http://troolee.github.io/gridstack.js/demo/knockout2.html). - -**Notes:** It's very important to exclude training spaces after widget template: - -```javascript -template: - [ - '
', - '
', - ' ....', - '
', // <-- NO SPACE **AFTER**
- ' ' // <-- NO SPACE **BEFORE** - ].join('') // <-- JOIN WITH **EMPTY** STRING -``` - -Otherwise `addDisposeCallback` won't work. - - -## Use with angular.js - -Please check [gridstack-angular](https://github.com/kdietrich/gridstack-angular) - - -## Rails integration - -For rails users, integration of gridstack.js and its dependencies can be done through [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails) - - -## Change grid width - -To change grid width (columns count), to addition to `width` option, CSS rules -for `.grid-stack-item[data-gs-width="X"]` and `.grid-stack-item[data-gs-x="X"]` have to be changed accordingly. - -For instance for 3-column grid you need to rewrite CSS to be: - -```css -.grid-stack-item[data-gs-width="3"] { width: 100% } -.grid-stack-item[data-gs-width="2"] { width: 66.66666667% } -.grid-stack-item[data-gs-width="1"] { width: 33.33333333% } - -.grid-stack-item[data-gs-x="2"] { left: 66.66666667% } -.grid-stack-item[data-gs-x="1"] { left: 33.33333333% } -``` - -For 4-column grid it should be: - -```css -.grid-stack-item[data-gs-width="4"] { width: 100% } -.grid-stack-item[data-gs-width="3"] { width: 75% } -.grid-stack-item[data-gs-width="2"] { width: 50% } -.grid-stack-item[data-gs-width="1"] { width: 25% } - -.grid-stack-item[data-gs-x="3"] { left: 75% } -.grid-stack-item[data-gs-x="2"] { left: 50% } -.grid-stack-item[data-gs-x="1"] { left: 25% } -``` - -and so on. - -Here is a SASS code snipped which can make life easier (Thanks to @ascendantofrain, [#81](https://github.com/troolee/gridstack.js/issues/81)): - -```sass -.grid-stack-item { - - $gridstack-columns: 12; - - @for $i from 1 through $gridstack-columns { - &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; } - &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; } - &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; } - &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; } - } -} -``` - -Or you can include `gridstack-extra.css`. See below for more details. - -## Extra CSS - -There are few extra CSS batteries in `gridstack-extra.css` (`gridstack-extra.min.css`). - -### Different grid widths - -You can use other than 12 grid width: - -```html -
...
-``` -```javascript -$('.grid-stack').gridstack({width: N}); -``` - -See example: [2 grids demo](http://troolee.github.io/gridstack.js/demo/two.html) - -## Save grid to array - -Because gridstack doesn't track any kind of user-defined widget id there is no reason to make serialization to be part -of gridstack API. To serialize grid you can simply do something like this (let's say you store widget id inside `data-custom-id` -attribute): - -```javascript -var res = _.map($('.grid-stack .grid-stack-item:visible'), function (el) { - el = $(el); - var node = el.data('_gridstack_node'); - return { - id: el.attr('data-custom-id'), - x: node.x, - y: node.y, - width: node.width, - height: node.height - }; -}); -alert(JSON.stringify(res)); -``` - -See example: [Serialization demo](http://troolee.github.io/gridstack.js/demo/serialization.html) - -You can also use `onchange` event if you need to save only changed widgets right away they have been changed. - -## Load grid from array - -```javascript -var serialization = [ - {x: 0, y: 0, width: 2, height: 2}, - {x: 3, y: 1, width: 1, height: 2}, - {x: 4, y: 1, width: 1, height: 1}, - {x: 2, y: 3, width: 3, height: 1}, - {x: 1, y: 4, width: 1, height: 1}, - {x: 1, y: 3, width: 1, height: 1}, - {x: 2, y: 4, width: 1, height: 1}, - {x: 2, y: 5, width: 1, height: 1} -]; - -serialization = GridStackUI.Utils.sort(serialization); - -var grid = $('.grid-stack').data('gridstack'); -grid.removeAll(); - -_.each(serialization, function (node) { - grid.addWidget($('
'), - node.x, node.y, node.width, node.height); -}); -``` - -See example: [Serialization demo](http://troolee.github.io/gridstack.js/demo/serialization.html) - -If you're using knockout there is no need for such method at all. - -## Override resizable/draggable options - -You can override default `resizable`/`draggable` options. For instance to enable other then bottom right resizing handle -you can init gridsack like: - -```javascript -$('.grid-stack').gridstack({ - resizable: { - handles: 'e, se, s, sw, w' - } -}); -``` - -Note: It's not recommended to enable `nw`, `n`, `ne` resizing handles. Their behaviour may be unexpected. - -## IE8 support - -Support of IE8 is quite limited and is not a goal at this time. As far as IE8 doesn't support DOM Level 2 I cannot manipulate with -CSS stylesheet dynamically. As a workaround you can do the following: - -- Create `gridstack-ie8.css` for your configuration (sample for grid with cell height of 60px can be found [here](https://gist.github.com/troolee/6edfea5857f4cd73e6f1)). -- Include this CSS: - -```html - -``` - -- You can use this python script to generate such kind of CSS: - -```python -#!/usr/bin/env python - -height = 60 -margin = 20 -N = 100 - -print '.grid-stack > .grid-stack-item { min-height: %(height)spx }' % {'height': height} - -for i in range(N): - h = height * (i + 1) + margin * i - print '.grid-stack > .grid-stack-item[data-gs-height="%(index)s"] { height: %(height)spx }' % {'index': i + 1, 'height': h} - -for i in range(N): - h = height * (i + 1) + margin * i - print '.grid-stack > .grid-stack-item[data-gs-min-height="%(index)s"] { min-height: %(height)spx }' % {'index': i + 1, 'height': h} - -for i in range(N): - h = height * (i + 1) + margin * i - print '.grid-stack > .grid-stack-item[data-gs-max-height="%(index)s"] { max-height: %(height)spx }' % {'index': i + 1, 'height': h} - -for i in range(N): - h = height * i + margin * i - print '.grid-stack > .grid-stack-item[data-gs-y="%(index)s"] { top: %(height)spx }' % {'index': i , 'height': h} -``` - -There are at least two more issues with gridstack in IE8 with jQueryUI resizable (it seems it doesn't work) and -droppable. If you have any suggestions about support of IE8 you are welcome here: https://github.com/troolee/gridstack.js/issues/76 - -## Use with require.js - -If you're using require.js and a single file jQueryUI please check out this -[Stackoverflow question](http://stackoverflow.com/questions/35582945/redundant-dependencies-with-requirejs) to get it -working properly. - - -## Nested grids - -Gridstack may be nested. All nested grids have an additional class `grid-stack-nested` which is assigned automatically -during initialization. -See example: [Nested grid demo](http://troolee.github.io/gridstack.js/demo/nested.html) - - -## Resizing active grid - -Resizing on-the-fly is possible, though experimental. This may be used to make gridstack responsive. gridstack will change the total number of columns and will attempt to update the width and x values of each widget to be more logical. -See example: [Responsive grid demo](http://troolee.github.io/gridstack.js/demo/responsive.html) - -## Using AniJS - -Using AniJS with gridstack is a breeze. In the following example, a listener is added that gets triggered by a widget being added. -See widgets wiggle! [AniJS demo](http://troolee.github.io/gridstack.js/demo/anijs.html) - -The Team -======== - -gridstack.js is currently maintained by [Pavel Reznikov](https://github.com/troolee), [Dylan Weiss](https://github.com/radiolips) -and [Kevin Dietrich](https://github.com/kdietrich). And we appreciate [all contributors](https://github.com/troolee/gridstack.js/graphs/contributors) -for help. - - -Changes -======= - -#### v0.2.5 (2016-03-02) - -- update names to respect js naming convention. -- `cellHeight` and `verticalMargin` can now be string (e.g. '3em', '20px') (Thanks to @jlowcs). -- add `maxWidth`/`maxHeight` methods. -- add `enableMove`/`enableResize` methods. -- fix window resize issue #331. -- add options `disableDrag` and `disableResize`. -- fix `batchUpdate`/`commit` (Thank to @radiolips) -- remove dependency of FontAwesome -- RTL support -- `'auto'` value for `cellHeight` option -- fix `setStatic` method -- add `setAnimation` method to API -- add `setGridWidth` method ([#227](https://github.com/troolee/gridstack.js/issues/227)) -- add `removable`/`removeTimeout` *(experimental)* -- add `detachGrid` parameter to `destroy` method ([#216](https://github.com/troolee/gridstack.js/issues/216)) (thanks @jhpedemonte) -- add `useOffset` parameter to `getCellFromPixel` method ([#237](https://github.com/troolee/gridstack.js/issues/237)) -- add `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, `id` parameters to `addWidget` ([#188](https://github.com/troolee/gridstack.js/issues/188)) -- add `added` and `removed` events for when a widget is added or removed, respectively. ([#54](https://github.com/troolee/gridstack.js/issues/54)) -- add `acceptWidgets` parameter. Widgets can now be draggable between grids or from outside *(experimental)* - -#### v0.2.4 (2016-02-15) - -- fix closure compiler/linter warnings -- add `static_grid` option. -- add `min_width`/`min_height` methods (Thanks to @cvillemure) -- add `destroy` method (Thanks to @zspitzer) -- add `placeholder_text` option (Thanks to @slauyama) -- add `handle_class` option. -- add `make_widget` method. -- lodash v 4.x support (Thanks to @andrewr88) - -#### v0.2.3 (2015-06-23) - -- gridstack-extra.css -- add support of lodash.js -- add `is_area_empty` method -- nested grids -- add `batch_update`/`commit` methods -- add `update` method -- allow to override `resizable`/`draggable` options -- add `disable`/`enable` methods -- add `get_cell_from_pixel` (thanks to @juchi) -- AMD support -- fix nodes sorting -- improved touch devices support -- add `always_show_resize_handle` option -- minor fixes and improvements - -#### v0.2.2 (2014-12-23) - -- fix grid initialization -- add `cell_height`/`cell_width` API methods -- fix boolean attributes (issue #31) - -#### v0.2.1 (2014-12-09) - -- add widgets locking (issue #19) -- add `will_it_fit` API method -- fix auto-positioning (issue #20) -- add animation (thanks to @ishields) -- fix `y` coordinate calculation when dragging (issue #18) -- fix `remove_widget` (issue #16) -- minor fixes - - -#### v0.2.0 (2014-11-30) - -- add `height` option -- auto-generate css rules (widgets `height` and `top`) -- add `GridStackUI.Utils.sort` utility function -- add `remove_all` API method -- add `resize` and `move` API methods -- add `resizable` and `movable` API methods -- add `data-gs-no-move` attribute -- add `float` option -- fix default css rule for inner content -- minor fixes - -#### v0.1.0 (2014-11-18) - -Very first version. - - -License -======= - -The MIT License (MIT) - -Copyright (c) 2014-2016 Pavel Reznikov - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. + + +Demo +==== + +Please visit http://troolee.github.io/gridstack.js/ for demo. Or check out [these example](http://troolee.github.io/gridstack.js/demo/). + + +Usage +===== + +## Requirements + +* [lodash.js](https://lodash.com) (>= 3.5.0, full build) +* [jQuery](http://jquery.com) (>= 1.11.0) +* [jQuery UI](http://jqueryui.com) (>= 1.11.0). Minimum required components: Core, Widget, Mouse, Draggable, Resizable +* (Optional) [jquery-ui-touch-punch](https://github.com/furf/jquery-ui-touch-punch) for touch-based devices support + +Note: You can still use [underscore.js](http://underscorejs.org) (>= 1.7.0) instead of lodash.js + +## Install + +* Using CDN: + +```html + + +``` + +* Using bower: + +```bash +$ bower install gridstack +``` + +* Using npm: + +[![NPM version](https://img.shields.io/npm/v/gridstack.svg)](https://www.npmjs.com/package/gridstack) + +```bash +$ npm install gridstack +``` + +You can download files from `dist` directory as well. + +## Basic usage + +```html +
+
+
+
+
+
+
+
+ + +``` + +## Migrating to v0.2.5 + +As of v0.2.5 all methods and parameters are in camel case to respect [JavaScript Style Guide and Coding Conventions](http://www.w3schools.com/js/js_conventions.asp). +All old methods and parameters are marked as deprecated and still available but a warning will be displayed in js console. They will be available until v1.0 +when they will be completely removed. + +## API Documentation + +Please check out `doc/README.md` for more information about gridstack.js API. + +## Questions and Answers + +Please feel free to as a questions here in issues, using [Stackoverflow](http://stackoverflow.com/search?q=gridstack) or [Slack chat](https://gridstackjs.troolee.com). +We will glad to answer and help you as soon as we can. + +Also please check our FAQ `doc/FAQ.md` before asking in case the answer is already there. + +## 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 + + + + + + +``` + +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); +}); +``` + +## Use with knockout.js + +```javascript +ko.components.register('dashboard-grid', { + viewModel: { + createViewModel: function (controller, componentInfo) { + var ViewModel = function (controller, componentInfo) { + var grid = null; + + this.widgets = controller.widgets; + + this.afterAddWidget = function (items) { + if (grid == null) { + grid = $(componentInfo.element).find('.grid-stack').gridstack({ + auto: false + }).data('gridstack'); + } + + var item = _.find(items, function (i) { return i.nodeType == 1 }); + grid.addWidget(item); + ko.utils.domNodeDisposal.addDisposeCallback(item, function () { + grid.removeWidget(item); + }); + }; + }; + + return new ViewModel(controller, componentInfo); + } + }, + template: + [ + '
', + '
', + '
...
', + '
', + '
' + ].join('') +}); + +$(function () { + var Controller = function (widgets) { + this.widgets = ko.observableArray(widgets); + }; + + var widgets = [ + {x: 0, y: 0, width: 2, height: 2}, + {x: 2, y: 0, width: 4, height: 2}, + {x: 6, y: 0, width: 2, height: 4}, + {x: 1, y: 2, width: 4, height: 2} + ]; + + ko.applyBindings(new Controller(widgets)); +}); +``` + +and HTML: + +```html +
+``` + +See examples: [example 1](http://troolee.github.io/gridstack.js/demo/knockout.html), [example 2](http://troolee.github.io/gridstack.js/demo/knockout2.html). + +**Notes:** It's very important to exclude training spaces after widget template: + +```javascript +template: + [ + '
', + '
', + ' ....', + '
', // <-- NO SPACE **AFTER**
+ '
' // <-- NO SPACE **BEFORE** + ].join('') // <-- JOIN WITH **EMPTY** STRING +``` + +Otherwise `addDisposeCallback` won't work. + + +## Use with angular.js + +Please check [gridstack-angular](https://github.com/kdietrich/gridstack-angular) + + +## Rails integration + +For rails users, integration of gridstack.js and its dependencies can be done through [gridstack-js-rails](https://github.com/randoum/gridstack-js-rails) + + +## Change grid width + +To change grid width (columns count), to addition to `width` option, CSS rules +for `.grid-stack-item[data-gs-width="X"]` and `.grid-stack-item[data-gs-x="X"]` have to be changed accordingly. + +For instance for 3-column grid you need to rewrite CSS to be: + +```css +.grid-stack-item[data-gs-width="3"] { width: 100% } +.grid-stack-item[data-gs-width="2"] { width: 66.66666667% } +.grid-stack-item[data-gs-width="1"] { width: 33.33333333% } + +.grid-stack-item[data-gs-x="2"] { left: 66.66666667% } +.grid-stack-item[data-gs-x="1"] { left: 33.33333333% } +``` + +For 4-column grid it should be: + +```css +.grid-stack-item[data-gs-width="4"] { width: 100% } +.grid-stack-item[data-gs-width="3"] { width: 75% } +.grid-stack-item[data-gs-width="2"] { width: 50% } +.grid-stack-item[data-gs-width="1"] { width: 25% } + +.grid-stack-item[data-gs-x="3"] { left: 75% } +.grid-stack-item[data-gs-x="2"] { left: 50% } +.grid-stack-item[data-gs-x="1"] { left: 25% } +``` + +and so on. + +Here is a SASS code snipped which can make life easier (Thanks to @ascendantofrain, [#81](https://github.com/troolee/gridstack.js/issues/81)): + +```sass +.grid-stack-item { + + $gridstack-columns: 12; + + @for $i from 1 through $gridstack-columns { + &[data-gs-width='#{$i}'] { width: (100% / $gridstack-columns) * $i; } + &[data-gs-x='#{$i}'] { left: (100% / $gridstack-columns) * $i; } + &.grid-stack-item[data-gs-min-width='#{$i}'] { min-width: (100% / $gridstack-columns) * $i; } + &.grid-stack-item[data-gs-max-width='#{$i}'] { max-width: (100% / $gridstack-columns) * $i; } + } +} +``` + +Or you can include `gridstack-extra.css`. See below for more details. + +## Extra CSS + +There are few extra CSS batteries in `gridstack-extra.css` (`gridstack-extra.min.css`). + +### Different grid widths + +You can use other than 12 grid width: + +```html +
...
+``` +```javascript +$('.grid-stack').gridstack({width: N}); +``` + +See example: [2 grids demo](http://troolee.github.io/gridstack.js/demo/two.html) + +## Save grid to array + +Because gridstack doesn't track any kind of user-defined widget id there is no reason to make serialization to be part +of gridstack API. To serialize grid you can simply do something like this (let's say you store widget id inside `data-custom-id` +attribute): + +```javascript +var res = _.map($('.grid-stack .grid-stack-item:visible'), function (el) { + el = $(el); + var node = el.data('_gridstack_node'); + return { + id: el.attr('data-custom-id'), + x: node.x, + y: node.y, + width: node.width, + height: node.height + }; +}); +alert(JSON.stringify(res)); +``` + +See example: [Serialization demo](http://troolee.github.io/gridstack.js/demo/serialization.html) + +You can also use `onchange` event if you need to save only changed widgets right away they have been changed. + +## Load grid from array + +```javascript +var serialization = [ + {x: 0, y: 0, width: 2, height: 2}, + {x: 3, y: 1, width: 1, height: 2}, + {x: 4, y: 1, width: 1, height: 1}, + {x: 2, y: 3, width: 3, height: 1}, + {x: 1, y: 4, width: 1, height: 1}, + {x: 1, y: 3, width: 1, height: 1}, + {x: 2, y: 4, width: 1, height: 1}, + {x: 2, y: 5, width: 1, height: 1} +]; + +serialization = GridStackUI.Utils.sort(serialization); + +var grid = $('.grid-stack').data('gridstack'); +grid.removeAll(); + +_.each(serialization, function (node) { + grid.addWidget($('
'), + node.x, node.y, node.width, node.height); +}); +``` + +See example: [Serialization demo](http://troolee.github.io/gridstack.js/demo/serialization.html) + +If you're using knockout there is no need for such method at all. + +## Override resizable/draggable options + +You can override default `resizable`/`draggable` options. For instance to enable other then bottom right resizing handle +you can init gridsack like: + +```javascript +$('.grid-stack').gridstack({ + resizable: { + handles: 'e, se, s, sw, w' + } +}); +``` + +Note: It's not recommended to enable `nw`, `n`, `ne` resizing handles. Their behaviour may be unexpected. + +## IE8 support + +Support of IE8 is quite limited and is not a goal at this time. As far as IE8 doesn't support DOM Level 2 I cannot manipulate with +CSS stylesheet dynamically. As a workaround you can do the following: + +- Create `gridstack-ie8.css` for your configuration (sample for grid with cell height of 60px can be found [here](https://gist.github.com/troolee/6edfea5857f4cd73e6f1)). +- Include this CSS: + +```html + +``` + +- You can use this python script to generate such kind of CSS: + +```python +#!/usr/bin/env python + +height = 60 +margin = 20 +N = 100 + +print '.grid-stack > .grid-stack-item { min-height: %(height)spx }' % {'height': height} + +for i in range(N): + h = height * (i + 1) + margin * i + print '.grid-stack > .grid-stack-item[data-gs-height="%(index)s"] { height: %(height)spx }' % {'index': i + 1, 'height': h} + +for i in range(N): + h = height * (i + 1) + margin * i + print '.grid-stack > .grid-stack-item[data-gs-min-height="%(index)s"] { min-height: %(height)spx }' % {'index': i + 1, 'height': h} + +for i in range(N): + h = height * (i + 1) + margin * i + print '.grid-stack > .grid-stack-item[data-gs-max-height="%(index)s"] { max-height: %(height)spx }' % {'index': i + 1, 'height': h} + +for i in range(N): + h = height * i + margin * i + print '.grid-stack > .grid-stack-item[data-gs-y="%(index)s"] { top: %(height)spx }' % {'index': i , 'height': h} +``` + +There are at least two more issues with gridstack in IE8 with jQueryUI resizable (it seems it doesn't work) and +droppable. If you have any suggestions about support of IE8 you are welcome here: https://github.com/troolee/gridstack.js/issues/76 + +## Use with require.js + +If you're using require.js and a single file jQueryUI please check out this +[Stackoverflow question](http://stackoverflow.com/questions/35582945/redundant-dependencies-with-requirejs) to get it +working properly. + + +## Nested grids + +Gridstack may be nested. All nested grids have an additional class `grid-stack-nested` which is assigned automatically +during initialization. +See example: [Nested grid demo](http://troolee.github.io/gridstack.js/demo/nested.html) + + +## Resizing active grid + +Resizing on-the-fly is possible, though experimental. This may be used to make gridstack responsive. gridstack will change the total number of columns and will attempt to update the width and x values of each widget to be more logical. +See example: [Responsive grid demo](http://troolee.github.io/gridstack.js/demo/responsive.html) + +## Using AniJS + +Using AniJS with gridstack is a breeze. In the following example, a listener is added that gets triggered by a widget being added. +See widgets wiggle! [AniJS demo](http://troolee.github.io/gridstack.js/demo/anijs.html) + +The Team +======== + +gridstack.js is currently maintained by [Pavel Reznikov](https://github.com/troolee), [Dylan Weiss](https://github.com/radiolips) +and [Kevin Dietrich](https://github.com/kdietrich). And we appreciate [all contributors](https://github.com/troolee/gridstack.js/graphs/contributors) +for help. + + +Changes +======= + +#### v0.2.5 (2016-03-02) + +- update names to respect js naming convention. +- `cellHeight` and `verticalMargin` can now be string (e.g. '3em', '20px') (Thanks to @jlowcs). +- add `maxWidth`/`maxHeight` methods. +- add `enableMove`/`enableResize` methods. +- fix window resize issue #331. +- add options `disableDrag` and `disableResize`. +- fix `batchUpdate`/`commit` (Thank to @radiolips) +- remove dependency of FontAwesome +- RTL support +- `'auto'` value for `cellHeight` option +- fix `setStatic` method +- add `setAnimation` method to API +- add `setGridWidth` method ([#227](https://github.com/troolee/gridstack.js/issues/227)) +- add `removable`/`removeTimeout` *(experimental)* +- add `detachGrid` parameter to `destroy` method ([#216](https://github.com/troolee/gridstack.js/issues/216)) (thanks @jhpedemonte) +- add `useOffset` parameter to `getCellFromPixel` method ([#237](https://github.com/troolee/gridstack.js/issues/237)) +- add `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, `id` parameters to `addWidget` ([#188](https://github.com/troolee/gridstack.js/issues/188)) +- add `added` and `removed` events for when a widget is added or removed, respectively. ([#54](https://github.com/troolee/gridstack.js/issues/54)) +- add `acceptWidgets` parameter. Widgets can now be draggable between grids or from outside *(experimental)* + +#### v0.2.4 (2016-02-15) + +- fix closure compiler/linter warnings +- add `static_grid` option. +- add `min_width`/`min_height` methods (Thanks to @cvillemure) +- add `destroy` method (Thanks to @zspitzer) +- add `placeholder_text` option (Thanks to @slauyama) +- add `handle_class` option. +- add `make_widget` method. +- lodash v 4.x support (Thanks to @andrewr88) + +#### v0.2.3 (2015-06-23) + +- gridstack-extra.css +- add support of lodash.js +- add `is_area_empty` method +- nested grids +- add `batch_update`/`commit` methods +- add `update` method +- allow to override `resizable`/`draggable` options +- add `disable`/`enable` methods +- add `get_cell_from_pixel` (thanks to @juchi) +- AMD support +- fix nodes sorting +- improved touch devices support +- add `always_show_resize_handle` option +- minor fixes and improvements + +#### v0.2.2 (2014-12-23) + +- fix grid initialization +- add `cell_height`/`cell_width` API methods +- fix boolean attributes (issue #31) + +#### v0.2.1 (2014-12-09) + +- add widgets locking (issue #19) +- add `will_it_fit` API method +- fix auto-positioning (issue #20) +- add animation (thanks to @ishields) +- fix `y` coordinate calculation when dragging (issue #18) +- fix `remove_widget` (issue #16) +- minor fixes + + +#### v0.2.0 (2014-11-30) + +- add `height` option +- auto-generate css rules (widgets `height` and `top`) +- add `GridStackUI.Utils.sort` utility function +- add `remove_all` API method +- add `resize` and `move` API methods +- add `resizable` and `movable` API methods +- add `data-gs-no-move` attribute +- add `float` option +- fix default css rule for inner content +- minor fixes + +#### v0.1.0 (2014-11-18) + +Very first version. + + +License +======= + +The MIT License (MIT) + +Copyright (c) 2014-2016 Pavel Reznikov + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/dist/gridstack.css b/dist/gridstack.css index f5c84a0c5..74d377a52 100644 --- a/dist/gridstack.css +++ b/dist/gridstack.css @@ -368,19 +368,3 @@ -o-transition: left 0s, top 0s, height 0s, width 0s; transition: left 0s, top 0s, height 0s, width 0s; } - -@media (max-width: 768px) { - .grid-stack-item { - position: relative !important; - width: auto !important; - left: 0 !important; - top: auto !important; - margin-bottom: 20px; - } - .grid-stack-item .ui-resizable-handle { - display: none; - } - .grid-stack { - height: auto !important; - } -} diff --git a/dist/gridstack.js b/dist/gridstack.js index bbf077a0e..87d082746 100644 --- a/dist/gridstack.js +++ b/dist/gridstack.js @@ -543,7 +543,8 @@ removable: false, removeTimeout: 2000, verticalMarginUnit: 'px', - cellHeightUnit: 'px' + cellHeightUnit: 'px', + staticHeight: opts.staticHeight || false }); if (this.opts.rtl === 'auto') { @@ -923,7 +924,13 @@ if (this.grid._updateCounter) { return; } - var height = this.grid.getGridHeight(); + + var height = this.opts.height; + + if (!this.opts.staticHeight) { + height = this.grid.getGridHeight(); + } + this.container.attr('data-gs-current-height', height); if (!this.opts.cellHeight) { return ; diff --git a/dist/gridstack.min.css b/dist/gridstack.min.css index 5fb660201..faf183679 100644 --- a/dist/gridstack.min.css +++ b/dist/gridstack.min.css @@ -1 +1 @@ -:root .grid-stack-item>.ui-resizable-handle{filter:none}.grid-stack{position:relative}.grid-stack.grid-stack-rtl{direction:ltr}.grid-stack.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack .grid-stack-placeholder>.placeholder-content{border:1px dashed #d3d3d3;margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;z-index:0!important;text-align:center}.grid-stack>.grid-stack-item{min-width:8.3333333333%;position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;z-index:0!important;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack>.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack>.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack>.grid-stack-item.ui-draggable-dragging,.grid-stack>.grid-stack-item.ui-resizable-resizing{z-index:100}.grid-stack>.grid-stack-item.ui-draggable-dragging>.grid-stack-item-content,.grid-stack>.grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.grid-stack>.grid-stack-item>.ui-resizable-se,.grid-stack>.grid-stack-item>.ui-resizable-sw{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.grid-stack>.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;left:10px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;right:10px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;right:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item>.ui-resizable-se{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);cursor:se-resize;width:20px;height:20px;right:10px;bottom:0}.grid-stack>.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;left:10px;bottom:0}.grid-stack>.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;left:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack>.grid-stack-item[data-gs-width='1']{width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='1']{left:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='1']{min-width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='1']{max-width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='2']{width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='2']{left:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='2']{min-width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='2']{max-width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='3']{width:25%}.grid-stack>.grid-stack-item[data-gs-x='3']{left:25%}.grid-stack>.grid-stack-item[data-gs-min-width='3']{min-width:25%}.grid-stack>.grid-stack-item[data-gs-max-width='3']{max-width:25%}.grid-stack>.grid-stack-item[data-gs-width='4']{width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='4']{left:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='4']{min-width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='4']{max-width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='5']{width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='5']{left:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='5']{min-width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='5']{max-width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='6']{width:50%}.grid-stack>.grid-stack-item[data-gs-x='6']{left:50%}.grid-stack>.grid-stack-item[data-gs-min-width='6']{min-width:50%}.grid-stack>.grid-stack-item[data-gs-max-width='6']{max-width:50%}.grid-stack>.grid-stack-item[data-gs-width='7']{width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='7']{left:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='7']{min-width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='7']{max-width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='8']{width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='8']{left:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='8']{min-width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='8']{max-width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='9']{width:75%}.grid-stack>.grid-stack-item[data-gs-x='9']{left:75%}.grid-stack>.grid-stack-item[data-gs-min-width='9']{min-width:75%}.grid-stack>.grid-stack-item[data-gs-max-width='9']{max-width:75%}.grid-stack>.grid-stack-item[data-gs-width='10']{width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='10']{left:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='10']{min-width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='10']{max-width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='11']{width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='11']{left:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='11']{min-width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='11']{max-width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='12']{width:100%}.grid-stack>.grid-stack-item[data-gs-x='12']{left:100%}.grid-stack>.grid-stack-item[data-gs-min-width='12']{min-width:100%}.grid-stack>.grid-stack-item[data-gs-max-width='12']{max-width:100%}.grid-stack.grid-stack-animate,.grid-stack.grid-stack-animate .grid-stack-item{-webkit-transition:left .3s,top .3s,height .3s,width .3s;-moz-transition:left .3s,top .3s,height .3s,width .3s;-ms-transition:left .3s,top .3s,height .3s,width .3s;-o-transition:left .3s,top .3s,height .3s,width .3s;transition:left .3s,top .3s,height .3s,width .3s}.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing{-webkit-transition:left 0s,top 0s,height 0s,width 0s;-moz-transition:left 0s,top 0s,height 0s,width 0s;-ms-transition:left 0s,top 0s,height 0s,width 0s;-o-transition:left 0s,top 0s,height 0s,width 0s;transition:left 0s,top 0s,height 0s,width 0s}@media (max-width:768px){.grid-stack-item{position:relative!important;width:auto!important;left:0!important;top:auto!important;margin-bottom:20px}.grid-stack-item .ui-resizable-handle{display:none}.grid-stack{height:auto!important}} \ No newline at end of file +:root .grid-stack-item>.ui-resizable-handle{filter:none}.grid-stack{position:relative}.grid-stack.grid-stack-rtl{direction:ltr}.grid-stack.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack .grid-stack-placeholder>.placeholder-content{border:1px dashed #d3d3d3;margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;z-index:0!important;text-align:center}.grid-stack>.grid-stack-item{min-width:8.3333333333%;position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;top:0;left:10px;right:10px;bottom:0;width:auto;z-index:0!important;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack>.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle,.grid-stack>.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle{display:none}.grid-stack>.grid-stack-item.ui-draggable-dragging,.grid-stack>.grid-stack-item.ui-resizable-resizing{z-index:100}.grid-stack>.grid-stack-item.ui-draggable-dragging>.grid-stack-item-content,.grid-stack>.grid-stack-item.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px rgba(0,0,0,.2);opacity:.8}.grid-stack>.grid-stack-item>.ui-resizable-se,.grid-stack>.grid-stack-item>.ui-resizable-sw{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.grid-stack>.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;left:10px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;right:10px;top:0}.grid-stack>.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;right:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item>.ui-resizable-se{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);cursor:se-resize;width:20px;height:20px;right:10px;bottom:0}.grid-stack>.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack>.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px;left:10px;bottom:0}.grid-stack>.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;left:10px;top:15px;bottom:15px}.grid-stack>.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack>.grid-stack-item[data-gs-width='1']{width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='1']{left:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='1']{min-width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='1']{max-width:8.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='2']{width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='2']{left:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='2']{min-width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='2']{max-width:16.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='3']{width:25%}.grid-stack>.grid-stack-item[data-gs-x='3']{left:25%}.grid-stack>.grid-stack-item[data-gs-min-width='3']{min-width:25%}.grid-stack>.grid-stack-item[data-gs-max-width='3']{max-width:25%}.grid-stack>.grid-stack-item[data-gs-width='4']{width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='4']{left:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='4']{min-width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='4']{max-width:33.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='5']{width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='5']{left:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='5']{min-width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='5']{max-width:41.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='6']{width:50%}.grid-stack>.grid-stack-item[data-gs-x='6']{left:50%}.grid-stack>.grid-stack-item[data-gs-min-width='6']{min-width:50%}.grid-stack>.grid-stack-item[data-gs-max-width='6']{max-width:50%}.grid-stack>.grid-stack-item[data-gs-width='7']{width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='7']{left:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='7']{min-width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='7']{max-width:58.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='8']{width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='8']{left:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='8']{min-width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='8']{max-width:66.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='9']{width:75%}.grid-stack>.grid-stack-item[data-gs-x='9']{left:75%}.grid-stack>.grid-stack-item[data-gs-min-width='9']{min-width:75%}.grid-stack>.grid-stack-item[data-gs-max-width='9']{max-width:75%}.grid-stack>.grid-stack-item[data-gs-width='10']{width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-x='10']{left:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-min-width='10']{min-width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-max-width='10']{max-width:83.3333333333%}.grid-stack>.grid-stack-item[data-gs-width='11']{width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-x='11']{left:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-min-width='11']{min-width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-max-width='11']{max-width:91.6666666667%}.grid-stack>.grid-stack-item[data-gs-width='12']{width:100%}.grid-stack>.grid-stack-item[data-gs-x='12']{left:100%}.grid-stack>.grid-stack-item[data-gs-min-width='12']{min-width:100%}.grid-stack>.grid-stack-item[data-gs-max-width='12']{max-width:100%}.grid-stack.grid-stack-animate,.grid-stack.grid-stack-animate .grid-stack-item{-webkit-transition:left .3s,top .3s,height .3s,width .3s;-moz-transition:left .3s,top .3s,height .3s,width .3s;-ms-transition:left .3s,top .3s,height .3s,width .3s;-o-transition:left .3s,top .3s,height .3s,width .3s;transition:left .3s,top .3s,height .3s,width .3s}.grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder,.grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing{-webkit-transition:left 0s,top 0s,height 0s,width 0s;-moz-transition:left 0s,top 0s,height 0s,width 0s;-ms-transition:left 0s,top 0s,height 0s,width 0s;-o-transition:left 0s,top 0s,height 0s,width 0s;transition:left 0s,top 0s,height 0s,width 0s} \ No newline at end of file diff --git a/dist/gridstack.min.js b/dist/gridstack.min.js index a3696100e..7eb5e4152 100644 --- a/dist/gridstack.min.js +++ b/dist/gridstack.min.js @@ -5,16 +5,20 @@ * gridstack.js may be freely distributed under the MIT license. * @preserve */ -!function(a){if("function"==typeof define&&define.amd)define(["jquery","lodash","jquery-ui/core","jquery-ui/widget","jquery-ui/mouse","jquery-ui/draggable","jquery-ui/resizable"],a);else if("undefined"!=typeof exports){try{jQuery=require("jquery")}catch(b){}try{_=require("lodash")}catch(b){}a(jQuery,_)}else a(jQuery,_)}(function(a,b){var c=window,d=function(a,b,c){var d=function(){return console.warn("gridstack.js: Function `"+b+"` is deprecated as of v0.2.5 and has been replaced with `"+c+"`. It will be **completely** removed in v1.0."),a.apply(this,arguments)};return d.prototype=a.prototype,d},e=function(a,b){console.warn("gridstack.js: Option `"+a+"` is deprecated as of v0.2.5 and has been replaced with `"+b+"`. It will be **completely** removed in v1.0.")},f={isIntercepted:function(a,b){return!(a.x+a.width<=b.x||b.x+b.width<=a.x||a.y+a.height<=b.y||b.y+b.height<=a.y)},sort:function(a,c,d){return d=d||b.chain(a).map(function(a){return a.x+a.width}).max().value(),c=-1!=c?1:-1,b.sortBy(a,function(a){return c*(a.x+a.y*d)})},createStylesheet:function(a){var b=document.createElement("style");return b.setAttribute("type","text/css"),b.setAttribute("data-gs-style-id",a),b.styleSheet?b.styleSheet.cssText="":b.appendChild(document.createTextNode("")),document.getElementsByTagName("head")[0].appendChild(b),b.sheet},removeStylesheet:function(b){a("STYLE[data-gs-style-id="+b+"]").remove()},insertCSSRule:function(a,b,c,d){"function"==typeof a.insertRule?a.insertRule(b+"{"+c+"}",d):"function"==typeof a.addRule&&a.addRule(b,c,d)},toBool:function(a){return"boolean"==typeof a?a:"string"==typeof a?(a=a.toLowerCase(),!(""===a||"no"==a||"false"==a||"0"==a)):Boolean(a)},_collisionNodeCheck:function(a){return a!=this.node&&f.isIntercepted(a,this.nn)},_didCollide:function(a){return f.isIntercepted({x:this.n.x,y:this.newY,width:this.n.width,height:this.n.height},a)},_isAddNodeIntercepted:function(a){return f.isIntercepted({x:this.x,y:this.y,width:this.node.width,height:this.node.height},a)},parseHeight:function(a){var c=a,d="px";if(c&&b.isString(c)){var e=c.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw)?$/);if(!e)throw new Error("Invalid height");d=e[2]||"px",c=parseFloat(e[1])}return{height:c,unit:d}}}; +!function(a){if("function"==typeof define&&define.amd)define(["jquery","lodash","jquery-ui/core","jquery-ui/widget","jquery-ui/mouse","jquery-ui/draggable","jquery-ui/resizable"],a);else if("undefined"!=typeof exports){try{jQuery=require("jquery")}catch(b){}try{_=require("lodash")}catch(b){}a(jQuery,_)}else a(jQuery,_)}(function(a,b){var c=window,d=function(a,b,c){var d=function(){return console.warn("gridstack.js: Function `"+b+"` is deprecated as of v0.2.5 and has been replaced with `"+c+"`. It will be **completely** removed in v1.0."),a.apply(this,arguments)};return d.prototype=a.prototype,d},e=function(a,b){console.warn("gridstack.js: Option `"+a+"` is deprecated as of v0.2.5 and has been replaced with `"+b+"`. It will be **completely** removed in v1.0.")},f={isIntercepted:function(a,b){return!(a.x+a.width<=b.x||b.x+b.width<=a.x||a.y+a.height<=b.y||b.y+b.height<=a.y)},sort:function(a,c,d){return d=d||b.chain(a).map(function(a){return a.x+a.width}).max().value(),c=c!=-1?1:-1,b.sortBy(a,function(a){return c*(a.x+a.y*d)})},createStylesheet:function(a){var b=document.createElement("style");return b.setAttribute("type","text/css"),b.setAttribute("data-gs-style-id",a),b.styleSheet?b.styleSheet.cssText="":b.appendChild(document.createTextNode("")),document.getElementsByTagName("head")[0].appendChild(b),b.sheet},removeStylesheet:function(b){a("STYLE[data-gs-style-id="+b+"]").remove()},insertCSSRule:function(a,b,c,d){"function"==typeof a.insertRule?a.insertRule(b+"{"+c+"}",d):"function"==typeof a.addRule&&a.addRule(b,c,d)},toBool:function(a){return"boolean"==typeof a?a:"string"==typeof a?(a=a.toLowerCase(),!(""===a||"no"==a||"false"==a||"0"==a)):Boolean(a)},_collisionNodeCheck:function(a){return a!=this.node&&f.isIntercepted(a,this.nn)},_didCollide:function(a){return f.isIntercepted({x:this.n.x,y:this.newY,width:this.n.width,height:this.n.height},a)},_isAddNodeIntercepted:function(a){return f.isIntercepted({x:this.x,y:this.y,width:this.node.width,height:this.node.height},a)},parseHeight:function(a){var c=a,d="px";if(c&&b.isString(c)){var e=c.match(/^(-[0-9]+\.[0-9]+|[0-9]*\.[0-9]+|-[0-9]+|[0-9]+)(px|em|rem|vh|vw)?$/);if(!e)throw new Error("Invalid height");d=e[2]||"px",c=parseFloat(e[1])}return{height:c,unit:d}}}; // jscs:disable requireCamelCaseOrUpperCaseIdentifiers f.is_intercepted=d(f.isIntercepted,"is_intercepted","isIntercepted"),f.create_stylesheet=d(f.createStylesheet,"create_stylesheet","createStylesheet"),f.remove_stylesheet=d(f.removeStylesheet,"remove_stylesheet","removeStylesheet"),f.insert_css_rule=d(f.insertCSSRule,"insert_css_rule","insertCSSRule"); // jscs:enable requireCamelCaseOrUpperCaseIdentifiers var g=0,h=function(a,b,c,d,e){this.width=a,this["float"]=c||!1,this.height=d||0,this.nodes=e||[],this.onchange=b||function(){},this._updateCounter=0,this._float=this["float"],this._addedNodes=[],this._removedNodes=[]};h.prototype.batchUpdate=function(){this._updateCounter=1,this["float"]=!0},h.prototype.commit=function(){0!==this._updateCounter&&(this._updateCounter=0,this["float"]=this._float,this._packNodes(),this._notify())}, // For Meteor support: https://github.com/troolee/gridstack.js/pull/272 -h.prototype.getNodeDataByDOMEl=function(a){return b.find(this.nodes,function(b){return a.get(0)===b.el.get(0)})},h.prototype._fixCollisions=function(a){this._sortNodes(-1);var c=a,d=Boolean(b.find(this.nodes,function(a){return a.locked}));for(this["float"]||d||(c={x:0,y:a.y,width:this.width,height:a.height});;){var e=b.find(this.nodes,b.bind(f._collisionNodeCheck,{node:a,nn:c}));if("undefined"==typeof e)return;this.moveNode(e,e.x,a.y+a.height,e.width,e.height,!0)}},h.prototype.isAreaEmpty=function(a,c,d,e){var g={x:a||0,y:c||0,width:d||1,height:e||1},h=b.find(this.nodes,b.bind(function(a){return f.isIntercepted(a,g)},this));return null===h||"undefined"==typeof h},h.prototype._sortNodes=function(a){this.nodes=f.sort(this.nodes,a,this.width)},h.prototype._packNodes=function(){this._sortNodes(),this["float"]?b.each(this.nodes,b.bind(function(a,c){if(!a._updating&&"undefined"!=typeof a._origY&&a.y!=a._origY)for(var d=a.y;d>=a._origY;){var e=b.chain(this.nodes).find(b.bind(f._didCollide,{n:a,newY:d})).value();e||(a._dirty=!0,a.y=d),--d}},this)):b.each(this.nodes,b.bind(function(a,c){if(!a.locked)for(;a.y>0;){var d=a.y-1,e=0===c;if(c>0){var g=b.chain(this.nodes).take(c).find(b.bind(f._didCollide,{n:a,newY:d})).value();e="undefined"==typeof g}if(!e)break;a._dirty=a.y!=d,a.y=d}},this))},h.prototype._prepareNode=function(a,c){return a=b.defaults(a||{},{width:1,height:1,x:0,y:0}),a.x=parseInt(""+a.x),a.y=parseInt(""+a.y),a.width=parseInt(""+a.width),a.height=parseInt(""+a.height),a.autoPosition=a.autoPosition||!1,a.noResize=a.noResize||!1,a.noMove=a.noMove||!1,a.width>this.width?a.width=this.width:a.width<1&&(a.width=1),a.height<1&&(a.height=1),a.x<0&&(a.x=0),a.x+a.width>this.width&&(c?a.width=this.width-a.x:a.x=this.width-a.width),a.y<0&&(a.y=0),a},h.prototype._notify=function(){if(!this._updateCounter){var a=Array.prototype.slice.call(arguments,0);a=a.concat(this.getDirtyNodes()),this.onchange(a)}},h.prototype.cleanNodes=function(){this._updateCounter||b.each(this.nodes,function(a){a._dirty=!1})},h.prototype.getDirtyNodes=function(){return b.filter(this.nodes,function(a){return a._dirty})},h.prototype.addNode=function(a,c){if(a=this._prepareNode(a),"undefined"!=typeof a.maxWidth&&(a.width=Math.min(a.width,a.maxWidth)),"undefined"!=typeof a.maxHeight&&(a.height=Math.min(a.height,a.maxHeight)),"undefined"!=typeof a.minWidth&&(a.width=Math.max(a.width,a.minWidth)),"undefined"!=typeof a.minHeight&&(a.height=Math.max(a.height,a.minHeight)),a._id=++g,a._dirty=!0,a.autoPosition){this._sortNodes();for(var d=0;;++d){var e=d%this.width,h=Math.floor(d/this.width);if(!(e+a.width>this.width||b.find(this.nodes,b.bind(f._isAddNodeIntercepted,{x:e,y:h,node:a})))){a.x=e,a.y=h;break}}}return this.nodes.push(a),"undefined"!=typeof c&&c&&this._addedNodes.push(b.clone(a)),this._fixCollisions(a),this._packNodes(),this._notify(),a},h.prototype.removeNode=function(a,c){c="undefined"==typeof c?!0:c,this._removedNodes.push(b.clone(a)),a._id=null,this.nodes=b.without(this.nodes,a),this._packNodes(),c&&this._notify(a)},h.prototype.canMoveNode=function(c,d,e,f,g){var i=Boolean(b.find(this.nodes,function(a){return a.locked}));if(!this.height&&!i)return!0;var j,k=new h(this.width,null,this["float"],0,b.map(this.nodes,function(b){return b==c?j=a.extend({},b):a.extend({},b)}));if("undefined"==typeof j)return!0;k.moveNode(j,d,e,f,g);var l=!0;return i&&(l&=!Boolean(b.find(k.nodes,function(a){return a!=j&&Boolean(a.locked)&&Boolean(a._dirty)}))),this.height&&(l&=k.getGridHeight()<=this.height),l},h.prototype.canBePlacedWithRespectToHeight=function(c){if(!this.height)return!0;var d=new h(this.width,null,this["float"],0,b.map(this.nodes,function(b){return a.extend({},b)}));return d.addNode(c),d.getGridHeight()<=this.height},h.prototype.moveNode=function(a,b,c,d,e,f){if("number"!=typeof b&&(b=a.x),"number"!=typeof c&&(c=a.y),"number"!=typeof d&&(d=a.width),"number"!=typeof e&&(e=a.height),"undefined"!=typeof a.maxWidth&&(d=Math.min(d,a.maxWidth)),"undefined"!=typeof a.maxHeight&&(e=Math.min(e,a.maxHeight)),"undefined"!=typeof a.minWidth&&(d=Math.max(d,a.minWidth)),"undefined"!=typeof a.minHeight&&(e=Math.max(e,a.minHeight)),a.x==b&&a.y==c&&a.width==d&&a.height==e)return a;var g=a.width!=d;return a._dirty=!0,a.x=b,a.y=c,a.width=d,a.height=e,a=this._prepareNode(a,g),this._fixCollisions(a),f||(this._packNodes(),this._notify()),a},h.prototype.getGridHeight=function(){return b.reduce(this.nodes,function(a,b){return Math.max(a,b.y+b.height)},0)},h.prototype.beginUpdate=function(a){b.each(this.nodes,function(a){a._origY=a.y}),a._updating=!0},h.prototype.endUpdate=function(){b.each(this.nodes,function(a){a._origY=a.y});var a=b.find(this.nodes,function(a){return a._updating});a&&(a._updating=!1)};var i=function(c,d){var f,g,i=this;d=d||{},this.container=a(c),"undefined"!=typeof d.handle_class&&(d.handleClass=d.handle_class,e("handle_class","handleClass")),"undefined"!=typeof d.item_class&&(d.itemClass=d.item_class,e("item_class","itemClass")),"undefined"!=typeof d.placeholder_class&&(d.placeholderClass=d.placeholder_class,e("placeholder_class","placeholderClass")),"undefined"!=typeof d.placeholder_text&&(d.placeholderText=d.placeholder_text,e("placeholder_text","placeholderText")),"undefined"!=typeof d.cell_height&&(d.cellHeight=d.cell_height,e("cell_height","cellHeight")),"undefined"!=typeof d.vertical_margin&&(d.verticalMargin=d.vertical_margin,e("vertical_margin","verticalMargin")),"undefined"!=typeof d.min_width&&(d.minWidth=d.min_width,e("min_width","minWidth")),"undefined"!=typeof d.static_grid&&(d.staticGrid=d.static_grid,e("static_grid","staticGrid")),"undefined"!=typeof d.is_nested&&(d.isNested=d.is_nested,e("is_nested","isNested")),"undefined"!=typeof d.always_show_resize_handle&&(d.alwaysShowResizeHandle=d.always_show_resize_handle,e("always_show_resize_handle","alwaysShowResizeHandle")),d.itemClass=d.itemClass||"grid-stack-item";var j=this.container.closest("."+d.itemClass).size()>0;if(this.opts=b.defaults(d||{},{width:parseInt(this.container.attr("data-gs-width"))||12,height:parseInt(this.container.attr("data-gs-height"))||0,itemClass:"grid-stack-item",placeholderClass:"grid-stack-placeholder",placeholderText:"",handle:".grid-stack-item-content",handleClass:null,cellHeight:60,verticalMargin:20,auto:!0,minWidth:768,"float":!1,staticGrid:!1,_class:"grid-stack-instance-"+(1e4*Math.random()).toFixed(0),animate:Boolean(this.container.attr("data-gs-animate"))||!1,alwaysShowResizeHandle:d.alwaysShowResizeHandle||!1,resizable:b.defaults(d.resizable||{},{autoHide:!d.alwaysShowResizeHandle,handles:"se"}),draggable:b.defaults(d.draggable||{},{handle:(d.handleClass?"."+d.handleClass:d.handle?d.handle:"")||".grid-stack-item-content",scroll:!1,appendTo:"body"}),disableDrag:d.disableDrag||!1,disableResize:d.disableResize||!1,rtl:"auto",removable:!1,removeTimeout:2e3,verticalMarginUnit:"px",cellHeightUnit:"px"}),"auto"===this.opts.rtl&&(this.opts.rtl="rtl"===this.container.css("direction")),this.opts.rtl&&this.container.addClass("grid-stack-rtl"),this.opts.isNested=j,g="auto"===this.opts.cellHeight,g?i.cellHeight(i.cellWidth(),!0):this.cellHeight(this.opts.cellHeight,!0),this.verticalMargin(this.opts.verticalMargin,!0),this.container.addClass(this.opts._class),this._setStaticClass(),j&&this.container.addClass("grid-stack-nested"),this._initStyles(),this.grid=new h(this.opts.width,function(a){var c=0;b.each(a,function(a){null===a._id?a.el&&a.el.remove():(a.el.attr("data-gs-x",a.x).attr("data-gs-y",a.y).attr("data-gs-width",a.width).attr("data-gs-height",a.height),c=Math.max(c,a.y+a.height))}),i._updateStyles(c+10)},this.opts["float"],this.opts.height),this.opts.auto){var k=[],l=this;this.container.children("."+this.opts.itemClass+":not(."+this.opts.placeholderClass+")").each(function(b,c){c=a(c),k.push({el:c,i:parseInt(c.attr("data-gs-x"))+parseInt(c.attr("data-gs-y"))*l.opts.width})}),b.chain(k).sortBy(function(a){return a.i}).each(function(a){i._prepareElement(a.el)}).value()}if(this.setAnimation(this.opts.animate),this.placeholder=a('
'+this.opts.placeholderText+"
").hide(),this._updateContainerHeight(),this._updateHeightsOnResize=b.throttle(function(){i.cellHeight(i.cellWidth(),!1)},100),this.onResizeHandler=function(){if(g&&i._updateHeightsOnResize(),i._isOneColumnMode()){if(f)return;f=!0,i.grid._sortNodes(),b.each(i.grid.nodes,function(a){i.container.append(a.el),i.opts.staticGrid||((a.noMove||i.opts.disableDrag)&&a.el.draggable("disable"),(a.noResize||i.opts.disableResize)&&a.el.resizable("disable"),a.el.trigger("resize"))})}else{if(!f)return;if(f=!1,i.opts.staticGrid)return;b.each(i.grid.nodes,function(a){a.noMove||i.opts.disableDrag||a.el.draggable("enable"),a.noResize||i.opts.disableResize||a.el.resizable("enable"),a.el.trigger("resize")})}},a(window).resize(this.onResizeHandler),this.onResizeHandler(),!i.opts.staticGrid&&"string"==typeof i.opts.removable){var m=a(i.opts.removable);m.data("droppable")||m.droppable({accept:"."+i.opts.itemClass}),m.on("dropover",function(b,c){var d=a(c.draggable),e=d.data("_gridstack_node");e._grid===i&&i._setupRemovingTimeout(d)}).on("dropout",function(b,c){var d=a(c.draggable),e=d.data("_gridstack_node");e._grid===i&&i._clearRemovingTimeout(d)})}if(!i.opts.staticGrid&&i.opts.acceptWidgets){var n=null,o=function(a,b){var c=n,d=c.data("_gridstack_node"),e=i.getCellFromPixel(b.offset,!0),f=Math.max(0,e.x),g=Math.max(0,e.y);if(d._added){if(!i.grid.canMoveNode(d,f,g))return;i.grid.moveNode(d,f,g),i._updateContainerHeight()}else d._added=!0,d.el=c,d.x=f,d.y=g,i.grid.cleanNodes(),i.grid.beginUpdate(d),i.grid.addNode(d),i.container.append(i.placeholder),i.placeholder.attr("data-gs-x",d.x).attr("data-gs-y",d.y).attr("data-gs-width",d.width).attr("data-gs-height",d.height).show(),d.el=i.placeholder,d._beforeDragX=d.x,d._beforeDragY=d.y,i._updateContainerHeight()};a(i.container).droppable({accept:function(b){b=a(b);var c=b.data("_gridstack_node");return c&&c._grid===i?!1:b.is(i.opts.acceptWidgets===!0?".grid-stack-item":i.opts.acceptWidgets)},over:function(b,c){var d=(i.container.offset(),a(c.draggable)),e=i.cellWidth(),f=i.cellHeight(),g=d.data("_gridstack_node"),h=g?g.width:Math.ceil(d.outerWidth()/e),j=g?g.height:Math.ceil(d.outerHeight()/f);n=d;var k=i.grid._prepareNode({width:h,height:j,_added:!1,_temporary:!0});d.data("_gridstack_node",k),d.data("_gridstack_node_orig",g),d.on("drag",o)},out:function(b,c){var d=a(c.draggable);d.unbind("drag",o);var e=d.data("_gridstack_node");e.el=null,i.grid.removeNode(e),i.placeholder.detach(),i._updateContainerHeight(),d.data("_gridstack_node",d.data("_gridstack_node_orig"))},drop:function(b,c){i.placeholder.detach();var d=a(c.draggable).data("_gridstack_node");d._grid=i;var e=a(c.draggable).clone(!1);e.data("_gridstack_node",d),a(c.draggable).remove(),d.el=e,i.placeholder.hide(),e.attr("data-gs-x",d.x).attr("data-gs-y",d.y).attr("data-gs-width",d.width).attr("data-gs-height",d.height).addClass(i.opts.itemClass).removeAttr("style").enableSelection().removeData("draggable").removeClass("ui-draggable ui-draggable-dragging ui-draggable-disabled").unbind("drag",o),i.container.append(e),i._prepareElementsByNode(e,d),i._updateContainerHeight(),i._triggerChangeEvent(),i.grid.endUpdate()}})}}; +h.prototype.getNodeDataByDOMEl=function(a){return b.find(this.nodes,function(b){return a.get(0)===b.el.get(0)})},h.prototype._fixCollisions=function(a){this._sortNodes(-1);var c=a,d=Boolean(b.find(this.nodes,function(a){return a.locked}));for(this["float"]||d||(c={x:0,y:a.y,width:this.width,height:a.height});;){var e=b.find(this.nodes,b.bind(f._collisionNodeCheck,{node:a,nn:c}));if("undefined"==typeof e)return;this.moveNode(e,e.x,a.y+a.height,e.width,e.height,!0)}},h.prototype.isAreaEmpty=function(a,c,d,e){var g={x:a||0,y:c||0,width:d||1,height:e||1},h=b.find(this.nodes,b.bind(function(a){return f.isIntercepted(a,g)},this));return null===h||"undefined"==typeof h},h.prototype._sortNodes=function(a){this.nodes=f.sort(this.nodes,a,this.width)},h.prototype._packNodes=function(){this._sortNodes(),this["float"]?b.each(this.nodes,b.bind(function(a,c){if(!a._updating&&"undefined"!=typeof a._origY&&a.y!=a._origY)for(var d=a.y;d>=a._origY;){var e=b.chain(this.nodes).find(b.bind(f._didCollide,{n:a,newY:d})).value();e||(a._dirty=!0,a.y=d),--d}},this)):b.each(this.nodes,b.bind(function(a,c){if(!a.locked)for(;a.y>0;){var d=a.y-1,e=0===c;if(c>0){var g=b.chain(this.nodes).take(c).find(b.bind(f._didCollide,{n:a,newY:d})).value();e="undefined"==typeof g}if(!e)break;a._dirty=a.y!=d,a.y=d}},this))},h.prototype._prepareNode=function(a,c){return a=b.defaults(a||{},{width:1,height:1,x:0,y:0}),a.x=parseInt(""+a.x),a.y=parseInt(""+a.y),a.width=parseInt(""+a.width),a.height=parseInt(""+a.height),a.autoPosition=a.autoPosition||!1,a.noResize=a.noResize||!1,a.noMove=a.noMove||!1,a.width>this.width?a.width=this.width:a.width<1&&(a.width=1),a.height<1&&(a.height=1),a.x<0&&(a.x=0),a.x+a.width>this.width&&(c?a.width=this.width-a.x:a.x=this.width-a.width),a.y<0&&(a.y=0),a},h.prototype._notify=function(){if(!this._updateCounter){var a=Array.prototype.slice.call(arguments,0);a=a.concat(this.getDirtyNodes()),this.onchange(a)}},h.prototype.cleanNodes=function(){this._updateCounter||b.each(this.nodes,function(a){a._dirty=!1})},h.prototype.getDirtyNodes=function(){return b.filter(this.nodes,function(a){return a._dirty})},h.prototype.addNode=function(a,c){if(a=this._prepareNode(a),"undefined"!=typeof a.maxWidth&&(a.width=Math.min(a.width,a.maxWidth)),"undefined"!=typeof a.maxHeight&&(a.height=Math.min(a.height,a.maxHeight)),"undefined"!=typeof a.minWidth&&(a.width=Math.max(a.width,a.minWidth)),"undefined"!=typeof a.minHeight&&(a.height=Math.max(a.height,a.minHeight)),a._id=++g,a._dirty=!0,a.autoPosition){this._sortNodes();for(var d=0;;++d){var e=d%this.width,h=Math.floor(d/this.width);if(!(e+a.width>this.width||b.find(this.nodes,b.bind(f._isAddNodeIntercepted,{x:e,y:h,node:a})))){a.x=e,a.y=h;break}}}return this.nodes.push(a),"undefined"!=typeof c&&c&&this._addedNodes.push(b.clone(a)),this._fixCollisions(a),this._packNodes(),this._notify(),a},h.prototype.removeNode=function(a,c){c="undefined"==typeof c||c,this._removedNodes.push(b.clone(a)),a._id=null,this.nodes=b.without(this.nodes,a),this._packNodes(),c&&this._notify(a)},h.prototype.canMoveNode=function(c,d,e,f,g){var i=Boolean(b.find(this.nodes,function(a){return a.locked}));if(!this.height&&!i)return!0;var j,k=new h(this.width,null,this["float"],0,b.map(this.nodes,function(b){return b==c?j=a.extend({},b):a.extend({},b)}));if("undefined"==typeof j)return!0;k.moveNode(j,d,e,f,g);var l=!0;return i&&(l&=!Boolean(b.find(k.nodes,function(a){return a!=j&&Boolean(a.locked)&&Boolean(a._dirty)}))),this.height&&(l&=k.getGridHeight()<=this.height),l},h.prototype.canBePlacedWithRespectToHeight=function(c){if(!this.height)return!0;var d=new h(this.width,null,this["float"],0,b.map(this.nodes,function(b){return a.extend({},b)}));return d.addNode(c),d.getGridHeight()<=this.height},h.prototype.moveNode=function(a,b,c,d,e,f){if("number"!=typeof b&&(b=a.x),"number"!=typeof c&&(c=a.y),"number"!=typeof d&&(d=a.width),"number"!=typeof e&&(e=a.height),"undefined"!=typeof a.maxWidth&&(d=Math.min(d,a.maxWidth)),"undefined"!=typeof a.maxHeight&&(e=Math.min(e,a.maxHeight)),"undefined"!=typeof a.minWidth&&(d=Math.max(d,a.minWidth)),"undefined"!=typeof a.minHeight&&(e=Math.max(e,a.minHeight)),a.x==b&&a.y==c&&a.width==d&&a.height==e)return a;var g=a.width!=d;return a._dirty=!0,a.x=b,a.y=c,a.width=d,a.height=e,a=this._prepareNode(a,g),this._fixCollisions(a),f||(this._packNodes(),this._notify()),a},h.prototype.getGridHeight=function(){return b.reduce(this.nodes,function(a,b){return Math.max(a,b.y+b.height)},0)},h.prototype.beginUpdate=function(a){b.each(this.nodes,function(a){a._origY=a.y}),a._updating=!0},h.prototype.endUpdate=function(){b.each(this.nodes,function(a){a._origY=a.y});var a=b.find(this.nodes,function(a){return a._updating});a&&(a._updating=!1)};var i=function(c,d){var f,g,i=this;d=d||{},this.container=a(c), // jscs:disable requireCamelCaseOrUpperCaseIdentifiers +"undefined"!=typeof d.handle_class&&(d.handleClass=d.handle_class,e("handle_class","handleClass")),"undefined"!=typeof d.item_class&&(d.itemClass=d.item_class,e("item_class","itemClass")),"undefined"!=typeof d.placeholder_class&&(d.placeholderClass=d.placeholder_class,e("placeholder_class","placeholderClass")),"undefined"!=typeof d.placeholder_text&&(d.placeholderText=d.placeholder_text,e("placeholder_text","placeholderText")),"undefined"!=typeof d.cell_height&&(d.cellHeight=d.cell_height,e("cell_height","cellHeight")),"undefined"!=typeof d.vertical_margin&&(d.verticalMargin=d.vertical_margin,e("vertical_margin","verticalMargin")),"undefined"!=typeof d.min_width&&(d.minWidth=d.min_width,e("min_width","minWidth")),"undefined"!=typeof d.static_grid&&(d.staticGrid=d.static_grid,e("static_grid","staticGrid")),"undefined"!=typeof d.is_nested&&(d.isNested=d.is_nested,e("is_nested","isNested")),"undefined"!=typeof d.always_show_resize_handle&&(d.alwaysShowResizeHandle=d.always_show_resize_handle,e("always_show_resize_handle","alwaysShowResizeHandle")), // jscs:enable requireCamelCaseOrUpperCaseIdentifiers -return i.prototype._triggerChangeEvent=function(a){var b=this.grid.getDirtyNodes(),c=!1,d=[];b&&b.length&&(d.push(b),c=!0),(c||a===!0)&&this.container.trigger("change",d)},i.prototype._triggerAddEvent=function(){this.grid._addedNodes&&this.grid._addedNodes.length>0&&(this.container.trigger("added",[b.map(this.grid._addedNodes,b.clone)]),this.grid._addedNodes=[])},i.prototype._triggerRemoveEvent=function(){this.grid._removedNodes&&this.grid._removedNodes.length>0&&(this.container.trigger("removed",[b.map(this.grid._removedNodes,b.clone)]),this.grid._removedNodes=[])},i.prototype._initStyles=function(){this._stylesId&&f.removeStylesheet(this._stylesId),this._stylesId="gridstack-style-"+(1e5*Math.random()).toFixed(),this._styles=f.createStylesheet(this._stylesId),null!==this._styles&&(this._styles._max=0)},i.prototype._updateStyles=function(a){if(null!==this._styles&&"undefined"!=typeof this._styles){var b,c="."+this.opts._class+" ."+this.opts.itemClass,d=this;if("undefined"==typeof a&&(a=this._styles._max,this._initStyles(),this._updateContainerHeight()),this.opts.cellHeight&&!(0!==this._styles._max&&a<=this._styles._max)&&(b=this.opts.verticalMargin&&this.opts.cellHeightUnit!==this.opts.verticalMarginUnit?function(a,b){return a&&b?"calc("+(d.opts.cellHeight*a+d.opts.cellHeightUnit)+" + "+(d.opts.verticalMargin*b+d.opts.verticalMarginUnit)+")":d.opts.cellHeight*a+d.opts.verticalMargin*b+d.opts.cellHeightUnit}:function(a,b){return d.opts.cellHeight*a+d.opts.verticalMargin*b+d.opts.cellHeightUnit},0===this._styles._max&&f.insertCSSRule(this._styles,c,"min-height: "+b(1,0)+";",0),a>this._styles._max)){for(var e=this._styles._max;a>e;++e)f.insertCSSRule(this._styles,c+'[data-gs-height="'+(e+1)+'"]',"height: "+b(e+1,e)+";",e),f.insertCSSRule(this._styles,c+'[data-gs-min-height="'+(e+1)+'"]',"min-height: "+b(e+1,e)+";",e),f.insertCSSRule(this._styles,c+'[data-gs-max-height="'+(e+1)+'"]',"max-height: "+b(e+1,e)+";",e),f.insertCSSRule(this._styles,c+'[data-gs-y="'+e+'"]',"top: "+b(e,e)+";",e);this._styles._max=a}}},i.prototype._updateContainerHeight=function(){if(!this.grid._updateCounter){var a=this.grid.getGridHeight();this.container.attr("data-gs-current-height",a),this.opts.cellHeight&&(this.opts.verticalMargin?this.opts.cellHeightUnit===this.opts.verticalMarginUnit?this.container.css("height",a*(this.opts.cellHeight+this.opts.verticalMargin)-this.opts.verticalMargin+this.opts.cellHeightUnit):this.container.css("height","calc("+(a*this.opts.cellHeight+this.opts.cellHeightUnit)+" + "+(a*(this.opts.verticalMargin-1)+this.opts.verticalMarginUnit)+")"):this.container.css("height",a*this.opts.cellHeight+this.opts.cellHeightUnit))}},i.prototype._isOneColumnMode=function(){return(window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth)<=this.opts.minWidth},i.prototype._setupRemovingTimeout=function(b){var c=this,d=a(b).data("_gridstack_node");!d._removeTimeout&&c.opts.removable&&(d._removeTimeout=setTimeout(function(){b.addClass("grid-stack-item-removing"),d._isAboutToRemove=!0},c.opts.removeTimeout))},i.prototype._clearRemovingTimeout=function(b){var c=a(b).data("_gridstack_node");c._removeTimeout&&(clearTimeout(c._removeTimeout),c._removeTimeout=null,b.removeClass("grid-stack-item-removing"),c._isAboutToRemove=!1)},i.prototype._prepareElementsByNode=function(c,d){var e,f,g=this,h=function(a,b){var h,i,j=Math.round(b.position.left/e),k=Math.floor((b.position.top+f/2)/f);if("drag"!=a.type&&(h=Math.round(b.size.width/e),i=Math.round(b.size.height/f)),"drag"==a.type)0>j||j>=g.grid.width||0>k?(g.opts.removable===!0&&g._setupRemovingTimeout(c),j=d._beforeDragX,k=d._beforeDragY,g.placeholder.detach(),g.placeholder.hide(),g.grid.removeNode(d),g._updateContainerHeight(),d._temporaryRemoved=!0):(g._clearRemovingTimeout(c),d._temporaryRemoved&&(g.grid.addNode(d),g.placeholder.attr("data-gs-x",j).attr("data-gs-y",k).attr("data-gs-width",h).attr("data-gs-height",i).show(),g.container.append(g.placeholder),d.el=g.placeholder,d._temporaryRemoved=!1));else if("resize"==a.type&&0>j)return;g.grid.canMoveNode(d,j,k,h,i)&&(g.grid.moveNode(d,j,k,h,i),g._updateContainerHeight())},i=function(b,h){g.container.append(g.placeholder);var i=a(this);g.grid.cleanNodes(),g.grid.beginUpdate(d),e=Math.ceil(i.outerWidth()/i.attr("data-gs-width"));var j=Math.ceil(i.outerHeight()/i.attr("data-gs-height"));f=g.container.height()/parseInt(g.container.attr("data-gs-current-height")),g.placeholder.attr("data-gs-x",i.attr("data-gs-x")).attr("data-gs-y",i.attr("data-gs-y")).attr("data-gs-width",i.attr("data-gs-width")).attr("data-gs-height",i.attr("data-gs-height")).show(),d.el=g.placeholder,d._beforeDragX=d.x,d._beforeDragY=d.y,c.resizable("option","minWidth",e*(d.minWidth||1)),c.resizable("option","minHeight",j*(d.minHeight||1)),"resizestart"==b.type&&i.find(".grid-stack-item").trigger("resizestart")},j=function(b,e){var f=a(this);if(f.data("_gridstack_node")){var h=!1;g.placeholder.detach(),d.el=f,g.placeholder.hide(),d._isAboutToRemove?(h=!0,c.removeData("_gridstack_node"),c.remove()):(g._clearRemovingTimeout(c),d._temporaryRemoved?(f.attr("data-gs-x",d._beforeDragX).attr("data-gs-y",d._beforeDragY).attr("data-gs-width",d.width).attr("data-gs-height",d.height).removeAttr("style"),d.x=d._beforeDragX,d.y=d._beforeDragY,g.grid.addNode(d)):f.attr("data-gs-x",d.x).attr("data-gs-y",d.y).attr("data-gs-width",d.width).attr("data-gs-height",d.height).removeAttr("style")),g._updateContainerHeight(),g._triggerChangeEvent(h),g.grid.endUpdate();var i=f.find(".grid-stack");i.length&&"resizestop"==b.type&&(i.each(function(b,c){a(c).data("gridstack").onResizeHandler()}),f.find(".grid-stack-item").trigger("resizestop"))}};c.draggable(b.extend(this.opts.draggable,{containment:this.opts.isNested?this.container.parent():null,start:i,stop:j,drag:h})).resizable(b.extend(this.opts.resizable,{start:i,stop:j,resize:h})),(d.noMove||this._isOneColumnMode()||this.opts.disableDrag)&&c.draggable("disable"),(d.noResize||this._isOneColumnMode()||this.opts.disableResize)&&c.resizable("disable"),c.attr("data-gs-locked",d.locked?"yes":null)},i.prototype._prepareElement=function(b,c){c="undefined"!=typeof c?c:!1;var d=this;b=a(b),b.addClass(this.opts.itemClass);var e=d.grid.addNode({x:b.attr("data-gs-x"),y:b.attr("data-gs-y"),width:b.attr("data-gs-width"),height:b.attr("data-gs-height"),maxWidth:b.attr("data-gs-max-width"),minWidth:b.attr("data-gs-min-width"),maxHeight:b.attr("data-gs-max-height"),minHeight:b.attr("data-gs-min-height"),autoPosition:f.toBool(b.attr("data-gs-auto-position")),noResize:f.toBool(b.attr("data-gs-no-resize")),noMove:f.toBool(b.attr("data-gs-no-move")),locked:f.toBool(b.attr("data-gs-locked")),el:b,id:b.attr("data-gs-id"),_grid:d},c);b.data("_gridstack_node",e),this.opts.staticGrid||this._prepareElementsByNode(b,e)},i.prototype.setAnimation=function(a){a?this.container.addClass("grid-stack-animate"):this.container.removeClass("grid-stack-animate")},i.prototype.addWidget=function(b,c,d,e,f,g,h,i,j,k,l){return b=a(b),"undefined"!=typeof c&&b.attr("data-gs-x",c),"undefined"!=typeof d&&b.attr("data-gs-y",d),"undefined"!=typeof e&&b.attr("data-gs-width",e),"undefined"!=typeof f&&b.attr("data-gs-height",f),"undefined"!=typeof g&&b.attr("data-gs-auto-position",g?"yes":null),"undefined"!=typeof h&&b.attr("data-gs-min-width",h),"undefined"!=typeof i&&b.attr("data-gs-max-width",i),"undefined"!=typeof j&&b.attr("data-gs-min-height",j),"undefined"!=typeof k&&b.attr("data-gs-max-height",k),"undefined"!=typeof l&&b.attr("data-gs-id",l),this.container.append(b),this._prepareElement(b,!0),this._triggerAddEvent(),this._updateContainerHeight(),this._triggerChangeEvent(!0),b},i.prototype.makeWidget=function(b){return b=a(b),this._prepareElement(b,!0),this._triggerAddEvent(),this._updateContainerHeight(),this._triggerChangeEvent(!0),b},i.prototype.willItFit=function(a,b,c,d,e){var f={x:a,y:b,width:c,height:d,autoPosition:e};return this.grid.canBePlacedWithRespectToHeight(f)},i.prototype.removeWidget=function(b,c){c="undefined"==typeof c?!0:c,b=a(b);var d=b.data("_gridstack_node"); +d.itemClass=d.itemClass||"grid-stack-item";var j=this.container.closest("."+d.itemClass).size()>0;if(this.opts=b.defaults(d||{},{width:parseInt(this.container.attr("data-gs-width"))||12,height:parseInt(this.container.attr("data-gs-height"))||0,itemClass:"grid-stack-item",placeholderClass:"grid-stack-placeholder",placeholderText:"",handle:".grid-stack-item-content",handleClass:null,cellHeight:60,verticalMargin:20,auto:!0,minWidth:768,"float":!1,staticGrid:!1,_class:"grid-stack-instance-"+(1e4*Math.random()).toFixed(0),animate:Boolean(this.container.attr("data-gs-animate"))||!1,alwaysShowResizeHandle:d.alwaysShowResizeHandle||!1,resizable:b.defaults(d.resizable||{},{autoHide:!d.alwaysShowResizeHandle,handles:"se"}),draggable:b.defaults(d.draggable||{},{handle:(d.handleClass?"."+d.handleClass:d.handle?d.handle:"")||".grid-stack-item-content",scroll:!1,appendTo:"body"}),disableDrag:d.disableDrag||!1,disableResize:d.disableResize||!1,rtl:"auto",removable:!1,removeTimeout:2e3,verticalMarginUnit:"px",cellHeightUnit:"px",staticHeight:d.staticHeight||!1}),"auto"===this.opts.rtl&&(this.opts.rtl="rtl"===this.container.css("direction")),this.opts.rtl&&this.container.addClass("grid-stack-rtl"),this.opts.isNested=j,g="auto"===this.opts.cellHeight,g?i.cellHeight(i.cellWidth(),!0):this.cellHeight(this.opts.cellHeight,!0),this.verticalMargin(this.opts.verticalMargin,!0),this.container.addClass(this.opts._class),this._setStaticClass(),j&&this.container.addClass("grid-stack-nested"),this._initStyles(),this.grid=new h(this.opts.width,function(a){var c=0;b.each(a,function(a){null===a._id?a.el&&a.el.remove():(a.el.attr("data-gs-x",a.x).attr("data-gs-y",a.y).attr("data-gs-width",a.width).attr("data-gs-height",a.height),c=Math.max(c,a.y+a.height))}),i._updateStyles(c+10)},this.opts["float"],this.opts.height),this.opts.auto){var k=[],l=this;this.container.children("."+this.opts.itemClass+":not(."+this.opts.placeholderClass+")").each(function(b,c){c=a(c),k.push({el:c,i:parseInt(c.attr("data-gs-x"))+parseInt(c.attr("data-gs-y"))*l.opts.width})}),b.chain(k).sortBy(function(a){return a.i}).each(function(a){i._prepareElement(a.el)}).value()}if(this.setAnimation(this.opts.animate),this.placeholder=a('
'+this.opts.placeholderText+"
").hide(),this._updateContainerHeight(),this._updateHeightsOnResize=b.throttle(function(){i.cellHeight(i.cellWidth(),!1)},100),this.onResizeHandler=function(){if(g&&i._updateHeightsOnResize(),i._isOneColumnMode()){if(f)return;f=!0,i.grid._sortNodes(),b.each(i.grid.nodes,function(a){i.container.append(a.el),i.opts.staticGrid||((a.noMove||i.opts.disableDrag)&&a.el.draggable("disable"),(a.noResize||i.opts.disableResize)&&a.el.resizable("disable"),a.el.trigger("resize"))})}else{if(!f)return;if(f=!1,i.opts.staticGrid)return;b.each(i.grid.nodes,function(a){a.noMove||i.opts.disableDrag||a.el.draggable("enable"),a.noResize||i.opts.disableResize||a.el.resizable("enable"),a.el.trigger("resize")})}},a(window).resize(this.onResizeHandler),this.onResizeHandler(),!i.opts.staticGrid&&"string"==typeof i.opts.removable){var m=a(i.opts.removable);m.data("droppable")||m.droppable({accept:"."+i.opts.itemClass}),m.on("dropover",function(b,c){var d=a(c.draggable),e=d.data("_gridstack_node");e._grid===i&&i._setupRemovingTimeout(d)}).on("dropout",function(b,c){var d=a(c.draggable),e=d.data("_gridstack_node");e._grid===i&&i._clearRemovingTimeout(d)})}if(!i.opts.staticGrid&&i.opts.acceptWidgets){var n=null,o=function(a,b){var c=n,d=c.data("_gridstack_node"),e=i.getCellFromPixel(b.offset,!0),f=Math.max(0,e.x),g=Math.max(0,e.y);if(d._added){if(!i.grid.canMoveNode(d,f,g))return;i.grid.moveNode(d,f,g),i._updateContainerHeight()}else d._added=!0,d.el=c,d.x=f,d.y=g,i.grid.cleanNodes(),i.grid.beginUpdate(d),i.grid.addNode(d),i.container.append(i.placeholder),i.placeholder.attr("data-gs-x",d.x).attr("data-gs-y",d.y).attr("data-gs-width",d.width).attr("data-gs-height",d.height).show(),d.el=i.placeholder,d._beforeDragX=d.x,d._beforeDragY=d.y,i._updateContainerHeight()};a(i.container).droppable({accept:function(b){b=a(b);var c=b.data("_gridstack_node");return(!c||c._grid!==i)&&b.is(i.opts.acceptWidgets===!0?".grid-stack-item":i.opts.acceptWidgets)},over:function(b,c){var d=(i.container.offset(),a(c.draggable)),e=i.cellWidth(),f=i.cellHeight(),g=d.data("_gridstack_node"),h=g?g.width:Math.ceil(d.outerWidth()/e),j=g?g.height:Math.ceil(d.outerHeight()/f);n=d;var k=i.grid._prepareNode({width:h,height:j,_added:!1,_temporary:!0});d.data("_gridstack_node",k),d.data("_gridstack_node_orig",g),d.on("drag",o)},out:function(b,c){var d=a(c.draggable);d.unbind("drag",o);var e=d.data("_gridstack_node");e.el=null,i.grid.removeNode(e),i.placeholder.detach(),i._updateContainerHeight(),d.data("_gridstack_node",d.data("_gridstack_node_orig"))},drop:function(b,c){i.placeholder.detach();var d=a(c.draggable).data("_gridstack_node");d._grid=i;var e=a(c.draggable).clone(!1);e.data("_gridstack_node",d),a(c.draggable).remove(),d.el=e,i.placeholder.hide(),e.attr("data-gs-x",d.x).attr("data-gs-y",d.y).attr("data-gs-width",d.width).attr("data-gs-height",d.height).addClass(i.opts.itemClass).removeAttr("style").enableSelection().removeData("draggable").removeClass("ui-draggable ui-draggable-dragging ui-draggable-disabled").unbind("drag",o),i.container.append(e),i._prepareElementsByNode(e,d),i._updateContainerHeight(),i._triggerChangeEvent(),i.grid.endUpdate()}})}}; +// jscs:disable requireCamelCaseOrUpperCaseIdentifiers +// jscs:enable requireCamelCaseOrUpperCaseIdentifiers +return i.prototype._triggerChangeEvent=function(a){var b=this.grid.getDirtyNodes(),c=!1,d=[];b&&b.length&&(d.push(b),c=!0),(c||a===!0)&&this.container.trigger("change",d)},i.prototype._triggerAddEvent=function(){this.grid._addedNodes&&this.grid._addedNodes.length>0&&(this.container.trigger("added",[b.map(this.grid._addedNodes,b.clone)]),this.grid._addedNodes=[])},i.prototype._triggerRemoveEvent=function(){this.grid._removedNodes&&this.grid._removedNodes.length>0&&(this.container.trigger("removed",[b.map(this.grid._removedNodes,b.clone)]),this.grid._removedNodes=[])},i.prototype._initStyles=function(){this._stylesId&&f.removeStylesheet(this._stylesId),this._stylesId="gridstack-style-"+(1e5*Math.random()).toFixed(),this._styles=f.createStylesheet(this._stylesId),null!==this._styles&&(this._styles._max=0)},i.prototype._updateStyles=function(a){if(null!==this._styles&&"undefined"!=typeof this._styles){var b,c="."+this.opts._class+" ."+this.opts.itemClass,d=this;if("undefined"==typeof a&&(a=this._styles._max,this._initStyles(),this._updateContainerHeight()),this.opts.cellHeight&&!(0!==this._styles._max&&a<=this._styles._max)&&(b=this.opts.verticalMargin&&this.opts.cellHeightUnit!==this.opts.verticalMarginUnit?function(a,b){return a&&b?"calc("+(d.opts.cellHeight*a+d.opts.cellHeightUnit)+" + "+(d.opts.verticalMargin*b+d.opts.verticalMarginUnit)+")":d.opts.cellHeight*a+d.opts.verticalMargin*b+d.opts.cellHeightUnit}:function(a,b){return d.opts.cellHeight*a+d.opts.verticalMargin*b+d.opts.cellHeightUnit},0===this._styles._max&&f.insertCSSRule(this._styles,c,"min-height: "+b(1,0)+";",0),a>this._styles._max)){for(var e=this._styles._max;e=g.grid.width||k<0?(g.opts.removable===!0&&g._setupRemovingTimeout(c),j=d._beforeDragX,k=d._beforeDragY,g.placeholder.detach(),g.placeholder.hide(),g.grid.removeNode(d),g._updateContainerHeight(),d._temporaryRemoved=!0):(g._clearRemovingTimeout(c),d._temporaryRemoved&&(g.grid.addNode(d),g.placeholder.attr("data-gs-x",j).attr("data-gs-y",k).attr("data-gs-width",h).attr("data-gs-height",i).show(),g.container.append(g.placeholder),d.el=g.placeholder,d._temporaryRemoved=!1));else if("resize"==a.type&&j<0)return;g.grid.canMoveNode(d,j,k,h,i)&&(g.grid.moveNode(d,j,k,h,i),g._updateContainerHeight())},i=function(b,h){g.container.append(g.placeholder);var i=a(this);g.grid.cleanNodes(),g.grid.beginUpdate(d),e=Math.ceil(i.outerWidth()/i.attr("data-gs-width"));var j=Math.ceil(i.outerHeight()/i.attr("data-gs-height"));f=g.container.height()/parseInt(g.container.attr("data-gs-current-height")),g.placeholder.attr("data-gs-x",i.attr("data-gs-x")).attr("data-gs-y",i.attr("data-gs-y")).attr("data-gs-width",i.attr("data-gs-width")).attr("data-gs-height",i.attr("data-gs-height")).show(),d.el=g.placeholder,d._beforeDragX=d.x,d._beforeDragY=d.y,c.resizable("option","minWidth",e*(d.minWidth||1)),c.resizable("option","minHeight",j*(d.minHeight||1)),"resizestart"==b.type&&i.find(".grid-stack-item").trigger("resizestart")},j=function(b,e){var f=a(this);if(f.data("_gridstack_node")){var h=!1;g.placeholder.detach(),d.el=f,g.placeholder.hide(),d._isAboutToRemove?(h=!0,c.removeData("_gridstack_node"),c.remove()):(g._clearRemovingTimeout(c),d._temporaryRemoved?(f.attr("data-gs-x",d._beforeDragX).attr("data-gs-y",d._beforeDragY).attr("data-gs-width",d.width).attr("data-gs-height",d.height).removeAttr("style"),d.x=d._beforeDragX,d.y=d._beforeDragY,g.grid.addNode(d)):f.attr("data-gs-x",d.x).attr("data-gs-y",d.y).attr("data-gs-width",d.width).attr("data-gs-height",d.height).removeAttr("style")),g._updateContainerHeight(),g._triggerChangeEvent(h),g.grid.endUpdate();var i=f.find(".grid-stack");i.length&&"resizestop"==b.type&&(i.each(function(b,c){a(c).data("gridstack").onResizeHandler()}),f.find(".grid-stack-item").trigger("resizestop"))}};c.draggable(b.extend(this.opts.draggable,{containment:this.opts.isNested?this.container.parent():null,start:i,stop:j,drag:h})).resizable(b.extend(this.opts.resizable,{start:i,stop:j,resize:h})),(d.noMove||this._isOneColumnMode()||this.opts.disableDrag)&&c.draggable("disable"),(d.noResize||this._isOneColumnMode()||this.opts.disableResize)&&c.resizable("disable"),c.attr("data-gs-locked",d.locked?"yes":null)},i.prototype._prepareElement=function(b,c){c="undefined"!=typeof c&&c;var d=this;b=a(b),b.addClass(this.opts.itemClass);var e=d.grid.addNode({x:b.attr("data-gs-x"),y:b.attr("data-gs-y"),width:b.attr("data-gs-width"),height:b.attr("data-gs-height"),maxWidth:b.attr("data-gs-max-width"),minWidth:b.attr("data-gs-min-width"),maxHeight:b.attr("data-gs-max-height"),minHeight:b.attr("data-gs-min-height"),autoPosition:f.toBool(b.attr("data-gs-auto-position")),noResize:f.toBool(b.attr("data-gs-no-resize")),noMove:f.toBool(b.attr("data-gs-no-move")),locked:f.toBool(b.attr("data-gs-locked")),el:b,id:b.attr("data-gs-id"),_grid:d},c);b.data("_gridstack_node",e),this.opts.staticGrid||this._prepareElementsByNode(b,e)},i.prototype.setAnimation=function(a){a?this.container.addClass("grid-stack-animate"):this.container.removeClass("grid-stack-animate")},i.prototype.addWidget=function(b,c,d,e,f,g,h,i,j,k,l){return b=a(b),"undefined"!=typeof c&&b.attr("data-gs-x",c),"undefined"!=typeof d&&b.attr("data-gs-y",d),"undefined"!=typeof e&&b.attr("data-gs-width",e),"undefined"!=typeof f&&b.attr("data-gs-height",f),"undefined"!=typeof g&&b.attr("data-gs-auto-position",g?"yes":null),"undefined"!=typeof h&&b.attr("data-gs-min-width",h),"undefined"!=typeof i&&b.attr("data-gs-max-width",i),"undefined"!=typeof j&&b.attr("data-gs-min-height",j),"undefined"!=typeof k&&b.attr("data-gs-max-height",k),"undefined"!=typeof l&&b.attr("data-gs-id",l),this.container.append(b),this._prepareElement(b,!0),this._triggerAddEvent(),this._updateContainerHeight(),this._triggerChangeEvent(!0),b},i.prototype.makeWidget=function(b){return b=a(b),this._prepareElement(b,!0),this._triggerAddEvent(),this._updateContainerHeight(),this._triggerChangeEvent(!0),b},i.prototype.willItFit=function(a,b,c,d,e){var f={x:a,y:b,width:c,height:d,autoPosition:e};return this.grid.canBePlacedWithRespectToHeight(f)},i.prototype.removeWidget=function(b,c){c="undefined"==typeof c||c,b=a(b);var d=b.data("_gridstack_node"); // For Meteor support: https://github.com/troolee/gridstack.js/pull/272 d||(d=this.grid.getNodeDataByDOMEl(b)),this.grid.removeNode(d,c),b.removeData("_gridstack_node"),this._updateContainerHeight(),c&&b.remove(),this._triggerChangeEvent(!0),this._triggerRemoveEvent()},i.prototype.removeAll=function(a){b.each(this.grid.nodes,b.bind(function(b){this.removeWidget(b.el,a)},this)),this.grid.nodes=[],this._updateContainerHeight()},i.prototype.destroy=function(b){a(window).off("resize",this.onResizeHandler),this.disable(),"undefined"==typeof b||b?this.container.remove():this.removeAll(!1),f.removeStylesheet(this._stylesId),this.grid&&(this.grid=null)},i.prototype.resizable=function(b,c){var d=this;return b=a(b),b.each(function(b,e){e=a(e);var f=e.data("_gridstack_node");d.opts.staticGrid||"undefined"==typeof f||null===f||(f.noResize=!c,f.noResize||d._isOneColumnMode()?e.resizable("disable"):e.resizable("enable"))}),this},i.prototype.movable=function(b,c){var d=this;return b=a(b),b.each(function(b,e){e=a(e);var f=e.data("_gridstack_node");d.opts.staticGrid||"undefined"==typeof f||null===f||(f.noMove=!c,f.noMove||d._isOneColumnMode()?(e.draggable("disable"),e.removeClass("ui-draggable-handle")):(e.draggable("enable"),e.addClass("ui-draggable-handle")))}),this},i.prototype.enableMove=function(a,b){this.movable(this.container.children("."+this.opts.itemClass),a),b&&(this.opts.disableDrag=!a)},i.prototype.enableResize=function(a,b){this.resizable(this.container.children("."+this.opts.itemClass),a),b&&(this.opts.disableResize=!a)},i.prototype.disable=function(){this.movable(this.container.children("."+this.opts.itemClass),!1),this.resizable(this.container.children("."+this.opts.itemClass),!1),this.container.trigger("disable")},i.prototype.enable=function(){this.movable(this.container.children("."+this.opts.itemClass),!0),this.resizable(this.container.children("."+this.opts.itemClass),!0),this.container.trigger("enable")},i.prototype.locked=function(b,c){return b=a(b),b.each(function(b,d){d=a(d);var e=d.data("_gridstack_node");"undefined"!=typeof e&&null!==e&&(e.locked=c||!1,d.attr("data-gs-locked",e.locked?"yes":null))}),this},i.prototype.maxHeight=function(b,c){return b=a(b),b.each(function(b,d){d=a(d);var e=d.data("_gridstack_node");"undefined"!=typeof e&&null!==e&&(isNaN(c)||(e.maxHeight=c||!1,d.attr("data-gs-max-height",c)))}),this},i.prototype.minHeight=function(b,c){return b=a(b),b.each(function(b,d){d=a(d);var e=d.data("_gridstack_node");"undefined"!=typeof e&&null!==e&&(isNaN(c)||(e.minHeight=c||!1,d.attr("data-gs-min-height",c)))}),this},i.prototype.maxWidth=function(b,c){return b=a(b),b.each(function(b,d){d=a(d);var e=d.data("_gridstack_node");"undefined"!=typeof e&&null!==e&&(isNaN(c)||(e.maxWidth=c||!1,d.attr("data-gs-max-width",c)))}),this},i.prototype.minWidth=function(b,c){return b=a(b),b.each(function(b,d){d=a(d);var e=d.data("_gridstack_node");"undefined"!=typeof e&&null!==e&&(isNaN(c)||(e.minWidth=c||!1,d.attr("data-gs-min-width",c)))}),this},i.prototype._updateElement=function(b,c){b=a(b).first();var d=b.data("_gridstack_node");if("undefined"!=typeof d&&null!==d){var e=this;e.grid.cleanNodes(),e.grid.beginUpdate(d),c.call(this,b,d),e._updateContainerHeight(),e._triggerChangeEvent(),e.grid.endUpdate()}},i.prototype.resize=function(a,b,c){this._updateElement(a,function(a,d){b=null!==b&&"undefined"!=typeof b?b:d.width,c=null!==c&&"undefined"!=typeof c?c:d.height,this.grid.moveNode(d,d.x,d.y,b,c)})},i.prototype.move=function(a,b,c){this._updateElement(a,function(a,d){b=null!==b&&"undefined"!=typeof b?b:d.x,c=null!==c&&"undefined"!=typeof c?c:d.y,this.grid.moveNode(d,b,c,d.width,d.height)})},i.prototype.update=function(a,b,c,d,e){this._updateElement(a,function(a,f){b=null!==b&&"undefined"!=typeof b?b:f.x,c=null!==c&&"undefined"!=typeof c?c:f.y,d=null!==d&&"undefined"!=typeof d?d:f.width,e=null!==e&&"undefined"!=typeof e?e:f.height,this.grid.moveNode(f,b,c,d,e)})},i.prototype.verticalMargin=function(a,b){if("undefined"==typeof a)return this.opts.verticalMargin;var c=f.parseHeight(a);this.opts.verticalMarginUnit===c.unit&&this.opts.height===c.height||(this.opts.verticalMarginUnit=c.unit,this.opts.verticalMargin=c.height,b||this._updateStyles())},i.prototype.cellHeight=function(a,b){if("undefined"==typeof a){if(this.opts.cellHeight)return this.opts.cellHeight;var c=this.container.children("."+this.opts.itemClass).first();return Math.ceil(c.outerHeight()/c.attr("data-gs-height"))}var d=f.parseHeight(a);this.opts.cellHeightUnit===d.heightUnit&&this.opts.height===d.height||(this.opts.cellHeightUnit=d.unit,this.opts.cellHeight=d.height,b||this._updateStyles())},i.prototype.cellWidth=function(){var a=this.container.children("."+this.opts.itemClass).first();return Math.ceil(a.outerWidth()/parseInt(a.attr("data-gs-width"),10))},i.prototype.getCellFromPixel=function(a,b){var c="undefined"!=typeof b&&b?this.container.offset():this.container.position(),d=a.left-c.left,e=a.top-c.top,f=Math.floor(this.container.width()/this.opts.width),g=Math.floor(this.container.height()/parseInt(this.container.attr("data-gs-current-height")));return{x:Math.floor(d/f),y:Math.floor(e/g)}},i.prototype.batchUpdate=function(){this.grid.batchUpdate()},i.prototype.commit=function(){this.grid.commit(),this._updateContainerHeight()},i.prototype.isAreaEmpty=function(a,b,c,d){return this.grid.isAreaEmpty(a,b,c,d)},i.prototype.setStatic=function(a){this.opts.staticGrid=a===!0,this.enableMove(!a),this.enableResize(!a),this._setStaticClass()},i.prototype._setStaticClass=function(){var a="grid-stack-static";this.opts.staticGrid===!0?this.container.addClass(a):this.container.removeClass(a)},i.prototype._updateNodeWidths=function(a,b){this.grid._sortNodes(),this.grid.batchUpdate();for(var c={},d=0;d