1/* 2 * touchSwipe - jQuery Plugin 3 * http://plugins.jquery.com/project/touchSwipe 4 * http://labs.skinkers.com/touchSwipe/ 5 * 6 * Copyright (c) 2010 Matt Bryson (www.skinkers.com) 7 * Dual licensed under the MIT or GPL Version 2 licenses. 8 * 9 * $version: 1.2.5 10 * 11 * Changelog 12 * $Date: 2010-12-12 (Wed, 12 Dec 2010) $ 13 * $version: 1.0.0 14 * $version: 1.0.1 - removed multibyte comments 15 * 16 * $Date: 2011-21-02 (Mon, 21 Feb 2011) $ 17 * $version: 1.1.0 - added allowPageScroll property to allow swiping and scrolling of page 18 * - changed handler signatures so one handler can be used for multiple events 19 * $Date: 2011-23-02 (Wed, 23 Feb 2011) $ 20 * $version: 1.2.0 - added click handler. This is fired if the user simply clicks and does not swipe. The event object and click target are passed to handler. 21 * - If you use the http://code.google.com/p/jquery-ui-for-ipad-and-iphone/ plugin, you can also assign jQuery mouse events to children of a touchSwipe object. 22 * $version: 1.2.1 - removed console log! 23 * 24 * $version: 1.2.2 - Fixed bug where scope was not preserved in callback methods. 25 * 26 * $Date: 2011-28-04 (Thurs, 28 April 2011) $ 27 * $version: 1.2.4 - Changed licence terms to be MIT or GPL inline with jQuery. Added check for support of touch events to stop non compatible browsers erroring. 28 * 29 * $Date: 2011-27-09 (Tues, 27 September 2011) $
30 * $version: 1.2.5 - Added support for testing swipes with mouse on desktop browser (thanks to https://github.com/joelhy) 31 32 * A jQuery plugin to capture left, right, up and down swipes on touch devices. 33 * You can capture 2 finger or 1 finger swipes, set the threshold and define either a catch all handler, or individual direction handlers. 34 * Options: 35 * swipe Function A catch all handler that is triggered for all swipe directions. Handler is passed 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe. 36 * swipeLeft Function A handler that is triggered for "left" swipes. Handler is passed 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe. 37 * swipeRight Function A handler that is triggered for "right" swipes. Handler is passed 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe. 38 * swipeUp Function A handler that is triggered for "up" swipes. Handler is passed 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe. 39 * swipeDown Function A handler that is triggered for "down" swipes. Handler is passed 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe. 40 * swipeStatus Function A handler triggered for every phase of the swipe. Handler is passed 4 arguments: event : The original event object, phase:The current swipe face, either "start?, "move?, "end? or "cancel?. direction : The swipe direction, either "up?, "down?, "left " or "right?.distance : The distance of the swipe. 41 * click Function A handler triggered when a user just clicks on the item, rather than swipes it. If they do not move, click is triggered, if they do move, it is not. 42 * 43 * fingers int Default 1. The number of fingers to trigger the swipe, 1 or 2. 44 * threshold int Default 75. The number of pixels that the user must move their finger by before it is considered a swipe. 45 * triggerOnTouchEnd Boolean Default true If true, the swipe events are triggered when the touch end event is received (user releases finger). If false, it will be triggered on reaching the threshold, and then cancel the touch event automatically. 46 * allowPageScroll String Default "auto". How the browser handles page scrolls when the user is swiping on a touchSwipe object. 47 * "auto" : all undefined swipes will cause the page to scroll in that direction. 48 * "none" : the page will not scroll when user swipes. 49 * "horizontal" : will force page to scroll on horizontal swipes. 50 * "vertical" : will force page to scroll on vertical swipes. 51 * 52 * This jQuery plugin will only run on devices running Mobile Webkit based browsers (iOS 2.0+, android 2.2+) 53 */ 54(function($) 55{ 56 57 58 59 $.fn.swipe = function(options) 60 { 61 if (!this) return false; 62 63 // Default thresholds & swipe functions 64 var defaults = { 65 66 fingers : 1, // int - The number of fingers to trigger the swipe, 1 or 2. Default is 1. 67 threshold : 75, // int - The number of pixels that the user must move their finger by before it is considered a swipe. Default is 75. 68 69 swipe : null, // Function - A catch all handler that is triggered for all swipe directions. Accepts 2 arguments, the original event object and the direction of the swipe : "left", "right", "up", "down". 70 swipeLeft : null, // Function - A handler that is triggered for "left" swipes. Accepts 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe. 71 swipeRight : null, // Function - A handler that is triggered for "right" swipes. Accepts 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe. 72 swipeUp : null, // Function - A handler that is triggered for "up" swipes. Accepts 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe. 73 swipeDown : null, // Function - A handler that is triggered for "down" swipes. Accepts 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe. 74 swipeStatus : null, // Function - A handler triggered for every phase of the swipe. Handler is passed 4 arguments: event : The original event object, phase:The current swipe face, either "start?, "move?, "end? or "cancel?. direction : The swipe direction, either "up?, "down?, "left " or "right?.distance : The distance of the swipe. 75 click : null, // Function - A handler triggered when a user just clicks on the item, rather than swipes it. If they do not move, click is triggered, if they do move, it is not. 76 77 triggerOnTouchEnd : true, // Boolean, if true, the swipe events are triggered when the touch end event is received (user releases finger). If false, it will be triggered on reaching the threshold, and then cancel the touch event automatically. 78 allowPageScroll : "auto" /* How the browser handles page scrolls when the user is swiping on a touchSwipe object. 79 "auto" : all undefined swipes will cause the page to scroll in that direction. 80 "none" : the page will not scroll when user swipes. 81 "horizontal" : will force page to scroll on horizontal swipes. 82 "vertical" : will force page to scroll on vertical swipes. 83 */ 84 }; 85 86 87 //Constants 88 var LEFT = "left"; 89 var RIGHT = "right"; 90 var UP = "up"; 91 var DOWN = "down"; 92 var NONE = "none"; 93 var HORIZONTAL = "horizontal"; 94 var VERTICAL = "vertical"; 95 var AUTO = "auto"; 96 97 var PHASE_START="start"; 98 var PHASE_MOVE="move"; 99 var PHASE_END="end"; 100 var PHASE_CANCEL="cancel"; 101 102 var hasTouch = 'ontouchstart' in window, 103 START_EV = hasTouch ? 'touchstart' : 'mousedown', 104 MOVE_EV = hasTouch ? 'touchmove' : 'mousemove', 105 END_EV = hasTouch ? 'touchend' : 'mouseup', 106 CANCEL_EV = 'touchcancel'; 107 108 var phase="start"; 109 110 if (options.allowPageScroll==undefined && (options.swipe!=undefined || options.swipeStatus!=undefined)) 111 options.allowPageScroll=NONE; 112 113 if (options) 114 $.extend(defaults, options); 115 116 117 /** 118 * Setup each object to detect swipe gestures 119 */ 120 return this.each(function() 121 { 122 var that = this; 123 var $this = $(this); 124 125 var triggerElementID = null; // this variable is used to identity the triggering element 126 var fingerCount = 0; // the current number of fingers being used. 127 128 //track mouse points / delta 129 var start={x:0, y:0}; 130 var end={x:0, y:0}; 131 var delta={x:0, y:0}; 132 133 134 /** 135 * Event handler for a touch start event. 136 * Stops the default click event from triggering and stores where we touched 137 */ 138 function touchStart(event) 139 { 140 var evt = hasTouch ? event.touches[0] : event; 141 phase = PHASE_START; 142 143 if (hasTouch) { 144 // get the total number of fingers touching the screen 145 fingerCount = event.touches.length; 146 } 147 148 //clear vars.. 149 distance=0; 150 direction=null; 151 152 // check the number of fingers is what we are looking for 153 if (fingerCount == defaults.fingers || !hasTouch) 154 { 155 // get the coordinates of the touch
156 start.x = end.x = evt.pageX; 157 start.y = end.y = evt.pageY; 158 159 if (defaults.swipeStatus) 160 triggerHandler(event, phase); 161 } 162 else 163 { 164 //touch with more/less than the fingers we are looking for 165 touchCancel(event); 166 } 167 168 that.addEventListener(MOVE_EV, touchMove, false); 169 that.addEventListener(END_EV, touchEnd, false); 170 } 171 172 /** 173 * Event handler for a touch move event. 174 * If we change fingers during move, then cancel the event 175 */ 176 function touchMove(event) 177 { 178 if (phase == PHASE_END || phase == PHASE_CANCEL) 179 return; 180 181 var evt = hasTouch ? event.touches[0] : event; 182 183 end.x = evt.pageX; 184 end.y = evt.pageY; 185 186 direction = caluculateDirection(); 187 if (hasTouch) { 188 fingerCount = event.touches.length; 189 } 190 191 phase = PHASE_MOVE 192 193 //Check if we need to prevent default evnet (page scroll) or not 194 validateDefaultEvent(event, direction); 195 196 if ( fingerCount == defaults.fingers || !hasTouch) 197 { 198 distance = caluculateDistance(); 199 200 if (defaults.swipeStatus) 201 triggerHandler(event, phase, direction, distance); 202 203 //If we trigger whilst dragging, not on touch end, then calculate now... 204 if (!defaults.triggerOnTouchEnd) 205 { 206 // if the user swiped more than the minimum length, perform the appropriate action 207 if ( distance >= defaults.threshold ) 208 { 209 phase = PHASE_END; 210 triggerHandler(event, phase); 211 touchCancel(event); // reset the variables 212 } 213 } 214 } 215 else 216 { 217 phase = PHASE_CANCEL; 218 triggerHandler(event, phase); 219 touchCancel(event); 220 } 221 } 222 223 /** 224 * Event handler for a touch end event. 225 * Calculate the direction and trigger events 226 */ 227 function touchEnd(event) 228 { 229 event.preventDefault(); 230 231 distance = caluculateDistance(); 232 direction = caluculateDirection(); 233 234 if (defaults.triggerOnTouchEnd) 235 { 236 phase = PHASE_END; 237 // check to see if more than one finger was used and that there is an ending coordinate 238 if ( (fingerCount == defaults.fingers || !hasTouch) && end.x != 0 ) 239 { 240 // if the user swiped more than the minimum length, perform the appropriate action 241 if ( distance >= defaults.threshold ) 242 { 243 triggerHandler(event, phase); 244 touchCancel(event); // reset the variables 245 } 246 else 247 { 248 phase = PHASE_CANCEL; 249 triggerHandler(event, phase); 250 touchCancel(event); 251 } 252 } 253 else 254 { 255 phase = PHASE_CANCEL; 256 triggerHandler(event, phase); 257 touchCancel(event); 258 } 259 } 260 else if (phase == PHASE_MOVE) 261 { 262 phase = PHASE_CANCEL; 263 triggerHandler(event, phase); 264 touchCancel(event); 265 } 266 that.removeEventListener(MOVE_EV, touchMove, false); 267 that.removeEventListener(END_EV, touchEnd, false); 268 } 269 270 /** 271 * Event handler for a touch cancel event. 272 * Clears current vars 273 */ 274 function touchCancel(event) 275 { 276 // reset the variables back to default values 277 fingerCount = 0; 278 279 start.x = 0; 280 start.y = 0; 281 end.x = 0; 282 end.y = 0; 283 delta.x = 0; 284 delta.y = 0; 285 } 286 287 288 /** 289 * Trigger the relevant event handler 290 * The handlers are passed the original event, the element that was swiped, and in the case of the catch all handler, the direction that was swiped, "left", "right", "up", or "down" 291 */ 292 function triggerHandler(event, phase) 293 { 294 //update status 295 if (defaults.swipeStatus) 296 defaults.swipeStatus.call($this,event, phase, direction || null, distance || 0); 297 298 299 if (phase == PHASE_CANCEL) 300 { 301 if (defaults.click && (fingerCount==1 || !hasTouch) && (isNaN(distance) || distance==0)) 302 defaults.click.call($this,event, event.target); 303 } 304 305 if (phase == PHASE_END) 306 { 307 //trigger catch all event handler 308 if (defaults.swipe) 309 { 310 311 defaults.swipe.call($this,event, direction, distance); 312 313 } 314 //trigger direction specific event handlers 315 switch(direction) 316 { 317 case LEFT : 318 if (defaults.swipeLeft) 319 defaults.swipeLeft.call($this,event, direction, distance); 320 break; 321 322 case RIGHT : 323 if (defaults.swipeRight) 324 defaults.swipeRight.call($this,event, direction, distance); 325 break; 326 327 case UP : 328 if (defaults.swipeUp) 329 defaults.swipeUp.call($this,event, direction, distance); 330 break; 331 332 case DOWN : 333 if (defaults.swipeDown) 334 defaults.swipeDown.call($this,event, direction, distance); 335 break; 336 } 337 } 338 } 339 340 341 /** 342 * Checks direction of the swipe and the value allowPageScroll to see if we should allow or prevent the default behaviour from occurring. 343 * This will essentially allow page scrolling or not when the user is swiping on a touchSwipe object. 344 */ 345 function validateDefaultEvent(event, direction) 346 { 347 if( defaults.allowPageScroll==NONE ) 348 { 349 event.preventDefault(); 350 } 351 else 352 { 353 var auto=defaults.allowPageScroll==AUTO; 354 355 switch(direction) 356 { 357 case LEFT : 358 if ( (defaults.swipeLeft && auto) || (!auto && defaults.allowPageScroll!=HORIZONTAL)) 359 event.preventDefault(); 360 break; 361 362 case RIGHT : 363 if ( (defaults.swipeRight && auto) || (!auto && defaults.allowPageScroll!=HORIZONTAL)) 364 event.preventDefault(); 365 break; 366 367 case UP : 368 if ( (defaults.swipeUp && auto) || (!auto && defaults.allowPageScroll!=VERTICAL)) 369 event.preventDefault(); 370 break; 371 372 case DOWN : 373 if ( (defaults.swipeDown && auto) || (!auto && defaults.allowPageScroll!=VERTICAL)) 374 event.preventDefault(); 375 break; 376 } 377 } 378 379 } 380 381 382 383 /** 384 * Calcualte the length / distance of the swipe 385 */ 386 function caluculateDistance() 387 { 388 return Math.round(Math.sqrt(Math.pow(end.x - start.x,2) + Math.pow(end.y - start.y,2))); 389 } 390 391 /** 392 * Calcualte the angle of the swipe 393 */ 394 function caluculateAngle() 395 { 396 var X = start.x-end.x; 397 var Y = end.y-start.y; 398 var r = Math.atan2(Y,X); //radians 399 var angle = Math.round(r*180/Math.PI); //degrees 400 401 //ensure value is positive 402 if (angle < 0) 403 angle = 360 - Math.abs(angle); 404 405 return angle; 406 } 407 408 /** 409 * Calcualte the direction of the swipe 410 * This will also call caluculateAngle to get the latest angle of swipe 411 */ 412 function caluculateDirection() 413 {
414 var angle = caluculateAngle(); 415 416 if ( (angle <= 45) && (angle >= 0) ) 417 return LEFT; 418 419 else if ( (angle <= 360) && (angle >= 315) ) 420 return LEFT; 421 422 else if ( (angle >= 135) && (angle <= 225) ) 423 return RIGHT; 424 425 else if ( (angle > 45) && (angle < 135) ) 426 return DOWN; 427 428 else 429 return UP; 430 } 431 432 433 434 // Add gestures to all swipable areas if supported 435 try 436 { 437 438 this.addEventListener(START_EV, touchStart, false); 439 this.addEventListener(CANCEL_EV, touchCancel); 440 } 441 catch(e) 442 { 443 //touch not supported 444 } 445 446 }); 447 }; 448 449 450 451 452})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.