GUACAMOLE-630: Tolerate insufficient JavaScript features to run "Pickr" color picker (Internet Explorer).

guacamole/src/main/webapp/app/form/directives/guacInputColor.js

@@ -19,36 +19,13 @@
 
 /**
  * A directive which implements a color input field, leveraging the "Pickr"
- * color picker.
+ * color picker. If the "Picker" color picker cannot be used because it relies
+ * on JavaScript features not supported by the browser (Internet Explorer), a
+ * "guacInputColorUnavailable" event will be emitted up the scope, and this
+ * directive will become read-only, functioning essentially as a color preview.
  */
 angular.module('form').directive('guacInputColor', [function guacInputColor() {
 
-    /**
-     * Returns whether the given color is relatively dark. A color is
-     * considered dark if white text would be more visible over a background
-     * of that color (provide better contrast) than black text.
-     *
-     * @param {HSVaColor} color
-     *     The color to test.
-     *
-     * @returns {Boolean}
-     *     true if the given color is relatively dark (white text would provide
-     *     better contrast than black), false otherwise.
-     */
-    var isDark = function isDark(color) {
-
-        var rgb = color.toRGBA();
-
-        // Convert RGB to luminance in HSL space (as defined by the
-        // relative luminance formula given by the W3C for accessibility)
-        var luminance = 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
-
-        // Consider the background to be dark if white text over that
-        // background would provide better contrast than black
-        return luminance <= 153; // 153 is the component value 0.6 converted from 0-1 to the 0-255 range
-
-    };
-
     var config = {
         restrict: 'E',
         replace: true,
@@ -86,13 +63,44 @@ angular.module('form').directive('guacInputColor', [function guacInputColor() {
         var $translate = $injector.get('$translate');
 
         /**
-         * Whether the color currently selected is "dark" in the sense that the
-         * color white will have higher contrast against it than the color
-         * black.
+         * Whether the color picker ("Pickr") cannot be used. In general, all
+         * browsers should support Pickr with the exception of Internet
+         * Explorer.
          *
          * @type Boolean
          */
-        $scope.dark = false;
+        $scope.colorPickerUnavailable = false;
+
+        /**
+         * Returns whether the color currently selected is "dark" in the sense
+         * that the color white will have higher contrast against it than the
+         * color black.
+         *
+         * @returns {Boolean}
+         *     true if the currently selected color is relatively dark (white
+         *     text would provide better contrast than black), false otherwise.
+         */
+        $scope.isDark = function isDark() {
+
+            // Assume not dark if color is invalid or undefined
+            var rgb = $scope.model && /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/.exec($scope.model);
+            if (!rgb)
+                return false;
+
+            // Parse color component values as hexadecimal
+            var red = parseInt(rgb[1], 16);
+            var green = parseInt(rgb[2], 16);
+            var blue = parseInt(rgb[3], 16);
+
+            // Convert RGB to luminance in HSL space (as defined by the
+            // relative luminance formula given by the W3C for accessibility)
+            var luminance = 0.2126 * red + 0.7152 * green + 0.0722 * blue;
+
+            // Consider the background to be dark if white text over that
+            // background would provide better contrast than black
+            return luminance <= 153; // 153 is the component value 0.6 converted from 0-1 to the 0-255 range
+
+        };
 
         // Init color picker after required translation strings are available
         $q.all({
@@ -100,6 +108,8 @@ angular.module('form').directive('guacInputColor', [function guacInputColor() {
             'cancel' : $translate('APP.ACTION_CANCEL')
         }).then(function stringsRetrieved(strings) {
 
+            try {
+
                 /**
                  * An instance of the "Pickr" color picker, bound to the underlying
                  * element of this directive.
@@ -164,7 +174,6 @@ angular.module('form').directive('guacInputColor', [function guacInputColor() {
                 pickr.on('save', function colorChanged(color) {
                     $scope.$evalAsync(function updateModel() {
                         $scope.model = color.toHEXA().toString();
-                    $scope.dark = isDark(pickr.getColor());
                     });
                 });
 
@@ -172,10 +181,18 @@ angular.module('form').directive('guacInputColor', [function guacInputColor() {
                 pickr.on('init', function pickrReady(color) {
                     $scope.$watch('model', function modelChanged(model) {
                         pickr.setColor(model);
-                    $scope.dark = isDark(pickr.getColor());
                     });
                 });
 
+            }
+
+            // If the "Pickr" color picker cannot be loaded (Internet Explorer),
+            // let the scope above us know
+            catch (e) {
+                $scope.colorPickerUnavailable = true;
+                $scope.$emit('guacInputColorUnavailable', e);
+            }
+
         }, angular.noop);
 
     }];

guacamole/src/main/webapp/app/form/styles/terminal-color-scheme-field.css

@@ -67,6 +67,10 @@
     cursor: pointer;
 }
 
+.form-field .terminal-color-scheme-field .custom-color-scheme .guac-input-color.read-only {
+    cursor: not-allowed;
+}
+
 /*
  * Color button font colors
  */

guacamole/src/main/webapp/app/form/templates/guacInputColor.html

@@ -1,3 +1,10 @@
-<div class="guac-input-color" ng-class="{ 'dark' : dark }" ng-style="{ 'background-color' : model }">
+<div class="guac-input-color"
+     ng-class="{
+         'dark' : isDark(),
+         'read-only' : colorPickerUnavailable
+     }"
+     ng-style="{
+        'background-color' : model
+     }">
     <ng-transclude></ng-transclude>
 </div>