Don't return false during a document mouse event as it can cancel outside events

Author: ruhley

lib/scripts/directive.js

@@ -19,6 +19,7 @@
             templateUrl: 'template/color-picker/directive.html',
             link: function ($scope, element, attrs, control) {
                 $scope.init = function () {
+                    // if no color provided
                     if ($scope.ngModel === undefined) {
                         $scope.hue = 0;
                         $scope.saturation = 0;
@@ -35,68 +36,66 @@
                         }
                     }
 
+                    // set default config settings
                     $scope.initConfig();
 
+                    // setup mouse events
                     $document.on('mousedown', $scope.onMouseDown);
                     $document.on('mouseup', $scope.onMouseUp);
                     $document.on('mousemove', $scope.onMouseMove);
                 };
 
                 $scope.onMouseDown = function(event) {
-                    // not an element in this picker
-                    if ($scope.find(event.target).length === 0) {
-                        return false;
-                    }
-
-                    if (event.target.classList.contains('color-picker-grid-inner') || event.target.classList.contains('color-picker-picker') || event.target.parentNode.classList.contains('color-picker-picker')) {
-                        $scope.colorDown(event);
-                        $scope.$apply();
-                    } else if (event.target.classList.contains('color-picker-hue') || event.target.parentNode.classList.contains('color-picker-hue')) {
-                        $scope.hueDown(event);
-                        $scope.$apply();
-                    } else if (event.target.classList.contains('color-picker-opacity') || event.target.parentNode.classList.contains('color-picker-opacity')) {
-                        $scope.opacityDown(event);
-                        $scope.$apply();
-                    }
-                };
-
-                $scope.onMouseUp = function(event) {
-                    if (!$scope.colorMouse && !$scope.hueMouse && !$scope.opacityMouse) {
-                        if ($scope.find(event.target).length === 0) {
-                            $scope.log('Color Picker: Document Click Event');
-                            $scope.hide();
+                    // an element in this picker
+                    if ($scope.find(event.target).length > 0) {
+                        // mouse event on color grid
+                        if (event.target.classList.contains('color-picker-grid-inner') || event.target.classList.contains('color-picker-picker') || event.target.parentNode.classList.contains('color-picker-picker')) {
+                            $scope.colorDown(event);
+                            $scope.$apply();
+                        // mouse event on hue slider
+                        } else if (event.target.classList.contains('color-picker-hue') || event.target.parentNode.classList.contains('color-picker-hue')) {
+                            $scope.hueDown(event);
+                            $scope.$apply();
+                        // mouse event on opacity slider
+                        } else if (event.target.classList.contains('color-picker-opacity') || event.target.parentNode.classList.contains('color-picker-opacity')) {
+                            $scope.opacityDown(event);
                             $scope.$apply();
                         }
                     }
+                };
 
-                    if ($scope.colorMouse) {
+                $scope.onMouseUp = function(event) {
+                    // no current mouse events and not an element in the picker
+                    if (!$scope.colorMouse && !$scope.hueMouse && !$scope.opacityMouse && $scope.find(event.target).length === 0) {
+                        $scope.log('Color Picker: Document Click Event');
+                        $scope.hide();
+                        $scope.$apply();
+                    // mouse event on color grid
+                    } else if ($scope.colorMouse) {
                         $scope.colorUp(event);
                         $scope.$apply();
-                    }
-
-                    if ($scope.hueMouse) {
+                    // mouse event on hue slider
+                    } else if ($scope.hueMouse) {
                         $scope.hueUp(event);
                         $scope.$apply();
-                    }
-
-                    if ($scope.opacityMouse) {
+                    // mouse event on opacity slider
+                    } else if ($scope.opacityMouse) {
                         $scope.opacityUp(event);
                         $scope.$apply();
                     }
                 };
 
                 $scope.onMouseMove = function(event) {
+                    // mouse event on color grid
                     if ($scope.colorMouse) {
                         $scope.colorChange(event);
                         $scope.$apply();
-                    }
-
-                    if ($scope.hueMouse) {
+                    // mouse event on hue slider
+                    } else if ($scope.hueMouse) {
                         $scope.hueChange(event);
                         $scope.$apply();
-                    }
-
-                    if ($scope.opacityMouse) {
+                    // mouse event on opacity slider
+                    } else if ($scope.opacityMouse) {
                         $scope.opacityChange(event);
                         $scope.$apply();
                     }