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(' '));
 }
-}
+}