refactor events to mixin from separate class

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

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

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;

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

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 = {

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: {

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() {
+    
+  });
+
 });

test/spec/lib/utils.js

@@ -3,6 +3,7 @@
 var utils = require('../../../src/scripts/lib/utils');
 var assert = require('chai').assert;
 
+describe('Utils', function() {
   describe('.updateProperties', function() {
     var obj;
 
@@ -15,7 +16,16 @@ describe('.updateProperties', function() {
 
     it('sets the properties as non-writable', function() {
       utils.updateProperties(obj, { writable: false });
-    assert.strictEqual(Object.getOwnPropertyDescriptor(obj, 'one').writable, false);
+      assert.strictEqual(
-    assert.strictEqual(Object.getOwnPropertyDescriptor(obj, 'two').writable, false);
+        Object.getOwnPropertyDescriptor(obj, 'one').writable,
+        false
+      );
+      assert.strictEqual(
+        Object.getOwnPropertyDescriptor(obj, 'two').writable,
+        false
+      );
     });
   });
+});
+
+