From: Minkyu Kang Date: Fri, 11 Jan 2013 02:42:22 +0000 (+0900) Subject: pinch: added new event called pinch X-Git-Tag: accepted/tizen_2.1/20130425.023924~7^2~69 X-Git-Url: http://review.tizen.org/git/?a=commitdiff_plain;h=5fd567f42c985a833248a1ef346c967993e72ec9;p=framework%2Fweb%2Fweb-ui-fw.git pinch: added new event called pinch This patch adds support follwing 3 events pinchstart: triggered when start the touched two points pinch: triggered when move the touch point after pinchstart event occured pinchend: triggered when touchend event after pinchstart event occured Change-Id: Ib9c179eb346a6a557d3be8def032e65af10ed7dc --- diff --git a/demos/tizen-winsets/index.html b/demos/tizen-winsets/index.html index 5d1de8a..15b727a 100644 --- a/demos/tizen-winsets/index.html +++ b/demos/tizen-winsets/index.html @@ -296,6 +296,7 @@ + diff --git a/demos/tizen-winsets/tips/pinch-event/pinch.html b/demos/tizen-winsets/tips/pinch-event/pinch.html new file mode 100644 index 0000000..bf92117 --- /dev/null +++ b/demos/tizen-winsets/tips/pinch-event/pinch.html @@ -0,0 +1,13 @@ + +
+
+

Pinch Event

+
+
+
+ +
+
+
+
+
diff --git a/demos/tizen-winsets/tips/pinch-event/pinch.js b/demos/tizen-winsets/tips/pinch-event/pinch.js new file mode 100644 index 0000000..59cff62 --- /dev/null +++ b/demos/tizen-winsets/tips/pinch-event/pinch.js @@ -0,0 +1,49 @@ +$( document ).bind( "pagecreate", function () { + $("#pinch_page").bind( "pageshow", function () { + var last_ratio = 1, + current_ratio; + + function get_ratio ( ratio ) { + var v = last_ratio + ratio - 1; + + if ( v < $.mobile.pinch.min ) { + v = $.mobile.pinch.min; + } else if ( v > $.mobile.pinch.max ) { + v = $.mobile.pinch.max; + } + + return v; + } + + $("#pinch_demo").bind( "pinch", function ( e, p ) { + var ratio; + + ratio = get_ratio( p.ratio ); + + if ( current_ratio == ratio ) { + return; + } + + current_ratio = ratio; + + $("#pinch_demo").find("img") + .css({ + "-webkit-transform": "scale(" + current_ratio + ")", + "-webkit-transition": "-webkit-transform 0.15s ease" + }); + }); + + $("#pinch_demo").bind( "pinchstart", function ( e, p ) { + }); + + $("#pinch_demo").bind( "pinchend", function ( e, p ) { + last_ratio = get_ratio( p.ratio ); + }); + }); + + $("#pinch_page").bind( "pagebeforehide", function () { + $("#pinch_demo").unbind("pinch") + .unbind("pinchstart") + .unbind("pinchend"); + }); +}); diff --git a/demos/tizen-winsets/tips/pinch-event/test.jpg b/demos/tizen-winsets/tips/pinch-event/test.jpg new file mode 100644 index 0000000..2b57959 Binary files /dev/null and b/demos/tizen-winsets/tips/pinch-event/test.jpg differ diff --git a/src/widgets/common/js/jquery.mobile.tizen.pinch.js b/src/widgets/common/js/jquery.mobile.tizen.pinch.js new file mode 100644 index 0000000..a0f0eb7 --- /dev/null +++ b/src/widgets/common/js/jquery.mobile.tizen.pinch.js @@ -0,0 +1,171 @@ +/* *************************************************************************** + * Copyright (c) 2000 - 2013 Samsung Electronics Co., Ltd. + * + * Permission is hereby granted, free of charge, to any person obtaining a + * copy of this software and associated documentation files (the "Software"), + * to deal in the Software without restriction, including without limitation + * the rights to use, copy, modify, merge, publish, distribute, sublicense, + * and/or sell copies of the Software, and to permit persons to whom the + * Software is furnished to do so, subject to the following conditions: + * + * The above copyright notice and this permission notice shall be included in + * all copies or substantial portions of the Software. + * + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER + * DEALINGS IN THE SOFTWARE. + * *************************************************************************** + * + * Author: Minkyu Kang + */ + +/* + * Pinch Event + * + * Events + * pinchstart: triggered when start the touched two points + * pinch: triggered when move the touch point after pinchstart event occured + * pinchend: triggered when touchend event after pinchstart event occured + * + * Parameters + * point: touched points + * ratio: origin point-to-current point ratio for moving distance + * + * $("#pinch").bind("pinch", function (e, p) { + * console.log("point[0].x: " + p.point[0].x); + * console.log("point[0].y: " + p.point[0].y); + * console.log("point[1].x: " + p.point[1].x); + * console.log("point[1].y: " + p.point[1].y); + * console.log("ratio: " + p.ratio); + * }); + * + * Options + * $.mobile.pinch.enabled: true or false + * $.mobile.pinch.min: minimum value of ratio + * $.mobile.pinch.max: maximum value of ratio + * $.mobile.pinch.factor: scale factor of ratio + * $.mobile.pinch.threshold: move threshold of ratio + * $.mobile.pinch.interval: interval for pinch event + */ + +( function( $, window, undefined ) { + +pinch_event = { + setup: function () { + var thisObject = this, + $this = $( thisObject ); + + if ( !$.mobile.support.touch ) { + return; + } + + function getDistance( point ) { + var x = point[0].x - point[1].x, + y = point[0].y - point[0].y; + + return Math.sqrt( ( x * x ) + ( y * y ) ); + } + + function getParameter( point, ratio ) { + return { point: point, ratio: ratio }; + } + + $this.bind( "touchstart", function ( event ) { + var data = event.originalEvent.touches, + origin, + last_ratio = 1, + processing = false; + + if ( !$.mobile.pinch.enabled ) { + return; + } + + if ( data.length != 2 ) { + return; + } + + origin = [ + { x: data[0].pageX, y: data[0].pageY }, + { x: data[1].pageX, y: data[1].pageY } + ]; + + $( event.target ).trigger( "pinchstart", getParameter( origin, undefined ) ); + + function pinchHandler( event ) { + var data = event.originalEvent.touches, + current, + ratio, + delta, + factor = $( window ).width() / $.mobile.pinch.factor; + + if ( processing ) { + return; + } + + if ( !origin ) { + return; + } + + current = [ + { x: data[0].pageX, y: data[0].pageY }, + { x: data[1].pageX, y: data[1].pageY } + ]; + + delta = getDistance( current ) - getDistance( origin ); + + ratio = 1 + delta / factor; + + if ( ratio < $.mobile.pinch.min ) { + ratio = $.mobile.pinch.min; + } else if ( ratio > $.mobile.pinch.max ) { + ratio = $.mobile.pinch.max; + } + + if ( Math.abs( ratio - last_ratio ) < $.mobile.pinch.threshold ) { + return; + } + + $( event.target ).trigger( "pinch", getParameter( current, ratio ) ); + + last_ratio = ratio; + + if ( $.mobile.pinch.interval ) { + processing = true; + + setTimeout( function () { + processing = false; + }, $.mobile.pinch.interval ); + } + } + + $this.bind( "touchmove", pinchHandler ) + .one( "touchend", function ( event ) { + $this.unbind( "touchmove", pinchHandler ); + $( event.target ).trigger( "pinchend", + getParameter( undefined, last_ratio ) ); + + origin = undefined; + current = undefined; + last_ratio = 1; + processing = false; + }); + }); + } +}; + +$.event.special["pinch"] = pinch_event; + +$.mobile.pinch = { + enabled: true, + min: 0.1, + max: 3, + factor: 4, + threshold: 0.01, + interval: 50 +}; + +})( jQuery, this );