WIP - no love for minified.js anymore :(

dev/custom-fn.js

@@ -5,17 +5,18 @@ module.exports = function() {
   /** @type {ClayConfig} */
   var Clay = window.Clay = this;
 
-  Clay.getItemByAppKey('cool_stuff').on('change', function() {
-    if (this.get()) {
-      Clay.getItemByAppKey('background').enable();
-    } else {
-      Clay.getItemByAppKey('background').disable();
-    }
+  Clay.on(Clay.EVENTS.BEFORE_BUILD, function() {
+    console.debug('KEEGAN: BEFORE_BUILD', this);
   });
 
-  Clay.on('test', function() {
-    console.debug('KEEGAN: this', this);
+  Clay.on(Clay.EVENTS.AFTER_BUILD, function() {
+    console.debug('KEEGAN: AFTER_BUILD', this);
+    Clay.getItemByAppKey('cool_stuff').on('change', function() {
+      if (this.get()) {
+        Clay.getItemByAppKey('background').enable();
+      } else {
+        Clay.getItemByAppKey('background').disable();
+      }
+    });
   });
-
-  Clay.trigger('test');
 };

dev/dev.js

@@ -5,5 +5,5 @@ window.clayConfig = require('./config.js');
 window.claySettings = {};
 window.customFn = require('./custom-fn.js');
 
-var platform = window.navigator.userAgent.match('Android') ? 'android' : 'ios';
+var platform = window.navigator.userAgent.match(/Android/) ? 'android' : 'ios';
 document.documentElement.classList.add('platform-' + platform);

src/scripts/config-page.js

@@ -12,14 +12,26 @@ var customFn = window.customFn || function() {};
 var $mainForm = $('#main-form');
 var clayConfig = new ClayConfig(settings, config, $mainForm);
 
-function submit(event) {
-  // Set the return URL depending on the runtime environment
-  location.href =
-    returnTo + encodeURIComponent(JSON.stringify(clayConfig.getSettings()));
-  event.preventDefault();
-  return false;
-}
+clayConfig.on(clayConfig.EVENTS.BEFORE_BUILD, function() {
+  // attach components here
+});
 
-$mainForm.on('|submit', submit);
+clayConfig.on(clayConfig.EVENTS.AFTER_BUILD, function() {
+  var self = this;
 
+  // add listeners here
+  $mainForm.on('|submit', function(event) {
+    // Set the return URL depending on the runtime environment
+    location.href =
+      returnTo + encodeURIComponent(JSON.stringify(self.getSettings()));
+    event.preventDefault();
+    return false;
+  });
+});
+
+// Run the custom function in the context of the ClayConfig
 customFn.call(clayConfig);
+
+// Now that we have given the dev's custom code to run and attach listeners,
+// we build the config
+clayConfig.build();

src/scripts/lib/clay-config.js

@@ -29,11 +29,30 @@ var ClayEvents = require('./clay-events');
 function ClayConfig(settings, config, $rootContainer) {
   var self = this;
 
+  self.test = Math.random();
+
   var _settings = _.copyObj(settings);
   var _items = [];
   var _itemsById = {};
   var _itemsByAppKey = {};
 
+  self.EVENTS = {
+    /**
+     * Called before framework has initialized. This is when you would attach your
+     * custom items.
+     * @const
+     */
+    BEFORE_BUILD: 'BEFORE_BUILD',
+
+    /**
+     * Called after the config has been parsed and all items have their initial value
+     * set
+     * @const
+     */
+    AFTER_BUILD: 'AFTER_BUILD'
+  };
+  utils.updateProperties(self.EVENTS, {writable: false});
+
   /**
    * @param {string} key
    * @returns {ClayItem}
@@ -73,6 +92,13 @@ function ClayConfig(settings, config, $rootContainer) {
   // attach event methods
   ClayEvents.call(self, $rootContainer);
 
+  self.build = function() {
+    self.trigger(self.EVENTS.BEFORE_BUILD);
+    // initialize the config
+    _addItems(config, $rootContainer);
+    self.trigger(self.EVENTS.AFTER_BUILD);
+  };
+
   /**
    * Add item(s) to the config
    * @param {Clay~ConfigItem|array} items
@@ -114,8 +140,6 @@ function ClayConfig(settings, config, $rootContainer) {
   // prevent external modifications of properties
   utils.updateProperties(self, { writable: false, configurable: false });
 
-  // initialize the config
-  _addItems(config, $rootContainer);
 }
 
 module.exports = ClayConfig;

src/scripts/lib/clay-events.js

@@ -5,7 +5,7 @@ var $ = require('../vendor/minified/minified').$;
 /**
  * Attaches event methods to the context.
  * Call with ClayEvents.call(yourObject, $eventTarget)
- * @param {EventEmitter} $eventTarget - An object that will be used as the event
+ * @param {EventEmitter|M} $eventTarget - An object that will be used as the event
  * target. Must implement EventEmitter
  * @constructor
  */
@@ -70,7 +70,7 @@ function ClayEvents($eventTarget) {
    * @returns {object}
    */
   self.trigger = function(name, eventObj) {
-    $eventTarget.trigger(name, eventObj);
+    $eventTarget.trigger(name);
     return self;
   };
 }

test/spec/lib/utils.js

@@ -27,5 +27,3 @@ describe('Utils', function() {
     });
   });
 });
-
-