feat(getFeatureInfo): entire content instead of only body (#111)

* innerhtml param now allowed to keep his own style. Putting into a iframe. * managing regex to validate empty body * ng lint 'safe' * Update query.service.ts
infra-geo-ouverte · Dec 5, 2017 · 0abf413 · 0abf413
1 parent a9383f1
commit 0abf413
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 19 deletions.
diff --git a/src/lib/feature/feature-details/feature-details.component.html b/src/lib/feature/feature-details/feature-details.component.html
@@ -1,4 +1,4 @@
-<table class="igo-striped" *ngIf="feature">
+<table class="igo-striped" *ngIf="feature && feature.properties.target !== 'innerhtml'">
   <tbody>
     <tr *ngFor="let property of feature.properties | keyvalue">
 
@@ -10,12 +10,6 @@
         <a href="{{property.value}}" target='_blank'> {{ 'igo.targetHtmlUrl' | translate }} {{feature.title}}</a>
       </td>
 
-      <td *ngIf="feature.properties.target === 'innerhtml' && property.key === 'body'">
-      </td>
-
-      <td *ngIf="feature.properties.target === 'innerhtml' && property.key === 'body'" [innerHTML]=property.value>
-      </td>
-
       <td *ngIf="feature.properties.target === undefined">
         {{property.key }}
       </td>
@@ -29,3 +23,4 @@
     </tr>
   </tbody>
 </table>
+<iframe *ngIf="feature && feature.properties.target === 'innerhtml'" width=100% [src]='isUrl(feature.properties.url)'></iframe>
diff --git a/src/lib/feature/feature-details/feature-details.component.ts b/src/lib/feature/feature-details/feature-details.component.ts
@@ -1,6 +1,6 @@
 import { Component, Input, ChangeDetectionStrategy,
          ChangeDetectorRef } from '@angular/core';
-
+import { DomSanitizer } from '@angular/platform-browser';
 import { Feature } from '../shared';
 
 @Component({
@@ -19,8 +19,11 @@ export class FeatureDetailsComponent {
   }
   private _feature: Feature;
 
-  constructor(private cdRef: ChangeDetectorRef) { }
+  constructor(private cdRef: ChangeDetectorRef, private sanitizer: DomSanitizer) { }
 
+  isUrl(value) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+  }
   isObject(value) {
     return typeof value === 'object';
   }

diff --git a/src/lib/query/shared/query.service.ts b/src/lib/query/shared/query.service.ts
@@ -149,14 +149,14 @@ export class QueryService {
       const clickx1 = clickx + threshold * 2;
       const clicky1 = clicky + threshold * 2;
 
-      const wkts = 'POLYGON((' + clickx + ' ' + clicky + ', ' + clickx + ' ' + clicky1 +
+      const wkt_poly = 'POLYGON((' + clickx + ' ' + clicky + ', ' + clickx + ' ' + clicky1 +
                   ', ' + clickx1 + ' ' + clicky1 + ', ' + clickx1 + ' ' + clicky +
                   ', ' + clickx + ' ' + clicky + '))';
 
 
       const format = new ol.format.WKT();
-      const yourGeometry = format.readFeature(wkts);
-      const f = (yourGeometry.getGeometry() as any);
+      const tenPercentWidthGeom = format.readFeature(wkt_poly);
+      const f = (tenPercentWidthGeom.getGeometry() as any);
 
       let target_igo2 = '_blank';
       let icon_html = 'link';
@@ -172,16 +172,19 @@ export class QueryService {
         case 'innerhtml':
           target_igo2 = 'innerhtml';
           icon_html = 'place';
-          const pos_body_debut = res['_body'].toLowerCase().indexOf('<body>');
-          const pos_body_fin = res['_body'].toLowerCase().lastIndexOf('</body>') + 7;
-          res['_body'] = res['_body'].slice(pos_body_debut, pos_body_fin);
+          const body_tag_start = res['_body'].toLowerCase().indexOf('<body>');
+          const body_tag_end = res['_body'].toLowerCase().lastIndexOf('</body>') + 7;
+          // replace \r \n  and ' ' with '' to validate that the body is really empty.
+          if ( res['_body'].replace(/ /g, '')
+          .replace(/(?:\r\n|\r|\n)/g, '' )
+          .slice(body_tag_start, body_tag_end)
+          .replace(' ', '') === '<body></body>' || res['_body'] === '' ) {
+            return [];
+          }
+          res['_body'] = res['_body'];
           break;
       }
 
-      if ( res['_body'] === '<body></body>') {
-        return [];
-      }
-
 
       return [{
         id: 'html1',