Browse files

Add first cut of pointer special event plugin

  • Loading branch information...
1 parent 0beb25e commit c3b8048d74489e38064ebbda9c044877d8fda942 @kborchers kborchers committed Mar 24, 2013
Showing with 84 additions and 0 deletions.
  1. +84 −0 external/pointer.js
View
84 external/pointer.js
@@ -0,0 +1,84 @@
+(function( $ ) {
+var POINTER_TYPE_UNAVAILABLE = 1,
@scottgonzalez
jQuery Foundation member

pointerType is a string.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ POINTER_TYPE_TOUCH = 2,
+ POINTER_TYPE_PEN = 3,
+ POINTER_TYPE_MOUSE = 4;
+
+function processEvent( event, pointerType ) {
+ var prop,
+ orig = event;
+
+ event = $.Event( pointerType );
+
+ for ( prop in orig ) {
@scottgonzalez
jQuery Foundation member

I think we want $.event.pointerHooks, which would build on top of $.event.mouseHooks. This is probably complicated by TouchEvent having a different structure.

@kborchers
jQuery Foundation member

Do you mean adding $.event.pointerHooks to $.event or just extend $.event.mouseHooks in the newly created event?

@scottgonzalez
jQuery Foundation member

Adding $.event.pointerHooks, but it should delegate to $.event.mouseHooks since PointerEvent inherits from MouseEvent.

@scottgonzalez
jQuery Foundation member

Actually, maybe just build the props from mouseHooks. filter() may be completely unnecessary, since the underlying mouse event will have already been filtered and button/buttons should be sane (instead of which).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ if ( !( prop in event ) ) {
+ event[ prop ] = orig[ prop ];
+ }
+ }
+
+ event.pageX = event.pageX || orig.originalEvent.pageX;
+ event.pageY = event.pageY || orig.originalEvent.pageY;
+
+ // TODO - Actually determine if primary
+ event.isPrimary = true;
+
+ if ( orig.type.indexOf("mouse") != -1 ) {
+ event.pointerId = 1;
+ event.pointerType = POINTER_TYPE_MOUSE;
+ // TODO: Don't assume left click
+ event.button = 0;
+ event.buttons = 1;
+ } else if ( orig.type.indexOf("touch") != -1 ) {
+ event.pointerId = orig.identifier || 2;
@scottgonzalez
jQuery Foundation member

What are the cases where we need to generate our own id for touch?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ event.pointerType = POINTER_TYPE_TOUCH;
+ event.button = 0;
+ event.buttons = 1;
+ } else if ( orig.type.indexOf("Pointer") != -1 ) {
+ event.pointerId = orig.originalEvent.pointerId;
+ event.pointerType = orig.originalEvent.pointerType || POINTER_TYPE_UNAVAILABLE;
+ event.button = orig.originalEvent.button;
+ event.buttons = orig.originalEvent.buttons;
+ }
+
+ return event;
+}
+
+$.event.special.pointerdown = {
+ setup: function() {
+ $( this ).bind( "mousedown touchstart MSPointerDown", jQuery.event.special.pointerdown.handler );
@scottgonzalez
jQuery Foundation member

We can use .on() in this code :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ },
+ teardown: function() {
+ $( this ).unbind( "mousedown touchstart MSPointerDown", jQuery.event.special.pointerdown.handler );
@scottgonzalez
jQuery Foundation member

...and .off() :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
+ },
+ handler: function( event ) {
+ event = processEvent( event, "pointerdown" );
+ $( event.target ).trigger( event );
+ }
+};
+
+$.event.special.pointerup = {
+ setup: function() {
+ $( this ).bind( "mouseup touchend MSPointerUp", jQuery.event.special.pointerup.handler );
+ },
+ teardown: function() {
+ $( this ).unbind( "mouseup touchend MSPointerUp", jQuery.event.special.pointerup.handler );
+ },
+ handler: function( event ) {
+ event = processEvent( event, "pointerup" );
+ $( event.target ).trigger( event );
+ }
+};
+
+$.event.special.pointermove = {
+ setup: function() {
+ $( this ).bind( "mousemove touchmove MSPointerMove", jQuery.event.special.pointermove.handler );
+ },
+ teardown: function() {
+ $( this ).unbind( "mousemove touchmove MSPointerMove", jQuery.event.special.pointermove.handler );
+ },
+ handler: function( event ) {
+ event = processEvent( event, "pointermove" );
+ $( event.target ).trigger( event );
+ }
+};
+})( jQuery );

2 comments on commit c3b8048

@scottgonzalez
jQuery Foundation member

Other event types: pointercancel, pointerover, pointerout, poitnerenter, pointerleave. We need pointercancel for the interactions, the others are required for the full shim. pointerenter and pointerleave should get custom delegation handling built on top of pointerover and pointerout just like we do for mouse events in core.

@scottgonzalez
jQuery Foundation member

You need to handle multiple changed touches for touch events.

Please sign in to comment.