refactor components to be in a registry.

src/scripts/components/color.js

@@ -1,10 +1,11 @@
 'use strict';
 
-var HTML = require('../../vendor/minified/minified').HTML;
+var HTML = require('../vendor/minified/minified').HTML;
 
 module.exports = {
-  template: require('../../../templates/items/color.tpl'),
+  name: 'color',
-  manipulator: require('../manipulators').val,
+  template: require('../../templates/items/color.tpl'),
+  manipulator: require('../lib/manipulators').val,
   defaults: {
     label: ''
   },
@@ -82,7 +83,7 @@ module.exports = {
       }
     });
 
-    self.on('|change', function() {
+    self.on('change', function() {
       var value = self.get().replace(/^0x/, '').toLowerCase();
       $valueDisplay.set('$background-color', '#' + value);
       $elem.select('.color-box').set('-selected');

src/scripts/components/footer.js

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

src/scripts/components/heading.js

@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = {
+  name: 'heading',
+  template: require('../../templates/items/heading.tpl'),
+  manipulator: require('../lib/manipulators').html,
+  defaults: {
+    attributes: {},
+    size: 4
+  }
+};

src/scripts/components/input.js

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

src/scripts/components/radiogroup.js

@@ -0,0 +1,11 @@
+'use strict';
+
+module.exports = {
+  name: 'radiogroup',
+  template: require('../../templates/items/radiogroup.tpl'),
+  manipulator: require('../lib/manipulators').radiogroup,
+  defaults: {
+    label: '',
+    options: []
+  }
+};

src/scripts/components/select.js

@@ -1,8 +1,9 @@
 'use strict';
 
 module.exports = {
-  template: require('../../../templates/items/select.tpl'),
+  name: 'select',
-  manipulator: require('../manipulators').val,
+  template: require('../../templates/items/select.tpl'),
+  manipulator: require('../lib/manipulators').val,
   defaults: {
     label: '',
     options: []

src/scripts/components/submit.js

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

src/scripts/components/text.js

@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = {
+  name: 'text',
+  template: require('../../templates/items/text.tpl'),
+  manipulator: require('../lib/manipulators').html,
+  defaults: {
+    attributes: {}
+  }
+};

src/scripts/components/toggle.js

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

src/scripts/config-page.js

@@ -13,14 +13,24 @@ var $mainForm = $('#main-form');
 var clayConfig = new ClayConfig(settings, config, $mainForm);
 
 clayConfig.on(clayConfig.EVENTS.BEFORE_BUILD, function() {
-  // attach components here
+
+  // register components here
+  this.registerComponent(require('./components/heading'));
+  this.registerComponent(require('./components/text'));
+  this.registerComponent(require('./components/footer'));
+  this.registerComponent(require('./components/input'));
+  this.registerComponent(require('./components/color'));
+  this.registerComponent(require('./components/select'));
+  this.registerComponent(require('./components/toggle'));
+  this.registerComponent(require('./components/radiogroup'));
+  this.registerComponent(require('./components/submit'));
 });
 
 clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function() {
   var self = this;
 
   // add listeners here
-  $mainForm.on('|submit', function(event) {
+  $mainForm.on('submit', function(event) {
     // Set the return URL depending on the runtime environment
     location.href =
       returnTo + encodeURIComponent(JSON.stringify(self.getSettings()));

src/scripts/lib/clay-config.js

@@ -18,6 +18,7 @@ var _ = require('../vendor/minified/minified')._;
 var ClayItem = require('./clay-item');
 var utils = require('../lib/utils');
 var ClayEvents = require('./clay-events');
+var componentStore = require('./component-registry');
 
 /**
  * @extends ClayEvents
@@ -89,8 +90,20 @@ function ClayConfig(settings, config, $rootContainer) {
     return _settings;
   };
 
-  // attach event methods
+  /**
-  ClayEvents.call(self, $rootContainer);
+   * Register a component to Clay. This must be called prior to .build();
+   * @param {{}} component - the clay component to register
+   * @param {string} component.name - the name of the component
+   * @param {string} component.template - HTML template to use for the component
+   * @param {{}} component.manipulator - methods to attach to the component
+   * @param {function} component.manipulator.set - set manipulator method
+   * @param {function} component.manipulator.get - get manipulator method
+   * @param {{}} component.defaults - template defaults
+   * @param {function} [component.initialize] - method to scaffold the component
+   */
+  self.registerComponent = function(component) {
+    componentStore[component.name] = component;
+  };
 
   self.build = function() {
     self.trigger(self.EVENTS.BEFORE_BUILD);
@@ -99,6 +112,9 @@ function ClayConfig(settings, config, $rootContainer) {
     self.trigger(self.EVENTS.AFTER_BUILD);
   };
 
+  // attach event methods
+  ClayEvents.call(self, $rootContainer);
+
   /**
    * Add item(s) to the config
    * @param {Clay~ConfigItem|array} items

src/scripts/lib/clay-events.js

@@ -23,11 +23,14 @@ function ClayEvents($eventTarget) {
    * @returns {object}
    */
   self.on = function(events, handler) {
+    var _events = events.split(' ').map(function(event) {
+      return '|' + event.replace(/^\|/, '');
+    }).join(' ');
     var self = this;
     _eventProxies[handler] = function() {
       handler.apply(self, arguments);
     };
-    $eventTarget.on(events, _eventProxies[handler]);
+    $eventTarget.on(_events, _eventProxies[handler]);
     return self;
   };
 
@@ -41,12 +44,15 @@ function ClayEvents($eventTarget) {
    * @returns {object}
    */
   self.one = function(events, handler) {
+    var _events = events.split(' ').map(function(event) {
+      return '|' + event.replace(/^\|/, '');
+    }).join(' ');
     var self = this;
     _eventProxies[handler] = function(event) {
       handler.apply(self, arguments);
       $.off(_eventProxies[handler]);
     };
-    $eventTarget.on(events, _eventProxies[handler]);
+    $eventTarget.on(_events, _eventProxies[handler]);
     return self;
   };
 
@@ -70,7 +76,7 @@ function ClayEvents($eventTarget) {
    * @returns {object}
    */
   self.trigger = function(name, eventObj) {
-    $eventTarget.trigger(name);
+    $eventTarget.trigger(name, eventObj);
     return self;
   };
 }

src/scripts/lib/clay-item.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var itemTypes = require('./items');
+var componentRegistry = require('./component-registry');
 var _ = require('../vendor/minified/minified')._;
 var HTML = require('../vendor/minified/minified').HTML;
 var utils = require('../lib/utils');
@@ -14,7 +14,7 @@ var ClayEvents = require('./clay-events');
 function ClayItem(config) {
   var self = this;
 
-  var _itemType = itemTypes[config.type];
+  var _itemType = componentRegistry[config.type];
   var _templateData = _.extend({}, _itemType.defaults, config);
 
   /** @type {string|null} */

src/scripts/lib/component-registry.js

@@ -0,0 +1,4 @@
+'use strict';
+
+// module is blank because we dynamically add components
+module.exports = {};

src/scripts/lib/items.js

@@ -1,13 +0,0 @@
-'use strict';
-
-module.exports = {
-  heading: require('./items/heading'),
-  text: require('./items/text'),
-  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/footer.js

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

src/scripts/lib/items/heading.js

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

src/scripts/lib/items/input.js

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

src/scripts/lib/items/radiogroup.js

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

src/scripts/lib/items/submit.js

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

src/scripts/lib/items/text.js

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

src/scripts/lib/items/toggle.js

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