src/widgets/common/js/jquery.mobile.tizen.pinch.js

   1 /* ***************************************************************************
   2  * Copyright (c) 2000 - 2013 Samsung Electronics Co., Ltd.
   3  *
   4  * Permission is hereby granted, free of charge, to any person obtaining a
   5  * copy of this software and associated documentation files (the "Software"),
   6  * to deal in the Software without restriction, including without limitation
   7  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
   8  * and/or sell copies of the Software, and to permit persons to whom the
   9  * Software is furnished to do so, subject to the following conditions:
  10  *
  11  * The above copyright notice and this permission notice shall be included in
  12  * all copies or substantial portions of the Software.
  13  *
  14  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  15  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  16  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  17  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  18  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  19  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  20  * DEALINGS IN THE SOFTWARE.
  21  * ***************************************************************************
  22  *
  23  *      Author: Minkyu Kang <mk7.kang@samsung.com>
  24  */
  25
  26 /*
  27  * Pinch Event
  28  *
  29  * Events
  30  *      pinchstart: triggered when start the touched two points
  31  *      pinch: triggered when move the touch point after pinchstart event occured
  32  *      pinchend: triggered when touchend event after pinchstart event occured
  33  *
  34  * Parameters
  35  *      point: touched points
  36  *      ratio: origin point-to-current point ratio for moving distance
  37  *
  38  *      $("#pinch").bind("pinch", function (e, p) {
  39  *              console.log("point[0].x: " + p.point[0].x);
  40  *              console.log("point[0].y: " + p.point[0].y);
  41  *              console.log("point[1].x: " + p.point[1].x);
  42  *              console.log("point[1].y: " + p.point[1].y);
  43  *              console.log("ratio: " + p.ratio);
  44  *      });
  45  *
  46  * Options
  47  *      $.mobile.pinch.enabled: true or false
  48  *      $.mobile.pinch.min: minimum value of ratio
  49  *      $.mobile.pinch.max: maximum value of ratio
  50  *      $.mobile.pinch.factor: scale factor of ratio
  51  *      $.mobile.pinch.threshold: move threshold of ratio
  52  *      $.mobile.pinch.interval: interval for pinch event
  53  */
  54
  55 ( function( $, window, undefined ) {
  56
  57 pinch_event = {
  58         setup: function () {
  59                 var thisObject = this,
  60                         $this = $( thisObject );
  61
  62                 if ( !$.mobile.support.touch ) {
  63                         return;
  64                 }
  65
  66                 function getDistance( point ) {
  67                         var x = point[0].x - point[1].x,
  68                                 y = point[0].y - point[0].y;
  69
  70                         return Math.sqrt( ( x * x ) + ( y * y ) );
  71                 }
  72
  73                 function getParameter( point, ratio ) {
  74                         return { point: point, ratio: ratio };
  75                 }
  76
  77                 $this.bind( "touchstart", function ( event ) {
  78                         var data = event.originalEvent.touches,
  79                                 origin,
  80                                 last_ratio = 1,
  81                                 processing = false;
  82
  83                         if ( !$.mobile.pinch.enabled ) {
  84                                 return;
  85                         }
  86
  87                         if ( data.length != 2 ) {
  88                                 return;
  89                         }
  90
  91                         origin = [
  92                                         { x: data[0].pageX, y: data[0].pageY },
  93                                         { x: data[1].pageX, y: data[1].pageY }
  94                         ];
  95
  96                         $( event.target ).trigger( "pinchstart", getParameter( origin, undefined ) );
  97
  98                         function pinchHandler( event ) {
  99                                 var data = event.originalEvent.touches,
 100                                         current,
 101                                         ratio,
 102                                         delta,
 103                                         factor = $( window ).width() / $.mobile.pinch.factor;
 104
 105                                 if ( processing ) {
 106                                         return;
 107                                 }
 108
 109                                 if ( !origin ) {
 110                                         return;
 111                                 }
 112
 113                                 current = [
 114                                                 { x: data[0].pageX, y: data[0].pageY },
 115                                                 { x: data[1].pageX, y: data[1].pageY }
 116                                 ];
 117
 118                                 delta = getDistance( current ) - getDistance( origin );
 119
 120                                 ratio = 1 + delta / factor;
 121
 122                                 if ( ratio < $.mobile.pinch.min ) {
 123                                         ratio = $.mobile.pinch.min;
 124                                 } else if ( ratio > $.mobile.pinch.max ) {
 125                                         ratio = $.mobile.pinch.max;
 126                                 }
 127
 128                                 if ( Math.abs( ratio - last_ratio ) < $.mobile.pinch.threshold ) {
 129                                         return;
 130                                 }
 131
 132                                 $( event.target ).trigger( "pinch", getParameter( current, ratio ) );
 133
 134                                 last_ratio = ratio;
 135
 136                                 if ( $.mobile.pinch.interval ) {
 137                                         processing = true;
 138
 139                                         setTimeout( function () {
 140                                                 processing = false;
 141                                         }, $.mobile.pinch.interval );
 142                                 }
 143                         }
 144
 145                         $this.bind( "touchmove", pinchHandler )
 146                                 .one( "touchend", function ( event ) {
 147                                         $this.unbind( "touchmove", pinchHandler );
 148                                         $( event.target ).trigger( "pinchend",
 149                                                                 getParameter( undefined, last_ratio ) );
 150
 151                                         origin = undefined;
 152                                         current = undefined;
 153                                         last_ratio = 1;
 154                                         processing = false;
 155                                 });
 156                 });
 157         }
 158 };
 159
 160 $.event.special["pinch"] = pinch_event;
 161
 162 $.mobile.pinch = {
 163         enabled: true,
 164         min: 0.1,
 165         max: 3,
 166         factor: 4,
 167         threshold: 0.01,
 168         interval: 50
 169 };
 170
 171 })( jQuery, this );