jquery.event.ue
Version:
Respond to Touch and Desktop events using the same handlers, including tap (click), long-press, drag, long-press-drag, pinch/mouse zoom. Used in commercial SPAs and featured in the best-selling book Single Page Web Applications - JavaScript end-to-end.
566 lines (493 loc) • 15.3 kB
HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- see http://www.html5rocks.com/en/mobile/touch.html
prevents native zooming -->
<meta name="viewport" content="width=device-width user-scalable=no
initial-scale=1.0,maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- ie9+ rendering support for latest standards -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Unified event plugin tests 1.3.x</title>
<style>
/** The body settings minimize Mac OSX / iOS
* elastic scrolling (grumble, grumble).
* See http://www.smilingsouls.net/Blog/20110804114957.html.
* More accommodations have been made for iOS in the JavaScript.
*/
body {
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 0;
background-color : #888;
color : #fff;
overflow-x : hidden;
overflow-y : hidden;
overflow : hidden;
}
/** BEGIN block text selects except inside inputs and paragraphs
See http://stackoverflow.com/questions/826782/\
css-rule-to-disable-text-selection-highlighting
Notice IE as needs onselectstart = function(){ return false; }
*/
input, textarea {
-webkit-user-select: text;
-khtml-user-select : text;
-moz-user-select : text;
-o-user-select : text;
user-select : text;
}
* {
-webkit-user-select : none;
-khtml-user-select : none;
-moz-user-select : -moz-none;
-o-user-select : none;
user-select : none;
}
/** END block text selects */
/** BEGIN block dragging */
* {
-webkit-user-drag : none;
-moz-user-drag : none;
user-drag : none;
/** turn off tap highlights on iOS */
-webkit-tap-highlight-color : transparent;
-webkit-touch-callout : none;
}
/** END block dragging */
/* BEGIN divs for Unified Events Binding tests:
utap uheld
uzoomstart uzoommove uzoomend
udragstart udragmove udragend
uheldstart uheldmove uheldend
*/
.btn {
position : absolute;
border-width : 3px;
border-style : solid;
border-color : #cc8 #880 #880 #cc8;
border-radius : 5px;
padding : 5px;
width : 100px;
height : 100px;
font : 12px Arial, Helvetica, sans-serif;
line-height : 12px;
cursor : pointer;
z-index : 0;
background : -webkit-linear-gradient(
top,
rgba(30,87,153,0) 0%,
rgba(203,209,214,0.5) 50%,
rgba(114,124,96,0.5) 51%,
rgba(90,160,53,0.8) 100%
);
background : -moz-linear-gradient(
top,
rgba(30,87,153,0) 0%,
rgba(203,209,214,0.5) 50%,
rgba(114,124,96,0.5) 51%,
rgba(90,160,53,0.8) 100%
);
background : -ms-linear-gradient(
top,
rgba(30,87,153,0) 0%,
rgba(203,209,214,0.49) 50%,
rgba(114,124,96,0.5) 51%,
rgba(90,160,53,0.8) 100%
);
filter : progid:DXImageTransform.Microsoft.gradient(
startColorstr='#001e5799',
endColorstr='#cc5aa035',
GradientType=0
);
background-color : #884;
}
.btn:nth-child(even) {
background-color : #a44;
}
.btn:hover {
border-color : #eea #aa0 #aa0 #eea;
}
.btn-expect {
position : absolute;
left : 0;
right : 0;
bottom : 0;
opacity : 0.5;
padding : 5px;
}
#uzoom {
position : absolute;
top : 12px;
left : 12px;
right : 12px;
bottom : 12px;
padding : 10px;
background-color : #aaa;
font : bold 24px Arial, Helvetica, sans-serif;
border : 3px solid #fff;
border-radius : 12px;
}
#uzoom-report {
position : absolute;
bottom : 16px;
right : 16px;
padding : 8px;
font : bold 24px Arial, Helvetica, sans-serif;
border : 2px solid #fff;
min-width : 150px;
text-align : right;
border-radius : 5px;
box-shadow : 0px 0px 4px 4px #888;
}
/* tap-only test */
#utap {
top : 50px;
left : 50px;
}
/* long press-only test */
#uheld {
top : 50px;
left : 200px;
}
/* drag start+move+end -only test */
#udrag {
top : 50px;
left : 350px;
}
/* long press start+move+end -only test */
#uhelddrag {
top : 50px;
left : 500px;
}
/* utap + uheld */
#combo1 {
top : 200px;
left : 50px;
}
/* utap + uheld + udrag */
#combo2 {
top : 200px;
left : 200px;
}
/* utap + uheld + uhelddrag all */
#combo3 {
top : 200px;
left : 350px;
}
/* utap + uheld + udrag + uhelddrag all */
#combo4 {
top : 200px;
left : 500px;
}
/* utap + uheld + udragstart (only) */
#combo5 {
top : 350px;
left : 50px;
}
/* utap + uheld + udragmove (only)
no drag event should ever fire
*/
#combo6 {
top : 350px;
left : 200px;
}
/* utap + uheld + dragend (only)
no drag event should ever fire
*/
#combo7 {
top : 350px;
left : 350px;
}
/* utap + uheld + uheldstart (only)
*/
#combo8 {
top : 350px;
left : 500px;
}
/* utap + uheld + uheldmove (only)
no uhelddrag events should ever fire
*/
#combo9 {
top : 500px;
left : 50px;
}
/* utap + uheld + uheldend (only)
no uhelddrag events should ever fire
*/
#combo10 {
top : 500px;
left : 200px;
}
/* uheld + uhelddrag all */
#combo11 {
top : 500px;
left : 350px;
}
/* uheld + uheldstart only
no uhelddrag events should ever fire
*/
#combo12 {
top : 500px;
left : 500px;
}
/* uheld + uheldmove only)
no uhelddrag events should ever fire
*/
#combo13 {
top : 650px;
left : 50px;
}
/* uheld + uheldend (only)
no uhelddrag events should ever fire
*/
#combo14 {
top : 650px;
left : 200px;
}
/* udrag + uzoom */
#combo15 {
top : 650px;
left : 350px;
}
/* uheld + uzoom */
#combo16 {
top : 650px;
left : 500px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.event.ue.js"></script>
<script>
$(document).ready( function() {
var
stateMap = {
max_z_index : 1,
zoom_num : 1000,
px_drag_top : undefined,
px_drag_left : undefined,
origin_x_px : $(document.body).width() / 2,
origin_y_px : $(document.body).height() / 2
},
onTap, onHeld,
onZoomstart, onZoommove, onZoomend,
onDragstart, onDragmove, onDragend
;
onZoomstart = function ( event ){
console.log( event.type );
$('#uzoom-report-val').text(String(stateMap.zoom_num));
};
onZoommove = function ( event ){
var scale_num, scale_str;
console.log( event.type );
scale_num = stateMap.zoom_num / 1000;
scale_str = 'scale(' + String( scale_num ) + ')';
stateMap.zoom_num += event.px_delta_zoom || 0;
$( '#uzoom-report-val' ).text(String(stateMap.zoom_num));
$( '#uzoom' ).css({ transform : scale_str });
};
onZoomend = function ( event ){
console.log( event.type );
$('#uzoom-report-val').text(String(stateMap.zoom_num));
};
onTap = function ( event ){
var $this = $(this);
console.log( event.type );
$this.css('background-color', '#cc0');
setTimeout(function(){
$this.css('background-color','');
},200);
return false;
};
onHeld = function ( event ){
var $this = $(this);
console.log( event.type );
$this.css('background-color', '#0cc');
setTimeout(function(){
$this.css('background-color','');
},200);
return false;
};
onDragstart = function ( event ){
var
$this = $(this),
color_code = event.type === 'uheldstart' ? '#0ff' : '#ff0'
;
console.log( event.type );
if ( parseInt($this.css('z-index')) < stateMap.max_z_index ){
stateMap.max_z_index++;
}
$this.css({
'border-color' : color_code,
'cursor' : 'move',
'z-index' : stateMap.max_z_index
});
};
onDragmove = function ( event ){
var
$this = $(this),
scale_num = 1000 / stateMap.zoom_num,
offset_map
;
console.log( event.type );
if ( stateMap.px_drag_top === undefined ){
offset_map = $this.offset();
// scale to origin
stateMap.px_drag_top = ( offset_map.top - stateMap.origin_y_px ) * scale_num
+ stateMap.origin_y_px - ( 23 * scale_num );
stateMap.px_drag_left = ( offset_map.left - stateMap.origin_x_px ) * scale_num
+ stateMap.origin_x_px - ( 23 * scale_num );
}
stateMap.px_drag_top += ( event.px_delta_y * scale_num );
stateMap.px_drag_left += ( event.px_delta_x * scale_num );
$this.css({ top : stateMap.px_drag_top, left : stateMap.px_drag_left });
};
onDragend = function ( event ){
console.log( event.type );
$(this).css({'border-color' : '', cursor : '' });
stateMap.px_drag_top = stateMap.px_drag_left = undefined;
};
$('#utap') .bind('utap.utap', onTap );
$('#uheld').bind('uheld.uheld', onHeld );
$('#uzoom')
.bind('uzoomstart', onZoomstart )
.bind('uzoommove', onZoommove )
.bind('uzoomend', onZoomend )
$('#udrag')
.bind('udragstart.udrag', onDragstart )
.bind('udragmove.udrag', onDragmove )
.bind('udragend.udrag', onDragend )
;
$('#uhelddrag')
.bind('uheldstart.uheldd', onDragstart )
.bind('uheldmove.uheldd', onDragmove )
.bind('uheldend.uheldd', onDragend )
;
$('#combo1')
.bind('utap.combo1', onTap )
.bind('uheld.combo1', onHeld )
;
$('#combo2')
.bind('utap.combo2', onTap )
.bind('uheld.combo2', onHeld )
.bind('udragstart.combo2', onDragstart )
.bind('udragmove.combo2', onDragmove )
.bind('udragend.combo2', onDragend )
;
$('#combo3')
.bind('utap.combo3', onTap )
.bind('uheld.combo3', onHeld )
.bind('uheldstart.combo3', onDragstart )
.bind('uheldmove.combo3', onDragmove )
.bind('uheldend.combo3', onDragend )
;
$('#combo4')
.bind('utap.combo4', onTap )
.bind('uheld.combo4', onHeld )
.bind('uheldstart.combo4', onDragstart )
.bind('uheldmove.combo4', onDragmove )
.bind('uheldend.combo4', onDragend )
.bind('udragstart.combo4', onDragstart )
.bind('udragmove.combo4', onDragmove )
.bind('udragend.combo4', onDragend )
;
$('#combo5')
.bind('utap.combo5', onTap )
.bind('uheld.combo5', onHeld )
.bind('udragstart.combo5', null )
;
$('#combo6')
.bind('utap.combo6', onTap )
.bind('uheld.combo6', onHeld )
.bind('udragmove.combo6', onDragmove )
;
$('#combo7')
.bind('utap.combo7', onTap )
.bind('uheld.combo7', onHeld )
.bind('udragend.combo7', onDragend )
;
$('#combo8')
.bind('utap.combo8', onTap )
.bind('uheld.combo8', onHeld )
.bind('uheldstart.combo8', null )
;
$('#combo9')
.bind('utap.combo9', onTap )
.bind('uheld.combo9', onHeld )
.bind('uheldmove.combo9', onDragmove )
;
$('#combo10')
.bind('utap.combo10', onTap )
.bind('uheld.combo10', onHeld )
.bind('uheldend.combo10', onDragend )
;
$('#combo11')
.bind('uheld.combo11', onHeld )
.bind('uheldstart.combo11', onDragstart )
.bind('uheldmove.combo11', onDragmove )
.bind('uheldend.combo11', onDragend )
;
$('#combo12')
.bind('uheld.combo12', onHeld )
.bind('uheldstart.combo12', null )
;
$('#combo13')
.bind('uheld.combo13', onHeld )
.bind('uheldmove.combo13' , onDragmove )
;
$('#combo14')
.bind('uheld.combo14', onHeld )
.bind('uheldend.combo14', onDragend )
;
$('#uzoom-report-val').text(String(stateMap.zoom_num));
});
</script>
</head>
<body>
<div id="uzoom">zoom area
<div id="uzoom-report">Zoom:
<span id="uzoom-report-val"></span>
</div>
<div id="utap" class="btn">tap
<div class="btn-expect">[y] tap</div></div>
<div id="uheld" class="btn">held
<div class="btn-expect">[y] held</div></div>
<div id="udrag" class="btn">drag
<div class="btn-expect">[y] drag</div></div>
<div id="uhelddrag" class="btn">helddrag
<div class="btn-expect">[y] helddrag</div></div>
<div id="combo1" class="btn">tap<br/>+held
<div class="btn-expect">[y] tap<br/>[y] held</div></div>
<div id="combo2" class="btn">tap<br/>+held<br/>+drag
<div class="btn-expect">[y] tap<br/>[y] held</div></div>
<div id="combo3" class="btn">tap<br/>+held<br/>+helddrag
<div class="btn-expect">[y] tap<br/>[y] held<br/>[y] helddrag</div></div>
<div id="combo4" class="btn">tap<br/>+held<br/>+drag<br/>+helddrag
<div class="btn-expect">[y] tap<br/>[y] held<br/>
[y] drag<br/> [y] helddrag</div></div>
<div id="combo5" class="btn">tap<br/>+held<br/>+dragstart
<div class="btn-expect">[y] tap<br/>[y] held<br/>[n] drag</div></div>
<div id="combo6" class="btn">tap<br/>+held<br/>+dragmove
<div class="btn-expect">[y] tap<br/>[y] held<br/>[n] drag</div></div>
<div id="combo7" class="btn">tap<br/>+held<br/>+dragend
<div class="btn-expect">[y] tap<br/>[y] held<br/>[n] drag</div></div>
<div id="combo8" class="btn">tap<br/>+held<br/>+heldstart
<div class="btn-expect">[y] tap<br/>[y] held<br/>[n] helddrag</div></div>
<div id="combo9" class="btn">tap<br/>+held<br/>+heldmove
<div class="btn-expect">[y] tap<br/>[y] held<br/>[n] helddrag</div></div>
<div id="combo10" class="btn">tap<br/>+held<br/>+heldend
<div class="btn-expect">[y] tap<br/>[y] held<br/>[n] helddrag</div></div>
<div id="combo11" class="btn">held<br/>+helddrag
<div class="btn-expect">[y] held<br/>[y] helddrag</div></div>
<div id="combo12" class="btn">held<br/>+heldstart
<div class="btn-expect">[y] held<br/>[n] helddrag</div></div>
<div id="combo13" class="btn">held<br/>+heldmove
<div class="btn-expect">[y] held<br/>[n] helddrag</div></div>
<div id="combo14" class="btn">held<br/>+heldend
<div class="btn-expect">[y] held<br/>[n] helddrag</div></div>
</div>
</body>
</html>