From dd58905296f262fb8c69b155517dd016202147de Mon Sep 17 00:00:00 2001 From: jianmin li Date: Thu, 29 Jun 2017 16:37:25 +0800 Subject: [PATCH 01/10] '' --- src/image-viewer-impl.ts | 99 ++++++++-------- src/image-viewer-zoom-gesture.ts | 23 ++-- src/image-viewer.component.ts | 197 ++++++++++++++++--------------- src/image-viewer.directive.ts | 6 +- src/image-viewer.ts | 2 +- src/module.ts | 3 +- 6 files changed, 169 insertions(+), 161 deletions(-) diff --git a/src/image-viewer-impl.ts b/src/image-viewer-impl.ts index 00693b2..4886605 100644 --- a/src/image-viewer-impl.ts +++ b/src/image-viewer-impl.ts @@ -1,55 +1,54 @@ -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"; +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) { - let key = 'image-viewer-' + (direction === 'back' ? 'leave' : 'enter'); - return key; - } - - 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)); - - } 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.length) { + 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); + } + } } diff --git a/src/image-viewer-zoom-gesture.ts b/src/image-viewer-zoom-gesture.ts index 7fc2470..cd19611 100644 --- a/src/image-viewer-zoom-gesture.ts +++ b/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(' ')); } -} \ No newline at end of file +} diff --git a/src/image-viewer.component.ts b/src/image-viewer.component.ts index 6e88a56..c730cde 100644 --- a/src/image-viewer.component.ts +++ b/src/image-viewer.component.ts @@ -1,104 +1,109 @@ import { - DomController, - NavController, - NavParams, - Transition, - Ion, - PanGesture, - Gesture, - GestureController, - Config, - Platform, - Animation + DomController, + NavController, + NavParams, + Ion, + GestureController, + Config, + Platform, Slides, } from 'ionic-angular'; -import { DIRECTION_HORIZONTAL, DIRECTION_VERTICAL } from 'ionic-angular/gestures/hammer'; -import { ElementRef, Renderer, Component, OnInit, OnDestroy, AfterViewInit, NgZone, ViewChild } from '@angular/core'; -import { DomSanitizer, SafeUrl } from '@angular/platform-browser'; +import {ElementRef, Renderer, Component, OnInit, OnDestroy, AfterViewInit, NgZone, ViewChild} from '@angular/core'; +import {DomSanitizer, SafeUrl} from '@angular/platform-browser'; -import { ImageViewerSrcAnimation } from './image-viewer-src-animation'; -import { ImageViewerTransitionGesture } from './image-viewer-transition-gesture'; -import { ImageViewerZoomGesture } from './image-viewer-zoom-gesture'; -import { ImageViewerEnter, ImageViewerLeave } from './image-viewer-transitions'; +import {ImageViewerSrcAnimation} from './image-viewer-src-animation'; +import {ImageViewerTransitionGesture} from './image-viewer-transition-gesture'; +import {ImageViewerZoomGesture} from './image-viewer-zoom-gesture'; @Component({ - selector: 'image-viewer', - template: ` - - - - - - - -
-
- -
-
- ` + selector: 'image-viewer', + templateUrl: 'image-viewer.html', }) export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, AfterViewInit { - public imageUrl: SafeUrl; - - public dragGesture: ImageViewerTransitionGesture; - - @ViewChild('imageContainer') imageContainer; - @ViewChild('image') image; - - private pinchGesture: ImageViewerZoomGesture; - - public isZoomed: boolean; - - private unregisterBackButton: Function; - - constructor( - public _gestureCtrl: GestureController, - public elementRef: ElementRef, - private _nav: NavController, - private _zone: NgZone, - private renderer: Renderer, - private domCtrl: DomController, - private platform: Platform, - _navParams: NavParams, - _config: Config, - private _sanitizer: DomSanitizer - ) { - super(_config, elementRef, renderer); - - const url = _navParams.get('image'); - this.updateImageSrc(url); - } - - updateImageSrc(src) { - this.imageUrl = this._sanitizer.bypassSecurityTrustUrl(src); - } - - updateImageSrcWithTransition(src) { - const imageElement = this.image.nativeElement; - const lowResImgWidth = imageElement.clientWidth; - - this.updateImageSrc(src); - - const animation = new ImageViewerSrcAnimation(this.platform, this.image); - imageElement.onload = () => animation.scaleFrom(lowResImgWidth); - } - - ngOnInit() { - const navPop = () => this._nav.pop(); - - this.unregisterBackButton = this.platform.registerBackButtonAction(navPop); - this._zone.runOutsideAngular(() => this.dragGesture = new ImageViewerTransitionGesture(this.platform, this, this.domCtrl, this.renderer, navPop)); - } - - ngAfterViewInit() { - // imageContainer is set after the view has been initialized - this._zone.runOutsideAngular(() => this.pinchGesture = new ImageViewerZoomGesture(this, this.imageContainer, this.platform, this.renderer)); - } - - ngOnDestroy() { - this.dragGesture && this.dragGesture.destroy(); - this.pinchGesture && this.pinchGesture.destroy(); - - this.unregisterBackButton(); - } + public imageUrl: SafeUrl[] = []; + public imageCurIndex: number = 0; + public originalSrc: string; + public imageChange: SafeUrl; + + public dragGesture: ImageViewerTransitionGesture; + + @ViewChild('imageContainer') imageContainer; + @ViewChild('image') image; + @ViewChild('sliderContainer') sliderContainer: Slides; + + private pinchGesture: ImageViewerZoomGesture; + + public isZoomed: boolean; + + private unregisterBackButton: Function; + + constructor(public _gestureCtrl: GestureController, + public elementRef: ElementRef, + private _nav: NavController, + private _zone: NgZone, + private renderer: Renderer, + private domCtrl: DomController, + private platform: Platform, + _navParams: NavParams, + _config: Config, + private _sanitizer: DomSanitizer) { + super(_config, elementRef, renderer); + + const url = _navParams.get('image'); + this.updateImageSrc(url); + } + + updateImageSrc(src) { + if (Array.isArray(src)) { + let srcLen = src.length; + let safeImage: SafeUrl[] = []; + for (let i = 0; i < srcLen; i++) { + if(this.originalSrc === src[i]){ + this.imageCurIndex = i; + } + if(i === 0){ + this.imageChange = this._sanitizer.bypassSecurityTrustUrl(src[i]); + safeImage = safeImage.concat(this.imageUrl); + continue; + } + safeImage.push(this._sanitizer.bypassSecurityTrustUrl(src[i])); + } + this.imageUrl = safeImage; + } else { + this.originalSrc = src; + this.imageUrl.push(this._sanitizer.bypassSecurityTrustUrl(src)); + } + } + + updateImageSrcWithTransition(src) { + const imageElement = this.image.nativeElement; + const lowResImgWidth = imageElement.clientWidth; + + this.updateImageSrc(src); + + const animation = new ImageViewerSrcAnimation(this.platform, this.image); + imageElement.onload = () => animation.scaleFrom(lowResImgWidth); + } + + ngOnInit() { + const navPop = () => this._nav.pop(); + + this.unregisterBackButton = this.platform.registerBackButtonAction(navPop); + this._zone.runOutsideAngular(() => this.dragGesture = new ImageViewerTransitionGesture(this.platform, this, this.domCtrl, this.renderer, navPop)); + } + + ngAfterViewInit() { + // imageContainer is set after the view has been initialized + this._zone.runOutsideAngular(() => this.pinchGesture = new ImageViewerZoomGesture(this, this.imageContainer, this.platform, this.renderer)); + } + + ionViewDidEnter(){ + this.imageUrl[0] = this.imageChange; + } + + ngOnDestroy() { + this.dragGesture && this.dragGesture.destroy(); + this.pinchGesture && this.pinchGesture.destroy(); + + this.unregisterBackButton(); + } } diff --git a/src/image-viewer.directive.ts b/src/image-viewer.directive.ts index 31dbd9d..5ca25a4 100644 --- a/src/image-viewer.directive.ts +++ b/src/image-viewer.directive.ts @@ -1,7 +1,5 @@ import { Directive, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core'; -import { ImageViewerComponent } from './image-viewer.component'; -import { ImageViewer } from './image-viewer'; import { ImageViewerController } from "./image-viewer.controller"; @Directive({ @@ -22,8 +20,8 @@ export class ImageViewerDirective { const element = this._el.nativeElement; const onCloseCallback = () => this.close.emit(); - - const imageViewer = this.imageViewerCtrl.create(element, { fullResImage: this.src, onCloseCallback }); + const imageViewer = this.imageViewerCtrl.create(element, { fullResImage: this.src.split(','), onCloseCallback }); imageViewer.present(); } } + diff --git a/src/image-viewer.ts b/src/image-viewer.ts index 127f26a..60a0881 100644 --- a/src/image-viewer.ts +++ b/src/image-viewer.ts @@ -19,7 +19,7 @@ export class ImageViewer extends OverlayProxy { export interface ImageViewerOptions { enableBackdropDismiss?: boolean; image?: string; - fullResImage?: string + fullResImage?: string[] position?: ClientRect; onCloseCallback?: Function; } diff --git a/src/module.ts b/src/module.ts index 3b60d27..c0a8564 100644 --- a/src/module.ts +++ b/src/module.ts @@ -1,6 +1,5 @@ -import { NgModule, APP_INITIALIZER } from '@angular/core'; +import { NgModule } from '@angular/core'; import { IonicModule } from 'ionic-angular'; -import { Config } from 'ionic-angular/config/config'; import { ImageViewerDirective } from './image-viewer.directive'; import { ImageViewerComponent } from './image-viewer.component'; From 8b9012b4b58464cce6b5aac6bd72b1ec7c1736d9 Mon Sep 17 00:00:00 2001 From: jianmin li Date: Thu, 29 Jun 2017 17:05:29 +0800 Subject: [PATCH 02/10] Mod:support multiple pictures show, left and right sliding display --- src/image-viewer.html | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/image-viewer.html diff --git a/src/image-viewer.html b/src/image-viewer.html new file mode 100644 index 0000000..1b8c9b9 --- /dev/null +++ b/src/image-viewer.html @@ -0,0 +1,16 @@ + + + + + + + +
+
+ + + + + +
+
From 9067968cdce95dc6918da63814e7f630c5b8f3c8 Mon Sep 17 00:00:00 2001 From: jianmin li Date: Fri, 30 Jun 2017 14:03:50 +0800 Subject: [PATCH 03/10] Mod:for the reason of the transition, click on the picture as the first show --- src/image-viewer.component.ts | 17 +++++++---------- src/image-viewer.html | 5 +++-- 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/image-viewer.component.ts b/src/image-viewer.component.ts index c730cde..a933039 100644 --- a/src/image-viewer.component.ts +++ b/src/image-viewer.component.ts @@ -22,7 +22,7 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, Afte public imageUrl: SafeUrl[] = []; public imageCurIndex: number = 0; public originalSrc: string; - public imageChange: SafeUrl; + // public safeImage: SafeUrl[] = []; public dragGesture: ImageViewerTransitionGesture; @@ -58,11 +58,12 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, Afte let safeImage: SafeUrl[] = []; for (let i = 0; i < srcLen; i++) { if(this.originalSrc === src[i]){ - this.imageCurIndex = i; - } - if(i === 0){ - this.imageChange = this._sanitizer.bypassSecurityTrustUrl(src[i]); - safeImage = safeImage.concat(this.imageUrl); + // this.imageCurIndex = i; + if(this.imageUrl.length){ + safeImage.unshift(this.imageUrl[0]); + }else{ + safeImage.unshift(this._sanitizer.bypassSecurityTrustUrl(src[i])); + } continue; } safeImage.push(this._sanitizer.bypassSecurityTrustUrl(src[i])); @@ -96,10 +97,6 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, Afte this._zone.runOutsideAngular(() => this.pinchGesture = new ImageViewerZoomGesture(this, this.imageContainer, this.platform, this.renderer)); } - ionViewDidEnter(){ - this.imageUrl[0] = this.imageChange; - } - ngOnDestroy() { this.dragGesture && this.dragGesture.destroy(); this.pinchGesture && this.pinchGesture.destroy(); diff --git a/src/image-viewer.html b/src/image-viewer.html index 1b8c9b9..e43c69b 100644 --- a/src/image-viewer.html +++ b/src/image-viewer.html @@ -8,8 +8,9 @@
- - + + +
From 69a0c68b45ef7989ccdf4675f2749e4eac88ba7d Mon Sep 17 00:00:00 2001 From: jianmin li Date: Tue, 4 Jul 2017 17:36:07 +0800 Subject: [PATCH 04/10] fix Programmatic usage bug --- src/image-viewer-impl.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/image-viewer-impl.ts b/src/image-viewer-impl.ts index 4886605..d68a199 100644 --- a/src/image-viewer-impl.ts +++ b/src/image-viewer-impl.ts @@ -27,7 +27,7 @@ export class ImageViewerImpl extends ViewController { } private handleHighResImageLoad(fullResImage) { - if (!fullResImage.length) { + if (!fullResImage) { return; } From 5d3b1dc63294e99d1db4ca6e066076e3b3eb28fe Mon Sep 17 00:00:00 2001 From: jianmin li Date: Wed, 5 Jul 2017 09:17:57 +0800 Subject: [PATCH 05/10] mod:Added no-border attribute to the ion-header --- src/image-viewer.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/image-viewer.html b/src/image-viewer.html index e43c69b..fdf7a89 100644 --- a/src/image-viewer.html +++ b/src/image-viewer.html @@ -1,4 +1,4 @@ - + From ecac3a5a65260dc0450e92f0debbbfe55e374485 Mon Sep 17 00:00:00 2001 From: shashwat2519 Date: Tue, 15 Aug 2017 14:34:44 +0530 Subject: [PATCH 06/10] start from specified image index when viewing multiple images --- src/image-viewer.component.ts | 1 + src/image-viewer.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/image-viewer.component.ts b/src/image-viewer.component.ts index a933039..fd37230 100644 --- a/src/image-viewer.component.ts +++ b/src/image-viewer.component.ts @@ -49,6 +49,7 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, Afte super(_config, elementRef, renderer); const url = _navParams.get('image'); + this.imageCurIndex = _navParams.get('imageCurIndex') || 0; this.updateImageSrc(url); } diff --git a/src/image-viewer.ts b/src/image-viewer.ts index 60a0881..930efa2 100644 --- a/src/image-viewer.ts +++ b/src/image-viewer.ts @@ -21,5 +21,6 @@ export interface ImageViewerOptions { image?: string; fullResImage?: string[] position?: ClientRect; + imageCurIndex?: number; onCloseCallback?: Function; } From 0299b37221839cb0d8060574abb063d22735d495 Mon Sep 17 00:00:00 2001 From: jianmingLee Date: Thu, 17 Aug 2017 20:44:51 +0800 Subject: [PATCH 07/10] Update package.json It applies to ionic-angular 3.6.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 21f5692..a74c28f 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,6 @@ "copyfiles": "1.0.0" }, "peerDependencies": { - "ionic-angular": "~3.4.0" + "ionic-angular": "~3.6.0" } } From c1afad56ae3e44b9cece10a87d772244fd5d0945 Mon Sep 17 00:00:00 2001 From: jianmingLee Date: Thu, 17 Aug 2017 20:48:19 +0800 Subject: [PATCH 08/10] Synchronize with author version Synchronize with author version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a74c28f..153a9db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ionic-img-viewer", - "version": "2.4.0", + "version": "2.6.1", "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", From 24ef16023f2378f7113a4a82fd5bad9c9855abbf Mon Sep 17 00:00:00 2001 From: keephacking Date: Tue, 19 Dec 2017 19:16:13 +0530 Subject: [PATCH 09/10] added title and icons in header. --- ionic-img-viewer.ts | 2 +- package.json | 80 +++++++++++++++++------------------ src/image-viewer.component.ts | 18 +++++++- src/image-viewer.directive.ts | 57 ++++++++++++++++--------- src/image-viewer.html | 30 +++++++------ src/image-viewer.scss | 19 ++------- src/image-viewer.ts | 9 +++- 7 files changed, 123 insertions(+), 92 deletions(-) diff --git a/ionic-img-viewer.ts b/ionic-img-viewer.ts index 8cd683e..6484322 100644 --- a/ionic-img-viewer.ts +++ b/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'; diff --git a/package.json b/package.json index 926d0e6..c5c2ec5 100644 --- a/package.json +++ b/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", + "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" + } +} \ No newline at end of file diff --git a/src/image-viewer.component.ts b/src/image-viewer.component.ts index fd37230..3b193e9 100644 --- a/src/image-viewer.component.ts +++ b/src/image-viewer.component.ts @@ -7,21 +7,26 @@ import { Config, Platform, Slides, } from 'ionic-angular'; -import {ElementRef, Renderer, Component, OnInit, OnDestroy, AfterViewInit, NgZone, ViewChild} from '@angular/core'; +import {ChangeDetectorRef,ChangeDetectionStrategy,ElementRef, Renderer, Component, OnInit, OnDestroy, AfterViewInit, NgZone, ViewChild} from '@angular/core'; import {DomSanitizer, SafeUrl} from '@angular/platform-browser'; import {ImageViewerSrcAnimation} from './image-viewer-src-animation'; import {ImageViewerTransitionGesture} from './image-viewer-transition-gesture'; import {ImageViewerZoomGesture} from './image-viewer-zoom-gesture'; +import { IconOptions } from './image-viewer'; @Component({ selector: 'image-viewer', templateUrl: 'image-viewer.html', + changeDetection:ChangeDetectionStrategy.OnPush }) export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, AfterViewInit { public imageUrl: SafeUrl[] = []; public imageCurIndex: number = 0; public originalSrc: string; + public title: string; + public iconsRight: IconOptions[]; + public imageId:number; // public safeImage: SafeUrl[] = []; public dragGesture: ImageViewerTransitionGesture; @@ -38,6 +43,7 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, Afte constructor(public _gestureCtrl: GestureController, public elementRef: ElementRef, + private _cd: ChangeDetectorRef, private _nav: NavController, private _zone: NgZone, private renderer: Renderer, @@ -50,9 +56,16 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, Afte const url = _navParams.get('image'); this.imageCurIndex = _navParams.get('imageCurIndex') || 0; + this.title = _navParams.get('title') ||""; + this.iconsRight = _navParams.get('iconsRight') ||[]; + this.imageId = _navParams.get('imageId') ||null; this.updateImageSrc(url); - } + } + onIconClick(icon:IconOptions){ + this._nav.pop(); + icon.cb(this.imageId); + } updateImageSrc(src) { if (Array.isArray(src)) { let srcLen = src.length; @@ -74,6 +87,7 @@ export class ImageViewerComponent extends Ion implements OnInit, OnDestroy, Afte this.originalSrc = src; this.imageUrl.push(this._sanitizer.bypassSecurityTrustUrl(src)); } + this._cd.markForCheck(); } updateImageSrcWithTransition(src) { diff --git a/src/image-viewer.directive.ts b/src/image-viewer.directive.ts index 5a3e2af..946a8e4 100644 --- a/src/image-viewer.directive.ts +++ b/src/image-viewer.directive.ts @@ -1,28 +1,43 @@ -import { Directive, ElementRef, EventEmitter, HostListener, Input, Output } from '@angular/core'; - +import { + Directive, + ElementRef, + EventEmitter, + HostListener, + Input, + Output +} from "@angular/core"; import { ImageViewerController } from "./image-viewer.controller"; +import { IconOptions } from "./image-viewer"; @Directive({ - selector: '[imageViewer]' + selector: "[imageViewer]" }) export class ImageViewerDirective { - - @Input('imageViewer') src: string; - @Output() close = new EventEmitter(); - - constructor( - private _el: ElementRef, - private imageViewerCtrl: ImageViewerController - ) { } - - @HostListener('click', ['$event']) onClick(event: Event): void { - event.stopPropagation(); - - const element = this._el.nativeElement; - const onCloseCallback = () => this.close.emit(); - const imageViewer = this.imageViewerCtrl.create(element, { fullResImage: this.src.split(','), onCloseCallback }); - imageViewer.present(); - } + @Input("imageViewer") src: string; + @Input("title") title: string; + @Input("imageId") imageId: number; + @Input("iconsRight") iconsRight:IconOptions[]; + @Output() close = new EventEmitter(); + + constructor( + private _el: ElementRef, + private imageViewerCtrl: ImageViewerController + ) {} + + @HostListener("click", ["$event"]) + onClick(event: Event): void { + event.stopPropagation(); + + const element = this._el.nativeElement; + const onCloseCallback = () => this.close.emit(); + const imageViewer = this.imageViewerCtrl.create(element, { + title: this.title, + imageId: this.imageId, + iconsRight: this.iconsRight, + fullResImage: this.src.split(","), + onCloseCallback + }); + imageViewer.present(); + } } - diff --git a/src/image-viewer.html b/src/image-viewer.html index fdf7a89..ac0af24 100644 --- a/src/image-viewer.html +++ b/src/image-viewer.html @@ -1,17 +1,23 @@ - - - + + + {{title}} + + + +
-
- - - - - - -
-
+
+ + + + + + +
+
\ No newline at end of file diff --git a/src/image-viewer.scss b/src/image-viewer.scss index f74395a..8ea5fee 100644 --- a/src/image-viewer.scss +++ b/src/image-viewer.scss @@ -4,55 +4,44 @@ image-viewer.ion-page { right: 0; bottom: 0; left: 0; - display: flex; flex-direction: column; - height: 100%; - opacity: 1; - ion-navbar { &.toolbar .toolbar-background { background-color: transparent; } - &.toolbar.toolbar-ios { padding-top: calc(20px + 4px); } - .bar-button-default { color: white; } + .toolbar-title { + color: white; + } } - .backdrop { will-change: opacity; } - .image-wrapper { position: relative; z-index: 10; - display: flex; overflow: hidden; flex-direction: column; - margin-top: 56px; - flex-grow: 1; justify-content: center; } - .image { will-change: transform; } - img { display: block; - max-width: 100%; max-height: 100%; margin: 0 auto; } -} +} \ No newline at end of file diff --git a/src/image-viewer.ts b/src/image-viewer.ts index 6d4ad71..4a4a4a5 100644 --- a/src/image-viewer.ts +++ b/src/image-viewer.ts @@ -22,5 +22,12 @@ export interface ImageViewerOptions { fullResImage?: string[] position?: ClientRect; imageCurIndex?: number; - onCloseCallback?: Function; + onCloseCallback?: Function; + title?:string, + iconsRight?:IconOptions[], + imageId?:number; +} +export interface IconOptions { + name:string; + cb:Function; } From 7b79947cead5321592b85aa264caf1e92d395a79 Mon Sep 17 00:00:00 2001 From: "Kyle J. Kemp" Date: Sun, 18 Mar 2018 09:57:28 -0500 Subject: [PATCH 10/10] Update package.json --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index c5c2ec5..e811589 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ionic-img-viewer", - "version": "2.7", + "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", @@ -38,4 +38,4 @@ "peerDependencies": { "ionic-angular": "~3.9.2" } -} \ No newline at end of file +}