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