Skip to content

Add handling of em/rem/px units for cell_height and vertical_margin #325

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
troolee merged 2 commits into from
Feb 16, 2016
Merged

Add handling of em/rem/px units for cell_height and vertical_margin #325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ef9328f
Add handling of em/rem/px units for cell_height and vertical_margin, …
Nov 19, 2015
f34e93b
increased readability
Feb 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file modified Gruntfile.js
100755 → 100644
View file
Open in desktop
Empty file.
22 changes: 14 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ Note: You can still use [underscore.js](http://underscorejs.org) (>= 1.7.0) inst

## Basic usage

```html
```
<div class="grid-stack">
<div class="grid-stack-item"
data-gs-x="0" data-gs-y="0"
Expand Down Expand Up @@ -133,7 +133,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`)
Expand All @@ -145,14 +148,17 @@ $(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

- `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

Expand Down Expand Up @@ -448,7 +454,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>
Expand Down Expand Up @@ -525,7 +531,7 @@ $(function () {

and HTML:

```html
```
<div data-bind="component: {name: 'dashboard-grid', params: $data}"></div>
```

Expand Down Expand Up @@ -590,7 +596,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;
Expand All @@ -614,7 +620,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
Expand Down Expand Up @@ -700,7 +706,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]-->
Expand Down
Empty file modified dist/gridstack.js
100755 → 100644
View file
Open in desktop
Empty file.
Empty file modified package.json
100755 → 100644
View file
Open in desktop
Empty file.
195 changes: 138 additions & 57 deletions src/gridstack.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,6 +424,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();
Expand Down Expand Up @@ -473,9 +476,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()) {
Expand Down Expand Up @@ -540,6 +541,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();
}
Expand All @@ -554,38 +558,61 @@
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;
this._init_styles();
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
);
}
Expand All @@ -597,9 +624,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() {
Expand Down Expand Up @@ -657,8 +693,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'))
Expand All @@ -667,8 +704,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');
Expand Down Expand Up @@ -862,39 +899,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;
}

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;
}

if(!isNaN(val)){
node.min_width = (val || false);
el.attr('data-gs-min-width', val);
}
});
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;
}

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;
}

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();
Expand Down Expand Up @@ -945,15 +982,59 @@
});
};

GridStack.prototype.cell_height = function(val) {
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.cell_height;
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() {
Expand All @@ -967,7 +1048,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)};
};
Expand Down