Merge pull request #35 from Riron/pinch

Pinch

Author: Riron

CHANGELOG.md

@@ -1,3 +1,13 @@
+# 1.2.2
+
+### Features
+
+Support for pinch to zoom
+
+### Bug Fixes
+
+**CSS:** In iOS the status bar does not overlapps the back button anymore
+
 # 1.1.5
 
 - Update for AOT support (related to PR #9)

README.md

@@ -36,23 +36,6 @@ import { IonicImageViewerModule } from 'ionic-img-viewer';
 export class AppModule {}
 ```
 
-**For Ionic 2 beta version:**
-
-Import the image viewer directive in your component.
-
-```typescript
-import { ImageViewerDirective } from 'ionic-img-viewer';
-
-
-@Component({
-  template: `<img [src]="url" imageViewer />`,
-  directives: [ImageViewerDirective]
-})
-class MyComponent {
-
-}
-```
-
 ## Usage
 
 Add the `imageViewer` property to the pictures.
@@ -61,6 +44,15 @@ Add the `imageViewer` property to the pictures.
 <img src="IMAGE_URL" imageViewer />
 ```
 
+If you use thumbnails and want to display bigger images, you can use it like so :
+
+```html
+<img src="IMAGE_URL" imageViewer="OTHER_IMAGE_URL" />
+```
+
+However, if `OTHER_IMAGE_URL` is not preloaded, the animation might suffer. Indeed there will be no ready image to make the transition (it might blink and you'll not get the smooth transition effet while opening).
+So try to cache your image before the call if you use it that way.
+
 # Contributing
 
 See [CONTRIBUTING.md](CONTRIBUTING.md).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ionic-img-viewer",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "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",

src/image-viewer-gesture.ts src/image-viewer-transition-gesture.tssrc/image-viewer-gesture.ts renamed to src/image-viewer-transition-gesture.ts

@@ -1,3 +1,4 @@
+import { Renderer } from '@angular/core';
 import { ImageViewerComponent } from './image-viewer.component';
 import { PanGesture } from 'ionic-angular/gestures/drag-gesture';
 import { pointerCoord } from 'ionic-angular/util/dom';
@@ -8,15 +9,15 @@ const HAMMER_THRESHOLD = 10;
 const MAX_ATTACK_ANGLE = 45;
 const DRAG_THRESHOLD = 70;
 
-export class ImageViewerGesture extends PanGesture {
+export class ImageViewerTransitionGesture extends PanGesture {
 
 	private translationY: number;
 	private opacity: number;
 	private startY: number;
 	private imageContainer: HTMLElement;
 	private backdrop: HTMLElement;
 
-	constructor(platform: Platform, private component: ImageViewerComponent, domCtrl: DomController, private cb: Function) {
+	constructor(platform: Platform, private component: ImageViewerComponent, domCtrl: DomController, private renderer: Renderer, private cb: Function) {
 		super(platform, component.getNativeElement(), {
 			maxAngle: MAX_ATTACK_ANGLE,
 			threshold: HAMMER_THRESHOLD,
@@ -32,24 +33,37 @@ export class ImageViewerGesture extends PanGesture {
 		this.listen();
 	}
 
+	// As we handle both pinch and drag, we have to make sure we don't drag when we are trying to pinch
+	isPinching(ev) {
+		return ev.touches && ev.touches.length > 1;
+	}
+
 	onDragStart(ev: any): boolean {
+		if (this.isPinching(ev)) {
+			this.abort(ev);
+		}
+
 		let coord = pointerCoord(ev);
 		this.startY = coord.y;
 		return true;
 	}
 
-	canStart(): boolean {
-		return !this.component.isZoomed;
+	canStart(ev: any): boolean {
+		return !this.component.isZoomed && !this.isPinching(ev);
 	}
 
 	onDragMove(ev: any): boolean {
+		if (this.isPinching(ev)) {
+			this.abort(ev);
+		}
+
 		let coord = pointerCoord(ev);
 		this.translationY = coord.y - this.startY;
 		this.opacity = Math.max(1 - Math.abs(this.translationY) / (10 * DRAG_THRESHOLD), .5);
 
 		this.plt.raf(() => {
-			this.imageContainer.style[this.plt.Css.transform] = `translateY(${this.translationY}px)`;
-			this.backdrop.style['opacity'] = this.opacity.toString();
+			this.renderer.setElementStyle(this.imageContainer, this.plt.Css.transform, `translateY(${this.translationY}px)`);
+			this.renderer.setElementStyle(this.backdrop, 'opacity', this.opacity.toString());
 		});
 
 		return true;

src/image-viewer-transitions.ts

@@ -11,20 +11,22 @@ export function registerCustomTransitions(config: Config) {
 export class ImageViewerEnter extends Transition {
 	init() {
 
-		let ele = this.enteringView.pageRef().nativeElement;
+		const ele = this.enteringView.pageRef().nativeElement;
 
-		let fromPosition = this.enteringView.data.position;
-		let toPosition = ele.querySelector('img').getBoundingClientRect();
-		let flipS = fromPosition.width / toPosition.width;
-		let flipY = fromPosition.top - toPosition.top;
-		let flipX = fromPosition.left - toPosition.left;
+		const fromPosition = this.enteringView.data.position;
+		const toPosition = ele.querySelector('img').getBoundingClientRect();
+		const flipS = fromPosition.width / toPosition.width;
+		const flipY = fromPosition.top - toPosition.top;
+		const flipX = fromPosition.left - toPosition.left;
 
-		let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
-		let image = new Animation(this.plt, ele.querySelector('.image'));
+		const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
+		const image = new Animation(this.plt, ele.querySelector('.image'));
 
 		image.fromTo('translateY', `${flipY}px`, '0px')
 			.fromTo('translateX', `${flipX}px`, '0px')
-			.fromTo('scale', flipS, '1');
+			.fromTo('scale', flipS, '1')
+			.beforeStyles({ 'transform-origin': '0 0' })
+			.afterClearStyles(['transform-origin']);
 
 		backdrop.fromTo('opacity', '0.01', '1');
 
@@ -37,11 +39,11 @@ export class ImageViewerEnter extends Transition {
 		const enteringNavbarEle = enteringPageEle.querySelector('ion-navbar');
 		const enteringBackBtnEle = enteringPageEle.querySelector('.back-button');
 
-		let enteringNavBar = new Animation(this.plt, enteringNavbarEle);
+		const enteringNavBar = new Animation(this.plt, enteringNavbarEle);
 		enteringNavBar.beforeAddClass('show-navbar');
 		this.add(enteringNavBar);
 
-		let enteringBackButton = new Animation(this.plt, enteringBackBtnEle);
+		const enteringBackButton = new Animation(this.plt, enteringBackBtnEle);
 		this.add(enteringBackButton);
 		enteringBackButton.beforeAddClass('show-back-button');
 	}
@@ -50,30 +52,32 @@ export class ImageViewerEnter extends Transition {
 export class ImageViewerLeave extends Transition {
 	init() {
 
-		let ele = this.leavingView.pageRef().nativeElement;
+		const ele = this.leavingView.pageRef().nativeElement;
 
-		let toPosition = this.leavingView.data.position;
-		let fromPosition = ele.querySelector('img').getBoundingClientRect();
+		const toPosition = this.leavingView.data.position;
+		const fromPosition = ele.querySelector('img').getBoundingClientRect();
 
 		let offsetY = 0;
-		let imageYOffset = ele.querySelector('.image').style[this.plt.Css.transform];
+		const imageYOffset = ele.querySelector('.image').style[this.plt.Css.transform];
 		if (imageYOffset) {
-			let regexResult = imageYOffset.match(/translateY\((-?\d+)px\)/);
+			const regexResult = imageYOffset.match(/translateY\((-?\d*\.?\d*)px\)/);
 			offsetY = regexResult ? parseFloat(regexResult[1]) : offsetY;
 		}
 
-		let flipS = toPosition.width / fromPosition.width;
-		let flipY = toPosition.top - fromPosition.top + offsetY;
-		let flipX = toPosition.left - fromPosition.left;
+		const flipS = toPosition.width / fromPosition.width;
+		const flipY = toPosition.top - fromPosition.top + offsetY;
+		const flipX = toPosition.left - fromPosition.left;
 
-		let backdropOpacity = ele.querySelector('ion-backdrop').style['opacity'];
+		const backdropOpacity = ele.querySelector('ion-backdrop').style['opacity'];
 
-		let backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
-		let image = new Animation(this.plt, ele.querySelector('.image'));
+		const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
+		const image = new Animation(this.plt, ele.querySelector('.image'));
 
 		image.fromTo('translateY', `${offsetY}px`, `${flipY}px`)
 			.fromTo('translateX', `0px`, `${flipX}px`)
-			.fromTo('scale', '1', flipS);
+			.fromTo('scale', '1', flipS)
+			.beforeStyles({ 'transform-origin': '0 0' })
+			.afterClearStyles(['transform-origin']);
 
 		backdrop.fromTo('opacity', backdropOpacity, '0');
 

src/image-viewer-zoom-gesture.ts

@@ -0,0 +1,130 @@
+import { Renderer } from '@angular/core';
+import { Animation, DomController, Gesture, Platform } from 'ionic-angular';
+import { DIRECTION_HORIZONTAL, DIRECTION_VERTICAL } from 'ionic-angular/gestures/hammer';
+
+import { ImageViewerComponent } from './image-viewer.component';
+
+const MAX_SCALE = 3;
+
+export class ImageViewerZoomGesture extends Gesture {
+	private adjustScale = 1;
+	private adjustDeltaX = 0;
+	private adjustDeltaY = 0;
+
+	private currentScale = 1;
+	private currentDeltaX = 0;
+	private currentDeltaY = 0;
+
+	private allowedXMargin = 0;
+	private allowedYMargin = 0;
+
+	constructor(private component: ImageViewerComponent, element: any,  private platform: Platform, private renderer: Renderer) {
+		super(element.nativeElement);
+
+		// Force both directions after super to avoid override allowing only one direction
+		this.options({ direction: DIRECTION_HORIZONTAL | DIRECTION_VERTICAL });
+
+		this.listen();
+		this.on('pinch', (e) => this.onPinch(e));
+		this.on('pinchend', (e) => this.onPinchEnd(e));
+		this.on('panstart', (e) => this.onPanStart(e));
+		this.on('pan', (e) => this.onPan(e));
+		this.on('panend', (e) => this.onPanEnd(e));
+		this.on('doubletap', (e) => this.onDoubleTap(e));
+	}
+
+	onPinch(event) {
+		this.component.dragGesture.abort(event);
+
+		this.currentScale = Math.max(1, Math.min(MAX_SCALE, this.adjustScale * event.scale));
+
+		this.currentDeltaX = this.adjustDeltaX + (event.deltaX / this.currentScale);
+		this.currentDeltaY = this.adjustDeltaY + (event.deltaY / this.currentScale);
+
+		this.setImageContainerTransform();
+	}
+
+	onPinchEnd(event) {
+		this.component.isZoomed = (this.currentScale !== 1);
+
+		if (!this.component.isZoomed) {
+
+			new Animation(this.platform, this.element)
+				.fromTo('translateX', `${this.currentDeltaX}px`, '0')
+				.fromTo('translateY', `${this.currentDeltaY}px`, '0')
+				.easing('ease-in')
+				.duration(50)
+				.play();
+
+			this.currentDeltaX = 0;
+			this.currentDeltaY = 0;
+		}
+
+		// Saving the final transforms for adjustment next time the user interacts.
+		this.adjustScale = this.currentScale;
+		this.adjustDeltaX = this.currentDeltaX;
+		this.adjustDeltaY = this.currentDeltaY;
+	}
+
+	onPanStart(event) {
+		if (!this.component.isZoomed) {
+			return;
+		}
+
+		const originalImageWidth = this.element.offsetWidth;
+		const originalImageHeight = this.element.offsetHeight;
+
+		this.allowedXMargin = ((originalImageWidth * this.currentScale) - originalImageWidth) / 4;
+		this.allowedYMargin = ((originalImageHeight * this.currentScale) - originalImageHeight) / 4;
+	}
+
+	onPan(event) {
+		if (!this.component.isZoomed) {
+			return;
+		}
+
+		this.currentDeltaX = this.boundAdjustement(Math.floor(this.adjustDeltaX + event.deltaX), this.allowedXMargin);
+		this.currentDeltaY = this.boundAdjustement(Math.floor(this.adjustDeltaY + event.deltaY), this.allowedYMargin);
+
+		this.setImageContainerTransform();
+	}
+
+	boundAdjustement(adjustement, bound) {
+		if (adjustement > bound || adjustement < -bound) {
+			return Math.min(bound, Math.max(adjustement, -bound));
+		}
+		return adjustement;
+	}
+
+	onPanEnd(event) {
+		if (!this.component.isZoomed) {
+			return;
+		}
+
+		this.adjustDeltaX = this.currentDeltaX;
+		this.adjustDeltaY = this.currentDeltaY;
+	}
+
+	onDoubleTap(event) {
+		this.component.isZoomed = !this.component.isZoomed;
+		if (this.component.isZoomed) {
+			this.currentScale = 2;
+		} else {
+			this.currentScale = 1;
+
+			this.adjustDeltaX = this.currentDeltaX = 0;
+			this.adjustDeltaY = this.currentDeltaY = 0;
+		}
+
+		this.adjustScale = this.currentScale;
+		this.setImageContainerTransform();
+	}
+
+	setImageContainerTransform() {
+		const transforms = [];
+		transforms.push(`scale(${this.currentScale})`);
+		transforms.push(`translate(${this.currentDeltaX}px, ${this.currentDeltaY}px)`);
+
+		this.renderer.setElementStyle(this.element, this.platform.Css.transform, transforms.join(' '));
+	}
+}