Merge pull request #106 from jeff-phillips-18/tour

Add utility functions for screen sizes to HTMLService

dist/origin-web-common-ui.js

@@ -1864,28 +1864,77 @@ angular.module('openshiftCommonUI').factory('GuidedTourService', function() {
 ;'use strict';
 
 angular.module("openshiftCommonUI")
-  .factory("HTMLService",
-           function(BREAKPOINTS) {
+  .factory("HTMLService", function(BREAKPOINTS) {
+    var WINDOW_SIZE_XXS = 'xxs';
+    var WINDOW_SIZE_XS = 'xs';
+    var WINDOW_SIZE_SM = 'sm';
+    var WINDOW_SIZE_MD = 'md';
+    var WINDOW_SIZE_LG = 'lg';
+
     return {
+      WINDOW_SIZE_XXS: WINDOW_SIZE_XXS,
+      WINDOW_SIZE_XS: WINDOW_SIZE_XS,
+      WINDOW_SIZE_SM: WINDOW_SIZE_SM,
+      WINDOW_SIZE_MD: WINDOW_SIZE_MD,
+      WINDOW_SIZE_LG: WINDOW_SIZE_LG,
+
       // Ge the breakpoint for the current screen width.
       getBreakpoint: function() {
         if (window.innerWidth < BREAKPOINTS.screenXsMin) {
-          return 'xxs';
+          return WINDOW_SIZE_XXS;
         }
 
         if (window.innerWidth < BREAKPOINTS.screenSmMin) {
-          return 'xs';
+          return WINDOW_SIZE_XS;
         }
 
         if (window.innerWidth < BREAKPOINTS.screenMdMin) {
-          return 'sm';
+          return WINDOW_SIZE_SM;
         }
 
         if (window.innerWidth < BREAKPOINTS.screenLgMin) {
-          return 'md';
+          return WINDOW_SIZE_MD;
+        }
+
+        return WINDOW_SIZE_LG;
+      },
+
+      isWindowBelowBreakpoint: function(size) {
+        switch(size) {
+          case WINDOW_SIZE_XXS:
+            return window.innerWidth < BREAKPOINTS.screenXsMin;
+            break;
+          case WINDOW_SIZE_XS:
+            return window.innerWidth < BREAKPOINTS.screenSmMin;
+            break;
+          case WINDOW_SIZE_SM:
+            return window.innerWidth < BREAKPOINTS.screenMdMin;
+            break;
+          case WINDOW_SIZE_MD:
+            return window.innerWidth < BREAKPOINTS.screenLgMin;
+            break;
+          default:
+            return true;
         }
+      },
 
-        return 'lg';
+      isWindowAboveBreakpoint: function(size) {
+        switch(size) {
+          case WINDOW_SIZE_XS:
+            return window.innerWidth >= BREAKPOINTS.screenXsMin;
+            break;
+          case WINDOW_SIZE_SM:
+            return window.innerWidth >= BREAKPOINTS.screenSmMin;
+            break;
+          case WINDOW_SIZE_MD:
+            return window.innerWidth >= BREAKPOINTS.screenMdMin;
+            break;
+          case WINDOW_SIZE_LG:
+            return window.innerWidth >= BREAKPOINTS.screenLgMin;
+            break;
+          default:
+            return true;
+        }
       },
 
       // Based on https://github.com/drudru/ansi_up/blob/v1.3.0/ansi_up.js#L93-L97

dist/origin-web-common.js

@@ -4989,28 +4989,77 @@ angular.module('openshiftCommonUI').factory('GuidedTourService', function() {
 ;'use strict';
 
 angular.module("openshiftCommonUI")
-  .factory("HTMLService",
-           ["BREAKPOINTS", function(BREAKPOINTS) {
+  .factory("HTMLService", ["BREAKPOINTS", function(BREAKPOINTS) {
+    var WINDOW_SIZE_XXS = 'xxs';
+    var WINDOW_SIZE_XS = 'xs';
+    var WINDOW_SIZE_SM = 'sm';
+    var WINDOW_SIZE_MD = 'md';
+    var WINDOW_SIZE_LG = 'lg';
+
     return {
+      WINDOW_SIZE_XXS: WINDOW_SIZE_XXS,
+      WINDOW_SIZE_XS: WINDOW_SIZE_XS,
+      WINDOW_SIZE_SM: WINDOW_SIZE_SM,
+      WINDOW_SIZE_MD: WINDOW_SIZE_MD,
+      WINDOW_SIZE_LG: WINDOW_SIZE_LG,
+
       // Ge the breakpoint for the current screen width.
       getBreakpoint: function() {
         if (window.innerWidth < BREAKPOINTS.screenXsMin) {
-          return 'xxs';
+          return WINDOW_SIZE_XXS;
         }
 
         if (window.innerWidth < BREAKPOINTS.screenSmMin) {
-          return 'xs';
+          return WINDOW_SIZE_XS;
         }
 
         if (window.innerWidth < BREAKPOINTS.screenMdMin) {
-          return 'sm';
+          return WINDOW_SIZE_SM;
         }
 
         if (window.innerWidth < BREAKPOINTS.screenLgMin) {
-          return 'md';
+          return WINDOW_SIZE_MD;
+        }
+
+        return WINDOW_SIZE_LG;
+      },
+
+      isWindowBelowBreakpoint: function(size) {
+        switch(size) {
+          case WINDOW_SIZE_XXS:
+            return window.innerWidth < BREAKPOINTS.screenXsMin;
+            break;
+          case WINDOW_SIZE_XS:
+            return window.innerWidth < BREAKPOINTS.screenSmMin;
+            break;
+          case WINDOW_SIZE_SM:
+            return window.innerWidth < BREAKPOINTS.screenMdMin;
+            break;
+          case WINDOW_SIZE_MD:
+            return window.innerWidth < BREAKPOINTS.screenLgMin;
+            break;
+          default:
+            return true;
         }
+      },
 
-        return 'lg';
+      isWindowAboveBreakpoint: function(size) {
+        switch(size) {
+          case WINDOW_SIZE_XS:
+            return window.innerWidth >= BREAKPOINTS.screenXsMin;
+            break;
+          case WINDOW_SIZE_SM:
+            return window.innerWidth >= BREAKPOINTS.screenSmMin;
+            break;
+          case WINDOW_SIZE_MD:
+            return window.innerWidth >= BREAKPOINTS.screenMdMin;
+            break;
+          case WINDOW_SIZE_LG:
+            return window.innerWidth >= BREAKPOINTS.screenLgMin;
+            break;
+          default:
+            return true;
+        }
       },
 
       // Based on https://github.com/drudru/ansi_up/blob/v1.3.0/ansi_up.js#L93-L97

dist/origin-web-common.min.js

@@ -2148,9 +2148,51 @@ startTour:startTour,
 cancelTour:cancelTour
 };
 }), angular.module("openshiftCommonUI").factory("HTMLService", [ "BREAKPOINTS", function(BREAKPOINTS) {
+var WINDOW_SIZE_XXS = "xxs", WINDOW_SIZE_XS = "xs", WINDOW_SIZE_SM = "sm", WINDOW_SIZE_MD = "md", WINDOW_SIZE_LG = "lg";
 return {
+WINDOW_SIZE_XXS:WINDOW_SIZE_XXS,
+WINDOW_SIZE_XS:WINDOW_SIZE_XS,
+WINDOW_SIZE_SM:WINDOW_SIZE_SM,
+WINDOW_SIZE_MD:WINDOW_SIZE_MD,
+WINDOW_SIZE_LG:WINDOW_SIZE_LG,
 getBreakpoint:function() {
-return window.innerWidth < BREAKPOINTS.screenXsMin ? "xxs" :window.innerWidth < BREAKPOINTS.screenSmMin ? "xs" :window.innerWidth < BREAKPOINTS.screenMdMin ? "sm" :window.innerWidth < BREAKPOINTS.screenLgMin ? "md" :"lg";
+return window.innerWidth < BREAKPOINTS.screenXsMin ? WINDOW_SIZE_XXS :window.innerWidth < BREAKPOINTS.screenSmMin ? WINDOW_SIZE_XS :window.innerWidth < BREAKPOINTS.screenMdMin ? WINDOW_SIZE_SM :window.innerWidth < BREAKPOINTS.screenLgMin ? WINDOW_SIZE_MD :WINDOW_SIZE_LG;
+},
+isWindowBelowBreakpoint:function(size) {
+switch (size) {
+case WINDOW_SIZE_XXS:
+return window.innerWidth < BREAKPOINTS.screenXsMin;
+
+case WINDOW_SIZE_XS:
+return window.innerWidth < BREAKPOINTS.screenSmMin;
+
+case WINDOW_SIZE_SM:
+return window.innerWidth < BREAKPOINTS.screenMdMin;
+
+case WINDOW_SIZE_MD:
+return window.innerWidth < BREAKPOINTS.screenLgMin;
+
+default:
+return !0;
+}
+},
+isWindowAboveBreakpoint:function(size) {
+switch (size) {
+case WINDOW_SIZE_XS:
+return window.innerWidth >= BREAKPOINTS.screenXsMin;
+
+case WINDOW_SIZE_SM:
+return window.innerWidth >= BREAKPOINTS.screenSmMin;
+
+case WINDOW_SIZE_MD:
+return window.innerWidth >= BREAKPOINTS.screenMdMin;
+
+case WINDOW_SIZE_LG:
+return window.innerWidth >= BREAKPOINTS.screenLgMin;
+
+default:
+return !0;
+}
 },
 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) {

src/ui-services/htmlService.js

 'use strict';
 
 angular.module("openshiftCommonUI")
-  .factory("HTMLService",
-           function(BREAKPOINTS) {
+  .factory("HTMLService", function(BREAKPOINTS) {
+    var WINDOW_SIZE_XXS = 'xxs';
+    var WINDOW_SIZE_XS = 'xs';
+    var WINDOW_SIZE_SM = 'sm';
+    var WINDOW_SIZE_MD = 'md';
+    var WINDOW_SIZE_LG = 'lg';
+
     return {
+      WINDOW_SIZE_XXS: WINDOW_SIZE_XXS,
+      WINDOW_SIZE_XS: WINDOW_SIZE_XS,
+      WINDOW_SIZE_SM: WINDOW_SIZE_SM,
+      WINDOW_SIZE_MD: WINDOW_SIZE_MD,
+      WINDOW_SIZE_LG: WINDOW_SIZE_LG,
+
       // Ge the breakpoint for the current screen width.
       getBreakpoint: function() {
         if (window.innerWidth < BREAKPOINTS.screenXsMin) {
-          return 'xxs';
+          return WINDOW_SIZE_XXS;
         }
 
         if (window.innerWidth < BREAKPOINTS.screenSmMin) {
-          return 'xs';
+          return WINDOW_SIZE_XS;
         }
 
         if (window.innerWidth < BREAKPOINTS.screenMdMin) {
-          return 'sm';
+          return WINDOW_SIZE_SM;
         }
 
         if (window.innerWidth < BREAKPOINTS.screenLgMin) {
-          return 'md';
+          return WINDOW_SIZE_MD;
+        }
+
+        return WINDOW_SIZE_LG;
+      },
+
+      isWindowBelowBreakpoint: function(size) {
+        switch(size) {
+          case WINDOW_SIZE_XXS:
+            return window.innerWidth < BREAKPOINTS.screenXsMin;
+            break;
+          case WINDOW_SIZE_XS:
+            return window.innerWidth < BREAKPOINTS.screenSmMin;
+            break;
+          case WINDOW_SIZE_SM:
+            return window.innerWidth < BREAKPOINTS.screenMdMin;
+            break;
+          case WINDOW_SIZE_MD:
+            return window.innerWidth < BREAKPOINTS.screenLgMin;
+            break;
+          default:
+            return true;
         }
+      },
 
-        return 'lg';
+      isWindowAboveBreakpoint: function(size) {
+        switch(size) {
+          case WINDOW_SIZE_XS:
+            return window.innerWidth >= BREAKPOINTS.screenXsMin;
+            break;
+          case WINDOW_SIZE_SM:
+            return window.innerWidth >= BREAKPOINTS.screenSmMin;
+            break;
+          case WINDOW_SIZE_MD:
+            return window.innerWidth >= BREAKPOINTS.screenMdMin;
+            break;
+          case WINDOW_SIZE_LG:
+            return window.innerWidth >= BREAKPOINTS.screenLgMin;
+            break;
+          default:
+            return true;
+        }
       },
 
       // Based on https://github.com/drudru/ansi_up/blob/v1.3.0/ansi_up.js#L93-L97