[Widgets] Force ButtonGroup in Footer horizontal

src/js/widgets.js

@@ -614,17 +614,14 @@ var BWidgetRegistry = {
      * Represents a Control Group object. Includes an "data-type" property
      * that should be "vertical" or "horizontal"
      */
-    ButtonGroup: {
+    ControlGroup: {
         parent: "Base",
         dragHeader: true,
-        paletteImageName: "jqm_button_group.svg",
         template: '<div data-role="controlgroup"></div>',
-        displayLabel: "Button Group",
         zones: [
             {
                 name: "default",
                 cardinality: "N",
-                allow: "Button"
             }
         ],
         properties: {
@@ -639,10 +636,41 @@ var BWidgetRegistry = {
         },
         init: function (node) {
             // initial state is three buttons
-            var i;
+            var i, childType;
+            childType = BWidget.getZone(node.getType(), "default").allow;
+            if ($.isArray(childType))
+                childType = childType[0];
             for (i = 0; i < 3; i++) {
-                node.addChild(new ADMNode("Button"));
+                node.addChild(new ADMNode(childType));
+            }
+        }
+    },
+
+    /**
+     * Represents a group of buttons
+     */
+    ButtonGroup: {
+        parent: "ControlGroup",
+        paletteImageName: "jqm_button_group.svg",
+        displayLabel: "Button Group",
+        properties: {
+            orientation: {
+                invalidIn: "Footer"
+            }
+        },
+        zones: [
+            {
+                name: "default",
+                allow: "Button"
             }
+        ],
+        template: function (node) {
+            if (node.getParent().instanceOf("Footer"))
+                return $('<div data-role="controlgroup" data-type="horizontal"></div>');
+            else return $(BWidgetRegistry.ControlGroup.template);
+        },
+        init: function (node) {
+            BWidgetRegistry.ControlGroup.init(node);
         }
     },
 
@@ -1163,8 +1191,7 @@ var BWidgetRegistry = {
      * Represents a Radio Group object.
      */
     RadioGroup: {
-        parent: "ButtonGroup",
-        dragHeader: true,
+        parent: "ControlGroup",
         displayLabel: "Radio Group",
         paletteImageName: "jqm_radio_group.svg",
         properties: {
@@ -1186,7 +1213,6 @@ var BWidgetRegistry = {
         zones: [
             {
                 name: "default",
-                cardinality: "N",
                 allow: "RadioButton"
             }
         ],
@@ -1277,8 +1303,7 @@ var BWidgetRegistry = {
      * Represents a Checkbox Group object.
      */
     CheckboxGroup: {
-        parent: "ButtonGroup",
-        dragHeader: true,
+        parent: "ControlGroup",
         displayLabel: "Checkbox Group",
         paletteImageName: "jqm_checkbox_group.svg",
         properties: {
@@ -1300,18 +1325,10 @@ var BWidgetRegistry = {
         zones: [
             {
                 name: "default",
-                cardinality: "N",
                 allow: "Checkbox"
             }
         ],
         template: '<fieldset data-role="controlgroup"><legend>%LEGEND%</legend></fieldset>',
-        init: function (node) {
-            // initial state is three checkboxes
-            var i;
-            for (i = 0; i < 3; i++) {
-                node.addChild(new ADMNode("Checkbox"));
-            }
-        }
     },
 
     /**