From b92d25bdf864d211d90f5c15db03077d54ed820a Mon Sep 17 00:00:00 2001 From: Riron Date: Mon, 16 Jan 2017 18:27:27 +0100 Subject: [PATCH] RC5 support --- package.json | 5 ++--- src/image-viewer-gesture.ts | 17 +++++++++-------- src/image-viewer-transitions.ts | 15 +++++++-------- src/image-viewer.component.ts | 4 +++- 4 files changed, 21 insertions(+), 20 deletions(-) diff --git a/package.json b/package.json index 65ab12d..061748e 100644 --- a/package.json +++ b/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" }, diff --git a/src/image-viewer-gesture.ts b/src/image-viewer-gesture.ts index 2c425d0..8d6bc2e 100644 --- a/src/image-viewer-gesture.ts +++ b/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[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) diff --git a/src/image-viewer-transitions.ts b/src/image-viewer-transitions.ts index 89dd2f6..3755d70 100644 --- a/src/image-viewer-transitions.ts +++ b/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`) diff --git a/src/image-viewer.component.ts b/src/image-viewer.component.ts index d355f91..b450ec3 100644 --- a/src/image-viewer.component.ts +++ b/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() {