Progress on scroll zoom

ionic/components/scroll/scroll.scss

@@ -8,6 +8,14 @@ ion-scroll {
     overflow-y: auto;
   }
 
+  &[center] {
+    scroll-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
   scroll-content {
     position: absolute;
     top: 0;

ionic/components/scroll/scroll.ts

@@ -7,6 +7,8 @@ import {Gesture} from '../../gestures/gesture';
 import {CSS} from '../../util/dom';
 import {Animation} from '../../animations/animation';
 
+import * as util from 'ionic/util';
+
 /**
  * ion-scroll is a non-flexboxed scroll area that can
  * scroll horizontally or vertically.
@@ -37,12 +39,15 @@ export class Scroll extends Ion {
   onInit() {
     this.scrollElement = this.getNativeElement().children[0];
 
-    if(this.zoom === "") {
+    if(util.isTrueProperty(this.zoom)) {
+      console.log('Zoom?', this.zoom);
+
       this.initZoomScrolling();
     }
   }
 
   initZoomScrolling() {
+    console.log('Init zoom');
     this.zoomElement = this.scrollElement.children[0];
 
     this.zoomElement && this.zoomElement.classList.add('ion-scroll-zoom');
@@ -64,13 +69,11 @@ export class Scroll extends Ion {
       console.log('PINCH', e);
     });
 
-    /*
     this.zoomGesture.on('doubletap', (e) => {
       this.zoomAnimation.to('scale', '3');
       this.zoomAnimation.play();
       //this.zoomElement.style[CSS.transform] = 'scale(3)';
     });
-    */
   }
 
   /**

ionic/components/slides/slides.ts

@@ -2,6 +2,8 @@ import {Component, View, ElementRef, EventEmitter, onInit,
   Host, forwardRef, NgFor, NgIf, NgClass} from 'angular2/angular2';
 
 import {Ion} from '../ion';
+import {Animation} from 'ionic/animations/animation';
+import {Gesture} from 'ionic/gestures/gesture';
 import {DragGesture} from 'ionic/gestures/drag-gesture';
 import {IonicComponent, IonicDirective} from '../../config/annotations';
 import {IonicConfig} from '../../config/config';
@@ -94,6 +96,7 @@ export class Slides extends Ion {
  */
 @IonicDirective({
   selector: 'ion-slide',
+  properties: ['zoom']
 })
 export class Slide {
   /**
@@ -107,6 +110,49 @@ export class Slide {
     this.ele = elementRef.nativeElement;
     this.ele.classList.add('swiper-slide');
   }
+  onInit() {
+    if(this.zoom !== "false") {
+      //this.initZoom();
+    }
+  }
+  initZoom() {
+    var g = new Gesture(this.ele);
+
+    let zoomAnimation = new Animation(this.ele);
+    zoomAnimation.from('scale', '1');
+
+    g.on('doubletap', (e) => {
+      zoomAnimation.to('scale', '3');
+      zoomAnimation.play();
+    });
+  }
+
+  /*
+  initZoomScrolling() {
+    this.zoomElement = this.ele.children[0];
+
+    this.zoomElement && this.zoomElement.classList.add('ion-scroll-zoom');
+
+    this.scrollElement.addEventListener('scroll', (e) => {
+      console.log("Scrolling", e);
+    });
+
+    this.zoomGesture = new Gesture(this.scrollElement);
+    this.zoomGesture.listen();
+
+    this.zoomAnimation = new Animation(this.zoomElement);
+    this.zoomAnimation
+      .duration(200)
+      .easing('ease-in')
+      .from('scale', '1');
+
+    this.zoomGesture.on('pinch', (e) => {
+      console.log('PINCH', e);
+    });
+
+  }
+  */
+
 }
 
 @IonicDirective({

ionic/components/slides/test/basic/main.html

@@ -1,5 +1,15 @@
 <ion-slides [options]="extraOptions" id="slider" style="background-color: black">
   <ion-slide *ng-for="#image of images">
+    <ion-scroll scroll-x="true" scroll-y="true" zoom center>
       <img data-src="{{getImageUrl(image)}}" slide-lazy>
+    </ion-scroll>
   </ion-slide>
 </ion-slides>
+<style>
+
+ion-scroll {
+  width: 100%;
+  height: 100%;
+}
+
+</style>

ionic/util/util.ts

@@ -102,6 +102,7 @@ export const isUndefined = val => typeof val === 'undefined';
 export const isBlank = val => val === undefined || val === null;
 export const isObject = val => typeof val === 'object';
 export const isArray = Array.isArray;
+export const isTrueProperty = val => typeof val !== 'undefined' && val !== "false";
 
 /**
  * Convert a string in the format thisIsAString to a slug format this-is-a-string