No longer showing and hiding on load for a better user experience

Author: ruhley

lib/scripts/directive.js

@@ -67,6 +67,10 @@
                     $scope.hueMouse = false;
                     $scope.opacityMouse = false;
                     $scope.colorMouse = false;
+
+                    // force the grid selection circle to redraw and fix its position
+                    $scope.saturationUpdate();
+                    $scope.lightnessUpdate();
                 };
 
                 $scope.hide = function (apply) {
@@ -135,23 +139,7 @@
                         if (color.isValid()) {
                             var hsl = color.toHsv();
 
-                            if (!$scope.isValid) {
-                                $scope.show();
-
-                                $timeout(function() {
-                                    $scope.hue = hsl.h;
-                                    $scope.saturation = hsl.s * 100;
-                                    $scope.lightness = hsl.v * 100;
-
-                                    if ($scope.config.alpha) {
-                                        $scope.opacity = hsl.a * 100;
-                                    }
-
-                                    if (oldValue === undefined) {
-                                        $scope.hide();
-                                    }
-                                });
-                            } else {
+                            if ($scope.isValid) {
                                 $scope.hue = hsl.h;
                                 $scope.saturation = hsl.s * 100;
                                 $scope.lightness = hsl.v * 100;
@@ -225,11 +213,11 @@
                     }
                 };
 
-                $scope.$watch('hue', function (newValue, oldValue) {
-                    if (newValue !== undefined) {
+                $scope.hueUpdate = function() {
+                    if ($scope.hue !== undefined) {
                         $scope.log('Color Picker: HUE - CHANGED');
-                        $scope.huePos = (1 - (newValue / 360)) * 100;
-                        $scope.grid = tinycolor({h: newValue, s: 100, v: 1}).toHslString();
+                        $scope.huePos = (1 - ($scope.hue / 360)) * 100;
+                        $scope.grid = tinycolor({h: $scope.hue, s: 100, v: 1}).toHslString();
 
                         if ($scope.huePos < 0) {
                             $scope.huePos = 0;
@@ -239,6 +227,10 @@
 
                         $scope.update();
                     }
+                };
+
+                $scope.$watch('hue', function (newValue, oldValue) {
+                    $scope.hueUpdate();
                 });
 
                 //---------------------------
@@ -262,10 +254,10 @@
                     }
                 };
 
-                $scope.$watch('opacity', function (newValue, oldValue) {
-                    if (newValue !== undefined) {
+                $scope.opacityUpdate = function() {
+                    if ($scope.opacity !== undefined) {
                         $scope.log('Color Picker: OPACITY - CHANGED');
-                        $scope.opacityPos = (1 - (newValue / 100)) * 100;
+                        $scope.opacityPos = (1 - ($scope.opacity / 100)) * 100;
 
                         if ($scope.opacityPos < 0) {
                             $scope.opacityPos = 0;
@@ -275,6 +267,10 @@
 
                         $scope.update();
                     }
+                };
+
+                $scope.$watch('opacity', function (newValue, oldValue) {
+                    $scope.opacityUpdate();
                 });
 
                 //---------------------------
@@ -299,10 +295,10 @@
                     }
                 };
 
-                $scope.$watch('saturation', function (newValue, oldValue) {
-                    if (newValue !== undefined && newValue !== oldValue) {
+                $scope.saturationUpdate = function(oldValue) {
+                    if ($scope.saturation !== undefined && $scope.saturation !== oldValue) {
                         $scope.log('Color Picker: SATURATION - CHANGED');
-                        $scope.saturationPos = (newValue / 100) * 100;
+                        $scope.saturationPos = ($scope.saturation / 100) * 100;
 
                         if ($scope.saturationPos < 0) {
                             $scope.saturationPos = 0;
@@ -312,12 +308,16 @@
 
                         $scope.update();
                     }
+                };
+
+                $scope.$watch('saturation', function (newValue, oldValue) {
+                    $scope.saturationUpdate(oldValue);
                 });
 
-                $scope.$watch('lightness', function (newValue, oldValue) {
-                    if (newValue !== undefined && newValue !== oldValue) {
+                $scope.lightnessUpdate = function(oldValue) {
+                    if ($scope.lightness !== undefined && $scope.lightness !== oldValue) {
                         $scope.log('Color Picker: LIGHTNESS - CHANGED');
-                        $scope.lightnessPos = (1 - (newValue / 100)) * 100;
+                        $scope.lightnessPos = (1 - ($scope.lightness / 100)) * 100;
 
                         if ($scope.lightnessPos < 0) {
                             $scope.lightnessPos = 0;
@@ -327,6 +327,10 @@
 
                         $scope.update();
                     }
+                };
+
+                $scope.$watch('lightness', function (newValue, oldValue) {
+                    $scope.lightnessUpdate(oldValue);
                 });