Skip to content

Commit

Permalink
Add helper for listening to jQuery events
Browse files Browse the repository at this point in the history
This helper can be used when another module registers $.event.special events and you need to listen to those events with can-dom-events.
  • Loading branch information
chasenlehara committed Mar 12, 2018
1 parent 7f25ffe commit 79e08f0
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 0 deletions.
1 change: 1 addition & 0 deletions can-dom-events-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -163,4 +163,5 @@ unit.test('domEvents.addDelegateListener handles document correctly', function (
require('./helpers/make-event-registry-test');
require('./helpers/add-event-compat-test');
require('./helpers/add-event-jquery-test');
require('./helpers/add-jquery-events-test');
require('./helpers/util-test');
36 changes: 36 additions & 0 deletions helpers/add-jquery-events-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
var unit = require('steal-qunit');
var $ = require('jquery');
var addEvents = require('./add-jquery-events');
var domEvents = require('../can-dom-events');

unit.module('add-jquery-events');

unit.test('should work with the jQuery', function (assert) {
assert.expect(1 + 3);

var divElement = document.createElement('div');

var eventType = 'draginit';
var handler = function (event) {
assert.equal(event.target, divElement, 'div should be the target');
assert.equal(event.type, eventType, 'event type should match custom event type');
assert.equal(event.handleObj.handler, handler, 'callback should be the passed handler');
};

// Set up the special event
$.event.special[eventType] = {
add: function() {
assert.ok(true, 'add handler should be called');
}
};

// Bridge can-dom-events + jQuery
var removeEvents = addEvents($);

// Listen to and trigger the event; handler should run
domEvents.addEventListener(divElement, eventType, handler);
$(divElement).trigger(eventType);

// Clean up after ourselves :)
removeEvents();
});
65 changes: 65 additions & 0 deletions helpers/add-jquery-events.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
'use strict';

var domEvents = require('../can-dom-events');
var namespace = require('can-namespace');

/**
* @function can-dom-events/helpers/add-jquery-events ./helpers/add-jquery-events
* @parent can-dom-events.helpers
* @description Add jQuery’s special events to the global registry.
* @signature `addJQueryEvents(jQuery)`
* @param {jQuery} jQuery Your instance of jQuery.
* @return {function} The callback to remove the jQuery events from the registry.
*
* @body
*
* ```js
* const $ = require("jquery");
* const addJQueryEvents = require("can-dom-events/helpers/add-jquery-events");
* const domEvents = require("can-dom-events");
* // Require another module that registers itself with jQuery.event.special,
* // e.g. jQuery++ registers events such as draginit, dragmove, etc.
*
* const removeJQueryEvents = addJQueryEvents($);
*
* // Listen for an event in code; this might also be accomplished through a
* // can-stache-binding such as <li on:draginit="listener()">
* domEvents.addEventListener(listItemElement, "draginit", function listener() {
* // Will fire after a jQuery draginit event has been fired
* });
*
* // Some other code that fires a jQuery event; this will probably be in the
* // package you’re using…
* $(listItemElement).trigger("draginit");
*
* // Later in your code… ready to stop listening for those jQuery events? Call
* // the function returned by addJQueryEvents()
* removeJQueryEvents();
* ```
*/
module.exports = namespace.addJQueryEvents = function addJQueryEvents(jQuery) {
var jQueryEvents = jQuery.event.special;
var removeEvents = [];

for (var eventType in jQueryEvents) {
if (!domEvents._eventRegistry.has(eventType)) {
var eventDefinition = {
defaultEventType: eventType,
addEventListener: function (target, eventType, handler) {
$(target).on(eventType, handler);
},
removeEventListener: function (target, eventType, handler) {
$(target).off(eventType, handler);
}
};
var removeEvent = domEvents.addEvent(eventDefinition);
removeEvents.push(removeEvent);
}
}

return function removeJQueryEvents() {
removeEvents.forEach(function(removeEvent) {
removeEvent();
});
};
};

0 comments on commit 79e08f0

Please sign in to comment.