Merge pull request #22 from elsemieni/master

Added remove methods for UI elements and containers.

README.md

@@ -127,4 +127,19 @@ As you can see, there are three events you can listen to: onOK, onToggle and onK
 * onToggle gets dispatched when the virtual keyboard opens or closes. A boolean parameter is provided telling whether the keyboard is opened (true) or closed (false)
 * onKeyPress gets dispatched whenever the user enters a key in the virtual keyboard. Note that the DEL key gets spelled out entirely in when accessing the key in the first parameter.
 
+#### Remove an element from a panel
+You can remove any element from a panel if you need to clean it up.
+```javascript
+panel.remove(button);
+panel.remove(cb);
+panel.remove(slider);
+```
+This will remove and destroy the element from the panel.
+
+#### Destroy the panel
+If you don't need a panel anymore, you can destroy it.
+```javascript
+panel.destroy();
+```
+
 [Default Kenney theme]: <http://slick-ui.com/kenney-theme.zip>

src/Container/Container.js

@@ -53,4 +53,51 @@ SlickUI.Container.Container.prototype.add = function(element) {
     this.children.push(element);
 
     return element; // Allows chaining
-};
+};
+
+/**
+ * Removes an element from the container
+ *
+ * @param element
+ * @returns SlickUI.Container.Container
+ */
+SlickUI.Container.Container.prototype.remove = function(element) {
+    element.unsetContainer();
+
+    var index = this.children.indexOf(element);
+    if (index > -1) {
+        this.children.splice(index, 1);
+    }
+
+    element.destroy();
+};
+
+/**
+ * Removes the parent reference from the container
+ */
+SlickUI.Container.Container.prototype.removeParent = function() {
+
+    if (this.parent) {
+        this.parent.displayGroup.remove(this.displayGroup);
+    } else {
+        //Only remove if root is defined (has a parent?)
+        if (this.root) {
+            this.root.game.world.remove(this.displayGroup);
+        }
+    }
+
+    this.root = undefined;
+    this.parent = undefined;
+
+};
+
+/**
+ * Destroys the container
+ */
+SlickUI.Container.Container.prototype.destroy = function() {
+
+    this.removeParent();
+    this.displayGroup.destroy();
+
+};
+

src/Element/Button.js

@@ -30,6 +30,13 @@ SlickUI.Element.Button.prototype.setContainer = function (container) {
     this.container = new SlickUI.Container.Container(container);
 };
 
+/**
+ * Removes parent reference for the current element.
+ */
+SlickUI.Element.Button.prototype.unsetContainer = function() {
+    this.container.removeParent();
+};
+
 /**
  * Initialisation slices the button's sprite up according to the
  * theme settings and adds it to the container.
@@ -89,6 +96,12 @@ SlickUI.Element.Button.prototype.add = function (element) {
     return this.container.add(element);
 };
 
+/**
+ * Destroys the current button
+ */
+SlickUI.Element.Button.prototype.destroy = function () {
+    this.container.destroy();
+};
 
 /* ------------------------------- */
 

src/Element/Checkbox.js

@@ -37,6 +37,13 @@ SlickUI.Element.Checkbox.prototype.setContainer = function (container) {
     this.container = container;
 };
 
+/**
+ * Removes parent reference for the current element.
+ */
+SlickUI.Element.Checkbox.prototype.unsetContainer = function() {
+    this.container.removeParent();
+};
+
 /**
  * Initializer
  */
@@ -74,6 +81,12 @@ SlickUI.Element.Checkbox.prototype.init = function() {
     }, this);
 };
 
+/**
+ * Destroys the current checkbox
+ */
+SlickUI.Element.Checkbox.prototype.destroy = function () {
+    this.container.destroy();
+};
 
 /* ------------------------------- */
 

src/Element/DisplayObject.js

@@ -40,6 +40,13 @@ SlickUI.Element.DisplayObject.prototype.setContainer = function (container) {
     }
 };
 
+/**
+ * Removes parent reference for the current element.
+ */
+SlickUI.Element.DisplayObject.prototype.unsetContainer = function() {
+    this.container.removeParent();
+};
+
 /**
  * Initializer
  */
@@ -73,6 +80,12 @@ SlickUI.Element.DisplayObject.prototype.add = function (element) {
     return this.container.add(element);
 };
 
+/**
+ * Destroys the current DisplayObject
+ */
+SlickUI.Element.DisplayObject.prototype.destroy = function () {
+    this.container.destroy();
+};
 
 /* ------------------------------- */
 

src/Element/Panel.js

@@ -30,6 +30,13 @@ SlickUI.Element.Panel.prototype.setContainer = function (container) {
     this.container = new SlickUI.Container.Container(container);
 };
 
+/**
+ * Removes parent reference for the current element.
+ */
+SlickUI.Element.Panel.prototype.unsetContainer = function() {
+    this.container.removeParent();
+};
+
 /**
  * Initialisation slices the panel's sprite up according to the
  * theme settings and adds it to the container.
@@ -66,6 +73,15 @@ SlickUI.Element.Panel.prototype.add = function (element) {
     return this.container.add(element);
 };
 
+/**
+ * Removes an element from the container
+ *
+ * @param element
+ */
+SlickUI.Element.Panel.prototype.remove = function(element) {
+    this.container.remove(element);
+};
+
 /**
  * Destroys the panel, removing from world.
  */

src/Element/Slider.js

@@ -35,6 +35,13 @@ SlickUI.Element.Slider.prototype.setContainer = function (container) {
     this.container = container;
 };
 
+/**
+ * Removes parent reference for the current element.
+ */
+SlickUI.Element.Slider.prototype.unsetContainer = function() {
+    this.container.removeParent();
+};
+
 /**
  * Adds the slider and makes it interactable
  */
@@ -107,6 +114,12 @@ SlickUI.Element.Slider.prototype.init = function() {
     this.container.displayGroup.add(this.displayGroup);
 };
 
+/**
+ * Destroys the current slider
+ */
+SlickUI.Element.Slider.prototype.destroy = function () {
+    this.container.destroy();
+};
 
 /* ------------------------------- */
 

src/Element/Text.js

@@ -43,6 +43,13 @@ SlickUI.Element.Text.prototype.setContainer = function (container) {
     }
 };
 
+/**
+ * Removes parent reference for the current element.
+ */
+SlickUI.Element.Text.prototype.unsetContainer = function() {
+    this.container.removeParent();
+};
+
 /**
  * Bitmap text objects don't work too well when moved around;
  * that's why we destroy it and re-create it.
@@ -117,6 +124,13 @@ SlickUI.Element.Text.prototype.center = function() {
     return this;
 };
 
+/**
+ * Destroys the current text
+ */
+SlickUI.Element.Text.prototype.destroy = function () {
+    this.container.destroy();
+};
+
 
 /* ------------------------------- */
 

src/Element/TextField.js

@@ -43,6 +43,13 @@ SlickUI.Element.TextField.prototype.setContainer = function (container) {
     this.container = new SlickUI.Container.Container(container);
 };
 
+/**
+ * Removes parent reference for the current element.
+ */
+SlickUI.Element.TextField.prototype.unsetContainer = function() {
+    this.container.removeParent();
+};
+
 /**
  * Initialisation slices the button's sprite up according to the
  * theme settings and adds it to the container.
@@ -134,6 +141,12 @@ SlickUI.Element.TextField.prototype.add = function (element) {
     return this.container.add(element);
 };
 
+/**
+ * Destroys the current text field
+ */
+SlickUI.Element.TextField.prototype.destroy = function () {
+    this.container.destroy();
+};
 
 /* ------------------------------- */