Integrations for popular libraries

[zoomclub]

How possible is it to do something similar to FormatJS, where they produce integrations for all the top libraries? If possible this might be a good strategy for Pointer Events?

http://formatjs.io/integrations/

[scottgonzalez]

This is a native polyfill, so the integration for any library is just inclusion. If you want the libraries themselves to use Pointer Events instead of Touch Events and Mouse Events, that has to happen in the library itself.

With that being said, there will be hook for libraries such as jQuery and Dojo to replace some of the implementation with their own (for example, to avoid having PEP event registration and dispatching duplicating code/logic from the library's event system).

[zoomclub]

Yes, the FormatJS approach is just an example of making their solution more useful. I was just suggesting a way for Pointer Events to become more visible and relevant. Strategy my friend :)

[DavidAustin]

Seems odd that a jquery hosted project has no good integration with jquery

[jzaefferer]

What is there to integrate? Load the polyfill, then use jQuery to bind events, e.g. .on("pointerup", ...).

[DavidAustin]

There's no examples of that and it didn't work for me, so I presumed that it wasn't implemented.

Turns out that I need to use the originalEvent attribute to access the polyfill event - arguable about whether that is integrated :-)

An example would be nice...

Thanks,
David

[jzaefferer]

Reopening to see if and where we could provide (additional) examples.

Can you explain what you need to access the event object for? Might help to come up with examples.

[DavidAustin]

If PEP was truly integrated, I would expect to be able to access the event attributes
in the callback after using jquery methods to bind the event.

Example: https://jsfiddle.net/51qekyk5/

$(function () {
$("#test").on('pointerdown', function (e) {
$('#log').append('

' + e.x + ' ' + e.y + '

');
$('#log').append('

page: ' + e.pageX + ' ' + e.pageY + '

');
$('#log').append('

client: ' + e.clientX + ' ' + e.clientY + '

');
});
});

At least with jquery 1.8.3, all of those attributes are undefined.

[roblarsen]

FWIW, you get the same undefined undefined result in pure IE Edge

[dmethvin]

jQuery 1.8.3 was released in 2012. Pointer events are treated basically as mouse events as of jQuery 2.1.0 and pageX/pageY are defined. The other properties are available on originalEvent. They certainly could be copied over to jQuery's event object but that would be significant additional overhead, especially for high-frequency events like pointermove. The list of properties copied and the extension point for making that slower by copying properties yourself is documented here. : http://api.jquery.com/category/events/event-object/

It hasn't ever been the intention of the jQuery event object to have the entire list of all event properties you might want to look at, only the normalized ones. If the property doesn't need to be normalized across browsers, you can get it on originalEvent. That's true of all kinds of events, not just pointer events.

[arschmitz]

@jzaefferer i suggest re closing this im really not sure what there is to go here. This is just a polyfill there is nothing special to do with different libraries.

[DavidAustin]

@dmethvin: That explanation makes sense - thanks. Perhaps my confusion is because originalEvent is essentially undocumented by jquery.

Ideally, both PEP and jquery should provide examples for the commonest usage pattern via originalEvent

[arschmitz]

@DavidAustin it is documented this is a basic part of jQuery eventing documented as part of the event object

Certain events may have properties specific to them. Those can be accessed as properties of the event.originalEvent object.

That is from @dmethvin link above this really has no relation PEP and is just basic usage of jQuery events system. This is no different then binding to any other event type in jQuery

[DavidAustin]

@arschmitz originalEvent is mentioned precisely twice on api.jquery.com. There are no examples. I can see now that such a pattern is good for performance, and is likely common in javascript frameworks. However, I would not describe such documentation as adequate.

[dmethvin]

Many jQuery properties and methods are only mentioned once on that site, since the API docs are not meant to be a Q&A covering every direction that someone could approach asking a question about jQuery. The topic is also mentioned on the learn site and you can find out a lot on StackOverflow. jQuery is ubiquitous enough that more can be found all over the Internet.

[jzaefferer]

We should have decent documentation for using pointer events (with or without PEP) on the jQuery API docs. Those should cover what Dave mentioned above, like accessing originalEvent and the related extension point. Its definitely worth collecting that information in one place to fulfil our goal to promote pointer events. This query needs to return a pointer-event specific result as the first item, not just a list of all event related methods.

We should also have a very simple "how to use PEP with jQuery" example in the PEP docs. No details, just a basic example and a reference to the relevant jQuery documentation, as outlined above.

If that's reasonable, I'll file the ticket over on the api.jquery.com repo.

[jzaefferer]

If that's reasonable, I'll file the ticket over on the api.jquery.com repo.

Yes? No? @dmethvin @scottgonzalez

[scottgonzalez]

+1

[dmethvin]

When you open the ticket can you outline where the PEP example would be placed in the jQuery API docs?