Commit 20fc3a36 authored by Dylan Weiss's avatar Dylan Weiss
Browse files

Merge branch 'develop'

parents 34407106 f7051109
gridstack.js gridstack.js
============ ============
[![Build Status](https://travis-ci.org/troolee/gridstack.js.svg?branch=master)](https://travis-ci.org/troolee/gridstack.js) [![Build Status](https://travis-ci.org/gridstack/gridstack.js.svg?branch=develop)](https://travis-ci.org/gridstack/gridstack.js)
[![Coverage Status](https://coveralls.io/repos/github/troolee/gridstack.js/badge.svg?branch=master)](https://coveralls.io/github/troolee/gridstack.js?branch=master) [![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) [![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) [![devDependency Status](https://david-dm.org/troolee/gridstack.js/dev-status.svg)](https://david-dm.org/troolee/gridstack.js#info=devDependencies)
...@@ -49,7 +49,7 @@ Version 1.0 is coming! Check out the blog post here for more information: ...@@ -49,7 +49,7 @@ Version 1.0 is coming! Check out the blog post here for more information:
Demo and examples Demo and examples
==== ====
Please visit http://troolee.github.io/gridstack.js/ for a demo or check out [these examples](http://troolee.github.io/gridstack.js/demo/). Please visit http://gridstackjs.com for a demo or check out [these examples](http://gridstackjs.com/demo/).
Usage Usage
...@@ -147,7 +147,7 @@ We're working on implementing support for other drag'n'drop libraries through th ...@@ -147,7 +147,7 @@ We're working on implementing support for other drag'n'drop libraries through th
## API Documentation ## API Documentation
Documentation can be found [here](https://github.com/troolee/gridstack.js/tree/develop/doc). Documentation can be found [here](https://github.com/gridstack/gridstack.js/tree/develop/doc).
## Touch devices support ## Touch devices support
...@@ -175,7 +175,7 @@ $(function () { ...@@ -175,7 +175,7 @@ $(function () {
}); });
``` ```
If you're still experiencing issues on touch devices please check [#444](https://github.com/troolee/gridstack.js/issues/444) If you're still experiencing issues on touch devices please check [#444](https://github.com/gridstack/gridstack.js/issues/444)
## gridstack.js for specific frameworks ## gridstack.js for specific frameworks
...@@ -216,7 +216,7 @@ For 4-column grid it should be: ...@@ -216,7 +216,7 @@ For 4-column grid it should be:
and so on. 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)): Here is a SASS code snipped which can make life easier (Thanks to @ascendantofrain, [#81](https://github.com/gridstack/gridstack.js/issues/81)):
```sass ```sass
.grid-stack-item { .grid-stack-item {
...@@ -249,7 +249,7 @@ You can use other than 12 grid width: ...@@ -249,7 +249,7 @@ You can use other than 12 grid width:
$('.grid-stack').gridstack({width: N}); $('.grid-stack').gridstack({width: N});
``` ```
See example: [2 grids demo](http://troolee.github.io/gridstack.js/demo/two.html) See example: [2 grids demo](http://gridstack.github.io/gridstack.js/demo/two.html)
## Override resizable/draggable options ## Override resizable/draggable options
...@@ -271,7 +271,7 @@ Note: It's not recommended to enable `nw`, `n`, `ne` resizing handles. Their beh ...@@ -271,7 +271,7 @@ Note: It's not recommended to enable `nw`, `n`, `ne` resizing handles. Their beh
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 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: 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)). - Create `gridstack-ie8.css` for your configuration (sample for grid with cell height of 60px can be found [here](https://gist.github.com/gridstack/6edfea5857f4cd73e6f1)).
- Include this CSS: - Include this CSS:
```html ```html
...@@ -309,7 +309,7 @@ for i in range(N): ...@@ -309,7 +309,7 @@ for i in range(N):
``` ```
There are at least two more issues with gridstack in IE8 with jQueryUI resizable (it seems it doesn't work) and 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 droppable. If you have any suggestions about support of IE8 you are welcome here: https://github.com/gridstack/gridstack.js/issues/76
## Use with require.js ## Use with require.js
...@@ -320,10 +320,10 @@ working properly. ...@@ -320,10 +320,10 @@ working properly.
Changes Changes
===== =====
View our change log [here](https://github.com/troolee/gridstack.js/tree/develop/doc/CHANGES.md). View our change log [here](https://github.com/gridstack/gridstack.js/tree/develop/doc/CHANGES.md).
The Team The Team
======== ========
gridstack.js is currently maintained by [Pavel Reznikov](https://github.com/troolee) and [Dylan Weiss](https://github.com/radiolips). We appreciate [all contributors](https://github.com/troolee/gridstack.js/graphs/contributors) for help. gridstack.js is currently maintained by [Pavel Reznikov](https://github.com/troolee) and [Dylan Weiss](https://github.com/radiolips). We appreciate [all contributors](https://github.com/gridstack/gridstack.js/graphs/contributors) for help.
This diff is collapsed.
...@@ -106,6 +106,25 @@ ...@@ -106,6 +106,25 @@
height = parseFloat(match[1]); height = parseFloat(match[1]);
} }
return {height: height, unit: heightUnit}; return {height: height, unit: heightUnit};
},
removePositioningStyles: function(el) {
var style = el[0].style;
if (style.position) {
style.removeProperty('position');
}
if (style.left) {
style.removeProperty('left');
}
if (style.top) {
style.removeProperty('top');
}
if (style.width) {
style.removeProperty('width');
}
if (style.height) {
style.removeProperty('height');
}
} }
}; };
...@@ -233,6 +252,7 @@ ...@@ -233,6 +252,7 @@
var newY = n.y; var newY = n.y;
while (newY >= n._origY) { while (newY >= n._origY) {
var collisionNode = _.chain(this.nodes) var collisionNode = _.chain(this.nodes)
.take(i)
.find(_.bind(Utils._didCollide, {n: n, newY: newY})) .find(_.bind(Utils._didCollide, {n: n, newY: newY}))
.value(); .value();
...@@ -779,13 +799,14 @@ ...@@ -779,13 +799,14 @@
var onDrag = function(event, ui) { var onDrag = function(event, ui) {
var el = draggingElement; var el = draggingElement;
var node = el.data('_gridstack_node'); var node = el.data('_gridstack_node');
var pos = self.getCellFromPixel(ui.offset, true); var pos = self.getCellFromPixel({left: event.pageX, top: event.pageY}, true);
var x = Math.max(0, pos.x); var x = Math.max(0, pos.x);
var y = Math.max(0, pos.y); var y = Math.max(0, pos.y);
if (!node._added) { if (!node._added) {
node._added = true; node._added = true;
node.el = el; node.el = el;
node.autoPosition = true;
node.x = x; node.x = x;
node.y = y; node.y = y;
self.grid.cleanNodes(); self.grid.cleanNodes();
...@@ -803,14 +824,13 @@ ...@@ -803,14 +824,13 @@
node._beforeDragX = node.x; node._beforeDragX = node.x;
node._beforeDragY = node.y; node._beforeDragY = node.y;
self._updateContainerHeight();
} else {
if (!self.grid.canMoveNode(node, x, y)) {
return;
}
self.grid.moveNode(node, x, y);
self._updateContainerHeight(); self._updateContainerHeight();
} }
if (!self.grid.canMoveNode(node, x, y)) {
return;
}
self.grid.moveNode(node, x, y);
self._updateContainerHeight();
}; };
this.dd this.dd
...@@ -869,13 +889,15 @@ ...@@ -869,13 +889,15 @@
$(ui.helper).remove(); $(ui.helper).remove();
node.el = el; node.el = el;
self.placeholder.hide(); self.placeholder.hide();
Utils.removePositioningStyles(el);
el.find('div.ui-resizable-handle').remove();
el el
.attr('data-gs-x', node.x) .attr('data-gs-x', node.x)
.attr('data-gs-y', node.y) .attr('data-gs-y', node.y)
.attr('data-gs-width', node.width) .attr('data-gs-width', node.width)
.attr('data-gs-height', node.height) .attr('data-gs-height', node.height)
.addClass(self.opts.itemClass) .addClass(self.opts.itemClass)
.removeAttr('style')
.enableSelection() .enableSelection()
.removeData('draggable') .removeData('draggable')
.removeClass('ui-draggable ui-draggable-dragging ui-draggable-disabled') .removeClass('ui-draggable ui-draggable-dragging ui-draggable-disabled')
...@@ -947,14 +969,14 @@ ...@@ -947,14 +969,14 @@
if (typeof maxHeight == 'undefined') { if (typeof maxHeight == 'undefined') {
maxHeight = this._styles._max; maxHeight = this._styles._max;
} }
if (this._styles._max !== 0 && maxHeight <= this._styles._max) { // Keep this._styles._max increasing
return ;
}
this._initStyles(); this._initStyles();
this._updateContainerHeight(); this._updateContainerHeight();
if (!this.opts.cellHeight) { // The rest will be handled by CSS if (!this.opts.cellHeight) { // The rest will be handled by CSS
return ; return ;
} }
if (this._styles._max !== 0 && maxHeight <= this._styles._max) {
return ;
}
if (!this.opts.verticalMargin || this.opts.cellHeightUnit === this.opts.verticalMarginUnit) { if (!this.opts.verticalMargin || this.opts.cellHeightUnit === this.opts.verticalMarginUnit) {
getHeight = function(nbRows, nbMargins) { getHeight = function(nbRows, nbMargins) {
...@@ -1008,6 +1030,10 @@ ...@@ -1008,6 +1030,10 @@
return; return;
} }
var height = this.grid.getGridHeight(); var height = this.grid.getGridHeight();
var minHeight = parseInt(this.container.css('min-height')) / this.cellHeight();
if (height < minHeight) {
height = minHeight;
}
this.container.attr('data-gs-current-height', height); this.container.attr('data-gs-current-height', height);
if (!this.opts.cellHeight) { if (!this.opts.cellHeight) {
return ; return ;
...@@ -1170,19 +1196,19 @@ ...@@ -1170,19 +1196,19 @@
} else { } else {
self._clearRemovingTimeout(el); self._clearRemovingTimeout(el);
if (!node._temporaryRemoved) { if (!node._temporaryRemoved) {
Utils.removePositioningStyles(o);
o o
.attr('data-gs-x', node.x) .attr('data-gs-x', node.x)
.attr('data-gs-y', node.y) .attr('data-gs-y', node.y)
.attr('data-gs-width', node.width) .attr('data-gs-width', node.width)
.attr('data-gs-height', node.height) .attr('data-gs-height', node.height);
.removeAttr('style');
} else { } else {
Utils.removePositioningStyles(o);
o o
.attr('data-gs-x', node._beforeDragX) .attr('data-gs-x', node._beforeDragX)
.attr('data-gs-y', node._beforeDragY) .attr('data-gs-y', node._beforeDragY)
.attr('data-gs-width', node.width) .attr('data-gs-width', node.width)
.attr('data-gs-height', node.height) .attr('data-gs-height', node.height);
.removeAttr('style');
node.x = node._beforeDragX; node.x = node._beforeDragX;
node.y = node._beforeDragY; node.y = node._beforeDragY;
self.grid.addNode(node); self.grid.addNode(node);
......
This diff is collapsed.
This diff is collapsed.
...@@ -23,6 +23,9 @@ Change log ...@@ -23,6 +23,9 @@ Change log
- widgets can have their own resize handles. Use `data-gs-resize-handles` element attribute to use. For example, `data-gs-resize-handles="e,w"` will make the particular widget only resize west and east. ([#494](https://github.com/troolee/gridstack.js/issues/494)). - widgets can have their own resize handles. Use `data-gs-resize-handles` element attribute to use. For example, `data-gs-resize-handles="e,w"` will make the particular widget only resize west and east. ([#494](https://github.com/troolee/gridstack.js/issues/494)).
- enable sidebar items to be duplicated properly. Pass `helper: 'clone'` in `draggable` options. ([#661](https://github.com/troolee/gridstack.js/issues/661), ([#396](https://github.com/troolee/gridstack.js/issues/396), ([#499](https://github.com/troolee/gridstack.js/issues/499)). - enable sidebar items to be duplicated properly. Pass `helper: 'clone'` in `draggable` options. ([#661](https://github.com/troolee/gridstack.js/issues/661), ([#396](https://github.com/troolee/gridstack.js/issues/396), ([#499](https://github.com/troolee/gridstack.js/issues/499)).
- fix `staticGrid` grid option ([#743](https://github.com/troolee/gridstack.js/issues/743)) - fix `staticGrid` grid option ([#743](https://github.com/troolee/gridstack.js/issues/743))
- preserve inline styles when moving/cloning items (thanks silverwind)
- fix bug causing heights not to get set ([#744](https://github.com/troolee/gridstack.js/issues/744))
- allow grid to have min-height, fixes ([#628](https://github.com/troolee/gridstack.js/issues/628))
## v0.3.0 (2017-04-21) ## v0.3.0 (2017-04-21)
......
...@@ -77,13 +77,7 @@ ...@@ -77,13 +77,7 @@
JQueryUIGridStackDragDropPlugin.prototype.droppable = function(el, opts) { JQueryUIGridStackDragDropPlugin.prototype.droppable = function(el, opts) {
el = $(el); el = $(el);
if (opts === 'disable' || opts === 'enable') { el.droppable(opts);
el.droppable(opts);
} else {
el.droppable({
accept: opts.accept
});
}
return this; return this;
}; };
......
...@@ -109,10 +109,22 @@ ...@@ -109,10 +109,22 @@
}, },
removePositioningStyles: function(el) { removePositioningStyles: function(el) {
var style = el[0].style; var style = el[0].style;
if (style.position) style.removeProperty('position'); if (style.position) {
if (style.left) style.removeProperty('left'); style.removeProperty('position');
if (style.top) style.removeProperty('top'); }
if (style.left) {
style.removeProperty('left');
}
if (style.top) {
style.removeProperty('top');
}
if (style.width) {
style.removeProperty('width');
}
if (style.height) {
style.removeProperty('height');
}
} }
}; };
...@@ -240,6 +252,7 @@ ...@@ -240,6 +252,7 @@
var newY = n.y; var newY = n.y;
while (newY >= n._origY) { while (newY >= n._origY) {
var collisionNode = _.chain(this.nodes) var collisionNode = _.chain(this.nodes)
.take(i)
.find(_.bind(Utils._didCollide, {n: n, newY: newY})) .find(_.bind(Utils._didCollide, {n: n, newY: newY}))
.value(); .value();
...@@ -610,6 +623,9 @@ ...@@ -610,6 +623,9 @@
disableResize: opts.disableResize || false, disableResize: opts.disableResize || false,
rtl: 'auto', rtl: 'auto',
removable: false, removable: false,
removableOptions: _.defaults(opts.removableOptions || {}, {
accept: '.' + opts.itemClass
}),
removeTimeout: 2000, removeTimeout: 2000,
verticalMarginUnit: 'px', verticalMarginUnit: 'px',
cellHeightUnit: 'px', cellHeightUnit: 'px',
...@@ -757,9 +773,7 @@ ...@@ -757,9 +773,7 @@
if (!self.opts.staticGrid && typeof self.opts.removable === 'string') { if (!self.opts.staticGrid && typeof self.opts.removable === 'string') {
var trashZone = $(self.opts.removable); var trashZone = $(self.opts.removable);
if (!this.dd.isDroppable(trashZone)) { if (!this.dd.isDroppable(trashZone)) {
this.dd.droppable(trashZone, { this.dd.droppable(trashZone, self.opts.removableOptions);
accept: '.' + self.opts.itemClass
});
} }
this.dd this.dd
.on(trashZone, 'dropover', function(event, ui) { .on(trashZone, 'dropover', function(event, ui) {
...@@ -768,6 +782,7 @@ ...@@ -768,6 +782,7 @@
if (node._grid !== self) { if (node._grid !== self) {
return; return;
} }
el.data('inTrashZone', true);
self._setupRemovingTimeout(el); self._setupRemovingTimeout(el);
}) })
.on(trashZone, 'dropout', function(event, ui) { .on(trashZone, 'dropout', function(event, ui) {
...@@ -776,6 +791,7 @@ ...@@ -776,6 +791,7 @@
if (node._grid !== self) { if (node._grid !== self) {
return; return;
} }
el.data('inTrashZone', false);
self._clearRemovingTimeout(el); self._clearRemovingTimeout(el);
}); });
} }
...@@ -786,13 +802,14 @@ ...@@ -786,13 +802,14 @@
var onDrag = function(event, ui) { var onDrag = function(event, ui) {
var el = draggingElement; var el = draggingElement;
var node = el.data('_gridstack_node'); var node = el.data('_gridstack_node');
var pos = self.getCellFromPixel(ui.offset, true); var pos = self.getCellFromPixel({left: event.pageX, top: event.pageY}, true);
var x = Math.max(0, pos.x); var x = Math.max(0, pos.x);
var y = Math.max(0, pos.y); var y = Math.max(0, pos.y);
if (!node._added) { if (!node._added) {
node._added = true; node._added = true;
node.el = el; node.el = el;
node.autoPosition = true;
node.x = x; node.x = x;
node.y = y; node.y = y;
self.grid.cleanNodes(); self.grid.cleanNodes();
...@@ -810,14 +827,13 @@ ...@@ -810,14 +827,13 @@
node._beforeDragX = node.x; node._beforeDragX = node.x;
node._beforeDragY = node.y; node._beforeDragY = node.y;
self._updateContainerHeight();
} else {
if (!self.grid.canMoveNode(node, x, y)) {
return;
}
self.grid.moveNode(node, x, y);
self._updateContainerHeight(); self._updateContainerHeight();
} }
if (!self.grid.canMoveNode(node, x, y)) {
return;
}
self.grid.moveNode(node, x, y);
self._updateContainerHeight();
}; };
this.dd this.dd
...@@ -877,6 +893,7 @@ ...@@ -877,6 +893,7 @@
node.el = el; node.el = el;
self.placeholder.hide(); self.placeholder.hide();
Utils.removePositioningStyles(el); Utils.removePositioningStyles(el);
el.find('div.ui-resizable-handle').remove();
el el
.attr('data-gs-x', node.x) .attr('data-gs-x', node.x)
...@@ -1016,6 +1033,10 @@ ...@@ -1016,6 +1033,10 @@
return; return;
} }
var height = this.grid.getGridHeight(); var height = this.grid.getGridHeight();
var minHeight = parseInt(this.container.css('min-height')) / this.cellHeight();
if (height < minHeight) {
height = minHeight;
}
this.container.attr('data-gs-current-height', height); this.container.attr('data-gs-current-height', height);
if (!this.opts.cellHeight) { if (!this.opts.cellHeight) {
return ; return ;
...@@ -1079,7 +1100,7 @@ ...@@ -1079,7 +1100,7 @@
} }
if (event.type == 'drag') { if (event.type == 'drag') {
if (x < 0 || x >= self.grid.width || y < 0 || (!self.grid.float && y > self.grid.getGridHeight())) { if (el.data('inTrashZone') || x < 0 || x >= self.grid.width || y < 0 || (!self.grid.float && y > self.grid.getGridHeight())) {
if (!node._temporaryRemoved) { if (!node._temporaryRemoved) {
if (self.opts.removable === true) { if (self.opts.removable === true) {
self._setupRemovingTimeout(el); self._setupRemovingTimeout(el);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment