diff --git a/src/fitted-image/fitted-image.html b/src/fitted-image/fitted-image.html index c676143..5787412 100644 --- a/src/fitted-image/fitted-image.html +++ b/src/fitted-image/fitted-image.html @@ -1,10 +1,12 @@
- + +
diff --git a/src/fitted-image/fitted-image.scss b/src/fitted-image/fitted-image.scss index acce48a..bf8a9a1 100644 --- a/src/fitted-image/fitted-image.scss +++ b/src/fitted-image/fitted-image.scss @@ -3,7 +3,7 @@ .fitted-image { display: inline-block; - position: relative; + //position: relative; transform-origin: left top; @@ -19,6 +19,8 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + width:100px; + height:100px; } img { diff --git a/src/fitted-image/fitted-image.ts b/src/fitted-image/fitted-image.ts index fa952d2..48dfcd0 100644 --- a/src/fitted-image/fitted-image.ts +++ b/src/fitted-image/fitted-image.ts @@ -1,6 +1,11 @@ +import { Photo } from '../interfaces/photo-interface'; +import { TokenObj } from '../interfaces/tokenObj-interface'; import { Component, OnInit, OnDestroy, Input, Output, EventEmitter } from '@angular/core'; +import { Http,Headers, RequestOptions,ResponseContentType } from '@angular/http'; import { ViewController, Scroll } from 'ionic-angular'; import { Subject } from 'rxjs/Subject'; +import {DomSanitizer} from '@angular/platform-browser'; +import 'rxjs/Rx'; @Component({ selector: 'fitted-image', @@ -8,7 +13,9 @@ import { Subject } from 'rxjs/Subject'; styleUrls: ['./fitted-image.scss'], }) export class FittedImage implements OnInit, OnDestroy { + @Input() photo: any; + @Input() tokenObj: TokenObj; @Input() resizeTriggerer: Subject; @Input() wrapperWidth: number; @Input() wrapperHeight: number; @@ -16,6 +23,7 @@ export class FittedImage implements OnInit, OnDestroy { @Output() onImageResized = new EventEmitter(); private loading: boolean = true; + private httpHeaders:Headers; private currentDimensions: any = { width: 0, @@ -30,7 +38,12 @@ export class FittedImage implements OnInit, OnDestroy { private imageStyle: any = {}; private resizeSubscription: any; - constructor() { + private photoUrl:any; + + constructor( + public http:Http, + public sanitizer:DomSanitizer + ) { } public ngOnInit() { @@ -39,6 +52,16 @@ export class FittedImage implements OnInit, OnDestroy { this.resizeSubscription = this.resizeTriggerer.subscribe(event => { this.resize(event); }); + + + if (this.tokenObj) { + + this.httpHeaders = new Headers(); + this.httpHeaders.set(this.tokenObj.header, this.tokenObj.token); + } + + this.getPhotoUrl(); + } public ngOnDestroy() { @@ -53,6 +76,46 @@ export class FittedImage implements OnInit, OnDestroy { this.saveImageDimensions(); } + async _http_call(picUrl) { + + let response; + + let requestOptionsProperties = { + method:'get', + headers: this.httpHeaders, + responseType: ResponseContentType.Blob, + url:picUrl + }; + + try { + + let requestOptionsObj = new RequestOptions(requestOptionsProperties); + response = await this.http.request(picUrl,requestOptionsObj).toPromise(); + + } + catch(res_error) { + response = res_error; + } + + return response; + + } + + getPhotoUrl() { + + if (this.tokenObj) { + + let urlCreator = window.URL; + this._http_call(this.photo.url).then((imgRes)=>{ + this.photoUrl = this.sanitizer.bypassSecurityTrustUrl(urlCreator.createObjectURL(imgRes._body)); + }); + + } + else + this.photoUrl=this.photo.url; + + } + /** * Get the real image dimensions and other useful stuff */ diff --git a/src/gallery-modal/gallery-modal.html b/src/gallery-modal/gallery-modal.html index 4762735..5706230 100644 --- a/src/gallery-modal/gallery-modal.html +++ b/src/gallery-modal/gallery-modal.html @@ -12,6 +12,7 @@
- + = new Subject(); @@ -39,12 +42,15 @@ export class GalleryModal implements OnInit { private transitionDuration: string = '200ms'; private transitionTimingFunction: string = 'cubic-bezier(0.33, 0.66, 0.66, 1)'; + constructor(private viewCtrl: ViewController, params: NavParams, private element: ElementRef, private platform: Platform, private domSanitizer: DomSanitizer) { this.photos = params.get('photos') || []; this.closeIcon = params.get('closeIcon') || 'arrow-back'; this.initialSlide = params.get('initialSlide') || 0; - + this.visibleSlide=this.initialSlide; + this.tokenObj = params.get('auth_token') || null; this.initialImage = this.photos[this.initialSlide] || {}; + } public ngOnInit() { @@ -121,6 +127,10 @@ export class GalleryModal implements OnInit { this.slidesDragging = true; } + private slideDidChange(event) { + this.visibleSlide=event._activeIndex; + } + /** * Called when the user pans up/down * diff --git a/src/interfaces/tokenObj-interface.ts b/src/interfaces/tokenObj-interface.ts new file mode 100644 index 0000000..068a6fa --- /dev/null +++ b/src/interfaces/tokenObj-interface.ts @@ -0,0 +1,4 @@ +export interface TokenObj { + header: string; + token: string; +} diff --git a/src/zoomable-image/zoomable-image.html b/src/zoomable-image/zoomable-image.html index 7e23217..9a7d02c 100644 --- a/src/zoomable-image/zoomable-image.html +++ b/src/zoomable-image/zoomable-image.html @@ -9,8 +9,9 @@ (onpan)="panEvent($event)" [ngStyle]="containerStyle" > - ; @Input() wrapperWidth: number; @Input() wrapperHeight: number; @@ -19,6 +31,8 @@ export class ZoomableImage implements OnInit, OnDestroy { @Output() enableScroll = new EventEmitter(); @Output() zoomChange = new EventEmitter(); + private _visibleSlide:number; + private canShow:boolean=false; private scrollableElement: any; private scrollListener: any; @@ -76,6 +90,9 @@ export class ZoomableImage implements OnInit, OnDestroy { this.resizeSubscription = this.resizeTriggerer.subscribe(event => { this.resize(event); }); + + if (this.picIndex == this._visibleSlide) + this.canShow = true; } public ngOnDestroy() {