diff --git a/ionic/components/scroll/scroll.scss b/ionic/components/scroll/scroll.scss
index 7f4b0dbcf3..51c56260ab 100644
--- a/ionic/components/scroll/scroll.scss
+++ b/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;
diff --git a/ionic/components/scroll/scroll.ts b/ionic/components/scroll/scroll.ts
index 188787d762..cc953c85b5 100644
--- a/ionic/components/scroll/scroll.ts
+++ b/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)';
});
- */
}
/**
diff --git a/ionic/components/slides/slides.ts b/ionic/components/slides/slides.ts
index 6a5fe2cc76..481c1c77ad 100644
--- a/ionic/components/slides/slides.ts
+++ b/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({
diff --git a/ionic/components/slides/test/basic/main.html b/ionic/components/slides/test/basic/main.html
index 1251de578b..dd25327f52 100644
--- a/ionic/components/slides/test/basic/main.html
+++ b/ionic/components/slides/test/basic/main.html
@@ -1,5 +1,15 @@
-
+
+
+
+
diff --git a/ionic/util/util.ts b/ionic/util/util.ts
index 2ba7516c22..3e5c396109 100644
--- a/ionic/util/util.ts
+++ b/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