mirror of
https://github.com/jquery/jquery-ui.git
synced 2024-11-21 11:04:24 +00:00
Tests: Cleaned up simulate. Still more work to do.
This commit is contained in:
parent
09732dace8
commit
63215a6875
@ -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 );
|
||||||
|
Loading…
Reference in New Issue
Block a user