Fix 607 - Automatically format http(s) links and emails as anchor ele…

…ments in query results
camptocamp · Sep 20, 2018 · a1d2912 · a1d2912
1 parent 453c721
commit a1d2912
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 2 deletions.
diff --git a/contribs/gmf/src/query/windowComponent.html b/contribs/gmf/src/query/windowComponent.html
@@ -53,7 +53,7 @@
                 ></td>
               <td
                 class="details-value"
-                ng-bind-html="value | ngeoTrustHtml"
+                ng-bind-html="value | ngeoTrustHtmlAuto"
                 ></td>
             </tr>
           </table>

diff --git a/options/ngeox.js b/options/ngeox.js
@@ -792,6 +792,30 @@ ngeox.ScaleselectorOptions.prototype.dropup;
 ngeox.SortableOptions;
 
 
+/**
+ * @typedef {{
+ *     regex: (string),
+ *     template: (string)
+ * }}
+ */
+ngeox.StringToHtmlReplacement;
+
+
+/**
+ * The regex expression that must match to do the replacement.
+ * @type {string}
+ */
+ngeox.StringToHtmlReplacement.prototype.expression;
+
+
+/**
+ * The template to use to create a new value as replacement if the
+ * regex matches.
+ * @type {string}
+ */
+ngeox.StringToHtmlReplacement.prototype.template;
+
+
 /**
  * A WFS type. To be used with {@link ngeox.WfsPermalinkOptions}.
  * @typedef {{

diff --git a/src/grid/component.html b/src/grid/component.html
@@ -15,7 +15,7 @@
       <tr ng-repeat="attributes in ctrl.configuration.data"
           ng-class="['row-' + ctrl.configuration.getRowUid(attributes), ctrl.configuration.isRowSelected(attributes) ? 'ngeo-grid-active': '']"
           ng-click="ctrl.clickRow(attributes, $event)" ng-mousedown="ctrl.preventTextSelection($event)">
-        <td ng-repeat="columnDefs in ctrl.configuration.columnDefs" ng-bind-html="attributes[columnDefs.name] | ngeoTrustHtml"></td>
+        <td ng-repeat="columnDefs in ctrl.configuration.columnDefs" ng-bind-html="attributes[columnDefs.name] | ngeoTrustHtmlAuto"></td>
       </tr>
     </tbody>
   </table>

diff --git a/src/misc/filters.js b/src/misc/filters.js
@@ -323,6 +323,48 @@ exports.trustHtmlFilter = function($sce) {
 exports.filter('ngeoTrustHtml', exports.trustHtmlFilter);
 
 
+/**
+ * A filter to mark a value as trusted HTML, with the addition of
+ * automatically converting any string that matches the
+ * StringToHtmlReplacements list to HTML.
+ *
+ * Usage:
+ *
+ *    <p ng-bind-html="ctrl.someValue | ngeoTrustHtmlAuto"></p>
+ *
+ * If you use it, you don't require the "ngSanitize".
+ * @return {function(?):string} The filter function.
+ * @ngInject
+ * @ngdoc filter
+ * @param {angular.$sce} $sce Angular sce service.
+ * @param {!Array.<!ngeox.StringToHtmlReplacement>}
+ *     ngeoStringToHtmlReplacements List of replacements for string to html.
+ *     html.
+ * @ngname ngeoTrustHtmlAuto
+ */
+exports.trustHtmlAutoFilter = function($sce, ngeoStringToHtmlReplacements) {
+  return function(input) {
+    if (input !== undefined && input !== null) {
+      if (typeof input === 'string') {
+        for (const replacement of ngeoStringToHtmlReplacements) {
+          if (input.match(replacement.expression)) {
+            input = replacement.template.replace(/\$1/g, input);
+            break;
+          }
+        }
+        return $sce.trustAsHtml(`${input}`);
+      } else {
+        return $sce.trustAsHtml(`${input}`);
+      }
+    } else {
+      return $sce.trustAsHtml('&nbsp;');
+    }
+  };
+};
+
+exports.filter('ngeoTrustHtmlAuto', exports.trustHtmlAutoFilter);
+
+
 /**
  * A filter used to format a time duration in seconds into a more
  * readable form.
@@ -427,4 +469,27 @@ exports.Duration = function(gettextCatalog) {
 exports.filter('ngeoDuration', exports.Duration);
 
 
+/**
+ * @type {!Array.<!ngeox.StringToHtmlReplacement>}
+ * @ngname ngeoStringToHtmlReplacements
+ */
+exports.StringToHtmlReplacements = [
+  // Hyperlink
+  {
+    expression: /^(https?:\/\/.+)$/gm,
+    template: '<a target="_blank" href="$1">$1</a>'
+  },
+  // Mailto
+  {
+    expression: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/gmi,
+    template: '<a href="mailto:$1">$1</a>'
+  }
+];
+
+exports.constant(
+  'ngeoStringToHtmlReplacements',
+  exports.StringToHtmlReplacements
+);
+
+
 export default exports;