Merge branch 'pr/68'

Conflicts: js/bootstrap-colorpicker-module.js
rajnandan1 · Feb 16, 2015 · 986eb8c · 986eb8c
2 parents 06b86dd + c9dc647
commit 986eb8c
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -70,3 +70,13 @@ The color picker in UI Bootstrap modal (the parent element position property mus
 ```html
 <input colorpicker colorpicker-parent="true" type="text" ng-model="your_model" />
 ```
+
+Binding the visibility of the color picker to a variable in the scope
+```html
+<input colorpicker colorpicker-is-open="isOpen" type="text" ng-model="your_model" />
+```
+
+Auto hiding the color picker when a color has been selected
+```html
+<input colorpicker colorpicker-close-on-select type="text" ng-model="your_model" />
+```
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-bootstrap-colorpicker",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "main": [ 
 		"js/bootstrap-colorpicker-module.js",
 		"css/colorpicker.css"

diff --git a/js/bootstrap-colorpicker-module.js b/js/bootstrap-colorpicker-module.js
@@ -345,6 +345,9 @@ angular.module('colorpicker.module', [])
               .on('click', function(event) {
                 Slider.setSaturation(event, fixedPosition);
                 mousemove(event);
+                if (angular.isDefined(attrs.colorpickerCloseOnSelect)) {
+                  hideColorpickerTemplate();
+                }
               })
               .on('mousedown', function(event) {
                 Slider.setSaturation(event, fixedPosition);
@@ -473,22 +476,34 @@ angular.module('colorpicker.module', [])
           var documentMousedownHandler = function() {
             hideColorpickerTemplate();
           };
+
+          var showColorpickerTemplate = function() {
 
-          if(inline === false) {
-            elem.on('click', function () {
+            if (!colorpickerTemplate.hasClass('colorpicker-visible')) {
               update();
               colorpickerTemplate
                 .addClass('colorpicker-visible')
                 .css(getColorpickerTemplatePosition());
 
-              // register global mousedown event to hide the colorpicker
-              $document.on('mousedown', documentMousedownHandler);
-            });
+              if (inline === false) {
+                // register global mousedown event to hide the colorpicker
+                $document.on('mousedown', documentMousedownHandler);
+              }
+
+              if (attrs.colorpickerIsOpen) {
+                $scope[attrs.colorpickerIsOpen] = true;
+                if (!$scope.$$phase) {
+                  $scope.$digest(); //trigger the watcher to fire
+                }
+              }
+            }
+
+          };
+
+          if(inline === false) { 
+            elem.on('click', showColorpickerTemplate);
           } else {
-            update();
-            colorpickerTemplate
-              .addClass('colorpicker-visible')
-              .css(getColorpickerTemplatePosition());
+            showColorpickerTemplate();
           }
 
           colorpickerTemplate.on('mousedown', function (event) {
@@ -511,12 +526,32 @@ angular.module('colorpicker.module', [])
               emitEvent('colorpicker-closed');
               // unregister the global mousedown event
               $document.off('mousedown', documentMousedownHandler);
+
+              if (attrs.colorpickerIsOpen) {
+                $scope[attrs.colorpickerIsOpen] = false;
+                if (!$scope.$$phase) {
+                  $scope.$digest(); //trigger the watcher to fire
+                }
+              }
             }
           };
 
           colorpickerTemplate.find('button').on('click', function () {
             hideColorpickerTemplate();
           });
+
+          if (attrs.colorpickerIsOpen) {
+            $scope.$watch(attrs.colorpickerIsOpen, function(shouldBeOpen) {
+
+              if (shouldBeOpen === true) {
+                showColorpickerTemplate();
+              } else if (shouldBeOpen === false) {
+                hideColorpickerTemplate();
+              }
+
+            });
+          }
+
         }
       };
     }]);
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-bootstrap-colorpicker",
-  "version": "3.0.11",
+  "version": "3.0.12",
   "description": "Native AngularJS colorpicker directive",
   "main": "js/bootstrap-colorpicker-module.js",
   "directories": {