From 3e516dce4664ac33e632c9014a08957b44df342f Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Tue, 1 Sep 2015 10:24:35 -0500
Subject: [PATCH] Tap and pinch to zoom for scroller zoom

---
 ionic/components/scroll/scroll.ts           | 58 +++++++++++++++------
 ionic/components/slides/test/basic/index.ts |  2 +-
 2 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/ionic/components/scroll/scroll.ts b/ionic/components/scroll/scroll.ts
index 05403dff5d..313acd9484 100644
--- a/ionic/components/scroll/scroll.ts
+++ b/ionic/components/scroll/scroll.ts
@@ -16,7 +16,7 @@ import * as util from 'ionic/util';
 @IonicComponent({
   selector: 'ion-scroll',
   properties: [
-    'scrollX', 'scrollY', 'zoom'
+    'scrollX', 'scrollY', 'zoom', 'maxZoom'
   ],
   host: {
     '[class.scroll-x]': 'scrollX',
@@ -35,15 +35,13 @@ export class Scroll extends Ion {
   constructor(elementRef: ElementRef, ionicConfig: IonicConfig) {
     super(elementRef, ionicConfig);
 
-    this.zoomAmount = 1;
+    this.maxScale = 3;
   }
 
   onInit() {
     this.scrollElement = this.getNativeElement().children[0];
 
     if(util.isTrueProperty(this.zoom)) {
-      console.log('Zoom?', this.zoom);
-
       this.initZoomScrolling();
     }
   }
@@ -60,25 +58,51 @@ export class Scroll extends Ion {
     this.zoomGesture = new Gesture(this.scrollElement);
     this.zoomGesture.listen();
 
+    let scale = 1, last_scale;
+
+    this.zoomGesture.on('pinchstart', (e) => {
+      last_scale = scale;
+      console.log('Last scale', e.scale);
+    });
+
     this.zoomGesture.on('pinch', (e) => {
-      console.log('PINCH', e);
+      scale = Math.max(1, Math.min(last_scale * e.scale, 10));
+      console.log('Scaling', scale);
+      this.zoomElement.style[CSS.transform] = 'scale(' + scale + ')'
+    });
+
+    this.zoomGesture.on('pinchend', (e) => {
+      //last_scale = Math.max(1, Math.min(last_scale * e.scale, 10));
+      if(scale > this.maxScale) {
+        let za = new Animation(this.zoomElement)
+          .duration(160)
+          .easing('ease-in-out')
+          .from('scale', scale)
+          .to('scale', this.maxScale);
+          za.play();
+
+          scale = this.maxScale;
+      }
     });
 
     this.zoomGesture.on('doubletap', (e) => {
-      this.zoomAnimation = new Animation(this.zoomElement)
-        .duration(200)
-        .easing('ease-in');
+      console.log("Double tap");
+      let za = new Animation(this.zoomElement)
+        .duration(160)
+        .easing('ease-in-out');
 
-      if(this.zoomAmount > 1) {
-        this.zoomAnimation.from('scale', this.zoomAmount);
-        this.zoomAnimation.to('scale', 1);
-        this.zoomAnimation.play();
-        this.zoomAmount = 1;
+      if(scale > 1) {
+        za.from('scale', scale);
+        za.to('scale', 1);
+        za.play();
+
+        scale = 1;
       } else {
-        this.zoomAnimation.from('scale', this.zoomAmount);
-        this.zoomAnimation.to('scale', 3);
-        this.zoomAnimation.play();
-        this.zoomAmount = 3;
+        za.from('scale', scale);
+        za.to('scale', this.maxScale);
+        za.play();
+
+        scale = this.maxScale;
       }
       //this.zoomElement.style[CSS.transform] = 'scale(3)';
     });
diff --git a/ionic/components/slides/test/basic/index.ts b/ionic/components/slides/test/basic/index.ts
index 76a21ea7c7..c85b21eb18 100644
--- a/ionic/components/slides/test/basic/index.ts
+++ b/ionic/components/slides/test/basic/index.ts
@@ -20,7 +20,7 @@ class MyApp {
     Http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key=' + FLICKR_API_KEY + '&jsoncallback=JSON_CALLBACK&format=json&tags=' + tags, {
       method: 'jsonp'
     }).then((val) => {
-      this.images = val.photos.photo;
+      this.images = val.photos.photo.slice(0, 20);
       this.slider.update();
     }, (err) => {
       alert('Unable to load images');