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

Merge pull request #325 from jlowcs/height_units

Browse source 
Add handling of em/rem/px units for cell_height and vertical_margin
This commit is contained in:
Pavel Reznikov 2016-02-16 15:36:37 -08:00
parent 707ab11f54 f34e93baac
commit 1cce0bd9f6
5 changed files with 150 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
Gruntfile.js Executable file → Normal file
View file

22
README.md
View file

@ -126,7 +126,7 @@ You can download files from `dist` directory as well.
## Basic usage
```html
```
<div class="grid-stack">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
@ -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
@ -472,7 +478,7 @@ Sorts array of nodes
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
```
<script src="lodash.min.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
@ -549,7 +555,7 @@ $(function () {
and HTML:
```html
```
<div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
```
@ -614,7 +620,7 @@ 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;
@ -638,7 +644,7 @@ There are few extra CSS batteries in `gridstack-extra.css` (`gridstack-extra.min
You can use other than 12 grid width:
```html
```
<div class="grid-stack grid-stack-N">...</div>
```
```javascript
@ -724,7 +730,7 @@ 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
```
<!--[if lt IE 9]>
<link rel="stylesheet" href="gridstack-ie8.css"/>
<![endif]-->

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

0
package.json Executable file → Normal file
View file

191
src/gridstack.js
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)};
};