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

src/scripts/config-page.js

@@ -14,17 +14,18 @@
  * @property {Array} items
  */
 
-var mustache = require('mustache');
-var itemTypes = require('./lib/item-types');
-var $ = require('zepto-browserify').$;
+var itemTypes = require('./lib/items');
+var $ = require('./vendor/minified/minified').$;
+var _ = require('./vendor/minified/minified')._;
+var HTML = require('./vendor/minified/minified').HTML;
 
-var config = $.extend(true, [], window.clayConfig || []);
-var settings = $.extend(true, {}, window.claySettings || {});
+var config = _.extend([], window.clayConfig || []);
+var settings = _.extend({}, window.claySettings || {});
 var returnTo = window.returnTo || 'pebblejs://close#';
 var customFn = window.customFn;
 
 function submit(event) {
-  $.each(api.itemsByAppKey, function(appKey, item) {
+  _.each(api.itemsByAppKey, function(appKey, item) {
     settings[appKey] = item.get();
   });
   // Set the return URL depending on the runtime environment
@@ -47,8 +48,6 @@ function getSetting(key, defaultValue) {
 //   settings[key] = value;
 // }
 
-var index = 0;
-
 /**
  * @param {Clay~Item|Array} item
  * @param {$} $parent
@@ -63,29 +62,29 @@ function processConfigItem(item, $parent) {
   } else if (item.type === 'section') {
     processConfigItem(
       item.items,
-      $('<div class="item-container">').appendTo($parent)
+      $parent.add(HTML('<div class="section">'))
     );
   } else if (item.type === 'block') {
     processConfigItem(
       item.items,
-      $('<div class="item-container-content">').appendTo($parent)
+      $parent.add(HTML('<div class="block">'))
     );
   } else {
+    console.debug('KEEGAN: itemType', item.type);
     var apiItem = {};
     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(),
-          index: index++
-        };
-      })
-    });
+    var templateData = {
+      label: '',
+      options: [],
+      attributes: {}
+    };
 
-    apiItem.$element = $(mustache.render(itemType.template, templateData));
-    apiItem.$manipulatorTarget = apiItem.$element.find('[data-manipulator-target]');
+    console.debug('KEEGAN: templateData', templateData);
+
+    _.extend(templateData, item);
+    apiItem.$element = HTML(_.formatHtml(itemType.template, templateData));
+    apiItem.$manipulatorTarget =
+      apiItem.$element.select('[data-manipulator-target]');
 
     // this caters for situations where the manipulator target is the root element
     if (!apiItem.$manipulatorTarget.length) {
@@ -93,26 +92,44 @@ function processConfigItem(item, $parent) {
     }
 
     // proxy event related methods
+    var eventProxies = {};
     apiItem.on = function(events, handler) {
-      return apiItem.$manipulatorTarget.on(events, $.proxy(handler, apiItem));
+      eventProxies[handler] = function(event) {
+        handler.call(apiItem, event);
+      };
+      return apiItem.$manipulatorTarget.on(events, eventProxies[handler]);
     };
     apiItem.one = function(events, handler) {
-      return apiItem.$manipulatorTarget.one(events, $.proxy(handler, apiItem));
+      eventProxies[handler] = function(event) {
+        handler.call(apiItem, event);
+        $.off(eventProxies[handler]);
+      };
+      return apiItem.$manipulatorTarget.on(events, eventProxies[handler]);
     };
-    apiItem.off = apiItem.$manipulatorTarget.off.bind(apiItem.$manipulatorTarget);
-    apiItem.triggerHandler =
-      apiItem.$manipulatorTarget.triggerHandler.bind(apiItem.$manipulatorTarget);
+    apiItem.off = function(handler) {
+      return $.off(eventProxies[handler]);
+    };
+
+    apiItem.trigger =
+      apiItem.$manipulatorTarget.trigger.bind(apiItem.$manipulatorTarget);
 
     // attach the manipulator methods to the apiItem
-    $.each(itemType.manipulator, function(methodName, method) {
+    _.eachObj(itemType.manipulator, function(methodName, method) {
       apiItem[methodName] = method.bind(apiItem);
     });
 
+    apiItem.config = item;
+
+    // attach the initialize method to the API.
+    apiItem.iniialize = typeof itemType.initialize === 'function' ?
+      itemType.initialize :
+      function() {};
+    apiItem.iniialize.bind(apiItem);
+    apiItem.iniialize();
+
     // set the value of the item via the manipulator to ensure consistency
     apiItem.set(getSetting(item.app_key, item.value));
 
-    apiItem.config = item;
-
     if (item.id) {
       api.itemsById[item.id] = apiItem;
     }
@@ -123,7 +140,7 @@ function processConfigItem(item, $parent) {
 
     api.items.push(apiItem);
 
-    $parent.append(apiItem.$element);
+    $parent.add(apiItem.$element);
   }
 }
 

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');
     }
   }
 };