styling for input, toggle, color, select and button.

src/scripts/config-page.js

@@ -60,15 +60,9 @@ function processConfigItem(item, $parent) {
       processConfigItem(item, $parent);
     });
   } else if (item.type === 'section') {
-    processConfigItem(
-      item.items,
-      $parent.add(HTML('<div class="section">'))
-    );
-  } else if (item.type === 'block') {
-    processConfigItem(
-      item.items,
-      $parent.add(HTML('<div class="block">'))
-    );
+    var $container = HTML('<div class="section">');
+    $parent.add($container);
+    processConfigItem(item.items, $container);
   } else {
     console.debug('KEEGAN: itemType', item.type);
     var apiItem = {};
@@ -76,7 +70,8 @@ function processConfigItem(item, $parent) {
     var templateData = {
       label: '',
       options: [],
-      attributes: {}
+      attributes: {},
+      size: 4
     };
 
     console.debug('KEEGAN: templateData', templateData);

src/scripts/lib/items.js

@@ -2,7 +2,7 @@
 
 module.exports = {
   heading: require('./items/heading'),
-  subheading: require('./items/subheading'),
+  text: require('./items/text'),
   footer: require('./items/footer'),
   input: require('./items/input'),
   color: require('./items/color'),

src/scripts/lib/items/color.js

@@ -60,7 +60,7 @@ module.exports = {
         grid += '<i ' +
           'class="color-box ' + selectable + roundedTL + roundedTR + roundedBL +
               roundedBR + '" ' +
-          'data-value="' + color.replace(/^#/, '0x') + '" ' +
+          'data-value="' + color.replace(/^#/, '0x').toLowerCase() + '" ' +
           'style="' +
             'width:' + itemWidth + '%; ' +
             'height:' + itemHeight + '%; ' +
@@ -71,17 +71,24 @@ module.exports = {
 
     $elem.select('.color-box-container').add(HTML(grid));
 
-    var $injectedColor = $elem.select('.color-box-container')
-    var $valueDisplay = $injectedColor.select('.value');
+    var $valueDisplay = $elem.select('.value');
+    var $picker = $elem.select('.picker-wrap')
 
     $elem.on('click', function(ev) {
-      $elem.select('.color-box-wrap').set('show');
+      $picker.set('show');
     });
 
     self.on('change', function(ev) {
       var value = self.get().replace(/^0x/, '').toLowerCase();
       $valueDisplay.set('$background-color', '#' + value);
+      $elem.select('.color-box').set('-selected');
+      $elem.select('.color-box[data-value="0x' + value + '"]').set('+selected');
+    });
+
+    $elem.select('.color-box.selectable').on('click', function(ev) {
+      self.set(ev.target.dataset.value);
+      $picker.set('-show');
     });
 
   }
-}
+};

src/scripts/lib/items/select.js

@@ -2,5 +2,15 @@
 
 module.exports = {
   template: require('../../../templates/items/select.tpl'),
-  manipulator: require('../manipulators').val
+  manipulator: require('../manipulators').val,
+  initialize: function() {
+    var self = this;
+
+    var $value = self.$element.select('.value');
+
+    self.on('change', function(ev) {
+      var value = self.$manipulatorTarget.select('option:checked').get('innerHTML');
+      $value.set('innerHTML', value);
+    });
+  }
 };

src/scripts/lib/items/text.js

@@ -1,6 +1,6 @@
 'use strict';
 
 module.exports = {
-  template: require('../../../templates/items/subheading.tpl'),
+  template: require('../../../templates/items/text.tpl'),
   manipulator: require('../manipulators').html
 };