Feature/54/add remove events

README.md

@@ -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)
 

dist/gridstack.js

@@ -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) {