Add a destroy method

README.md

@@ -122,6 +122,7 @@ Your manager has the following signature :
     on: Function,
     off: Function,
     get: Function, // get a specific joystick
+    destroy: Function,
     options: {
         zone: Element,
         multitouch: Boolean,
@@ -143,15 +144,17 @@ manager.on('event#1 event#2', function (evt, data) {
 Note that you can listen to multiple events at once by separating
 them either with a space or a comma (or both, I don't care).
 
-#### `manager.off(type [, handler])`
+#### `manager.off([type, handler])`
 
 To remove an event handler :
 
 ```javascript
 manager.off('event', handler);
 ```
 
-If you don't specify the handler, all handlers for that type will be removed.
+If you call off without arguments, all handlers will be removed.
+
+If you don't specify the handler but just a type, all handlers for that type will be removed.
 
 #### `manager.get(identifier)`
 
@@ -162,6 +165,14 @@ An helper to get an instance via its identifier.
 manager.get(0);
 ```
 
+#### `manager.destroy()`
+
+Gently remove all nipples from the DOM and unbind all events.
+
+```javascript
+manager.destroy();
+```
+
 ### nipple instance (joystick)
 
 Each joystick has the following signature :
@@ -175,6 +186,7 @@ Each joystick has the following signature :
     hide: Function,         // fade-out
     add: Function,          // inject into dom
     remove: Function,       // remove from dom
+    destroy: Function,
     identifier: Number,
     trigger: Function,
     position: {             // position of the center
@@ -238,6 +250,10 @@ Add the joystick's element to the dom.
 
 Remove the joystick's element from the dom.
 
+### `joystick.destroy()`
+
+Gently remove this nipple from the DOM and unbind all related events.
+
 ### `joystick.identifier`
 
 Returns the unique identifier of the joystick.
@@ -412,6 +428,12 @@ Is triggered at the end of the fade-out animation.
 
 Will pass the instance alongside the event.
 
+#### `destroyed`
+
+Is trigger at the end of destroy.
+
+Will pass the instance alongside the event.
+
 ----
 ## Contributing
 Your help is more than welcome, I would be very honored to have you on my side.

src/manager.js

@@ -7,10 +7,12 @@ var Manager = function (options) {
     self.config(options);
     self.nipples = [];
     self.bindEvt(self.options.zone, 'start');
+    self.on('destroyed', this.ondestroyed);
 
     self.nipples.on = self.on.bind(self);
     self.nipples.off = self.off.bind(self);
     self.nipples.options = self.options;
+    self.nipples.destroy = self.destroy.bind(self);
     self.nipples.get = function (id) {
         for (var i = 0, max = self.nipples.length; i < max; i += 1) {
             if (self.nipples[i].identifier === id) {
@@ -270,3 +272,22 @@ Manager.prototype.processOnEnd = function (evt) {
     var index = self.nipples.indexOf(nipple);
     self.nipples.splice(index, 1);
 };
+
+// Remove destroyed nipple from the list
+Manager.prototype.ondestroyed = function(evt, nipple) {
+    nipple = this.nipples.get(nipple.identifier);
+    if (nipple) {
+        this.nipples.splice(this.nipples.indexOf(nipple), 1);
+    }
+};
+
+// Cleanly destroy the manager
+Manager.prototype.destroy = function () {
+    this.unbindEvt(this.options.zone, 'start');
+    this.unbindEvt(document, 'move');
+    this.unbindEvt(document, 'end');
+    this.nipples.forEach(function(nipple) {
+        nipple.destroy();
+    });
+    this.off();
+};

src/nipple.js

@@ -20,6 +20,7 @@ var Nipple = function (manager, options) {
         hide: this.hide.bind(this),
         add: this.addToDom.bind(this),
         remove: this.removeFromDom.bind(this),
+        destroy: this.destroy.bind(this),
         computeDirection: this.computeDirection.bind(this),
         trigger: this.trigger.bind(this),
         position: this.position,
@@ -136,6 +137,16 @@ Nipple.prototype.removeFromDom = function () {
     return this;
 };
 
+// Entirely destroy this nipple
+Nipple.prototype.destroy = function () {
+    clearTimeout(this.removeTimeout);
+    clearTimeout(this.showTimeout);
+    this.off();
+    this.removeFromDom();
+    this.trigger('destroyed', this);
+    this.manager.trigger('destroyed ' + this.identifier + ':destroyed', this);
+};
+
 // Fade in the Nipple instance.
 Nipple.prototype.show = function (cb) {
     var self = this;

src/super.js

@@ -22,8 +22,10 @@ Super.prototype.on = function (arg, cb) {
 
 Super.prototype.off = function (type, cb) {
     var self = this;
-    if (cb === undefined) {
-        self.handlers[type] = [];
+    if (type === undefined) {
+        self.handlers = {};
+    } else if (cb === undefined) {
+        self.handlers[type] = null;
     } else if (self.handlers[type] && self.handlers[type].indexOf(cb) >= 0) {
         self.handlers[type].splice(self.handlers[type].indexOf(cb), 1);
     }