Column and Row's addNode() method now accepts vertical and horizontal…

… padding

src/containers/column.js

@@ -5,7 +5,9 @@ uiWidgets = uiWidgets || {};
  * Frame that places new child nodes directly under the previous child.
  * @constructor
  * @param {Object} game - Current game instance.
- * @param {Object} context - The context this object is called in.
+ * @param {Number} x - The x position of the Frame.
+ * @param {Number} y - The y position of the Frame.
+ * @param {string} bg - The background image to use.
  */
 uiWidgets.Column = function (game, x, y, bg) {
     "use strict";
@@ -15,25 +17,4 @@ uiWidgets.Column = function (game, x, y, bg) {
 uiWidgets.Column.prototype = Object.create(uiWidgets.Frame.prototype);
 uiWidgets.Column.constructor = uiWidgets.Column;
 
-/** Adds a new object into the Column, then aligns it under the previous object.
- * @param {Object} node - The sprite to add to the Column.
- * @param {Number} alignment - The alignment relative to the previous child.
- * @param {Number} padding - The amount of space between objects.
- */
-uiWidgets.Column.prototype.addNode = function (node, alignment, padding) {
-    "use strict";
-    alignment = alignment || Phaser.BOTTOM_CENTER;
-    padding = padding || 0;
-
-    this.add(node);
-    var previousNode = this.children[this.children.length - 2];
-
-    if (previousNode !== undefined) {
-        node.alignTo(previousNode, alignment, 0, padding);
-    }
-
-    // Reset the positions for the bar's draggable area.
-    if ("enableBarDrag" in node) {
-        node.enableBarDrag();
-    }
-};
+uiWidgets.Column.prototype.alignment = Phaser.BOTTOM_CENTER;

src/containers/frame.js

@@ -6,7 +6,8 @@ uiWidgets = uiWidgets || {};
  * Children added to the group will always be above the background image.
  * @constructor
  * @param {Object} game - Current game instance.
- * @param {Object} context - The context this object is called in.
+ * @param {Number} x - The x position of the Frame.
+ * @param {Number} y - The y position of the Frame.
  * @param {string} bg - The background image to use.
  */
 uiWidgets.Frame = function (game, x, y, bg) {
@@ -31,16 +32,27 @@ uiWidgets.Frame = function (game, x, y, bg) {
 uiWidgets.Frame.prototype = Object.create(Phaser.Group.prototype);
 uiWidgets.Frame.constructor = uiWidgets.Frame;
 
-/** Adds a new object to the Frame.
- * @param {Object} node - The sprite to add to the Frame.
+/** Adds a new object into the Column, then aligns it under the previous object.
+ * @param {Object} node - The sprite to add to the Column.
+ * @param {Number} alignment - The alignment relative to the previous child.
+ * @param {Number} padding_x - The amount of horizontal space between objects.
+ * @param {Number} padding_y - The amount of vertical space between objects.
  */
-uiWidgets.Frame.prototype.addNode = function (node) {
+uiWidgets.Frame.prototype.addNode = function (node, alignment, padding_x, padding_y) {
     "use strict";
+    alignment = alignment || this.alignment;
+    padding_x = padding_x || 0;
+    padding_y = padding_y || 0;
+
     this.add(node);
+    var previousNode = this.children[this.children.length - 2];
+
+    if (previousNode !== undefined) {
+        node.alignTo(previousNode, alignment, padding_x, padding_y);
+    }
 
     // Reset the positions for the bar's draggable area.
     if ("enableBarDrag" in node) {
         node.enableBarDrag();
     }
-
 };

src/containers/row.js

@@ -5,7 +5,9 @@ uiWidgets = uiWidgets || {};
  * Frame that places new child nodes directly next to the previous child.
  * @constructor
  * @param {Object} game - Current game instance.
- * @param {Object} context - The context this object is called in.
+ * @param {Number} x - The x position of the Frame.
+ * @param {Number} y - The y position of the Frame.
+ * @param {string} bg - The background image to use.
  */
 uiWidgets.Row = function (game, x, y, bg) {
     "use strict";
@@ -15,25 +17,4 @@ uiWidgets.Row = function (game, x, y, bg) {
 uiWidgets.Row.prototype = Object.create(uiWidgets.Frame.prototype);
 uiWidgets.Row.constructor = uiWidgets.Row;
 
-/** Adds a new object into the Row, then aligns it next to the previous object.
- * @param {Object} node - The sprite to add to the row.
- * @param {Number} alignment - The alignment relative to the previous child.
- * @param {Number} padding - The amount of space between objects.
- */
-uiWidgets.Row.prototype.addNode = function (node, alignment, padding) {
-    "use strict";
-    alignment = alignment || Phaser.RIGHT_CENTER;
-    padding = padding || 0;
-
-    this.add(node);
-    var previousNode = this.children[this.children.length - 2];
-
-    if (previousNode !== undefined) {
-        node.alignTo(previousNode, alignment, padding);
-    }
-
-    // Reset the positions for the bar's draggable area.
-    if ("enableBarDrag" in node) {
-        node.enableBarDrag();
-    }
-};
+uiWidgets.Row.prototype.alignment = Phaser.RIGHT_CENTER;

tests/column.spec.js

@@ -19,7 +19,7 @@ describe("Column", function(){
             var dummySprite2 = game.add.sprite(0, 0, "dummySprite");
             column = new uiWidgets.Column(game);
             column.addNode(dummySprite);
-            column.addNode(dummySprite2, null, 23);
+            column.addNode(dummySprite2, null, 0, 23);
 
             chai.expect(column.children[1].y).to.equal(101);
         });

tests/row.spec.js

@@ -19,7 +19,7 @@ describe("Row", function(){
             var dummySprite2 = game.add.sprite(0, 0, "dummySprite");
             row = new uiWidgets.Row(game);
             row.addNode(dummySprite);
-            row.addNode(dummySprite2, null, 17);
+            row.addNode(dummySprite2, null, 17, 0);
 
             chai.expect(row.children[1].x).to.equal(317);
         });