WIP

src/scripts/config-page.js

@@ -10,8 +10,8 @@
  * @property {string|boolean} default
  * @property {string} label
  * @property {object} attributes
- * @property {array} options
- * @property {array} items
+ * @property {Array} options
+ * @property {Array} items
  */
 
 var mustache = require('mustache');
@@ -47,8 +47,10 @@ function getSetting(key, defaultValue) {
 //   settings[key] = value;
 // }
 
+var index = 0;
+
 /**
- * @param {Clay~Item} item
+ * @param {Clay~Item|Array} item
  * @param {$} $parent
  */
 function processConfigItem(item, $parent) {
@@ -73,9 +75,11 @@ function processConfigItem(item, $parent) {
     var itemType = itemTypes[item.type];
     var templateData = $.extend({}, item, {
       attributes: $.map(item.attributes || [], function(item, key) {
+        console.log(index);
         return {
           key: key,
-          value: item.toString()
+          value: item.toString(),
+          index: index++
         };
       })
     });
@@ -145,7 +149,7 @@ api.getItemsByType = function(type) {
   });
 };
 
-processConfigItem(config, $mainForm, 0);
+processConfigItem(config, $mainForm);
 $mainForm.on('submit', submit);
 
 module.exports = api;

src/scripts/lib/item-types.js

@@ -31,6 +31,10 @@ module.exports = {
     template: require('../../templates/components/toggle.mustache'),
     manipulator: manipulators.checked
   },
+  radiogroup: {
+    template: require('../../templates/components/radiogroup.mustache'),
+    manipulator: manipulators.radiogroup
+  },
   submit: {
     template: require('../../templates/components/submit.mustache'),
     manipulator: manipulators.val

src/scripts/lib/manipulators.js

@@ -43,5 +43,23 @@ module.exports = {
       return this.$manipulatorTarget.prop('disabled', false)
         .triggerHandler('change');
     }
+  },
+  radiogroup: {
+    get: function() {
+      return this.$manipulatorTarget.find('input:checked').val();
+    },
+    set: function(value) {
+      this.$manipulatorTarget.find('[value="' + value + '"]')
+        .prop('checked', true);
+      return this.$manipulatorTarget.triggerHandler('change');
+    },
+    disable: function() {
+      return this.$manipulatorTarget.prop('disabled', true)
+        .triggerHandler('change');
+    },
+    enable: function() {
+      return this.$manipulatorTarget.prop('disabled', false)
+        .triggerHandler('change');
+    }
   }
 };