From f5e2dbe5a3981e979f9feea5771f230d93751368 Mon Sep 17 00:00:00 2001 From: Keegan Date: Thu, 28 Jan 2016 11:45:00 -0800 Subject: [PATCH] refactor events to mixin from separate class --- dev/custom-fn.js | 8 ++- src/scripts/lib/clay-config.js | 24 +++++-- src/scripts/lib/clay-events.js | 71 +++++++++++++++++++++ src/scripts/lib/clay-item.js | 68 +++----------------- test/fixture.js | 5 ++ test/karma.conf.js | 2 +- test/spec/lib/{api-item.js => clay-item.js} | 31 +++++++-- test/spec/lib/utils.js | 34 ++++++---- 8 files changed, 157 insertions(+), 86 deletions(-) create mode 100644 src/scripts/lib/clay-events.js rename test/spec/lib/{api-item.js => clay-item.js} (53%) diff --git a/dev/custom-fn.js b/dev/custom-fn.js index 3ed943a..c4d80d8 100644 --- a/dev/custom-fn.js +++ b/dev/custom-fn.js @@ -1,6 +1,8 @@ 'use strict'; module.exports = function() { + + /** @type {ClayConfig} */ var Clay = window.Clay = this; Clay.getItemByAppKey('cool_stuff').on('change', function() { @@ -11,5 +13,9 @@ module.exports = function() { } }); - Clay.getSettings(); + Clay.on('test', function() { + console.debug('KEEGAN: this', this); + }); + + Clay.trigger('test'); }; diff --git a/src/scripts/lib/clay-config.js b/src/scripts/lib/clay-config.js index 45a3030..f593032 100644 --- a/src/scripts/lib/clay-config.js +++ b/src/scripts/lib/clay-config.js @@ -15,9 +15,17 @@ var HTML = require('../vendor/minified/minified').HTML; var _ = require('../vendor/minified/minified')._; -var ApiItem = require('./clay-item'); +var ClayItem = require('./clay-item'); var utils = require('../lib/utils'); +var ClayEvents = require('./clay-events'); +/** + * @extends ClayEvents + * @param settings + * @param config + * @param $rootContainer + * @constructor + */ function ClayConfig(settings, config, $rootContainer) { var self = this; @@ -62,6 +70,8 @@ function ClayConfig(settings, config, $rootContainer) { return _settings; }; + ClayEvents.call(this, $rootContainer); + /** * Add item(s) to the config * @param {Clay~ConfigItem|array} items @@ -77,26 +87,26 @@ function ClayConfig(settings, config, $rootContainer) { $container.add($wrapper); _addItems(item.items, $wrapper); } else { - var apiItem = new ApiItem(item); + var clayItem = new ClayItem(item); if (item.id) { - _itemsById[item.id] = apiItem; + _itemsById[item.id] = clayItem; } if (item.appKey) { - _itemsByAppKey[item.appKey] = apiItem; + _itemsByAppKey[item.appKey] = clayItem; } - _items.push(apiItem); + _items.push(clayItem); // set the value of the item via the manipulator to ensure consistency var value = typeof _settings[item.appKey] !== 'undefined' ? _settings[item.appKey] : (item.value || ''); - apiItem.set(value); + clayItem.set(value); - $container.add(apiItem.$element); + $container.add(clayItem.$element); } }; diff --git a/src/scripts/lib/clay-events.js b/src/scripts/lib/clay-events.js new file mode 100644 index 0000000..072376a --- /dev/null +++ b/src/scripts/lib/clay-events.js @@ -0,0 +1,71 @@ +'use strict'; + +var $ = require('../vendor/minified/minified').$; + +function ClayEvents($eventTarget) { + var self = this; + var _eventProxies = {}; + + /** + * Attach an event listener to the item. This proxies minified.js' on. + * If you are using a native event like "change", consider using "|change" instead + * as this will allow the native events to still work + * @see {@link http://minifiedjs.com/api/on.html|.on()} + * @param {string} events + * @param {function} handler + * @returns {object} + */ + self.on = function(events, handler) { + var self = this; + _eventProxies[handler] = function() { + handler.apply(self, arguments); + }; + $eventTarget.on(events, _eventProxies[handler]); + return self; + }; + + /** + * Attach an event listener to the item. This proxies minified.js' one. + * If you are using a native event like "change", consider using "|change" instead + * as this will allow the native events to still work + * @see {@link http://minifiedjs.com/api/one.html|.one()} + * @param {string} events + * @param {function} handler + * @returns {object} + */ + self.one = function(events, handler) { + var self = this; + _eventProxies[handler] = function(event) { + handler.apply(self, arguments); + $.off(_eventProxies[handler]); + }; + $eventTarget.on(events, _eventProxies[handler]); + return self; + }; + + /** + * Remove the given event handler. + * @see {@link http://minifiedjs.com/api/off.html|$.off()} + * @param {function} handler + * @returns {object} + */ + self.off = function(handler) { + $.off(_eventProxies[handler]); + return self; + }; + + /** + * trigger an event. This proxies minified.js' trigger. + * @param {string} name - a single event name to trigger + * @param {object} eventObj - an object to pass to the event handler, provided the + * handler does not have custom arguments. + * @see {@link http://minifiedjs.com/api/trigger.html|.trigger()} + * @returns {object} + */ + self.trigger = function(name, eventObj) { + $eventTarget.trigger(name, eventObj); + return self; + }; +} + +module.exports = ClayEvents; diff --git a/src/scripts/lib/clay-item.js b/src/scripts/lib/clay-item.js index 0433e68..02c2652 100644 --- a/src/scripts/lib/clay-item.js +++ b/src/scripts/lib/clay-item.js @@ -1,15 +1,19 @@ 'use strict'; var itemTypes = require('./items'); -var $ = require('../vendor/minified/minified').$; var _ = require('../vendor/minified/minified')._; var HTML = require('../vendor/minified/minified').HTML; var utils = require('../lib/utils'); +var ClayEvents = require('./clay-events'); +/** + * @extends ClayEvents + * @param config + * @constructor + */ function ClayItem(config) { var self = this; - var _eventProxies = {}; var _itemType = itemTypes[config.type]; var _templateData = _.extend({}, _itemType.defaults, config); @@ -33,64 +37,6 @@ function ClayItem(config) { self.$manipulatorTarget = self.$element; } - /** - * Attach an event listener to the item. This proxies minified.js' on. - * If you are using a native event like "change", consider using "|change" instead - * as this will allow the native events to still work - * @see {@link http://minifiedjs.com/api/on.html|.on()} - * @param {string} events - * @param {function} handler - * @returns {ClayItem} - */ - self.on = function(events, handler) { - _eventProxies[handler] = function() { - handler.apply(self, arguments); - }; - self.$manipulatorTarget.on(events, _eventProxies[handler]); - return self; - }; - - /** - * Attach an event listener to the item. This proxies minified.js' one. - * If you are using a native event like "change", consider using "|change" instead - * as this will allow the native events to still work - * @see {@link http://minifiedjs.com/api/one.html|.one()} - * @param {string} events - * @param {function} handler - * @returns {ClayItem} - */ - self.one = function(events, handler) { - _eventProxies[handler] = function(event) { - handler.apply(self, arguments); - $.off(_eventProxies[handler]); - }; - self.$manipulatorTarget.on(events, _eventProxies[handler]); - return self; - }; - - /** - * Remove the given event handler. - * @see {@link http://minifiedjs.com/api/off.html|$.off()} - * @param {function} handler - * @returns {ClayItem} - */ - self.off = function(handler) { - return $.off(_eventProxies[handler]); - }; - - /** - * trigger an event. This proxies minified.js' trigger. - * @param {string} name - a single event name to trigger - * @param {object} eventObj - an object to pass to the event handler, provided the - * handler does not have custom arguments. - * @see {@link http://minifiedjs.com/api/trigger.html|.trigger()} - * @returns {ClayItem} - */ - self.trigger = function(name, eventObj) { - self.$manipulatorTarget.trigger(name, eventObj); - return self; - }; - /** * Run the initializer. This will automatically be run on item creation. * @returns {ClayItem} @@ -102,6 +48,8 @@ function ClayItem(config) { return self; }; + ClayEvents.call(this, self.$manipulatorTarget); + // attach the manipulator methods to the clayItem _.eachObj(_itemType.manipulator, function(methodName, method) { self[methodName] = method.bind(self); diff --git a/test/fixture.js b/test/fixture.js index 1541e22..ece6706 100644 --- a/test/fixture.js +++ b/test/fixture.js @@ -3,6 +3,11 @@ var _ = require('../src/scripts/vendor/minified/minified')._; var idCounter = 0; +/** + * @param {string} type + * @param {{}} [config] + * @returns {{}} + */ function fixture(type, config) { var basic = { diff --git a/test/karma.conf.js b/test/karma.conf.js index a838872..89b3f53 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -46,7 +46,7 @@ module.exports = function(config) { // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter - reporters: ['progress', 'mocha', 'coverage', 'threshold'], + reporters: ['mocha', 'coverage', 'threshold'], // optionally, configure the reporter coverageReporter: { diff --git a/test/spec/lib/api-item.js b/test/spec/lib/clay-item.js similarity index 53% rename from test/spec/lib/api-item.js rename to test/spec/lib/clay-item.js index be50281..29f2f91 100644 --- a/test/spec/lib/api-item.js +++ b/test/spec/lib/clay-item.js @@ -1,7 +1,7 @@ 'use strict'; var assert = require('chai').assert; -var ApiItem = require('../../../src/scripts/lib/clay-item'); +var ClayItem = require('../../../src/scripts/lib/clay-item'); var fixture = require('../../fixture'); var items = require('../../../src/scripts/lib/items'); @@ -18,7 +18,7 @@ function checkReadOnly(object, properties) { }); } -describe('ApiItem', function() { +describe('ClayItem', function() { it('defines read-only properties', function() { var properties = [ 'id', @@ -32,15 +32,36 @@ describe('ApiItem', function() { 'trigger', 'initialize' ]; - var apiItem = new ApiItem(fixture('input')); + var apiItem = new ClayItem(fixture('input')); checkReadOnly(apiItem, properties); }); it('attaches the manipulator methods', function() { Object.keys(items).forEach(function(itemName) { - var apiItem = new ApiItem(fixture(itemName)); + var clayItem = new ClayItem(fixture(itemName)); var manipulator = items[itemName].manipulator; - checkReadOnly(apiItem, Object.keys(manipulator)); + checkReadOnly(clayItem, Object.keys(manipulator)); }); }); + + describe('.id', function() { + it('sets id correctly', function() { + var config = fixture('input'); + var clayItem = new ClayItem(config); + assert.strictEqual(clayItem.id, config.id); + }); + }); + + describe('.appKey', function() { + it('sets appKey correctly', function() { + var config = fixture('input'); + var clayItem = new ClayItem(config); + assert.strictEqual(clayItem.appKey, config.appKey); + }); + }); + + describe('.$manipulatorTarget', function() { + + }); + }); diff --git a/test/spec/lib/utils.js b/test/spec/lib/utils.js index eb7d5b7..3a80e4c 100644 --- a/test/spec/lib/utils.js +++ b/test/spec/lib/utils.js @@ -3,19 +3,29 @@ var utils = require('../../../src/scripts/lib/utils'); var assert = require('chai').assert; -describe('.updateProperties', function() { - var obj; +describe('Utils', function() { + describe('.updateProperties', function() { + var obj; - beforeEach(function() { - obj = { - one: 1, - two: 2 - }; - }); + beforeEach(function() { + obj = { + one: 1, + two: 2 + }; + }); - it('sets the properties as non-writable', function() { - utils.updateProperties(obj, { writable: false }); - assert.strictEqual(Object.getOwnPropertyDescriptor(obj, 'one').writable, false); - assert.strictEqual(Object.getOwnPropertyDescriptor(obj, 'two').writable, false); + it('sets the properties as non-writable', function() { + utils.updateProperties(obj, { writable: false }); + assert.strictEqual( + Object.getOwnPropertyDescriptor(obj, 'one').writable, + false + ); + assert.strictEqual( + Object.getOwnPropertyDescriptor(obj, 'two').writable, + false + ); + }); }); }); + +