Merge pull request #89 from rhamilto/html-service-linkify-filter

Adding HTMLService and linkify filter from console

dist/origin-web-common-ui.js

@@ -5,6 +5,15 @@
  *   Base module for openshiftCommonUI.
  */
 angular.module('openshiftCommonUI', [])
+// Sometimes we need to know the css breakpoints, make sure to update this
+// if they ever change!
+.constant("BREAKPOINTS", {
+  screenXsMin:  480,   // screen-xs
+  screenSmMin:  768,   // screen-sm
+  screenMdMin:  992,   // screen-md
+  screenLgMin:  1200,  // screen-lg
+  screenXlgMin: 1600   // screen-xlg
+})
 // DNS1123 subdomain patterns are used for name validation of many resources,
 // including persistent volume claims, config maps, and secrets.
 // See https://github.com/kubernetes/kubernetes/blob/master/pkg/api/validation/validation.go
@@ -1263,6 +1272,21 @@ angular.module('openshiftCommonUI')
 ;'use strict';
 
 angular.module('openshiftCommonUI')
+// Usage: <span ng-bind-html="text | linkify : '_blank'"></span>
+//
+// Prefer this to the AngularJS `linky` filter since it only matches http and
+// https URLs. We've had issues with incorretly matching email addresses.
+//
+// https://github.com/openshift/origin-web-console/issues/315
+// See also HTMLService.linkify
+.filter('linkify', function(HTMLService) {
+  return function(text, target, alreadyEscaped) {
+    return HTMLService.linkify(text, target, alreadyEscaped);
+  };
+});
+;'use strict';
+
+angular.module('openshiftCommonUI')
   .filter('parseJSON', function() {
     return function(json) {
       // return original value if its null or undefined
@@ -1741,6 +1765,66 @@ angular.module('openshiftCommonUI').factory('GuidedTourService', function() {
 });
 ;'use strict';
 
+angular.module("openshiftCommonUI")
+  .factory("HTMLService",
+           function(BREAKPOINTS) {
+    return {
+      // Ge the breakpoint for the current screen width.
+      getBreakpoint: function() {
+        if (window.innerWidth < BREAKPOINTS.screenXsMin) {
+          return 'xxs';
+        }
+
+        if (window.innerWidth < BREAKPOINTS.screenSmMin) {
+          return 'xs';
+        }
+
+        if (window.innerWidth < BREAKPOINTS.screenMdMin) {
+          return 'sm';
+        }
+
+        if (window.innerWidth < BREAKPOINTS.screenLgMin) {
+          return 'md';
+        }
+
+        return 'lg';
+      },
+
+      // Based on https://github.com/drudru/ansi_up/blob/v1.3.0/ansi_up.js#L93-L97
+      // and https://github.com/angular/angular.js/blob/v1.5.8/src/ngSanitize/filter/linky.js#L131-L132
+      // The AngularJS `linky` regex will avoid matching special characters like `"` at
+      // the end of the URL.
+      //
+      // text:            The text to linkify. Assumes `text` is NOT HTML-escaped unless
+      //                  `alreadyEscaped` is true.
+      // target:          The optional link target (for instance, '_blank')
+      // alreadyEscaped:  `true` if the text has already been HTML escaped
+      //                  (like log content that has been run through ansi_up.ansi_to_html)
+      //
+      // Returns an HTML escaped string with http:// and https:// URLs changed to clickable links.
+      linkify: function(text, target, alreadyEscaped) {
+        if (!text) {
+          return text;
+        }
+
+        // First HTML escape the content.
+        if (!alreadyEscaped) {
+          text = _.escape(text);
+        }
+
+        // Replace any URLs with links.
+        return text.replace(/https?:\/\/[A-Za-z0-9._%+-]+\S*[^\s.;,(){}<>"\u201d\u2019]/gm, function(str) {
+          if (target) {
+            return "<a href=\"" + str + "\" target=\"" + target + "\">" + str + "</a>";
+          }
+
+          return "<a href=\"" + str + "\">" + str + "</a>";
+        });
+      }
+    };
+  });
+;'use strict';
+
 angular.module('openshiftCommonUI').provider('NotificationsService', function() {
   this.dismissDelay = 8000;
   this.autoDismissTypes = ['info', 'success'];

dist/origin-web-common.js

@@ -176,6 +176,15 @@ hawtioPluginLoader.registerPreBootstrapTask(function(next) {
  *   Base module for openshiftCommonUI.
  */
 angular.module('openshiftCommonUI', [])
+// Sometimes we need to know the css breakpoints, make sure to update this
+// if they ever change!
+.constant("BREAKPOINTS", {
+  screenXsMin:  480,   // screen-xs
+  screenSmMin:  768,   // screen-sm
+  screenMdMin:  992,   // screen-md
+  screenLgMin:  1200,  // screen-lg
+  screenXlgMin: 1600   // screen-xlg
+})
 // DNS1123 subdomain patterns are used for name validation of many resources,
 // including persistent volume claims, config maps, and secrets.
 // See https://github.com/kubernetes/kubernetes/blob/master/pkg/api/validation/validation.go
@@ -1434,6 +1443,21 @@ angular.module('openshiftCommonUI')
 ;'use strict';
 
 angular.module('openshiftCommonUI')
+// Usage: <span ng-bind-html="text | linkify : '_blank'"></span>
+//
+// Prefer this to the AngularJS `linky` filter since it only matches http and
+// https URLs. We've had issues with incorretly matching email addresses.
+//
+// https://github.com/openshift/origin-web-console/issues/315
+// See also HTMLService.linkify
+.filter('linkify', ["HTMLService", function(HTMLService) {
+  return function(text, target, alreadyEscaped) {
+    return HTMLService.linkify(text, target, alreadyEscaped);
+  };
+}]);
+;'use strict';
+
+angular.module('openshiftCommonUI')
   .filter('parseJSON', function() {
     return function(json) {
       // return original value if its null or undefined
@@ -4863,6 +4887,66 @@ angular.module('openshiftCommonUI').factory('GuidedTourService', function() {
 });
 ;'use strict';
 
+angular.module("openshiftCommonUI")
+  .factory("HTMLService",
+           ["BREAKPOINTS", function(BREAKPOINTS) {
+    return {
+      // Ge the breakpoint for the current screen width.
+      getBreakpoint: function() {
+        if (window.innerWidth < BREAKPOINTS.screenXsMin) {
+          return 'xxs';
+        }
+
+        if (window.innerWidth < BREAKPOINTS.screenSmMin) {
+          return 'xs';
+        }
+
+        if (window.innerWidth < BREAKPOINTS.screenMdMin) {
+          return 'sm';
+        }
+
+        if (window.innerWidth < BREAKPOINTS.screenLgMin) {
+          return 'md';
+        }
+
+        return 'lg';
+      },
+
+      // Based on https://github.com/drudru/ansi_up/blob/v1.3.0/ansi_up.js#L93-L97
+      // and https://github.com/angular/angular.js/blob/v1.5.8/src/ngSanitize/filter/linky.js#L131-L132
+      // The AngularJS `linky` regex will avoid matching special characters like `"` at
+      // the end of the URL.
+      //
+      // text:            The text to linkify. Assumes `text` is NOT HTML-escaped unless
+      //                  `alreadyEscaped` is true.
+      // target:          The optional link target (for instance, '_blank')
+      // alreadyEscaped:  `true` if the text has already been HTML escaped
+      //                  (like log content that has been run through ansi_up.ansi_to_html)
+      //
+      // Returns an HTML escaped string with http:// and https:// URLs changed to clickable links.
+      linkify: function(text, target, alreadyEscaped) {
+        if (!text) {
+          return text;
+        }
+
+        // First HTML escape the content.
+        if (!alreadyEscaped) {
+          text = _.escape(text);
+        }
+
+        // Replace any URLs with links.
+        return text.replace(/https?:\/\/[A-Za-z0-9._%+-]+\S*[^\s.;,(){}<>"\u201d\u2019]/gm, function(str) {
+          if (target) {
+            return "<a href=\"" + str + "\" target=\"" + target + "\">" + str + "</a>";
+          }
+
+          return "<a href=\"" + str + "\">" + str + "</a>";
+        });
+      }
+    };
+  }]);
+;'use strict';
+
 angular.module('openshiftCommonUI').provider('NotificationsService', function() {
   this.dismissDelay = 8000;
   this.autoDismissTypes = ['info', 'success'];

dist/origin-web-common.min.js

@@ -73,7 +73,13 @@ var discoveryFinished = function() {
 window.OPENSHIFT_CONFIG.api.k8s.resources = api.k8s, window.OPENSHIFT_CONFIG.api.openshift.resources = api.openshift, window.OPENSHIFT_CONFIG.apis.groups = apis, API_DISCOVERY_ERRORS.length && (window.OPENSHIFT_CONFIG.apis.API_DISCOVERY_ERRORS = API_DISCOVERY_ERRORS), next();
 }, allDeferreds = [ k8sDeferred, osDeferred, apisDeferred ];
 allDeferreds = allDeferreds.concat(additionalDeferreds), $.when.apply(this, allDeferreds).always(discoveryFinished);
-}), angular.module("openshiftCommonUI", []).constant("DNS1123_SUBDOMAIN_VALIDATION", {
+}), angular.module("openshiftCommonUI", []).constant("BREAKPOINTS", {
+screenXsMin:480,
+screenSmMin:768,
+screenMdMin:992,
+screenLgMin:1200,
+screenXlgMin:1600
+}).constant("DNS1123_SUBDOMAIN_VALIDATION", {
 pattern:/^[a-z0-9]([-a-z0-9]*[a-z0-9])?(\.[a-z0-9]([-a-z0-9]*[a-z0-9])?)*$/,
 maxlength:253,
 description:"Name must consist of lower-case letters, numbers, periods, and hyphens. It must start and end with a letter or a number."
@@ -534,6 +540,10 @@ return _.isRegExp(keyword) ? keyword.source :_.escapeRegExp(keyword);
 }).join("|"), result = "", lastIndex = 0, flags = caseSensitive ? "g" :"ig", regex = new RegExp(source, flags); null !== (match = regex.exec(str)); ) lastIndex < match.index && (result += _.escape(str.substring(lastIndex, match.index))), result += "<mark>" + _.escape(match[0]) + "</mark>", lastIndex = regex.lastIndex;
 return lastIndex < str.length && (result += _.escape(str.substring(lastIndex))), result;
 };
+} ]), angular.module("openshiftCommonUI").filter("linkify", [ "HTMLService", function(HTMLService) {
+return function(text, target, alreadyEscaped) {
+return HTMLService.linkify(text, target, alreadyEscaped);
+};
 } ]), angular.module("openshiftCommonUI").filter("parseJSON", function() {
 return function(json) {
 if (!json) return null;
@@ -2096,7 +2106,18 @@ return {
 startTour:startTour,
 cancelTour:cancelTour
 };
-}), angular.module("openshiftCommonUI").provider("NotificationsService", function() {
+}), angular.module("openshiftCommonUI").factory("HTMLService", [ "BREAKPOINTS", function(BREAKPOINTS) {
+return {
+getBreakpoint:function() {
+return window.innerWidth < BREAKPOINTS.screenXsMin ? "xxs" :window.innerWidth < BREAKPOINTS.screenSmMin ? "xs" :window.innerWidth < BREAKPOINTS.screenMdMin ? "sm" :window.innerWidth < BREAKPOINTS.screenLgMin ? "md" :"lg";
+},
+linkify:function(text, target, alreadyEscaped) {
+return text ? (alreadyEscaped || (text = _.escape(text)), text.replace(/https?:\/\/[A-Za-z0-9._%+-]+\S*[^\s.;,(){}<>"\u201d\u2019]/gm, function(str) {
+return target ? '<a href="' + str + '" target="' + target + '">' + str + "</a>" :'<a href="' + str + '">' + str + "</a>";
+})) :text;
+}
+};
+} ]), angular.module("openshiftCommonUI").provider("NotificationsService", function() {
 this.dismissDelay = 8e3, this.autoDismissTypes = [ "info", "success" ], this.$get = [ "$rootScope", function($rootScope) {
 var notifications = [], dismissDelay = this.dismissDelay, autoDismissTypes = this.autoDismissTypes, notificationHiddenKey = function(notificationID, namespace) {
 return namespace ? "hide/notification/" + namespace + "/" + notificationID :"hide/notification/" + notificationID;

src/filters/linkify.js

+'use strict';
+
+angular.module('openshiftCommonUI')
+// Usage: <span ng-bind-html="text | linkify : '_blank'"></span>
+//
+// Prefer this to the AngularJS `linky` filter since it only matches http and
+// https URLs. We've had issues with incorretly matching email addresses.
+//
+// https://github.com/openshift/origin-web-console/issues/315
+// See also HTMLService.linkify
+.filter('linkify', function(HTMLService) {
+  return function(text, target, alreadyEscaped) {
+    return HTMLService.linkify(text, target, alreadyEscaped);
+  };
+});

src/openshiftCommonUI.module.js

@@ -5,6 +5,15 @@
  *   Base module for openshiftCommonUI.
  */
 angular.module('openshiftCommonUI', [])
+// Sometimes we need to know the css breakpoints, make sure to update this
+// if they ever change!
+.constant("BREAKPOINTS", {
+  screenXsMin:  480,   // screen-xs
+  screenSmMin:  768,   // screen-sm
+  screenMdMin:  992,   // screen-md
+  screenLgMin:  1200,  // screen-lg
+  screenXlgMin: 1600   // screen-xlg
+})
 // DNS1123 subdomain patterns are used for name validation of many resources,
 // including persistent volume claims, config maps, and secrets.
 // See https://github.com/kubernetes/kubernetes/blob/master/pkg/api/validation/validation.go

src/ui-services/htmlService.js

+'use strict';
+
+angular.module("openshiftCommonUI")
+  .factory("HTMLService",
+           function(BREAKPOINTS) {
+    return {
+      // Ge the breakpoint for the current screen width.
+      getBreakpoint: function() {
+        if (window.innerWidth < BREAKPOINTS.screenXsMin) {
+          return 'xxs';
+        }
+
+        if (window.innerWidth < BREAKPOINTS.screenSmMin) {
+          return 'xs';
+        }
+
+        if (window.innerWidth < BREAKPOINTS.screenMdMin) {
+          return 'sm';
+        }
+
+        if (window.innerWidth < BREAKPOINTS.screenLgMin) {
+          return 'md';
+        }
+
+        return 'lg';
+      },
+
+      // Based on https://github.com/drudru/ansi_up/blob/v1.3.0/ansi_up.js#L93-L97
+      // and https://github.com/angular/angular.js/blob/v1.5.8/src/ngSanitize/filter/linky.js#L131-L132
+      // The AngularJS `linky` regex will avoid matching special characters like `"` at
+      // the end of the URL.
+      //
+      // text:            The text to linkify. Assumes `text` is NOT HTML-escaped unless
+      //                  `alreadyEscaped` is true.
+      // target:          The optional link target (for instance, '_blank')
+      // alreadyEscaped:  `true` if the text has already been HTML escaped
+      //                  (like log content that has been run through ansi_up.ansi_to_html)
+      //
+      // Returns an HTML escaped string with http:// and https:// URLs changed to clickable links.
+      linkify: function(text, target, alreadyEscaped) {
+        if (!text) {
+          return text;
+        }
+
+        // First HTML escape the content.
+        if (!alreadyEscaped) {
+          text = _.escape(text);
+        }
+
+        // Replace any URLs with links.
+        return text.replace(/https?:\/\/[A-Za-z0-9._%+-]+\S*[^\s.;,(){}<>"\u201d\u2019]/gm, function(str) {
+          if (target) {
+            return "<a href=\"" + str + "\" target=\"" + target + "\">" + str + "</a>";
+          }
+
+          return "<a href=\"" + str + "\">" + str + "</a>";
+        });
+      }
+    };
+  });