Skip to content

Commit

Permalink
Add first cut of pointer special event plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
kborchers committed Mar 25, 2013
1 parent 0beb25e commit c3b8048
Showing 1 changed file with 84 additions and 0 deletions.
84 changes: 84 additions & 0 deletions external/pointer.js
@@ -0,0 +1,84 @@
(function( $ ) {
var POINTER_TYPE_UNAVAILABLE = 1,

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Mar 25, 2013

Member

pointerType is a string.

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 ) {

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Mar 25, 2013

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.

This comment has been minimized.

Copy link
@kborchers

kborchers Mar 26, 2013

Author Member

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

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Mar 26, 2013

Member

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

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Mar 26, 2013

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).

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;

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Mar 25, 2013

Member

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

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 );

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Mar 25, 2013

Member

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

},
teardown: function() {
$( this ).unbind( "mousedown touchstart MSPointerDown", jQuery.event.special.pointerdown.handler );

This comment has been minimized.

Copy link
@scottgonzalez

scottgonzalez Mar 25, 2013

Member

...and .off() :-)

},
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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You need to handle multiple changed touches for touch events.

Please sign in to comment.