From 9b8f63d52fba986c1929eafb1b77781c1e1beca0 Mon Sep 17 00:00:00 2001 From: bogomips Date: Sat, 19 Aug 2017 20:26:53 +0200 Subject: [PATCH 1/5] load the image when the slide is active --- src/fitted-image/fitted-image.scss | 4 +++- src/gallery-modal/gallery-modal.html | 5 ++++- src/gallery-modal/gallery-modal.ts | 9 ++++++++- src/zoomable-image/zoomable-image.html | 3 ++- src/zoomable-image/zoomable-image.ts | 15 +++++++++++++++ 5 files changed, 32 insertions(+), 4 deletions(-) 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/gallery-modal/gallery-modal.html b/src/gallery-modal/gallery-modal.html index 4762735..f0543ce 100644 --- a/src/gallery-modal/gallery-modal.html +++ b/src/gallery-modal/gallery-modal.html @@ -26,14 +26,17 @@ [ngStyle]="slidesStyle" touch-events (ionSlideDrag)="slidesDrag($event)" + (ionSlideDidChange)="slideDidChange($event)" (panup)="panUpDownEvent($event)" (pandown)="panUpDownEvent($event)" (panend)="panEndEvent($event)" (pancancel)="panEndEvent($event)" > - + - mi toldo dal cazzo {{canShow}}

+ ; @Input() wrapperWidth: number; @Input() wrapperHeight: number; @@ -19,6 +29,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 +88,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() { From c3b91ba2e5b4e3959e1ec68ea469f0595af55681 Mon Sep 17 00:00:00 2001 From: Pierluigi Petrelli Date: Sat, 19 Aug 2017 20:50:19 +0200 Subject: [PATCH 2/5] a watch we don't need:) --- src/zoomable-image/zoomable-image.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/zoomable-image/zoomable-image.html b/src/zoomable-image/zoomable-image.html index aa1019e..df545b2 100644 --- a/src/zoomable-image/zoomable-image.html +++ b/src/zoomable-image/zoomable-image.html @@ -9,7 +9,7 @@ (onpan)="panEvent($event)" [ngStyle]="containerStyle" > -

mi toldo dal cazzo {{canShow}}

+ Date: Sun, 20 Aug 2017 01:40:46 +0200 Subject: [PATCH 3/5] add support for auth_token param: it appends a header for jwt auth --- src/fitted-image/fitted-image.html | 4 +- src/fitted-image/fitted-image.ts | 65 +++++++++++++++++++++++++- src/gallery-modal/gallery-modal.html | 2 + src/gallery-modal/gallery-modal.ts | 7 ++- src/interfaces/tokenObj-interface.ts | 4 ++ src/zoomable-image/zoomable-image.html | 3 +- src/zoomable-image/zoomable-image.ts | 2 + 7 files changed, 82 insertions(+), 5 deletions(-) create mode 100644 src/interfaces/tokenObj-interface.ts diff --git a/src/fitted-image/fitted-image.html b/src/fitted-image/fitted-image.html index c676143..79da452 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.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 f0543ce..5706230 100644 --- a/src/gallery-modal/gallery-modal.html +++ b/src/gallery-modal/gallery-modal.html @@ -12,6 +12,7 @@
= new Subject(); @@ -46,7 +48,9 @@ export class GalleryModal implements OnInit { 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() { @@ -123,8 +127,7 @@ export class GalleryModal implements OnInit { this.slidesDragging = true; } - private slideDidChange(event) { - console.log("tobbi ",event); + private slideDidChange(event) { this.visibleSlide=event._activeIndex; } 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 aa1019e..3b4d4f1 100644 --- a/src/zoomable-image/zoomable-image.html +++ b/src/zoomable-image/zoomable-image.html @@ -9,9 +9,10 @@ (onpan)="panEvent($event)" [ngStyle]="containerStyle" > -

mi toldo dal cazzo {{canShow}}

+ ; @Input() wrapperWidth: number; @Input() wrapperHeight: number; From 7423f6d19034b7d5afcfa787cb094c94e494d551 Mon Sep 17 00:00:00 2001 From: bogomips Date: Sun, 20 Aug 2017 02:00:39 +0200 Subject: [PATCH 4/5] fix conflict --- src/zoomable-image/zoomable-image.html | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/zoomable-image/zoomable-image.html b/src/zoomable-image/zoomable-image.html index e1efd26..9a7d02c 100644 --- a/src/zoomable-image/zoomable-image.html +++ b/src/zoomable-image/zoomable-image.html @@ -9,12 +9,7 @@ (onpan)="panEvent($event)" [ngStyle]="containerStyle" > -<<<<<<< HEAD - -======= - ->>>>>>> c3b91ba2e5b4e3959e1ec68ea469f0595af55681 - Date: Sun, 20 Aug 2017 02:48:23 +0200 Subject: [PATCH 5/5] fix: missed ngIf --- src/fitted-image/fitted-image.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/fitted-image/fitted-image.html b/src/fitted-image/fitted-image.html index 79da452..5787412 100644 --- a/src/fitted-image/fitted-image.html +++ b/src/fitted-image/fitted-image.html @@ -1,6 +1,6 @@
-