diff --git a/dev/custom-fn.js b/dev/custom-fn.js index c4d80d8..2d8af3a 100644 --- a/dev/custom-fn.js +++ b/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'); }; diff --git a/dev/dev.js b/dev/dev.js index d54badd..19bc3ea 100644 --- a/dev/dev.js +++ b/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); diff --git a/src/scripts/config-page.js b/src/scripts/config-page.js index 75c2bd1..8a94956 100755 --- a/src/scripts/config-page.js +++ b/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(); diff --git a/src/scripts/lib/clay-config.js b/src/scripts/lib/clay-config.js index b75dd84..baabdfa 100644 --- a/src/scripts/lib/clay-config.js +++ b/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; diff --git a/src/scripts/lib/clay-events.js b/src/scripts/lib/clay-events.js index b68ae2b..aee7712 100644 --- a/src/scripts/lib/clay-events.js +++ b/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; }; } diff --git a/test/spec/lib/clay-item.js b/test/spec/lib/clay-item.js index 29f2f91..f7fe147 100644 --- a/test/spec/lib/clay-item.js +++ b/test/spec/lib/clay-item.js @@ -59,9 +59,9 @@ describe('ClayItem', function() { assert.strictEqual(clayItem.appKey, config.appKey); }); }); - + describe('.$manipulatorTarget', function() { - + }); }); diff --git a/test/spec/lib/utils.js b/test/spec/lib/utils.js index 3a80e4c..11050b1 100644 --- a/test/spec/lib/utils.js +++ b/test/spec/lib/utils.js @@ -27,5 +27,3 @@ describe('Utils', function() { }); }); }); - -