mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-05-19 12:01:06 +00:00
jQuery core style guide conformance: jquery.mobile.event.js
This commit is contained in:
Rick Waldron
parent
ddb06761b0
commit
42f0b64262
1 changed files with 130 additions and 115 deletions
|
|
@ -4,13 +4,16 @@
|
|||
* Dual licensed under the MIT or GPL Version 2 licenses.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
(function($, undefined ) {
|
||||
(function( $, window, undefined ) {
|
||||
|
||||
// add new event shortcuts
|
||||
$.each( "touchstart touchmove touchend orientationchange throttledresize tap taphold swipe swipeleft swiperight scrollstart scrollstop".split( " " ), function( i, name ) {
|
||||
$.each( "touchstart touchmove touchend orientationchange throttledresize " +
|
||||
"tap taphold swipe swipeleft swiperight scrollstart scrollstop".split( " " ), function( i, name ) {
|
||||
|
||||
$.fn[ name ] = function( fn ) {
|
||||
return fn ? this.bind( name, fn ) : this.trigger( name );
|
||||
};
|
||||
|
||||
$.attrFn[ name ] = true;
|
||||
});
|
||||
|
||||
|
|
@ -20,8 +23,7 @@ var supportTouch = $.support.touch,
|
|||
touchStopEvent = supportTouch ? "touchend" : "mouseup",
|
||||
touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
|
||||
|
||||
function triggerCustomEvent(obj, eventType, event)
|
||||
{
|
||||
function triggerCustomEvent( obj, eventType, event ) {
|
||||
var originalType = event.type;
|
||||
event.type = eventType;
|
||||
$.event.handle.call( obj, event );
|
||||
|
|
@ -30,29 +32,32 @@ function triggerCustomEvent(obj, eventType, event)
|
|||
|
||||
// also handles scrollstop
|
||||
$.event.special.scrollstart = {
|
||||
|
||||
enabled: true,
|
||||
|
||||
|
||||
setup: function() {
|
||||
|
||||
var thisObject = this,
|
||||
$this = $( thisObject ),
|
||||
scrolling,
|
||||
timer;
|
||||
|
||||
|
||||
function trigger( event, state ) {
|
||||
scrolling = state;
|
||||
triggerCustomEvent( thisObject, scrolling ? "scrollstart" : "scrollstop", event );
|
||||
}
|
||||
|
||||
|
||||
// iPhone triggers scroll after a small delay; use touchmove instead
|
||||
$this.bind( scrollEvent, function( event ) {
|
||||
|
||||
if ( !$.event.special.scrollstart.enabled ) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if ( !scrolling ) {
|
||||
trigger( event, true );
|
||||
}
|
||||
|
||||
|
||||
clearTimeout( timer );
|
||||
timer = setTimeout(function() {
|
||||
trigger( event, false );
|
||||
|
|
@ -66,43 +71,45 @@ $.event.special.tap = {
|
|||
setup: function() {
|
||||
var thisObject = this,
|
||||
$this = $( thisObject );
|
||||
|
||||
$this
|
||||
.bind("vmousedown", function( event ) {
|
||||
if ( event.which && event.which !== 1 ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var touching = true,
|
||||
origTarget = event.target,
|
||||
origEvent = event.originalEvent,
|
||||
timer;
|
||||
|
||||
function clearTapHandlers() {
|
||||
touching = false;
|
||||
clearTimeout(timer);
|
||||
$this.unbind("vclick", clickHandler).unbind("vmousecancel", clearTapHandlers);
|
||||
}
|
||||
|
||||
function clickHandler(event) {
|
||||
clearTapHandlers();
|
||||
|
||||
/* ONLY trigger a 'tap' event if the start target is
|
||||
* the same as the stop target.
|
||||
*/
|
||||
if ( origTarget == event.target ) {
|
||||
triggerCustomEvent( thisObject, "tap", event );
|
||||
}
|
||||
$this.bind( "vmousedown", function( event ) {
|
||||
|
||||
if ( event.which && event.which !== 1 ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var touching = true,
|
||||
origTarget = event.target,
|
||||
origEvent = event.originalEvent,
|
||||
timer;
|
||||
|
||||
function clearTapHandlers() {
|
||||
touching = false;
|
||||
clearTimeout(timer);
|
||||
|
||||
$this.unbind( "vclick", clickHandler )
|
||||
.unbind( "vmousecancel", clearTapHandlers );
|
||||
}
|
||||
|
||||
function clickHandler(event) {
|
||||
clearTapHandlers();
|
||||
|
||||
// ONLY trigger a 'tap' event if the start target is
|
||||
// the same as the stop target.
|
||||
if ( origTarget == event.target ) {
|
||||
triggerCustomEvent( thisObject, "tap", event );
|
||||
}
|
||||
}
|
||||
|
||||
$this.bind("vmousecancel", clearTapHandlers).bind("vclick", clickHandler);
|
||||
$this.bind( "vmousecancel", clearTapHandlers )
|
||||
.bind( "vclick", clickHandler );
|
||||
|
||||
timer = setTimeout(function() {
|
||||
if ( touching ) {
|
||||
triggerCustomEvent( thisObject, "taphold", event );
|
||||
}
|
||||
}, 750 );
|
||||
});
|
||||
timer = setTimeout(function() {
|
||||
if ( touching ) {
|
||||
triggerCustomEvent( thisObject, "taphold", event );
|
||||
}
|
||||
}, 750 );
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -111,75 +118,75 @@ $.event.special.swipe = {
|
|||
setup: function() {
|
||||
var thisObject = this,
|
||||
$this = $( thisObject );
|
||||
|
||||
$this
|
||||
.bind( touchStartEvent, function( event ) {
|
||||
var data = event.originalEvent.touches ?
|
||||
event.originalEvent.touches[ 0 ] :
|
||||
event,
|
||||
start = {
|
||||
time: (new Date).getTime(),
|
||||
coords: [ data.pageX, data.pageY ],
|
||||
origin: $( event.target )
|
||||
},
|
||||
stop;
|
||||
|
||||
function moveHandler( event ) {
|
||||
if ( !start ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var data = event.originalEvent.touches ?
|
||||
event.originalEvent.touches[ 0 ] :
|
||||
event;
|
||||
stop = {
|
||||
time: (new Date).getTime(),
|
||||
coords: [ data.pageX, data.pageY ]
|
||||
};
|
||||
|
||||
// prevent scrolling
|
||||
if ( Math.abs( start.coords[0] - stop.coords[0] ) > 10 ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
$this
|
||||
.bind( touchMoveEvent, moveHandler )
|
||||
.one( touchStopEvent, function( event ) {
|
||||
$this.unbind( touchMoveEvent, moveHandler );
|
||||
if ( start && stop ) {
|
||||
if ( stop.time - start.time < 1000 &&
|
||||
Math.abs( start.coords[0] - stop.coords[0]) > 30 &&
|
||||
Math.abs( start.coords[1] - stop.coords[1]) < 75 ) {
|
||||
start.origin
|
||||
.trigger( "swipe" )
|
||||
|
||||
.trigger( start.coords[0] > stop.coords[0] ? "swipeleft" : "swiperight" );
|
||||
}
|
||||
$this.bind( touchStartEvent, function( event ) {
|
||||
var data = event.originalEvent.touches ?
|
||||
event.originalEvent.touches[ 0 ] : event,
|
||||
start = {
|
||||
time: ( new Date() ).getTime(),
|
||||
coords: [ data.pageX, data.pageY ],
|
||||
origin: $( event.target )
|
||||
},
|
||||
stop;
|
||||
|
||||
function moveHandler( event ) {
|
||||
|
||||
if ( !start ) {
|
||||
return;
|
||||
}
|
||||
|
||||
var data = event.originalEvent.touches ?
|
||||
event.originalEvent.touches[ 0 ] : event;
|
||||
|
||||
stop = {
|
||||
time: ( new Date() ).getTime(),
|
||||
coords: [ data.pageX, data.pageY ]
|
||||
};
|
||||
|
||||
// prevent scrolling
|
||||
if ( Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > 10 ) {
|
||||
event.preventDefault();
|
||||
}
|
||||
}
|
||||
|
||||
$this.bind( touchMoveEvent, moveHandler )
|
||||
.one( touchStopEvent, function( event ) {
|
||||
$this.unbind( touchMoveEvent, moveHandler );
|
||||
|
||||
if ( start && stop ) {
|
||||
if ( stop.time - start.time < 1000 &&
|
||||
Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > 30 &&
|
||||
Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < 75 ) {
|
||||
|
||||
start.origin.trigger( "swipe" )
|
||||
.trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
|
||||
}
|
||||
start = stop = undefined;
|
||||
});
|
||||
});
|
||||
}
|
||||
start = stop = undefined;
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
(function($){
|
||||
(function( $, window ) {
|
||||
// "Cowboy" Ben Alman
|
||||
|
||||
var win = $(window),
|
||||
|
||||
var win = $( window ),
|
||||
special_event,
|
||||
get_orientation,
|
||||
last_orientation;
|
||||
|
||||
|
||||
$.event.special.orientationchange = special_event = {
|
||||
setup: function(){
|
||||
setup: function() {
|
||||
// If the event is supported natively, return false so that jQuery
|
||||
// will bind to the event using DOM methods.
|
||||
if ( $.support.orientation ) { return false; }
|
||||
|
||||
if ( $.support.orientation ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Get the current orientation to avoid initial double-triggering.
|
||||
last_orientation = get_orientation();
|
||||
|
||||
|
||||
// Because the orientationchange event doesn't exist, simulate the
|
||||
// event by testing window dimensions on resize.
|
||||
win.bind( "throttledresize", handler );
|
||||
|
|
@ -187,8 +194,10 @@ $.event.special.swipe = {
|
|||
teardown: function(){
|
||||
// If the event is not supported natively, return false so that
|
||||
// jQuery will unbind the event using DOM methods.
|
||||
if ( $.support.orientation ) { return false; }
|
||||
|
||||
if ( $.support.orientation ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Because the orientationchange event doesn't exist, unbind the
|
||||
// resize event handler.
|
||||
win.unbind( "throttledresize", handler );
|
||||
|
|
@ -196,45 +205,46 @@ $.event.special.swipe = {
|
|||
add: function( handleObj ) {
|
||||
// Save a reference to the bound event handler.
|
||||
var old_handler = handleObj.handler;
|
||||
|
||||
|
||||
handleObj.handler = function( event ) {
|
||||
// Modify event object, adding the .orientation property.
|
||||
event.orientation = get_orientation();
|
||||
|
||||
|
||||
// Call the originally-bound event handler and return its result.
|
||||
return old_handler.apply( this, arguments );
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// If the event is not supported natively, this handler will be bound to
|
||||
// the window resize event to simulate the orientationchange event.
|
||||
function handler() {
|
||||
// Get the current orientation.
|
||||
var orientation = get_orientation();
|
||||
|
||||
|
||||
if ( orientation !== last_orientation ) {
|
||||
// The orientation has changed, so trigger the orientationchange event.
|
||||
last_orientation = orientation;
|
||||
win.trigger( "orientationchange" );
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Get the current page orientation. This method is exposed publicly, should it
|
||||
// be needed, as jQuery.event.special.orientationchange.orientation()
|
||||
$.event.special.orientationchange.orientation = get_orientation = function() {
|
||||
var elem = document.documentElement;
|
||||
return elem && elem.clientWidth / elem.clientHeight < 1.1 ? "portrait" : "landscape";
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
|
||||
})( jQuery, window );
|
||||
|
||||
|
||||
// throttled resize event
|
||||
(function(){
|
||||
(function() {
|
||||
|
||||
$.event.special.throttledresize = {
|
||||
setup: function() {
|
||||
$( this ).bind( "resize", handler );
|
||||
$( this ).bind( "resize", handler );
|
||||
},
|
||||
teardown: function(){
|
||||
$( this ).unbind( "resize", handler );
|
||||
|
|
@ -242,18 +252,22 @@ $.event.special.swipe = {
|
|||
};
|
||||
|
||||
var throttle = 250,
|
||||
handler = function(){
|
||||
handler = function() {
|
||||
curr = ( new Date() ).getTime();
|
||||
diff = curr - lastCall;
|
||||
if( diff >= throttle ){
|
||||
|
||||
if ( diff >= throttle ) {
|
||||
|
||||
lastCall = curr;
|
||||
$( this ).trigger( "throttledresize" );
|
||||
}
|
||||
else{
|
||||
if( heldCall ){
|
||||
|
||||
} else {
|
||||
|
||||
if ( heldCall ) {
|
||||
clearTimeout( heldCall );
|
||||
}
|
||||
//promise a held call will still execute
|
||||
|
||||
// Promise a held call will still execute
|
||||
heldCall = setTimeout( handler, throttle - diff );
|
||||
}
|
||||
},
|
||||
|
|
@ -270,6 +284,7 @@ $.each({
|
|||
swipeleft: "swipe",
|
||||
swiperight: "swipe"
|
||||
}, function( event, sourceEvent ) {
|
||||
|
||||
$.event.special[ event ] = {
|
||||
setup: function() {
|
||||
$( this ).bind( sourceEvent, $.noop );
|
||||
|
|
@ -277,4 +292,4 @@ $.each({
|
|||
};
|
||||
});
|
||||
|
||||
})( jQuery );
|
||||
})( jQuery, this );
|
||||
|
|
|
|||
Loading…
Reference in a new issue