deblan/gridstack.js
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Merge branch 'master' into style

Browse source 
# Conflicts:
#	src/gridstack.js
This commit is contained in:
d 2016-02-17 16:10:25 -05:00
commit f9aafafb8f
6 changed files with 157 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

0
Gruntfile.js Executable file → Normal file
View file

24
README.md
View file

@ -2,8 +2,7 @@ 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) and
touch devices.
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.
@ -71,6 +70,7 @@ Join gridstack.js on Slack: https://gridstackjs.troolee.com
- [IE8 support](#ie8-support)
- [Nested grids](#nested-grids)
- [Changes](#changes)
- [v0.2.5-dev (Development version)](#v025-dev-development-version)
- [v0.2.4 (2016-02-15)](#v024-2016-02-15)
- [v0.2.3 (2015-06-23)](#v023-2015-06-23)
- [v0.2.2 (2014-12-23)](#v022-2014-12-23)
@ -157,7 +157,10 @@ $(function () {
(default: `false`)
- `animate` - turns animation on (default: `false`)
- `auto` - if `false` gridstack will not initialize existing items (default: `true`)
- `cell_height` - one cell height (default: `60`)
- `cell_height` - one cell height (default: `60`). Can be:
- an integer (px)
- a string (ex: '10em', '100px', '10rem')
- 0 or null, in which case the library will not generate styles for rows. Everything will have to be defined in CSS files.
- `draggable` - allows to override jQuery UI draggable options. (default: `{handle: '.grid-stack-item-content', scroll: true, appendTo: 'body'}`)
- `handle` - draggable handle selector (default: `'.grid-stack-item-content'`)
- `handle_class` - draggable handle class (e.g. `'grid-stack-item-content'`). If set `handle` is ignored (default: `null`)
@ -169,7 +172,9 @@ $(function () {
- `placeholder_text` - placeholder default content (default: `''`)
- `resizable` - allows to override jQuery UI resizable options. (default: `{autoHide: true, handles: 'se'}`)
- `static_grid` - makes grid static (default `false`). If true widgets are not movable/resizable. You don't even need jQueryUI draggable/resizable. A CSS class `grid-stack-static` is also added to the container.
- `vertical_margin` - vertical gap size (default: `20`)
- `vertical_margin` - vertical gap size (default: `20`). Can be:
- an integer (px)
- a string (ex: '2em', '20px', '2rem')
- `width` - amount of columns (default: `12`)
## Grid attributes
@ -177,6 +182,7 @@ $(function () {
- `data-gs-animate` - turns animation on
- `data-gs-width` - amount of columns
- `data-gs-height` - maximum rows amount. Default is `0` which means no maximum rows.
- `data-gs-current-height` - current rows amount. Set by the library only. Can be used by the CSS rules.
## Item attributes
@ -245,7 +251,7 @@ $('.grid-stack').on('resizestop', function (event, ui) {
### disable(event)
```javascipt
```javascript
$('.grid-stack').on('disable', function(event) {
var grid = event.target;
});
@ -253,7 +259,7 @@ $('.grid-stack').on('disable', function(event) {
### enable(event)
```javascipt
```javascript
$('.grid-stack').on('enable', function(event) {
var grid = event.target;
});
@ -557,7 +563,7 @@ See examples: [example 1](http://troolee.github.io/gridstack.js/demo/knockout.ht
**Notes:** It's very important to exclude training spaces after widget template:
```
```javascript
template:
[
'<div class="grid-stack" data-bind="foreach: {data: widgets, afterRender: afterAddWidget}">',
@ -772,6 +778,10 @@ See example: [Nested grid demo](http://troolee.github.io/gridstack.js/demo/neste
Changes
=======
#### v0.2.5-dev (Development version)
- `cell_height` and `vertical_margin` can now be string (e.g. '3em', '20px') (Thanks to @jlowcs)
#### v0.2.4 (2016-02-15)
- fix closure compiler/linter warnings

191
dist/gridstack.js vendored Executable file → Normal file
View file

@ -426,6 +426,9 @@
});
this.opts.is_nested = is_nested;
this.cell_height(this.opts.cell_height, true);
this.vertical_margin(this.opts.vertical_margin, true);
this.container.addClass(this.opts._class);
this._set_static_class();
@ -475,9 +478,7 @@
'<div class="' + this.opts.placeholder_class + ' ' + this.opts.item_class + '">' +
'<div class="placeholder-content">' + this.opts.placeholder_text + '</div></div>').hide();
this.container.height(
this.grid.get_grid_height() * (this.opts.cell_height + this.opts.vertical_margin) -
this.opts.vertical_margin);
this._update_container_height();
this.on_resize_handler = function() {
if (self._is_one_column_mode()) {
@ -542,6 +543,9 @@
};
GridStack.prototype._init_styles = function() {
if (!this.opts.cell_height) { //that will be handled by CSS
return ;
}
if (this._styles_id) {
$('[data-gs-id="' + this._styles_id + '"]').remove();
}
@ -556,7 +560,10 @@
return;
}
var prefix = '.' + this.opts._class + ' .' + this.opts.item_class;
var prefix = '.' + this.opts._class + ' .' + this.opts.item_class,
self = this,
get_height
;
if (typeof max_height == 'undefined') {
max_height = this._styles._max;
@ -564,30 +571,50 @@
this._update_container_height();
}
if (!this.opts.cell_height) { //the rest will be handled by CSS
return ;
}
if (this._styles._max !== 0 && max_height <= this._styles._max) {
return ;
}
if (!this.opts.vertical_margin || this.opts.cell_height_unit === this.opts.vertical_margin_unit) {
get_height = function (nbRows, nbMargins) {
return (self.opts.cell_height * nbRows + self.opts.vertical_margin * nbMargins) + self.opts.cell_height_unit;
}
} else {
get_height = function (nbRows, nbMargins) {
if (!nbRows || !nbMargins) {
return (self.opts.cell_height * nbRows + self.opts.vertical_margin * nbMargins) + self.opts.cell_height_unit;
}
return 'calc(' + ((self.opts.cell_height * nbRows) + self.opts.cell_height_unit) + ' + ' + ((self.opts.vertical_margin * nbMargins) + self.opts.vertical_margin_unit) + ')';
}
}
if (this._styles._max == 0) {
Utils.insert_css_rule(this._styles, prefix, 'min-height: ' + (this.opts.cell_height) + 'px;', 0);
Utils.insert_css_rule(this._styles, prefix, 'min-height: ' + get_height(1, 0) + ';', 0);
}
if (max_height > this._styles._max) {
for (var i = this._styles._max; i < max_height; ++i) {
Utils.insert_css_rule(this._styles,
prefix + '[data-gs-height="' + (i + 1) + '"]',
'height: ' + (this.opts.cell_height * (i + 1) + this.opts.vertical_margin * i) + 'px;',
'height: ' + get_height(i + 1, i) + ';',
i
);
Utils.insert_css_rule(this._styles,
prefix + '[data-gs-min-height="' + (i + 1) + '"]',
'min-height: ' + (this.opts.cell_height * (i + 1) + this.opts.vertical_margin * i) + 'px;',
'min-height: ' + get_height(i + 1, i) + ';',
i
);
Utils.insert_css_rule(this._styles,
prefix + '[data-gs-max-height="' + (i + 1) + '"]',
'max-height: ' + (this.opts.cell_height * (i + 1) + this.opts.vertical_margin * i) + 'px;',
'max-height: ' + get_height(i + 1, i) + ';',
i
);
Utils.insert_css_rule(this._styles,
prefix + '[data-gs-y="' + i + '"]',
'top: ' + (this.opts.cell_height * i + this.opts.vertical_margin * i) + 'px;',
'top: ' + get_height(i, i) + ';',
i
);
}
@ -599,9 +626,18 @@
if (this.grid._update_counter) {
return;
}
this.container.height(
this.grid.get_grid_height() * (this.opts.cell_height + this.opts.vertical_margin) -
this.opts.vertical_margin);
var height = this.grid.get_grid_height();
this.container.attr('data-gs-current-height', height);
if (!this.opts.cell_height) {
return ;
}
if (!this.opts.vertical_margin) {
this.container.css('height', (height * (this.opts.cell_height)) + this.opts.cell_height_unit);
} else if (this.opts.cell_height_unit === this.opts.vertical_margin_unit) {
this.container.css('height', (height * (this.opts.cell_height + this.opts.vertical_margin) - this.opts.vertical_margin) + this.opts.cell_height_unit);
} else {
this.container.css('height', 'calc(' + ((height * (this.opts.cell_height)) + this.opts.cell_height_unit) + ' + ' + ((height * (this.opts.vertical_margin - 1)) + this.opts.vertical_margin_unit) + ')');
}
};
GridStack.prototype._is_one_column_mode = function() {
@ -659,8 +695,9 @@
var o = $(this);
self.grid.clean_nodes();
self.grid.begin_update(node);
cell_width = o.outerWidth() / o.attr('data-gs-width');
cell_height = self.opts.cell_height + self.opts.vertical_margin;
cell_width = Math.ceil(o.outerWidth() / o.attr('data-gs-width'));
var strict_cell_height = Math.ceil(o.outerHeight() / o.attr('data-gs-height'));
cell_height = self.container.height() / parseInt(self.container.attr('data-gs-current-height'));
self.placeholder
.attr('data-gs-x', o.attr('data-gs-x'))
.attr('data-gs-y', o.attr('data-gs-y'))
@ -669,8 +706,8 @@
.show();
node.el = self.placeholder;
el.resizable('option', 'minWidth', Math.round(cell_width * (node.min_width || 1)));
el.resizable('option', 'minHeight', self.opts.cell_height * (node.min_height || 1));
el.resizable('option', 'minWidth', cell_width * (node.min_width || 1));
el.resizable('option', 'minHeight', strict_cell_height * (node.min_height || 1));
if (event.type == 'resizestart') {
o.find('.grid-stack-item').trigger('resizestart');
@ -864,39 +901,39 @@
return this;
};
GridStack.prototype.min_height = function (el, val) {
el = $(el);
el.each(function (index, el) {
el = $(el);
var node = el.data('_gridstack_node');
if (typeof node == 'undefined' || node == null) {
return;
}
GridStack.prototype.min_height = function (el, val) {
el = $(el);
el.each(function (index, el) {
el = $(el);
var node = el.data('_gridstack_node');
if (typeof node == 'undefined' || node == null) {
return;
}
if(!isNaN(val)){
node.min_height = (val || false);
el.attr('data-gs-min-height', val);
}
});
return this;
};
if(!isNaN(val)){
node.min_height = (val || false);
el.attr('data-gs-min-height', val);
}
});
return this;
};
GridStack.prototype.min_width = function (el, val) {
el = $(el);
el.each(function (index, el) {
el = $(el);
var node = el.data('_gridstack_node');
if (typeof node == 'undefined' || node == null) {
return;
}
GridStack.prototype.min_width = function (el, val) {
el = $(el);
el.each(function (index, el) {
el = $(el);
var node = el.data('_gridstack_node');
if (typeof node == 'undefined' || node == null) {
return;
}
if(!isNaN(val)){
node.min_width = (val || false);
el.attr('data-gs-min-width', val);
}
});
return this;
};
if(!isNaN(val)){
node.min_width = (val || false);
el.attr('data-gs-min-width', val);
}
});
return this;
};
GridStack.prototype._update_element = function(el, callback) {
el = $(el).first();
@ -947,15 +984,59 @@
});
};
GridStack.prototype.cell_height = function(val) {
if (typeof val == 'undefined') {
return this.opts.cell_height;
function parseHeight(val) {
var height = val;
var height_unit = 'px';
if (height && _.isString(height)) {
var match = height.match(/^([0-9]+)(px|em|rem)?$/);
if (!match) {
throw new Error('Invalid height');
}
height_unit = match[2];
height = parseInt(match[1]);
}
return {height: height, unit: height_unit};
}
GridStack.prototype.vertical_margin = function (val, noUpdate) {
if (typeof val == 'undefined') {
return this.opts.vertical_margin;
}
var heightData = parseHeight(val);
if (this.opts.vertical_margin_unit === heightData.unit && this.opts.height === heightData.height) {
return ;
}
this.opts.vertical_margin_unit = heightData.unit;
this.opts.vertical_margin = heightData.height;
if (!noUpdate) {
this._update_styles();
}
};
GridStack.prototype.cell_height = function (val, noUpdate) {
if (typeof val == 'undefined') {
if (this.opts.cell_height) {
return this.opts.cell_height;
} else {
var o = this.container.children('.' + this.opts.item_class).first();
return Math.ceil(o.outerHeight() / o.attr('data-gs-height'));
}
}
var heightData = parseHeight(val);
if (this.opts.cell_height_unit === heightData.height_unit && this.opts.height === heightData.height) {
return ;
}
this.opts.cell_height_unit = heightData.unit;
this.opts.cell_height = heightData.height;
if (!noUpdate) {
this._update_styles();
}
val = parseInt(val);
if (val == this.opts.cell_height)
return;
this.opts.cell_height = val || this.opts.cell_height;
this._update_styles();
};
GridStack.prototype.cell_width = function() {
@ -969,7 +1050,7 @@
var relativeTop = position.top - containerPos.top;
var column_width = Math.floor(this.container.width() / this.opts.width);
var row_height = this.opts.cell_height + this.opts.vertical_margin;
var row_height = Math.floor(this.container.height() / parseInt(this.container.attr('data-gs-current-height')));
return {x: Math.floor(relativeLeft / column_width), y: Math.floor(relativeTop / row_height)};
};

2
dist/gridstack.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/gridstack.min.map vendored
View file

File diff suppressed because one or more lines are too long

0
package.json Executable file → Normal file
View file