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

Merge pull request #355 from radiolips/feature/54/add-remove-events

Browse source 
Feature/54/add remove events
This commit is contained in:
radiolips 2016-02-23 11:52:41 -05:00
parent a33f046fa6 2abfbb37bf
commit e34407d40c
6 changed files with 134 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -471,6 +471,7 @@ Changes
- add `detachGrid` parameter to `destroy` method ([#216](https://github.com/troolee/gridstack.js/issues/216))
- add `useOffset` parameter to `getCellFromPixel` method ([#237](https://github.com/troolee/gridstack.js/issues/237))
- add `minWidth`, `maxWidth`, `minHeight`, `maxHeight`, `id` parameters to `addWidget` ([#188](https://github.com/troolee/gridstack.js/issues/188))
- add `added` and `removed` events for when a widget is added or removed, respectively. ([#54](https://github.com/troolee/gridstack.js/issues/54))
#### v0.2.4 (2016-02-15)

35
dist/gridstack.js vendored
View file

@ -132,6 +132,9 @@
this._updateCounter = 0;
this._float = this.float;
this._addedNodes = [];
this._removedNodes = [];
};
GridStackEngine.prototype.batchUpdate = function() {
@ -293,7 +296,7 @@
return _.filter(this.nodes, function(n) { return n._dirty; });
};
GridStackEngine.prototype.addNode = function(node) {
GridStackEngine.prototype.addNode = function(node, triggerAddEvent) {
node = this._prepareNode(node);
if (typeof node.maxWidth != 'undefined') { node.width = Math.min(node.width, node.maxWidth); }
@ -322,6 +325,9 @@
}
this.nodes.push(node);
if (typeof triggerAddEvent != 'undefined' && triggerAddEvent) {
this._addedNodes.push(_.clone(node));
}
this._fixCollisions(node);
this._packNodes();
@ -330,6 +336,7 @@
};
GridStackEngine.prototype.removeNode = function(node) {
this._removedNodes.push(_.clone(node));
node._id = null;
this.nodes = _.without(this.nodes, node);
this._packNodes();
@ -674,6 +681,20 @@
}
};
GridStack.prototype._triggerAddEvent = function() {
if (this.grid._addedNodes && this.grid._addedNodes.length > 0) {
this.container.trigger('added', [_.map(this.grid._addedNodes, _.clone)]);
this.grid._addedNodes = [];
}
};
GridStack.prototype._triggerRemoveEvent = function() {
if (this.grid._removedNodes && this.grid._removedNodes.length > 0) {
this.container.trigger('removed', [_.map(this.grid._removedNodes, _.clone)]);
this.grid._removedNodes = [];
}
};
GridStack.prototype._initStyles = function() {
if (this._stylesId) {
Utils.removeStylesheet(this._stylesId);
@ -778,7 +799,8 @@
this.opts.minWidth;
};
GridStack.prototype._prepareElement = function(el) {
GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false;
var self = this;
el = $(el);
@ -798,7 +820,7 @@
locked: Utils.toBool(el.attr('data-gs-locked')),
el: el,
id: el.attr('data-gs-id')
});
}, triggerAddEvent);
el.data('_gridstack_node', node);
var cellWidth;
@ -995,7 +1017,8 @@
if (typeof maxHeight != 'undefined') { el.attr('data-gs-max-height', maxHeight); }
if (typeof id != 'undefined') { el.attr('data-gs-id', id); }
this.container.append(el);
this._prepareElement(el);
this._prepareElement(el, true);
this._triggerAddEvent();
this._updateContainerHeight();
this._triggerChangeEvent(true);
@ -1004,7 +1027,8 @@
GridStack.prototype.makeWidget = function(el) {
el = $(el);
this._prepareElement(el);
this._prepareElement(el, true);
this._triggerAddEvent();
this._updateContainerHeight();
this._triggerChangeEvent(true);
@ -1033,6 +1057,7 @@
el.remove();
}
this._triggerChangeEvent(true);
this._triggerRemoveEvent();
};
GridStack.prototype.removeAll = function(detachNode) {

8
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

112
doc/README.md
View file

@ -9,13 +9,15 @@ gridstack.js API
- [Grid attributes](#grid-attributes)
- [Item attributes](#item-attributes)
- [Events](#events)
- [onchange(items)](#onchangeitems)
- [ondragstart(event, ui)](#ondragstartevent-ui)
- [ondragstop(event, ui)](#ondragstopevent-ui)
- [onresizestart(event, ui)](#onresizestartevent-ui)
- [onresizestop(event, ui)](#onresizestopevent-ui)
- [added(event, items)](#addedevent-items)
- [change(event, items)](#changeevent-items)
- [disable(event)](#disableevent)
- [dragstart(event, ui)](#dragstartevent-ui)
- [dragstop(event, ui)](#dragstopevent-ui)
- [enable(event)](#enableevent)
- [removed(event, items)](#removedevent-items)
- [resizestart(event, ui)](#resizestartevent-ui)
- [resizestop(event, ui)](#resizestopevent-ui)
- [API](#api)
- [addWidget(el[, x, y, width, height, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id])](#addwidgetel-x-y-width-height-autoposition-minwidth-maxwidth-minheight-maxheight-id)
- [batchUpdate()](#batchupdate)
@ -106,56 +108,31 @@ to completely lock the widget.
## Events
### onchange(items)
### added(event, items)
```javascript
$('.grid-stack').on('added', function(event, items) {
for (var i = 0; i < items.length; i++) {
console.log('item added');
console.log(items[i]);
}
});
```
### change(event, items)
Occurs when adding/removing widgets or existing widgets change their position/size
```javascript
var serializeWidgetMap = function (items) {
var serializeWidgetMap = function(items) {
console.log(items);
};
$('.grid-stack').on('change', function (e, items) {
$('.grid-stack').on('change', function(event, items) {
serializeWidgetMap(items);
});
```
### ondragstart(event, ui)
```javascript
$('.grid-stack').on('dragstart', function (event, ui) {
var grid = this;
var element = event.target;
});
```
### ondragstop(event, ui)
```javascript
$('.grid-stack').on('dragstop', function (event, ui) {
var grid = this;
var element = event.target;
});
```
### onresizestart(event, ui)
```javascript
$('.grid-stack').on('resizestart', function (event, ui) {
var grid = this;
var element = event.target;
});
```
### onresizestop(event, ui)
```javascript
$('.grid-stack').on('resizestop', function (event, ui) {
var grid = this;
var element = event.target;
});
```
### disable(event)
```javascript
@ -164,6 +141,24 @@ $('.grid-stack').on('disable', function(event) {
});
```
### dragstart(event, ui)
```javascript
$('.grid-stack').on('dragstart', function(event, ui) {
var grid = this;
var element = event.target;
});
```
### dragstop(event, ui)
```javascript
$('.grid-stack').on('dragstop', function(event, ui) {
var grid = this;
var element = event.target;
});
```
### enable(event)
```javascript
@ -172,6 +167,35 @@ $('.grid-stack').on('enable', function(event) {
});
```
### removed(event, items)
```javascript
$('.grid-stack').on('removed', function(event, items) {
for (var i = 0; i < items.length; i++) {
console.log('item removed');
console.log(items[i]);
}
});
```
### resizestart(event, ui)
```javascript
$('.grid-stack').on('resizestart', function(event, ui) {
var grid = this;
var element = event.target;
});
```
### resizestop(event, ui)
```javascript
$('.grid-stack').on('resizestop', function(event, ui) {
var grid = this;
var element = event.target;
});
```
## API
### addWidget(el[, x, y, width, height, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id])

35
src/gridstack.js
View file

@ -132,6 +132,9 @@
this._updateCounter = 0;
this._float = this.float;
this._addedNodes = [];
this._removedNodes = [];
};
GridStackEngine.prototype.batchUpdate = function() {
@ -293,7 +296,7 @@
return _.filter(this.nodes, function(n) { return n._dirty; });
};
GridStackEngine.prototype.addNode = function(node) {
GridStackEngine.prototype.addNode = function(node, triggerAddEvent) {
node = this._prepareNode(node);
if (typeof node.maxWidth != 'undefined') { node.width = Math.min(node.width, node.maxWidth); }
@ -322,6 +325,9 @@
}
this.nodes.push(node);
if (typeof triggerAddEvent != 'undefined' && triggerAddEvent) {
this._addedNodes.push(_.clone(node));
}
this._fixCollisions(node);
this._packNodes();
@ -330,6 +336,7 @@
};
GridStackEngine.prototype.removeNode = function(node) {
this._removedNodes.push(_.clone(node));
node._id = null;
this.nodes = _.without(this.nodes, node);
this._packNodes();
@ -674,6 +681,20 @@
}
};
GridStack.prototype._triggerAddEvent = function() {
if (this.grid._addedNodes && this.grid._addedNodes.length > 0) {
this.container.trigger('added', [_.map(this.grid._addedNodes, _.clone)]);
this.grid._addedNodes = [];
}
};
GridStack.prototype._triggerRemoveEvent = function() {
if (this.grid._removedNodes && this.grid._removedNodes.length > 0) {
this.container.trigger('removed', [_.map(this.grid._removedNodes, _.clone)]);
this.grid._removedNodes = [];
}
};
GridStack.prototype._initStyles = function() {
if (this._stylesId) {
Utils.removeStylesheet(this._stylesId);
@ -778,7 +799,8 @@
this.opts.minWidth;
};
GridStack.prototype._prepareElement = function(el) {
GridStack.prototype._prepareElement = function(el, triggerAddEvent) {
triggerAddEvent = typeof triggerAddEvent != 'undefined' ? triggerAddEvent : false;
var self = this;
el = $(el);
@ -798,7 +820,7 @@
locked: Utils.toBool(el.attr('data-gs-locked')),
el: el,
id: el.attr('data-gs-id')
});
}, triggerAddEvent);
el.data('_gridstack_node', node);
var cellWidth;
@ -995,7 +1017,8 @@
if (typeof maxHeight != 'undefined') { el.attr('data-gs-max-height', maxHeight); }
if (typeof id != 'undefined') { el.attr('data-gs-id', id); }
this.container.append(el);
this._prepareElement(el);
this._prepareElement(el, true);
this._triggerAddEvent();
this._updateContainerHeight();
this._triggerChangeEvent(true);
@ -1004,7 +1027,8 @@
GridStack.prototype.makeWidget = function(el) {
el = $(el);
this._prepareElement(el);
this._prepareElement(el, true);
this._triggerAddEvent();
this._updateContainerHeight();
this._triggerChangeEvent(true);
@ -1033,6 +1057,7 @@
el.remove();
}
this._triggerChangeEvent(true);
this._triggerRemoveEvent();
};
GridStack.prototype.removeAll = function(detachNode) {