diff --git a/build/lib.js b/build/lib.js index 47c87186..568b5a11 100644 --- a/build/lib.js +++ b/build/lib.js @@ -21,6 +21,7 @@ steal("jquery", "jquerypp/event/pause", "jquerypp/event/resize", "jquerypp/event/swipe", + "jquerypp/event/pinch", function($) { return $; }); \ No newline at end of file diff --git a/event/pinch/pinch.html b/event/pinch/pinch.html new file mode 100644 index 00000000..aa74dd31 --- /dev/null +++ b/event/pinch/pinch.html @@ -0,0 +1,49 @@ + + + + pinch + + + +
Pinch Me
+
Pinches + +
+ + + + \ No newline at end of file diff --git a/event/pinch/pinch.js b/event/pinch/pinch.js new file mode 100644 index 00000000..05ddf66b --- /dev/null +++ b/event/pinch/pinch.js @@ -0,0 +1,64 @@ +steal('jquery', 'jquerypp/event/livehack', function($) { + + var isPhantom = /Phantom/.test(navigator.userAgent), + supportGestures = !isPhantom && "ongestureend" in document; + + if(!supportGestures) { + return $; + } + + /** + * @add jQuery.event.pinch + */ + var pinch = $.event.pinch = { + /** + * @attribute minScale + * minScale is the minimum amount of scale change required to trigger a pinch event. This defaults to 0.01. + * + * The scale of the gestureend event must differ by at least this much. + */ + minScale : 0.01, + }; + + $.event.setupHelper( [ + /** + * @hide + * @attribute pinch + */ + "pinch", + /** + * @hide + * @attribute pinchin + */ + 'pinchin', + /** + * @hide + * @attribute pinchout + */ + 'pinchout'], "gesturestart", function(ev) { + var delegate = ev.delegateTarget || ev.currentTarget, + selector = ev.handleObj.selector, + entered = this; + + $(document.documentElement).one('gestureend', function(event) { + var scale = event.originalEvent.scale, + deltaScale = Math.abs(1 - scale), + events = []; + + if(deltaScale >= pinch.minScale) { + events.push('pinch'); + if(scale > 1) { + events.push('pinchout') + } else if(scale < 1) { + events.push('pinchin') + } + + $.each($.event.find(delegate, events, selector), function(){ + this.call(entered, ev); + }); + } + }) + }); + + return $; +}); \ No newline at end of file diff --git a/event/pinch/pinch.md b/event/pinch/pinch.md new file mode 100644 index 00000000..cab7855d --- /dev/null +++ b/event/pinch/pinch.md @@ -0,0 +1,19 @@ +@page jQuery.event.pinch +@parent jquerypp + +`jQuery.event.pinch` provides `pinchout`, `pinchin` and a general `pinch` event in browsers that support multi-touch gesture events. +Detecting pinches is done via gesture events. + +A pinch happens when two fingers move away or towards each other and change the scale of the document by more than [jQuery.event.pinch.minScale]. The pinch events are fired when the gesture ends, so pinching in and then out will result in a single `pinchout` event. + + $('#swiper').on({ + 'pinch' : function(ev) { + console.log('Pinched') + }, + 'pinchin' : function(ev) { + console.log('Pinched In') + }, + 'pinchout' : function(ev) { + console.log('Pinched Out') + } + })