-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add helper for listening to jQuery events
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
1 parent
7f25ffe
commit 79e08f0
Showing
3 changed files
with
102 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | ||
}); | ||
}; | ||
}; |