Tests: Cleaned up simulate. Still more work to do.

This commit is contained in:
Scott González 2012-02-29 22:08:47 -05:00
parent 09732dace8
commit 63215a6875

View File

@ -4,57 +4,60 @@
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about) * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses. * Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license * http://jquery.org/license
*
*/ */
;(function( $ ) { ;(function( $ ) {
$.fn.extend({ var rkeyEvent = /^key/,
simulate: function( type, options ) { rmouseEvent = /^(?:mouse|contextmenu)|click/;
return this.each(function() {
var opt = $.extend( {}, $.simulate.defaults, options );
new $.simulate( this, type, opt );
});
}
});
$.simulate = function( el, type, options ) { $.fn.simulate = function( type, options ) {
this.target = el; return this.each(function() {
new $.simulate( this, type, options );
});
};
$.simulate = function( elem, type, options ) {
var method = $.camelCase( "simulate-" + type );
this.target = elem;
this.options = options; this.options = options;
if ( type === "drag" ) { if ( this[ method ] ) {
this[ type ].apply( this, [ this.target, options ] ); this[ method ]();
} else if ( type === "focus" || type === "blur" ) {
this[ type ]();
} else { } else {
this.simulateEvent( el, type, options ); this.simulateEvent( elem, type, options );
} }
}; };
$.extend( $.simulate.prototype, { $.extend( $.simulate.prototype, {
simulateEvent: function( el, type, options ) { simulateEvent: function( elem, type, options ) {
var evt = this.createEvent( type, options ); var event = this.createEvent( type, options );
this.dispatchEvent( el, type, evt, options ); this.dispatchEvent( elem, type, event, options );
return evt;
}, },
createEvent: function( type, options ) { createEvent: function( type, options ) {
if ( /^mouse(over|out|down|up|move)|(dbl)?click$/.test( type ) ) { if ( rkeyEvent.test( type ) ) {
return this.keyEvent( type, options );
}
if ( rmouseEvent.test( type ) ) {
return this.mouseEvent( type, options ); return this.mouseEvent( type, options );
} else if ( /^key(up|down|press)$/.test( type ) ) {
return this.keyboardEvent( type, options );
} }
}, },
mouseEvent: function( type, options ) { mouseEvent: function( type, options ) {
var evt, eventDoc, doc, body; var event, eventDoc, doc, body;
var e = $.extend({ options = $.extend({
bubbles: true, bubbles: true,
cancelable: (type !== "mousemove"), cancelable: (type !== "mousemove"),
view: window, view: window,
detail: 0, detail: 0,
screenX: 0, screenX: 0,
screenY: 0, screenY: 0,
clientX: 0, // TODO: default clientX/Y to a position within the target element
clientY: 0, clientX: 1,
clientY: 1,
ctrlKey: false, ctrlKey: false,
altKey: false, altKey: false,
shiftKey: false, shiftKey: false,
@ -63,49 +66,50 @@ $.extend( $.simulate.prototype, {
relatedTarget: undefined relatedTarget: undefined
}, options ); }, options );
var relatedTarget = $( e.relatedTarget )[0]; if ( document.createEvent ) {
event = document.createEvent( "MouseEvents" );
event.initMouseEvent( type, options.bubbles, options.cancelable,
options.view, options.detail,
options.screenX, options.screenY, options.clientX, options.clientY,
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey,
options.button, options.relatedTarget || document.body.parentNode );
if ( $.isFunction( document.createEvent ) ) {
evt = document.createEvent( "MouseEvents" );
evt.initMouseEvent( type, e.bubbles, e.cancelable, e.view, e.detail,
e.screenX, e.screenY, e.clientX, e.clientY,
e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
e.button, e.relatedTarget || document.body.parentNode );
// IE 9+ creates events with pageX and pageY set to 0. // IE 9+ creates events with pageX and pageY set to 0.
// Trying to modify the properties throws an error, // Trying to modify the properties throws an error,
// so we define getters to return the correct values. // so we define getters to return the correct values.
if ( evt.pageX === 0 && evt.pageY === 0 && Object.defineProperty ) { if ( event.pageX === 0 && event.pageY === 0 && Object.defineProperty ) {
eventDoc = evt.relatedTarget.ownerDocument || document; eventDoc = event.relatedTarget.ownerDocument || document;
doc = eventDoc.documentElement; doc = eventDoc.documentElement;
body = eventDoc.body; body = eventDoc.body;
Object.defineProperty( evt, "pageX", { Object.defineProperty( event, "pageX", {
get: function() { get: function() {
return e.clientX + return options.clientX +
( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) - ( doc && doc.scrollLeft || body && body.scrollLeft || 0 ) -
( doc && doc.clientLeft || body && body.clientLeft || 0 ); ( doc && doc.clientLeft || body && body.clientLeft || 0 );
} }
}); });
Object.defineProperty( evt, "pageY", { Object.defineProperty( event, "pageY", {
get: function() { get: function() {
return e.clientY + return options.clientY +
( doc && doc.scrollTop || body && body.scrollTop || 0 ) - ( doc && doc.scrollTop || body && body.scrollTop || 0 ) -
( doc && doc.clientTop || body && body.clientTop || 0 ); ( doc && doc.clientTop || body && body.clientTop || 0 );
} }
}); });
} }
} else if ( document.createEventObject ) { } else if ( document.createEventObject ) {
evt = document.createEventObject(); event = document.createEventObject();
$.extend( evt, e ); $.extend( event, options );
evt.button = { 0:1, 1:4, 2:2 }[evt.button] || evt.button; // TODO: what is this mapping for?
event.button = { 0:1, 1:4, 2:2 }[ event.button ] || event.button;
} }
return evt;
},
keyboardEvent: function( type, options ) {
var evt;
var e = $.extend({ return event;
},
keyEvent: function( type, options ) {
var event;
options = $.extend({
bubbles: true, bubbles: true,
cancelable: true, cancelable: true,
view: window, view: window,
@ -117,74 +121,51 @@ $.extend( $.simulate.prototype, {
charCode: undefined charCode: undefined
}, options ); }, options );
if ( $.isFunction( document.createEvent ) ) { if ( document.createEvent ) {
try { try {
evt = document.createEvent( "KeyEvents" ); event = document.createEvent( "KeyEvents" );
evt.initKeyEvent( type, e.bubbles, e.cancelable, e.view, event.initKeyEvent( type, options.bubbles, options.cancelable, options.view,
e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, options.ctrlKey, options.altKey, options.shiftKey, options.metaKey,
e.keyCode, e.charCode ); options.keyCode, options.charCode );
// TODO: what is this supporting?
} catch( err ) { } catch( err ) {
evt = document.createEvent( "Events" ); event = document.createEvent( "Events" );
evt.initEvent( type, e.bubbles, e.cancelable ); event.initEvent( type, options.bubbles, options.cancelable );
$.extend(evt, { $.extend( event, {
view: e.view, view: options.view,
ctrlKey: e.ctrlKey, ctrlKey: options.ctrlKey,
altKey: e.altKey, altKey: options.altKey,
shiftKey: e.shiftKey, shiftKey: options.shiftKey,
metaKey: e.metaKey, metaKey: options.metaKey,
keyCode: e.keyCode, keyCode: options.keyCode,
charCode: e.charCode charCode: options.charCode
}); });
} }
} else if ( document.createEventObject ) { } else if ( document.createEventObject ) {
evt = document.createEventObject(); event = document.createEventObject();
$.extend( evt, e ); $.extend( event, options );
} }
// TODO: can we hook into core's logic?
if ( $.browser.msie || $.browser.opera ) { if ( $.browser.msie || $.browser.opera ) {
evt.keyCode = (e.charCode > 0) ? e.charCode : e.keyCode; // TODO: is charCode ever <0 ? Can we just use charCode || keyCode?
evt.charCode = undefined; event.keyCode = (options.charCode > 0) ? options.charCode : options.keyCode;
event.charCode = undefined;
} }
return evt;
return event;
}, },
dispatchEvent: function( el, type, evt ) { // TODO: does this need type? Can't we just check event.type?
if ( el.dispatchEvent ) { dispatchEvent: function( elem, type, event ) {
el.dispatchEvent( evt ); if ( elem.dispatchEvent ) {
} else if ( el.fireEvent ) { elem.dispatchEvent( event );
el.fireEvent( "on" + type, evt ); } else if ( elem.fireEvent ) {
elem.fireEvent( "on" + type, event );
} }
return evt;
}, },
drag: function( el ) { simulateFocus: function() {
var center = this.findCenter(this.target),
options = this.options,
x = Math.floor( center.x ),
y = Math.floor( center.y ),
dx = options.dx || 0,
dy = options.dy || 0,
target = this.target,
coord = { clientX: x, clientY: y };
this.simulateEvent( target, "mousedown", coord );
coord = { clientX: x + 1, clientY: y + 1 };
this.simulateEvent( document, "mousemove", coord );
coord = { clientX: x + dx, clientY: y + dy };
this.simulateEvent( document, "mousemove", coord );
this.simulateEvent( document, "mousemove", coord );
this.simulateEvent( target, "mouseup", coord );
this.simulateEvent( target, "click", coord );
},
findCenter: function( el ) {
var el = $( this.target ),
o = el.offset(),
d = $( document );
return {
x: o.left + el.outerWidth() / 2 - d.scrollLeft(),
y: o.top + el.outerHeight() / 2 - d.scrollTop()
};
},
focus: function() {
var focusinEvent, var focusinEvent,
triggered = false, triggered = false,
element = $( this.target ); element = $( this.target );
@ -205,7 +186,7 @@ $.extend( $.simulate.prototype, {
element.unbind( "focus", trigger ); element.unbind( "focus", trigger );
}, },
blur: function() { simulateBlur: function() {
var focusoutEvent, var focusoutEvent,
triggered = false, triggered = false,
element = $( this.target ); element = $( this.target );
@ -237,21 +218,42 @@ $.extend( $.simulate.prototype, {
} }
}); });
$.extend( $.simulate, {
defaults: {
speed: "sync" /** complex events **/
},
VK_TAB: 9, function findCenter( elem ) {
VK_ENTER: 13, var offset,
VK_ESC: 27, document = $( elem.ownerDocument );
VK_PGUP: 33, elem = $( elem );
VK_PGDN: 34, offset = elem.offset();
VK_END: 35,
VK_HOME: 36, return {
VK_LEFT: 37, x: offset.left + elem.outerWidth() / 2 - document.scrollLeft(),
VK_UP: 38, y: offset.top + elem.outerHeight() / 2 - document.scrollTop()
VK_RIGHT: 39, };
VK_DOWN: 40 }
$.extend( $.simulate.prototype, {
simulateDrag: function() {
var target = this.target,
options = this.options,
center = findCenter( target ),
x = Math.floor( center.x ),
y = Math.floor( center.y ),
dx = options.dx || 0,
dy = options.dy || 0,
target = this.target,
coord = { clientX: x, clientY: y };
this.simulateEvent( target, "mousedown", coord );
coord = { clientX: x + 1, clientY: y + 1 };
this.simulateEvent( document, "mousemove", coord );
coord = { clientX: x + dx, clientY: y + dy };
this.simulateEvent( document, "mousemove", coord );
this.simulateEvent( document, "mousemove", coord );
this.simulateEvent( target, "mouseup", coord );
this.simulateEvent( target, "click", coord );
}
}); });
})( jQuery ); })( jQuery );