Merge pull request #352 from plotly/fix-jQuery-noConflict

Make events work in jQuery no-conflict scopes [fixes #350]

Author: etpinard

src/lib/events.js

@@ -9,7 +9,7 @@
 
 'use strict';
 
-/* global $:false */
+/* global jQuery:false */
 
 var EventEmitter = require('events').EventEmitter;
 
@@ -54,7 +54,7 @@ var Events = {
          */
         plotObj.emit = function(event, data) {
             if(typeof jQuery !== 'undefined') {
-                $(plotObj).trigger(event, data);
+                jQuery(plotObj).trigger(event, data);
             }
 
             ev.emit(event, data);
@@ -77,7 +77,7 @@ var Events = {
          * collect the return value of the LAST handler function
          */
         if(typeof jQuery !== 'undefined') {
-            jQueryHandlerValue = $(plotObj).triggerHandler(event, data);
+            jQueryHandlerValue = jQuery(plotObj).triggerHandler(event, data);
         }
 
         /*

test/jasmine/tests/events_test.js

@@ -1,12 +1,11 @@
-/* global $:false */
+/* global $:false, jQuery:false */
 
 /*
  * Note this test requires JQuery in the global scope.
  * we should keep it that way to keep testing our backward
  * compatibility with JQuery events.
  */
 
-
 var Events = require('@src/lib/events');
 
 describe('Events', function() {
@@ -62,7 +61,6 @@ describe('Events', function() {
         it('triggers jquery events', function(done) {
             Events.init(plotDiv);
 
-
             $(plotDiv).bind('ping', function(event, data) {
                 expect(data).toBe('pong');
                 done();
@@ -192,4 +190,107 @@ describe('Events', function() {
         });
     });
 
+    describe('when jQuery.noConflict is set, ', function() {
+
+        beforeEach(function() {
+            $.noConflict();
+        });
+
+        afterEach(function() {
+            window.$ = jQuery;
+        });
+
+        it('triggers jquery events', function(done) {
+
+            Events.init(plotDiv);
+
+            jQuery(plotDiv).bind('ping', function(event, data) {
+                expect(data).toBe('pong');
+                done();
+            });
+
+            setTimeout(function() {
+                jQuery(plotDiv).trigger('ping', 'pong');
+            });
+        });
+
+        it('triggers jQuery handlers when no matching node events bound', function() {
+            var eventBaton = 0;
+
+            Events.init(plotDiv);
+
+            jQuery(plotDiv).bind('ping', function() {
+                eventBaton++;
+                return 'ping';
+            });
+
+            /*
+             * This will not be called
+             */
+            plotDiv.on('pong', function() {
+                eventBaton++;
+                return 'ping';
+            });
+
+            jQuery(plotDiv).bind('ping', function() {
+                eventBaton++;
+                return 'pong';
+            });
+
+            var result = Events.triggerHandler(plotDiv, 'ping');
+
+            expect(eventBaton).toBe(2);
+            expect(result).toBe('pong');
+        });
+
+        it('triggers jQuery handlers when no node events initialized', function() {
+            var eventBaton = 0;
+
+            jQuery(plotDiv).bind('ping', function() {
+                eventBaton++;
+                return 'ping';
+            });
+
+            jQuery(plotDiv).bind('ping', function() {
+                eventBaton++;
+                return 'ping';
+            });
+
+            jQuery(plotDiv).bind('ping', function() {
+                eventBaton++;
+                return 'pong';
+            });
+
+            var result = Events.triggerHandler(plotDiv, 'ping');
+
+            expect(eventBaton).toBe(3);
+            expect(result).toBe('pong');
+        });
+
+        it('triggers jQuery + nodejs handlers and returns last jQuery value', function() {
+            var eventBaton = 0;
+
+            Events.init(plotDiv);
+
+            jQuery(plotDiv).bind('ping', function() {
+                eventBaton++;
+                return 'ping';
+            });
+
+            plotDiv.on('ping', function() {
+                eventBaton++;
+                return 'ping';
+            });
+
+            jQuery(plotDiv).bind('ping', function() {
+                eventBaton++;
+                return 'pong';
+            });
+
+            var result = Events.triggerHandler(plotDiv, 'ping');
+
+            expect(eventBaton).toBe(3);
+            expect(result).toBe('pong');
+        });
+    });
 });