Merge pull request #25 from Riron/rc5

RC5 support

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionic-img-viewer",
-  "version": "1.1.8",
+  "version": "1.2.0",
   "description": "Ionic 2 component providing a Twitter inspired experience to visualize pictures.",
   "main": "./dist/ionic-img-viewer.js",
   "typings": "./dist/ionic-img-viewer.d.ts",
@@ -30,8 +30,7 @@
     "@angular/platform-browser": "2.2.1",
     "@angular/platform-browser-dynamic": "2.2.1",
     "@angular/platform-server": "2.2.1",
-    "@ionic/storage": "1.1.6",
-    "ionic-angular": "2.0.0-rc.4",
+    "ionic-angular": "2.0.0-rc.5",
     "rxjs": "5.0.0-beta.12",
     "zone.js": "0.6.26"
   },

src/image-viewer-gesture.ts

@@ -1,6 +1,7 @@
 import { ImageViewerComponent } from './image-viewer.component';
 import { PanGesture } from 'ionic-angular/gestures/drag-gesture';
-import { CSS, nativeRaf, pointerCoord } from 'ionic-angular/util/dom';
+import { pointerCoord } from 'ionic-angular/util/dom';
+import { Platform } from 'ionic-angular/platform/platform';
 import { Animation, DomController } from 'ionic-angular';
 
 const HAMMER_THRESHOLD = 10;
@@ -15,8 +16,8 @@ export class ImageViewerGesture extends PanGesture {
 	private imageContainer: HTMLElement;
 	private backdrop: HTMLElement;
 
-	constructor(private component: ImageViewerComponent, domCtrl: DomController, private cb: Function) {
-		super(component.getNativeElement(), {
+	constructor(platform: Platform, private component: ImageViewerComponent, domCtrl: DomController, private cb: Function) {
+		super(platform, component.getNativeElement(), {
 			maxAngle: MAX_ATTACK_ANGLE,
 			threshold: HAMMER_THRESHOLD,
 			gesture: component._gestureCtrl.createGesture({ name: 'image-viewer' }),
@@ -46,8 +47,8 @@ export class ImageViewerGesture extends PanGesture {
 		this.translationY = coord.y - this.startY;
 		this.opacity = Math.max(1 - Math.abs(this.translationY) / (10 * DRAG_THRESHOLD), .5);
 
-		nativeRaf(() => {
-			this.imageContainer.style[<any>CSS.transform] = `translateY(${this.translationY}px)`;
+		this.plt.raf(() => {
+			this.imageContainer.style[this.plt.Css.transform] = `translateY(${this.translationY}px)`;
 			this.backdrop.style['opacity'] = this.opacity.toString();
 		});
 
@@ -59,13 +60,13 @@ export class ImageViewerGesture extends PanGesture {
 		if (Math.abs(this.translationY) > DRAG_THRESHOLD) {
 			this.cb();
 		} else {
-			let imageContainerAnimation = new Animation(this.imageContainer);
-			let backdropAnimation = new Animation(this.backdrop);
+			let imageContainerAnimation = new Animation(this.plt, this.imageContainer);
+			let backdropAnimation = new Animation(this.plt, this.backdrop);
 
 			backdropAnimation.fromTo('opacity', this.opacity, '1');
 			imageContainerAnimation.fromTo('translateY', `${this.translationY}px`, '0px');
 
-			new Animation()
+			new Animation(this.plt)
 				.easing('ease-in')
 				.duration(150)
 				.add(backdropAnimation)

src/image-viewer-transitions.ts

@@ -1,6 +1,5 @@
 import { Config } from 'ionic-angular/umd';
 import { Transition, Animation, ViewController } from 'ionic-angular';
-import { CSS } from 'ionic-angular/util/dom';
 
 export function registerCustomTransitions(config: Config) {
 	return function() {
@@ -20,8 +19,8 @@ export class ImageViewerEnter extends Transition {
 		let flipY = fromPosition.top - toPosition.top;
 		let flipX = fromPosition.left - toPosition.left;
 
-		let backdrop = new Animation(ele.querySelector('ion-backdrop'));
-		let image = new Animation(ele.querySelector('.image'));
+		let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
+		let image = new Animation(this.plt, ele.querySelector('.image'));
 
 		image.fromTo('translateY', `${flipY}px`, '0px')
 			.fromTo('translateX', `${flipX}px`, '0px')
@@ -38,11 +37,11 @@ export class ImageViewerEnter extends Transition {
 		const enteringNavbarEle = enteringPageEle.querySelector('ion-navbar');
 		const enteringBackBtnEle = enteringPageEle.querySelector('.back-button');
 
-		let enteringNavBar = new Animation(enteringNavbarEle);
+		let enteringNavBar = new Animation(this.plt, enteringNavbarEle);
 		enteringNavBar.beforeAddClass('show-navbar');
 		this.add(enteringNavBar);
 
-		let enteringBackButton = new Animation(enteringBackBtnEle);
+		let enteringBackButton = new Animation(this.plt, enteringBackBtnEle);
 		this.add(enteringBackButton);
 		enteringBackButton.beforeAddClass('show-back-button');
 	}
@@ -57,7 +56,7 @@ export class ImageViewerLeave extends Transition {
 		let fromPosition = ele.querySelector('img').getBoundingClientRect();
 
 		let offsetY = 0;
-		let imageYOffset = ele.querySelector('.image').style[CSS.transform];
+		let imageYOffset = ele.querySelector('.image').style[this.plt.Css.transform];
 		if (imageYOffset) {
 			let regexResult = imageYOffset.match(/translateY\((-?\d+)px\)/);
 			offsetY = regexResult ? parseFloat(regexResult[1]) : offsetY;
@@ -69,8 +68,8 @@ export class ImageViewerLeave extends Transition {
 
 		let backdropOpacity = ele.querySelector('ion-backdrop').style['opacity'];
 
-		let backdrop = new Animation(ele.querySelector('ion-backdrop'));
-		let image = new Animation(ele.querySelector('.image'));
+		let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
+		let image = new Animation(this.plt, ele.querySelector('.image'));
 
 		image.fromTo('translateY', `${offsetY}px`, `${flipY}px`)
 			.fromTo('translateX', `0px`, `${flipX}px`)

src/image-viewer.component.ts

@@ -3,6 +3,7 @@ import { Ion } from 'ionic-angular/components/ion';
 import { PanGesture } from 'ionic-angular/gestures/drag-gesture';
 import { GestureController } from 'ionic-angular/gestures/gesture-controller';
 import { Config } from 'ionic-angular/config/config';
+import { Platform } from 'ionic-angular/platform/platform';
 import { ElementRef, Renderer, Component, OnInit, OnDestroy, NgZone } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 
@@ -42,6 +43,7 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy {
 		private _zone: NgZone,
 		private renderer: Renderer,
 		private domCtrl: DomController,
+		private platform: Platform,
 		_navParams: NavParams,
 		_config: Config,
 		_sanitizer: DomSanitizer
@@ -54,7 +56,7 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy {
 
 	ngOnInit() {
 		let gestureCallBack = () => this._nav.pop();
-		this._zone.runOutsideAngular(() => this.dragGesture = new ImageViewerGesture(this, this.domCtrl, gestureCallBack));
+		this._zone.runOutsideAngular(() => this.dragGesture = new ImageViewerGesture(this.platform, this, this.domCtrl, gestureCallBack));
 	}
 
 	ngOnDestroy() {