refactor events to mixin from separate class

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