@carpasse enhanced events to allow passing a second data argument. cl…

…oses #2163

CHANGELOG.md

@@ -43,6 +43,7 @@ CHANGELOG
 * @mmcc increased the size of the progress bar and handle on hover ([view](https://github.com/videojs/video.js/pull/2216))
 * @mmcc moved the fonts into their own repo ([view](https://github.com/videojs/video.js/pull/2223))
 * @mmcc deprecated the options() function and removed internal uses ([view](https://github.com/videojs/video.js/pull/2229))
+* @carpasse enhanced events to allow passing a second data argument ([view](https://github.com/videojs/video.js/pull/2163))
 
 --------------------
 

src/js/component.js

@@ -701,12 +701,15 @@ class Component {
    *
    *     myComponent.trigger('eventName');
    *     myComponent.trigger({'type':'eventName'});
+   *     myComponent.trigger('eventName', {data: 'some data'});
+   *     myComponent.trigger({'type':'eventName'}, {data: 'some data'});
    *
    * @param  {Event|Object|String} event  A string (the type) or an event object with a type attribute
+   * @param  {Object} [hash] data hash to pass along with the event
    * @return {Component}       self
    */
-  trigger(event) {
-    Events.trigger(this.el_, event);
+  trigger(event, hash) {
+    Events.trigger(this.el_, event, hash);
     return this;
   }
 

src/js/utils/events.js

@@ -38,7 +38,7 @@ export function on(elem, type, fn){
   if (!data.dispatcher) {
     data.disabled = false;
 
-    data.dispatcher = function (event){
+    data.dispatcher = function (event, hash){
 
       if (data.disabled) return;
       event = fixEvent(event);
@@ -53,7 +53,7 @@ export function on(elem, type, fn){
           if (event.isImmediatePropagationStopped()) {
             break;
           } else {
-            handlersCopy[m].call(elem, event);
+            handlersCopy[m].call(elem, event, hash);
           }
         }
       }
@@ -127,8 +127,9 @@ export function off(elem, type, fn) {
  * Trigger an event for an element
  * @param  {Element|Object}      elem  Element to trigger an event on
  * @param  {Event|Object|String} event A string (the type) or an event object with a type attribute
+ * @param  {Object} [hash] data hash to pass along with the event
  */
-export function trigger(elem, event) {
+export function trigger(elem, event, hash) {
   // Fetches element data and a reference to the parent (for bubbling).
   // Don't want to add a data object to cache for every parent,
   // so checking hasElData first.
@@ -146,13 +147,13 @@ export function trigger(elem, event) {
 
   // If the passed element has a dispatcher, executes the established handlers.
   if (elemData.dispatcher) {
-    elemData.dispatcher.call(elem, event);
+    elemData.dispatcher.call(elem, event, hash);
   }
 
   // Unless explicitly stopped or the event does not bubble (e.g. media events)
     // recursively calls this function to bubble the event up the DOM.
     if (parent && !event.isPropagationStopped() && event.bubbles !== false) {
-    trigger(parent, event);
+      trigger.call(null, parent, event, hash);
 
   // If at the top of the DOM, triggers the default action unless disabled.
   } else if (!parent && !event.defaultPrevented) {

test/unit/component.test.js

@@ -221,6 +221,23 @@ test('should trigger a listener once using one()', function(){
   comp.trigger('test-event');
 });
 
+test('should be possible to pass data when you trigger an event', function () {
+  var comp = new Component(getFakePlayer(), {});
+  var data1 = 'Data1';
+  var data2 = {txt: 'Data2'};
+  expect(3);
+
+  var testListener = function(evt, hash){
+    ok(true, 'fired event once');
+    deepEqual(hash.d1, data1);
+    deepEqual(hash.d2, data2);
+  };
+
+  comp.one('test-event', testListener);
+  comp.trigger('test-event', {d1: data1, d2: data2});
+  comp.trigger('test-event');
+});
+
 test('should add listeners to other components and remove them', function(){
   var player = getFakePlayer(),
       comp1 = new Component(player),

test/unit/events.test.js

@@ -43,6 +43,24 @@ test('should add and remove multiple event listeners to an element with a single
   Events.trigger(el, 'event2'); // No event2 should happen.
 });
 
+test('should be possible to pass data when you trigger an event', function () {
+  expect(6);
+  var el = document.createElement('div');
+  var fakeData1 = 'Fake Data 1';
+  var fakeData2 = {txt: 'Fake Data 2'};
+
+  var listener = function(evt, hash){
+    ok(true, 'Callback triggered');
+    deepEqual(fakeData1, hash.d1, 'Shoulbe be passed to the handler');
+    deepEqual(fakeData2, hash.d2, 'Shoulbe be passed to the handler');
+  };
+
+  Events.on(el, ['event1', 'event2'], listener);
+  Events.trigger(el, 'event1', { d1: fakeData1, d2:fakeData2});
+  Events.trigger(el, 'event2', { d1: fakeData1, d2:fakeData2});
+
+});
+
 test('should remove all listeners of a type', function(){
   var el = document.createElement('div');
   var clicks = 0;