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

Merge branch 'develop'

parents 34407106 f7051109
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)
[![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)
......@@ -49,7 +49,7 @@ Version 1.0 is coming! Check out the blog post here for more information:
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
......@@ -147,7 +147,7 @@ We're working on implementing support for other drag'n'drop libraries through th
## 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
......@@ -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
......@@ -216,7 +216,7 @@ For 4-column grid it should be:
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
.grid-stack-item {
......@@ -249,7 +249,7 @@ You can use other than 12 grid width:
$('.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
......@@ -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
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:
```html
......@@ -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
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
......@@ -320,10 +320,10 @@ working properly.
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
========
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 @@
height = parseFloat(match[1]);
}
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 @@
var newY = n.y;
while (newY >= n._origY) {
var collisionNode = _.chain(this.nodes)
.take(i)
.find(_.bind(Utils._didCollide, {n: n, newY: newY}))
.value();
......@@ -779,13 +799,14 @@
var onDrag = function(event, ui) {
var el = draggingElement;
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 y = Math.max(0, pos.y);
if (!node._added) {
node._added = true;
node.el = el;
node.autoPosition = true;
node.x = x;
node.y = y;
self.grid.cleanNodes();
......@@ -803,14 +824,13 @@
node._beforeDragX = node.x;
node._beforeDragY = node.y;
self._updateContainerHeight();
} else {
if (!self.grid.canMoveNode(node, x, y)) {
return;
}
self.grid.moveNode(node, x, y);
self._updateContainerHeight();
}
if (!self.grid.canMoveNode(node, x, y)) {
return;
}
self.grid.moveNode(node, x, y);
self._updateContainerHeight();
};
this.dd
......@@ -869,13 +889,15 @@
$(ui.helper).remove();
node.el = el;
self.placeholder.hide();
Utils.removePositioningStyles(el);
el.find('div.ui-resizable-handle').remove();
el
.attr('data-gs-x', node.x)
.attr('data-gs-y', node.y)
.attr('data-gs-width', node.width)
.attr('data-gs-height', node.height)
.addClass(self.opts.itemClass)
.removeAttr('style')
.enableSelection()
.removeData('draggable')
.removeClass('ui-draggable ui-draggable-dragging ui-draggable-disabled')
......@@ -947,14 +969,14 @@
if (typeof maxHeight == 'undefined') {
maxHeight = this._styles._max;
}
if (this._styles._max !== 0 && maxHeight <= this._styles._max) { // Keep this._styles._max increasing
return ;
}
this._initStyles();
this._updateContainerHeight();
if (!this.opts.cellHeight) { // The rest will be handled by CSS
return ;
}
if (this._styles._max !== 0 && maxHeight <= this._styles._max) {
return ;
}
if (!this.opts.verticalMargin || this.opts.cellHeightUnit === this.opts.verticalMarginUnit) {
getHeight = function(nbRows, nbMargins) {
......@@ -1008,6 +1030,10 @@
return;
}
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);
if (!this.opts.cellHeight) {
return ;
......@@ -1170,19 +1196,19 @@
} else {
self._clearRemovingTimeout(el);
if (!node._temporaryRemoved) {
Utils.removePositioningStyles(o);
o
.attr('data-gs-x', node.x)
.attr('data-gs-y', node.y)
.attr('data-gs-width', node.width)
.attr('data-gs-height', node.height)
.removeAttr('style');
.attr('data-gs-height', node.height);
} else {
Utils.removePositioningStyles(o);
o
.attr('data-gs-x', node._beforeDragX)
.attr('data-gs-y', node._beforeDragY)
.attr('data-gs-width', node.width)
.attr('data-gs-height', node.height)
.removeAttr('style');
.attr('data-gs-height', node.height);
node.x = node._beforeDragX;
node.y = node._beforeDragY;
self.grid.addNode(node);
......
This diff is collapsed.
This diff is collapsed.
......@@ -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)).
- 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))
- 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)
......
......@@ -77,13 +77,7 @@
JQueryUIGridStackDragDropPlugin.prototype.droppable = function(el, opts) {
el = $(el);
if (opts === 'disable' || opts === 'enable') {
el.droppable(opts);
} else {
el.droppable({
accept: opts.accept
});
}
el.droppable(opts);
return this;
};
......
......@@ -109,10 +109,22 @@
},
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');
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');
}
}
};
......@@ -240,6 +252,7 @@
var newY = n.y;
while (newY >= n._origY) {
var collisionNode = _.chain(this.nodes)
.take(i)
.find(_.bind(Utils._didCollide, {n: n, newY: newY}))
.value();
......@@ -610,6 +623,9 @@
disableResize: opts.disableResize || false,
rtl: 'auto',
removable: false,
removableOptions: _.defaults(opts.removableOptions || {}, {
accept: '.' + opts.itemClass
}),
removeTimeout: 2000,
verticalMarginUnit: 'px',
cellHeightUnit: 'px',
......@@ -757,9 +773,7 @@
if (!self.opts.staticGrid && typeof self.opts.removable === 'string') {
var trashZone = $(self.opts.removable);
if (!this.dd.isDroppable(trashZone)) {
this.dd.droppable(trashZone, {
accept: '.' + self.opts.itemClass
});
this.dd.droppable(trashZone, self.opts.removableOptions);
}
this.dd
.on(trashZone, 'dropover', function(event, ui) {
......@@ -768,6 +782,7 @@
if (node._grid !== self) {
return;
}
el.data('inTrashZone', true);
self._setupRemovingTimeout(el);
})
.on(trashZone, 'dropout', function(event, ui) {
......@@ -776,6 +791,7 @@
if (node._grid !== self) {
return;
}
el.data('inTrashZone', false);
self._clearRemovingTimeout(el);
});
}
......@@ -786,13 +802,14 @@
var onDrag = function(event, ui) {
var el = draggingElement;
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 y = Math.max(0, pos.y);
if (!node._added) {
node._added = true;
node.el = el;
node.autoPosition = true;
node.x = x;
node.y = y;
self.grid.cleanNodes();
......@@ -810,14 +827,13 @@
node._beforeDragX = node.x;
node._beforeDragY = node.y;
self._updateContainerHeight();
} else {
if (!self.grid.canMoveNode(node, x, y)) {
return;
}
self.grid.moveNode(node, x, y);
self._updateContainerHeight();
}
if (!self.grid.canMoveNode(node, x, y)) {
return;
}
self.grid.moveNode(node, x, y);
self._updateContainerHeight();
};
this.dd
......@@ -877,6 +893,7 @@
node.el = el;
self.placeholder.hide();
Utils.removePositioningStyles(el);
el.find('div.ui-resizable-handle').remove();
el
.attr('data-gs-x', node.x)
......@@ -1016,6 +1033,10 @@
return;
}
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);
if (!this.opts.cellHeight) {
return ;
......@@ -1079,7 +1100,7 @@
}
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 (self.opts.removable === true) {
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