fix(legend): use token with image tag

src/lib/core/activity/activity.interceptor.ts

@@ -12,6 +12,14 @@ export class ActivityInterceptor implements HttpInterceptor {
   constructor(private activityService: ActivityService) { }
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const activity = req.headers.get('activityInterceptor');
+    if (activity) {
+      const actReq = req.clone({headers: req.headers.delete('activityInterceptor')});
+      if (activity === 'false') {
+        return next.handle(actReq);
+      }
+    }
+
     const id = this.activityService.register();
 
     return next.handle(req).pipe(

src/lib/layer/layer-item/layer-item.component.html

@@ -116,5 +116,5 @@ <h4 matLine [matTooltip]="layer.title +' ('+ id +') '" matTooltipShowDelay="500"
 </div>
 
 <div #legend class="igo-layer-legend-container">
-  <igo-layer-legend *ngIf="!layer.collapsed" [layer]="layer"></igo-layer-legend>
+  <igo-layer-legend *ngIf="legendLoaded" [layer]="layer"></igo-layer-legend>
 </div>

src/lib/layer/layer-item/layer-item.component.ts

@@ -59,6 +59,7 @@ export class LayerItemComponent implements OnDestroy {
     this.layer.dataSource.options['id'] : this.layer.id;
   }
 
+  public legendLoaded = false;
   private resolution$$: Subscription;
 
   constructor(private cdRef: ChangeDetectorRef,
@@ -72,6 +73,7 @@ export class LayerItemComponent implements OnDestroy {
 
   toggleLegend(collapsed: boolean) {
     this.layer.collapsed = collapsed;
+    this.legendLoaded = collapsed ? this.legendLoaded : true;
   }
 
   toggleVisibility() {

src/lib/layer/layer-legend/layer-legend.component.html

@@ -1,8 +1,8 @@
-<small *ngIf="layer.dataSource.getLegend().length === 0">
+<small *ngIf="legend.length === 0">
   {{'igo.layer.noLegendText' | translate}}
 </small>
 
-<ng-template ngFor let-item [ngForOf]="layer.dataSource.getLegend()">
+<ng-template ngFor let-item [ngForOf]="legend">
   <mat-list-item *ngIf="item.title">
     <mat-icon
       id="legend-toggle"
@@ -18,8 +18,8 @@ <h4 matLine>{{item.title}}</h4>
   <div #legend class="igo-layer-legend" [ngClass]="{'with-title': item.title}">
     <img
       *ngIf="item.url"
-      src="{{item.url}}"
-      alt="{{'igo.layer.noLegendText' | translate}}">
+      src="{{(item.url | secureImage) | async}}"
+      alt="{{'igo.layer.loadingLegendText' | translate}}">
     <div
       [ngStyle]="item.style"
       [innerHTML]="item.html"

src/lib/layer/layer-legend/layer-legend.component.ts

@@ -14,9 +14,13 @@ export class LayerLegendComponent {
   get layer(): Layer { return this._layer; }
   set layer(value: Layer) {
     this._layer = value;
+    this._legend = value.dataSource.getLegend();
   }
   private _layer: Layer;
 
-  constructor() { }
+  get legend() { return this._legend; }
+  private _legend;
+
+  constructor() {}
 
 }

src/lib/shared/image/index.ts

@@ -0,0 +1 @@
+export * from './secure-image.pipe';

src/lib/shared/image/secure-image.pipe.ts

@@ -0,0 +1,34 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable } from 'rxjs/Observable';
+import { switchMap } from 'rxjs/operators';
+
+
+@Pipe({
+  name: 'secureImage'
+})
+export class SecureImagePipe implements PipeTransform {
+  constructor(
+    private http: HttpClient
+  ) { }
+
+  transform(url: string) {
+    return this.http.get(url, {
+      headers: {
+        activityInterceptor: 'false'
+      },
+      responseType: 'blob'
+    }).pipe(
+      switchMap(blob => {
+        return Observable.create(observer => {
+          const reader = new FileReader();
+          reader.readAsDataURL(blob);
+          reader.onloadend = () => {
+            observer.next(reader.result);
+          }
+        });
+      })
+    );
+  }
+}

src/lib/shared/index.ts

@@ -5,6 +5,7 @@ export * from './confirm-dialog';
 export * from './clickout';
 export * from './clone';
 export * from './drag-drop';
+export * from './image';
 export * from './keyvalue';
 export * from './list';
 export * from './panel';

src/lib/shared/module.ts

@@ -12,6 +12,7 @@ import { CollapsibleComponent, CollapseDirective } from './collapsible';
 import { ConfirmDialogComponent, ConfirmDialogService } from './confirm-dialog';
 import { ClonePipe } from './clone';
 import { DragAndDropDirective } from './drag-drop';
+import { SecureImagePipe } from './image';
 import { KeyvaluePipe } from './keyvalue';
 import { ListComponent, ListItemDirective } from './list';
 import { PanelComponent } from './panel';
@@ -45,6 +46,7 @@ import { TableComponent } from './table';
     ClonePipe,
     DragAndDropDirective,
     KeyvaluePipe,
+    SecureImagePipe,
     ListComponent,
     ListItemDirective,
     PanelComponent,
@@ -63,6 +65,7 @@ import { TableComponent } from './table';
     ClonePipe,
     DragAndDropDirective,
     KeyvaluePipe,
+    SecureImagePipe,
     ListComponent,
     ListItemDirective,
     PanelComponent,

src/locale/en.json

@@ -95,6 +95,7 @@
 		"layer": {
 			"hideLayer": "Hide Layer",
 			"lowerLayer": "Bring layer backward",
+			"loadingLegendText": "Loading legend",
 			"noLegendText": "No legend available for this layer",
 			"opacity": "Opacity",
 			"raiseLayer": "Bring layer forward",

src/locale/fr.json

@@ -95,6 +95,7 @@
 		"layer": {
 			"hideLayer": "Masquer la couche",
 			"lowerLayer": "Descendre la couche",
+			"loadingLegendText": "Chargement de la légende",
 			"noLegendText": "Aucune légende disponible pour cette couche",
 			"opacity": "Opacité",
 			"raiseLayer": "Monter la couche",