threw out slate, mustache and zepto. replaced with minified.js

src/scripts/lib/item-types.js

@@ -1,42 +0,0 @@
-'use strict';
-
-var manipulators = require('./manipulators');
-
-module.exports = {
-  heading: {
-    template: require('../../templates/components/heading.mustache'),
-    manipulator: manipulators.html
-  },
-  subheading: {
-    template: require('../../templates/components/subheading.mustache'),
-    manipulator: manipulators.html
-  },
-  footer: {
-    template: require('../../templates/components/footer.mustache'),
-    manipulator: manipulators.html
-  },
-  input: {
-    template: require('../../templates/components/input.mustache'),
-    manipulator: manipulators.val
-  },
-  color: {
-    template: require('../../templates/components/color.mustache'),
-    manipulator: manipulators.val
-  },
-  select: {
-    template: require('../../templates/components/select.mustache'),
-    manipulator: manipulators.val
-  },
-  toggle: {
-    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/items.js

@@ -0,0 +1,13 @@
+'use strict';
+
+module.exports = {
+  heading: require('./items/heading'),
+  subheading: require('./items/subheading'),
+  footer: require('./items/footer'),
+  input: require('./items/input'),
+  color: require('./items/color'),
+  select: require('./items/select'),
+  toggle: require('./items/toggle'),
+  radiogroup: require('./items/radiogroup'),
+  submit: require('./items/submit')
+};

src/scripts/lib/items/color.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var HTML = require('../../vendor/minified/minified').HTML;
+
+module.exports = {
+  template: require('../../../templates/items/color.tpl'),
+  manipulator: require('../manipulators').val,
+  initialize: function() {
+    var self = this;
+    console.debug('KEEGAN: initializer', self);
+
+    /* eslint-disable  comma-spacing, no-multi-spaces, max-len,
+        standard/array-bracket-even-spacing */
+    var layout = self.config.layout || [
+      [false    , false    , '#55FF00', '#AAFF55', false    , '#FFFF55', '#FFFFAA', false    , false    ],
+      [false    , '#AAFFAA', '#55FF55', '#00FF00', '#AAFF00', '#FFFF00', '#FFAA55', '#FFAAAA', false    ],
+      ['#55FFAA', '#00FF55', '#00AA00', '#55AA00', '#AAAA55', '#AAAA00', '#FFAA00', '#FF5500', '#FF5555'],
+      ['#AAFFFF', '#00FFAA', '#00AA55', '#55AA55', '#005500', '#555500', '#AA5500', '#FF0000', '#FF0055'],
+      [false    , '#55AAAA', '#00AAAA', '#005555', '#FFFFFF', '#000000', '#AA5555', '#AA0000', false    ],
+      ['#55FFFF', '#00FFFF', '#00AAFF', '#0055AA', '#AAAAAA', '#555555', '#550000', '#AA0055', '#FF55AA'],
+      ['#55AAFF', '#0055FF', '#0000FF', '#0000AA', '#000055', '#550055', '#AA00AA', '#FF00AA', '#FFAAFF'],
+      [false    , '#5555AA', '#5555FF', '#5500FF', '#5500AA', '#AA00FF', '#FF00FF', '#FF55FF', false    ],
+      [false    , false    , false    , '#AAAAFF', '#AA55FF', '#AA55AA', false    , false    , false    ]
+    ];
+    /* eslint-enable */
+
+    var grid = '';
+    var itemWidth = 100 / layout[0].length;
+    var itemHeight = 100 / layout.length;
+    var boxHeight = itemWidth * layout.length;
+    var $elem = self.$element;
+
+    for (var i = 0; i < layout.length; i++) {
+      for (var j = 0; j < layout[i].length; j++) {
+
+        var color = layout[i][j] || 'transparent';
+        var selectable = (color !== 'transparent' ? ' selectable' : '');
+
+        var roundedTL = (i === 0 && j === 0) || i === 0 && !layout[i][j - 1] ||
+                        !layout[i][j - 1] && !layout[i - 1][j] ?
+          ' rounded-tl' :
+          '';
+
+        var roundedTR = i === 0 && !layout[i][j + 1] ||
+                        !layout[i][j + 1] && !layout[i - 1][j] ?
+          ' rounded-tr ' :
+          '';
+
+        var roundedBL = (i === layout.length - 1 && j === 0) ||
+                        i === layout.length - 1 && !layout[i][j - 1] ||
+                        !layout[i][j - 1] && !layout[i + 1][j] ?
+          ' rounded-bl' :
+          '';
+
+        var roundedBR = i === layout.length - 1 && !layout[i][j + 1] ||
+                        !layout[i][j + 1] && !layout[i + 1][j] ?
+          ' rounded-br' :
+          '';
+
+        grid += '<i ' +
+          'class="color-box ' + selectable + roundedTL + roundedTR + roundedBL +
+              roundedBR + '" ' +
+          'data-value="' + color.replace(/^#/, '0x') + '" ' +
+          'style="' +
+            'width:' + itemWidth + '%; ' +
+            'height:' + itemHeight + '%; ' +
+            'background:' + color + ';">' +
+        '</i>';
+      }
+    }
+
+    $elem.select('.color-box-container').add(HTML(grid));
+
+    var $injectedColor = $elem.select('.color-box-container')
+    var $valueDisplay = $injectedColor.select('.value');
+
+    $elem.on('click', function(ev) {
+      $elem.select('.color-box-wrap').set('show');
+    });
+
+    self.on('change', function(ev) {
+      var value = self.get().replace(/^0x/, '').toLowerCase();
+      $valueDisplay.set('$background-color', '#' + value);
+    });
+
+  }
+}

src/scripts/lib/items/footer.js

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

src/scripts/lib/items/heading.js

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

src/scripts/lib/items/input.js

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

src/scripts/lib/items/radiogroup.js

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

src/scripts/lib/items/select.js

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

src/scripts/lib/items/subheading.js

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

src/scripts/lib/items/submit.js

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

src/scripts/lib/items/toggle.js

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

src/scripts/lib/manipulators.js

@@ -3,45 +3,45 @@
 module.exports = {
   html: {
     get: function() {
-      return this.$manipulatorTarget.html();
+      return this.$manipulatorTarget.get('innerHTML');
     },
     set: function(value) {
-      return this.$manipulatorTarget.html(value)
-        .triggerHandler('change');
+      return this.$manipulatorTarget.set('innerHTML', value)
+        .trigger('change');
     }
   },
   val: {
     get: function() {
-      return this.$manipulatorTarget.val();
+      return this.$manipulatorTarget.get('value');
     },
     set: function(value) {
-      return this.$manipulatorTarget.val(value)
-        .triggerHandler('change');
+      return this.$manipulatorTarget.set('value', value)
+        .trigger('change');
     },
     disable: function() {
-      return this.$manipulatorTarget.prop('disabled', true)
-        .triggerHandler('change');
+      return this.$manipulatorTarget.set('disabled', true)
+        .trigger('change');
     },
     enable: function() {
-      return this.$manipulatorTarget.prop('disabled', false)
-        .triggerHandler('change');
+      return this.$manipulatorTarget.set('disabled', false)
+        .trigger('change');
     }
   },
   checked: {
     get: function() {
-      return this.$manipulatorTarget.prop('checked');
+      return this.$manipulatorTarget.get('checked');
     },
     set: function(value) {
-      return this.$manipulatorTarget.prop('checked', value)
-        .triggerHandler('change');
+      return this.$manipulatorTarget.set('checked', value)
+        .trigger('change');
     },
     disable: function() {
-      return this.$manipulatorTarget.prop('disabled', true)
-        .triggerHandler('change');
+      return this.$manipulatorTarget.set('disabled', true)
+        .trigger('change');
     },
     enable: function() {
-      return this.$manipulatorTarget.prop('disabled', false)
-        .triggerHandler('change');
+      return this.$manipulatorTarget.set('disabled', false)
+        .trigger('change');
     }
   },
   radiogroup: {
@@ -51,15 +51,15 @@ module.exports = {
     set: function(value) {
       this.$manipulatorTarget.find('[value="' + value + '"]')
         .prop('checked', true);
-      return this.$manipulatorTarget.triggerHandler('change');
+      return this.$manipulatorTarget.trigger('change');
     },
     disable: function() {
-      return this.$manipulatorTarget.prop('disabled', true)
-        .triggerHandler('change');
+      return this.$manipulatorTarget.set('disabled', true)
+        .trigger('change');
     },
     enable: function() {
-      return this.$manipulatorTarget.prop('disabled', false)
-        .triggerHandler('change');
+      return this.$manipulatorTarget.set('disabled', false)
+        .trigger('change');
     }
   }
 };