Support multiple pictures show, left and right sliding display

ionic-img-viewer.ts

@@ -2,4 +2,4 @@ export { IonicImageViewerModule } from './src/module';
 export { ImageViewerComponent } from './src/image-viewer.component';
 export { ImageViewerDirective } from './src/image-viewer.directive';
 export { ImageViewerController } from './src/image-viewer.controller';
-export { ImageViewer } from './src/image-viewer';
+export { ImageViewer,IconOptions } from './src/image-viewer';

package.json

@@ -1,41 +1,41 @@
 {
-  "name": "ionic-img-viewer",
-  "version": "2.6.1",
-  "description": "Ionic 2 component providing a Twitter inspired experience to visualize pictures.",
-  "main": "./dist/es2015/ionic-img-viewer.js",
-  "typings": "./dist/es2015/ionic-img-viewer.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "prepublish": "node_modules/.bin/ngc && copyfiles ./src/*.scss ./dist/es2015/ && ngc -p tsconfig.umd.json && copyfiles ./src/*.scss ./dist/umd/"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Riron/ionic-img-viewer"
-  },
-  "keywords": [
-    "ionic2",
-    "image",
-    "angular2",
-    "component"
-  ],
-  "author": "Orion Charlier",
-  "license": "MIT",
-  "devDependencies": {
-    "@angular/common": "4.1.3",
-    "@angular/compiler": "4.1.3",
-    "@angular/compiler-cli": "4.1.3",
-    "@angular/core": "4.1.3",
-    "@angular/forms": "4.1.3",
-    "@angular/http": "4.1.3",
-    "@angular/platform-browser": "4.1.3",
-    "@angular/platform-browser-dynamic": "4.1.3",
-    "@angular/platform-server": "4.1.3",
-    "rxjs": "5.4.0",
-    "zone.js": "0.8.12",
-    "typescript": "~2.3.4",
-    "copyfiles": "1.0.0"
-  },
-  "peerDependencies": {
-    "ionic-angular": "~3.6.0"
-  }
+    "name": "ionic-img-viewer",
+    "version": "2.7.0",
+    "description": "Ionic 2 component providing a Twitter inspired experience to visualize pictures.",
+    "main": "./dist/es2015/ionic-img-viewer.js",
+    "typings": "./dist/es2015/ionic-img-viewer.d.ts",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "prepublish": "node_modules/.bin/ngc && copyfiles ./src/*.scss ./dist/es2015/ && ngc -p tsconfig.umd.json && copyfiles ./src/*.scss ./dist/umd/"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/keephacking/ionic-img-viewer.git"
+    },
+    "keywords": [
+        "ionic2",
+        "image",
+        "angular2",
+        "component"
+    ],
+    "author": "Orion Charlier",
+    "license": "MIT",
+    "devDependencies": {
+        "@angular/common": "5.1.1",
+        "@angular/compiler": "5.1.1",
+        "@angular/compiler-cli": "5.1.1",
+        "@angular/core": "5.1.1",
+        "@angular/forms": "5.1.1",
+        "@angular/http": "5.1.1",
+        "@angular/platform-browser": "5.1.1",
+        "@angular/platform-browser-dynamic": "5.1.1",
+        "@angular/platform-server": "5.1.1",
+        "rxjs": "5.5.5",
+        "zone.js": "0.8.18",
+        "typescript": "2.6.2",
+        "copyfiles": "1.2.0"
+    },
+    "peerDependencies": {
+        "ionic-angular": "~3.9.2"
+    }
 }

src/image-viewer-impl.ts

@@ -1,54 +1,55 @@
-import { App, Config, NavOptions, ViewController } from 'ionic-angular';
-import { Observable } from 'rxjs/Rx';
+import {App, Config, NavOptions, ViewController} from 'ionic-angular';
+import {Observable} from 'rxjs/Rx';
 
-import { ImageViewerOptions } from './image-viewer';
-import { ImageViewerEnter, ImageViewerLeave } from './image-viewer-transitions';
-import { ImageViewerComponent } from './image-viewer.component';
 
-export class ImageViewerImpl extends ViewController {
-
-	constructor(private app: App, component: ImageViewerComponent, opts: ImageViewerOptions = {}, config: Config) {
-		super(component, opts);
-
-		config.setTransition('image-viewer-enter', ImageViewerEnter);
-		config.setTransition('image-viewer-leave', ImageViewerLeave);
-
-		this.didLeave.subscribe(() => opts.onCloseCallback && opts.onCloseCallback());
-
-		this.willEnter.subscribe(() => this.handleHighResImageLoad(opts.fullResImage));
-	}
-
-	getTransitionName(direction: string) {
-		return `image-viewer-${direction === 'back' ? 'leave' : 'enter'}`;
-	}
+import {ImageViewerOptions} from './image-viewer';
+import {ImageViewerEnter, ImageViewerLeave} from './image-viewer-transitions';
+import {ImageViewerComponent} from "./image-viewer.component";
 
-	present(navOptions: NavOptions = {}) {
-		return this.app.present(this, navOptions);
-	}
-
-	private handleHighResImageLoad(fullResImage){
-		if (!fullResImage) {
-			return;
-		}
-
-		const image = new Image();
-		image.src = fullResImage;
-
-		if (!image.complete) {
-			const onLoadObservable = Observable.create(obs => {
-				image.onload = () => {
-					obs.next(image);
-					obs.complete();
-				}
-			});
-
-			// We want the animation to finish before replacing the pic
-			// as the calculation has been done with the smaller image
-			Observable.zip(onLoadObservable, this.didEnter)
-				.subscribe(() => this.instance.updateImageSrcWithTransition(fullResImage));
+export class ImageViewerImpl extends ViewController {
 
-		} else {
-			this.instance.updateImageSrc(fullResImage)
-		}
-	}
+  constructor(private app: App, component: ImageViewerComponent, opts: ImageViewerOptions = {}, config: Config) {
+    super(component, opts);
+
+    config.setTransition('image-viewer-enter', ImageViewerEnter);
+    config.setTransition('image-viewer-leave', ImageViewerLeave);
+
+    this.didLeave.subscribe(() => opts.onCloseCallback && opts.onCloseCallback());
+
+    this.willEnter.subscribe(() => this.handleHighResImageLoad(opts.fullResImage));
+  }
+
+  getTransitionName(direction: string) {
+    return 'image-viewer-' + (direction === 'back' ? 'leave' : 'enter');
+  }
+
+  present(navOptions: NavOptions = {}) {
+    return this.app.present(this, navOptions);
+  }
+
+  private handleHighResImageLoad(fullResImage) {
+    if (!fullResImage) {
+      return;
+    }
+
+    const image = new Image();
+    let fullResImageLen = fullResImage.length;
+    if (!image.complete) {
+      const onLoadObservable = Observable.create(obs => {
+        for (let i = 0; i < fullResImageLen; i++) {
+          image.src = fullResImage[i];
+          image.onload = () => {
+            obs.next(image);
+            obs.complete();
+          }
+        }
+      });
+      // We want the animation to finish before replacing the pic
+      // as the calculation has been done with the smaller image
+      Observable.zip(onLoadObservable, this.didEnter)
+        .subscribe(() => this.instance.updateImageSrcWithTransition(fullResImage));
+    } else {
+      this.instance.updateImageSrc(fullResImage);
+    }
+  }
 }

src/image-viewer-zoom-gesture.ts

@@ -1,5 +1,5 @@
 import { Renderer } from '@angular/core';
-import { Animation, DomController, Gesture, Platform } from 'ionic-angular';
+import { Animation, Gesture, Platform } from 'ionic-angular';
 import { DIRECTION_HORIZONTAL, DIRECTION_VERTICAL } from 'ionic-angular/gestures/hammer';
 
 import { ImageViewerComponent } from './image-viewer.component';
@@ -46,9 +46,8 @@ export class ImageViewerZoomGesture extends Gesture {
 
 	onPinchEnd(event) {
 		this.component.isZoomed = (this.currentScale !== 1);
-
+    this.component.sliderContainer.lockSwipes(true);
 		if (!this.component.isZoomed) {
-
 			new Animation(this.platform, this.element)
 				.fromTo('translateX', `${this.currentDeltaX}px`, '0')
 				.fromTo('translateY', `${this.currentDeltaY}px`, '0')
@@ -58,6 +57,8 @@ export class ImageViewerZoomGesture extends Gesture {
 
 			this.currentDeltaX = 0;
 			this.currentDeltaY = 0;
+
+      this.component.sliderContainer.lockSwipes(false);
 		}
 
 		// Saving the final transforms for adjustment next time the user interacts.
@@ -68,25 +69,28 @@ export class ImageViewerZoomGesture extends Gesture {
 
 	onPanStart(event) {
 		if (!this.component.isZoomed) {
+      this.component.sliderContainer.lockSwipes(false);
 			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;
+
+    this.component.sliderContainer.lockSwipes(true);
 	}
 
 	onPan(event) {
 		if (!this.component.isZoomed) {
+      this.component.sliderContainer.lockSwipes(false);
 			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();
+    this.component.sliderContainer.lockSwipes(true);
 	}
 
 	boundAdjustement(adjustement, bound) {
@@ -98,22 +102,25 @@ export class ImageViewerZoomGesture extends Gesture {
 
 	onPanEnd(event) {
 		if (!this.component.isZoomed) {
+      this.component.sliderContainer.lockSwipes(false);
 			return;
 		}
-
 		this.adjustDeltaX = this.currentDeltaX;
 		this.adjustDeltaY = this.currentDeltaY;
+    this.component.sliderContainer.lockSwipes(true);
 	}
 
 	onDoubleTap(event) {
 		this.component.isZoomed = !this.component.isZoomed;
 		if (this.component.isZoomed) {
 			this.currentScale = 2;
-		} else {
+      this.component.sliderContainer.lockSwipes(true);
+    } else {
 			this.currentScale = 1;
 
 			this.adjustDeltaX = this.currentDeltaX = 0;
 			this.adjustDeltaY = this.currentDeltaY = 0;
+      this.component.sliderContainer.lockSwipes(false);
 		}
 
 		this.adjustScale = this.currentScale;
@@ -127,4 +134,4 @@ export class ImageViewerZoomGesture extends Gesture {
 
 		this.renderer.setElementStyle(this.element, this.platform.Css.transform, transforms.join(' '));
 	}
-}
+}