angularjs-color-picker - npm Package Compare versions

Comparing version 0.6.9 to 0.6.11

angularjs-color-picker.js

 /*!
- * angular-color-picker v0.6.9
+ * angularjs-color-picker v0.6.11
  * https://github.com/ruhley/angular-color-picker/
@@ -7,3 +7,3 @@ *
  *
- * 2015-10-19 08:20:21
+ * 2015-11-19 08:25:57
  *
@@ -59,10 +59,12 @@ */
 
-                    $document.on('click', function (evt) {
-                        if ($scope.find(evt.target).length === 0) {
-                            $scope.log('Color Picker: Document Click Event');
-                            $scope.hide();
-                        }
-                    });
+                    $document.on('click', $scope.onClick);
                 };
 
+                $scope.onClick = function(event) {
+                    if ($scope.find(event.target).length === 0) {
+                        $scope.log('Color Picker: Document Click Event');
+                        $scope.hide();
+                    }
+                };
+
                 $scope.initConfig = function() {
@@ -99,5 +101,5 @@ $scope.config = {};
                 $scope.hide = function () {
-                    $scope.log('Color Picker: Hide Event');
+                    if ($scope.visible || element[0].querySelector('.color-picker-panel').offsetParent !== null) {
+                        $scope.log('Color Picker: Hide Event');
 
-                    if ($scope.visible) {
                         $scope.visible = false;
@@ -443,3 +445,3 @@ $scope.$apply();
                 $scope.$on('$destroy', function() {
-                    $document.off('click');
+                    $document.off('click', $scope.onClick);
                 });
@@ -446,0 +448,0 @@ }

angularjs-color-picker.min.js

 /*!
- * angular-color-picker v0.6.9
+ * angularjs-color-picker v0.6.11
  * https://github.com/ruhley/angular-color-picker/
@@ -7,6 +7,41 @@ *
  *
- * 2015-10-19 08:20:21
+ * 2015-11-19 08:25:57
  *
  */
-"undefined"!=typeof module&&"undefined"!=typeof exports&&module.exports===exports&&(module.exports="color.picker"),function(){"use strict";angular.module("color.picker",[])}(),function(){"use strict";var a=function(a,b){return{restrict:"E",require:["^ngModel"],scope:{ngModel:"=",colorPickerAlpha:"=",colorPickerCase:"=",colorPickerFormat:"=",colorPickerPos:"=",colorPickerSwatch:"=",colorPickerSwatchOnly:"=",colorPickerSwatchPos:"=",colorPickerSwatchBootstrap:"="},templateUrl:"template/color-picker/directive.html",link:function(b,c,d,e){b.init=function(){if(void 0===b.ngModel)b.hue=0,b.saturation=0,b.lightness=100;else{var c=tinycolor(b.ngModel);if(c.isValid()){var d=c.toHsv();b.hue=d.h,b.saturation=100*d.s,b.lightness=100*d.v,b.opacity=100*d.a}}b.initConfig(),a.on("click",function(a){0===b.find(a.target).length&&(b.log("Color Picker: Document Click Event"),b.hide())})},b.initConfig=function(){b.config={},b.config.alpha=void 0===b.colorPickerAlpha?!0:b.colorPickerAlpha,b.config.case=void 0===b.colorPickerCase?"upper":b.colorPickerCase,b.config.format=void 0===b.colorPickerFormat?"hsl":b.colorPickerFormat,b.config.pos=void 0===b.colorPickerPos?"bottom left":b.colorPickerPos,b.config.swatch=void 0===b.colorPickerSwatch?!0:b.colorPickerSwatch,b.config.swatchOnly=void 0===b.colorPickerSwatchOnly?!1:b.colorPickerSwatchOnly,b.config.swatchPos=void 0===b.colorPickerSwatchPos?"left":b.colorPickerSwatchPos,b.config.swatchBootstrap=void 0===b.colorPickerSwatchBootstrap?!0:b.colorPickerSwatchBootstrap,b.log("Color Picker: Config",b.config)},b.focus=function(){b.log("Color Picker: Focus Event"),b.find(".color-picker-input")[0].focus()},b.show=function(){b.log("Color Picker: Show Event"),b.visible=!0,b.hueMouse=!1,b.opacityMouse=!1,b.colorMouse=!1,b.saturationUpdate(),b.lightnessUpdate()},b.hide=function(){b.log("Color Picker: Hide Event"),b.visible&&(b.visible=!1,b.$apply())},b.update=function(){if(void 0!==b.hue&&void 0!==b.saturation&&void 0!==b.lightness){var a,c=tinycolor({h:b.hue,s:b.saturation/100,v:b.lightness/100});switch(b.config.alpha&&c.setAlpha(b.opacity/100),b.log("Color Picker: COLOR CHANGED TO ",c,b.hue,b.saturation,b.lightness,b.opacity),b.swatchColor=c.toHslString(),b.config.format){case"rgb":a=c.toRgbString();break;case"hex":a=c.toHexString(),a="lower"===b.config.case?a.toLowerCase():a.toUpperCase();break;case"hex8":a=c.toHex8String(),a="lower"===b.config.case?a.toLowerCase():a.toUpperCase();break;case"hsv":a=c.toHsvString();break;default:a=c.toHslString()}b.ngModel=a}},b.$watch("ngModel",function(a,c){if("string"==typeof a&&a!==c&&a.length>4){b.log("Color Picker: MODEL - CHANGED",a);var f=tinycolor(a);if(f.isValid()){var g=f.toHsv();b.hue=g.h,b.saturation=100*g.s,b.lightness=100*g.v,b.config.alpha&&(b.opacity=100*g.a),b.isValid=!0}else b.isValid=!1;e[0].$setValidity(d.name,b.isValid),void 0!==c&&"function"==typeof e[0].$setDirty&&e[0].$setDirty()}else b.swatchColor=""}),b.$watch("colorPickerFormat",function(a,c){void 0!==a&&a!==c&&("hex"===a&&(b.colorPickerAlpha=!1),b.initConfig(),b.update())}),b.$watchGroup(["colorPickerAlpha","colorPickerCase"],function(a,c){void 0!==a&&(b.initConfig(),b.update())}),b.$watchGroup(["colorPickerSwatchPos","colorPickerSwatchBootstrap","colorPickerSwatchOnly","colorPickerSwatch","colorPickerPos"],function(a,c){void 0!==a&&b.initConfig()}),b.hueDown=function(){b.log("Color Picker: HUE - MOUSE DOWN"),b.hueMouse=!0},b.hueUp=function(){b.log("Color Picker: HUE - MOUSE UP"),b.hueMouse=!1},b.hueChange=function(a,c){if(b.hueMouse||c){b.log("Color Picker: HUE - MOUSE CHANGE");var d=b.find(".color-picker-hue");b.hue=360*(1-(a.pageY-b.offset(d).top)/d.prop("offsetHeight"))}},b.hueUpdate=function(){void 0!==b.hue&&(b.log("Color Picker: HUE - CHANGED"),b.huePos=100*(1-b.hue/360),b.grid=tinycolor({h:b.hue,s:100,v:1}).toHslString(),b.huePos<0?b.huePos=0:b.huePos>100&&(b.huePos=100),b.update())},b.$watch("hue",function(a,c){b.hueUpdate()}),b.opacityDown=function(){b.log("Color Picker: OPACITY - MOUSE DOWN"),b.opacityMouse=!0},b.opacityUp=function(){b.log("Color Picker: OPACITY - MOUSE UP"),b.opacityMouse=!1},b.opacityChange=function(a,c){if(b.opacityMouse||c){b.log("Color Picker: OPACITY - MOUSE CHANGE");var d=b.find(".color-picker-opacity");b.opacity=100*(1-(a.pageY-b.offset(d).top)/d.prop("offsetHeight"))}},b.opacityUpdate=function(){void 0!==b.opacity&&(b.log("Color Picker: OPACITY - CHANGED"),b.opacityPos=100*(1-b.opacity/100),b.opacityPos<0?b.opacityPos=0:b.opacityPos>100&&(b.opacityPos=100),b.update())},b.$watch("opacity",function(a,c){b.opacityUpdate()}),b.colorDown=function(){b.log("Color Picker: COLOR - MOUSE DOWN"),b.colorMouse=!0},b.colorUp=function(){b.log("Color Picker: COLOR - MOUSE UP"),b.colorMouse=!1},b.colorChange=function(a,c){if(b.colorMouse||c){b.log("Color Picker: COLOR - MOUSE CHANGE");var d=b.find(".color-picker-grid-inner"),e=b.offset(d);b.saturation=(a.pageX-e.left)/d.prop("offsetWidth")*100,b.lightness=100*(1-(a.pageY-e.top)/d.prop("offsetHeight"))}},b.saturationUpdate=function(a){void 0!==b.saturation&&b.saturation!==a&&(b.log("Color Picker: SATURATION - CHANGED"),b.saturationPos=b.saturation/100*100,b.saturationPos<0?b.saturationPos=0:b.saturationPos>100&&(b.saturationPos=100),b.update())},b.$watch("saturation",function(a,c){b.saturationUpdate(c)}),b.lightnessUpdate=function(a){void 0!==b.lightness&&b.lightness!==a&&(b.log("Color Picker: LIGHTNESS - CHANGED"),b.lightnessPos=100*(1-b.lightness/100),b.lightnessPos<0?b.lightnessPos=0:b.lightnessPos>100&&(b.lightnessPos=100),b.update())},b.$watch("lightness",function(a,c){b.lightnessUpdate(c)}),b.log=function(){},b.find=function(a){var d,e=b.wrapper?b.wrapper[0]:c[0],f=[];if(!a)return f;if("string"==typeof a){if(1!==(d=e.nodeType)&&9!==d)return[];f=e.querySelectorAll(a)}else e.contains(a)&&f.push(a);return angular.element(f)},b.offset=function(a){var b,c,d,e,f=a[0];if(f)return f.getClientRects().length?(d=f.getBoundingClientRect(),d.width||d.height?(e=f.ownerDocument,c=null!==e&&e===e.window?e:9===e.nodeType&&e.defaultView,b=e.documentElement,window.chrome&&screen.width<=768?{top:d.top-b.clientTop,left:d.left-b.clientLeft}:{top:d.top+c.pageYOffset-b.clientTop,left:d.left+c.pageXOffset-b.clientLeft}):d):{top:0,left:0}},b.init(),b.$on("$destroy",function(){a.off("click")})}}};a.$inject=["$document","$timeout"],angular.module("color.picker").directive("colorPicker",a)}(),angular.module("color.picker").run(["$templateCache",function(a){a.put("template/color-picker/directive.html",'<div class="color-picker-wrapper" ng-class="{\'color-picker-swatch-only\': config.swatchOnly}">\n   <div ng-class="{\'input-group\': config.swatchBootstrap && config.swatch}">\n       <span ng-if="config.swatchPos === \'left\'" ng-attr-style="background-color: {{swatchColor}};" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}"></span>\n       <input class="color-picker-input form-control" type="text" ng-model="ngModel" size="7" ng-focus="show()" ng-class="{\'color-picker-input-swatch\': config.swatch && !config.swatchOnly && config.swatchPos === \'left\'}">\n       <span ng-if="config.swatchPos === \'right\'" ng-attr-style="background-color: {{swatchColor}};" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}"></span>\n   </div>\n   <div class="color-picker-panel" ng-show="visible" ng-class="{\n       \'color-picker-panel-top color-picker-panel-right\': config.pos === \'top right\',\n       \'color-picker-panel-top color-picker-panel-left\': config.pos === \'top left\',\n       \'color-picker-panel-bottom color-picker-panel-right\': config.pos === \'bottom right\',\n       \'color-picker-panel-bottom color-picker-panel-left\': config.pos === \'bottom left\',\n   }">\n       <div class="color-picker-hue color-picker-sprite" ng-click="hueChange($event, true)" ng-mousemove="hueChange($event, false)" ng-mousedown="hueDown()" ng-mouseup="hueUp()">\n           <div class="color-picker-slider" ng-attr-style="top: {{huePos}}%;"></div>\n       </div>\n       <div class="color-picker-opacity color-picker-sprite" ng-show="config.alpha" ng-click="opacityChange($event, true)" ng-mousemove="opacityChange($event, false)" ng-mousedown="opacityDown()" ng-mouseup="opacityUp()">\n           <div class="color-picker-slider" ng-attr-style="top: {{opacityPos}}%;"></div>\n           </div>\n       <div class="color-picker-grid color-picker-sprite" ng-attr-style="background-color: {{grid}};" ng-click="colorChange($event, true)" ng-mousemove="colorChange($event, false)" ng-mousedown="colorDown()" ng-mouseup="colorUp()">\n           <div class="color-picker-grid-inner"></div>\n           <div class="color-picker-picker" ng-attr-style="top: {{lightnessPos}}%; left: {{saturationPos}}%;">\n               <div></div>\n           </div>\n       </div>\n   </div>\n</div>')}]);
+"undefined"!=typeof module&&"undefined"!=typeof exports&&module.exports===exports&&(module.exports="color.picker"),function(){"use strict";angular.module("color.picker",[])}(),function(){"use strict";var a=function(a,b){return{restrict:"E",require:["^ngModel"],scope:{ngModel:"=",colorPickerAlpha:"=",colorPickerCase:"=",colorPickerFormat:"=",colorPickerPos:"=",colorPickerSwatch:"=",colorPickerSwatchOnly:"=",colorPickerSwatchPos:"=",colorPickerSwatchBootstrap:"="},templateUrl:"template/color-picker/directive.html",link:function(b,c,d,e){b.init=function(){if(void 0===b.ngModel)b.hue=0,b.saturation=0,b.lightness=100;else{var c=tinycolor(b.ngModel);if(c.isValid()){var d=c.toHsv();b.hue=d.h,b.saturation=100*d.s,b.lightness=100*d.v,b.opacity=100*d.a}}b.initConfig(),a.on("click",b.onClick)},b.onClick=function(a){0===b.find(a.target).length&&(b.log("Color Picker: Document Click Event"),b.hide())},b.initConfig=function(){b.config={},b.config.alpha=void 0===b.colorPickerAlpha?!0:b.colorPickerAlpha,b.config.case=void 0===b.colorPickerCase?"upper":b.colorPickerCase,b.config.format=void 0===b.colorPickerFormat?"hsl":b.colorPickerFormat,b.config.pos=void 0===b.colorPickerPos?"bottom left":b.colorPickerPos,b.config.swatch=void 0===b.colorPickerSwatch?!0:b.colorPickerSwatch,b.config.swatchOnly=void 0===b.colorPickerSwatchOnly?!1:b.colorPickerSwatchOnly,b.config.swatchPos=void 0===b.colorPickerSwatchPos?"left":b.colorPickerSwatchPos,b.config.swatchBootstrap=void 0===b.colorPickerSwatchBootstrap?!0:b.colorPickerSwatchBootstrap,b.log("Color Picker: Config",b.config)},b.focus=function(){b.log("Color Picker: Focus Event"),b.find(".color-picker-input")[0].focus()},b.show=function(){b.log("Color Picker: Show Event"),b.visible=!0,b.hueMouse=!1,b.opacityMouse=!1,b.colorMouse=!1,
+// force the grid selection circle to redraw and fix its position
+b.saturationUpdate(),b.lightnessUpdate()},b.hide=function(){(b.visible||null!==c[0].querySelector(".color-picker-panel").offsetParent)&&(b.log("Color Picker: Hide Event"),b.visible=!1,b.$apply())},b.update=function(){if(void 0!==b.hue&&void 0!==b.saturation&&void 0!==b.lightness){var a,c=tinycolor({h:b.hue,s:b.saturation/100,v:b.lightness/100});switch(b.config.alpha&&c.setAlpha(b.opacity/100),b.log("Color Picker: COLOR CHANGED TO ",c,b.hue,b.saturation,b.lightness,b.opacity),b.swatchColor=c.toHslString(),b.config.format){case"rgb":a=c.toRgbString();break;case"hex":a=c.toHexString(),a="lower"===b.config.case?a.toLowerCase():a.toUpperCase();break;case"hex8":a=c.toHex8String(),a="lower"===b.config.case?a.toLowerCase():a.toUpperCase();break;case"hsv":a=c.toHsvString();break;default:a=c.toHslString()}b.ngModel=a}},b.$watch("ngModel",function(a,c){if("string"==typeof a&&a!==c&&a.length>4){b.log("Color Picker: MODEL - CHANGED",a);var f=tinycolor(a);if(f.isValid()){var g=f.toHsv();b.hue=g.h,b.saturation=100*g.s,b.lightness=100*g.v,b.config.alpha&&(b.opacity=100*g.a),b.isValid=!0}else b.isValid=!1;e[0].$setValidity(d.name,b.isValid),void 0!==c&&"function"==typeof e[0].$setDirty&&e[0].$setDirty()}else b.swatchColor=""}),b.$watch("colorPickerFormat",function(a,c){void 0!==a&&a!==c&&("hex"===a&&(b.colorPickerAlpha=!1),b.initConfig(),b.update())}),b.$watchGroup(["colorPickerAlpha","colorPickerCase"],function(a,c){void 0!==a&&(b.initConfig(),b.update())}),b.$watchGroup(["colorPickerSwatchPos","colorPickerSwatchBootstrap","colorPickerSwatchOnly","colorPickerSwatch","colorPickerPos"],function(a,c){void 0!==a&&b.initConfig()}),
+//---------------------------
+// HUE
+//---------------------------
+b.hueDown=function(){b.log("Color Picker: HUE - MOUSE DOWN"),b.hueMouse=!0},b.hueUp=function(){b.log("Color Picker: HUE - MOUSE UP"),b.hueMouse=!1},b.hueChange=function(a,c){if(b.hueMouse||c){b.log("Color Picker: HUE - MOUSE CHANGE");var d=b.find(".color-picker-hue");b.hue=360*(1-(a.pageY-b.offset(d).top)/d.prop("offsetHeight"))}},b.hueUpdate=function(){void 0!==b.hue&&(b.log("Color Picker: HUE - CHANGED"),b.huePos=100*(1-b.hue/360),b.grid=tinycolor({h:b.hue,s:100,v:1}).toHslString(),b.huePos<0?b.huePos=0:b.huePos>100&&(b.huePos=100),b.update())},b.$watch("hue",function(a,c){b.hueUpdate()}),
+//---------------------------
+// OPACITY
+//---------------------------
+b.opacityDown=function(){b.log("Color Picker: OPACITY - MOUSE DOWN"),b.opacityMouse=!0},b.opacityUp=function(){b.log("Color Picker: OPACITY - MOUSE UP"),b.opacityMouse=!1},b.opacityChange=function(a,c){if(b.opacityMouse||c){b.log("Color Picker: OPACITY - MOUSE CHANGE");var d=b.find(".color-picker-opacity");b.opacity=100*(1-(a.pageY-b.offset(d).top)/d.prop("offsetHeight"))}},b.opacityUpdate=function(){void 0!==b.opacity&&(b.log("Color Picker: OPACITY - CHANGED"),b.opacityPos=100*(1-b.opacity/100),b.opacityPos<0?b.opacityPos=0:b.opacityPos>100&&(b.opacityPos=100),b.update())},b.$watch("opacity",function(a,c){b.opacityUpdate()}),
+//---------------------------
+// COLOR
+//---------------------------
+b.colorDown=function(){b.log("Color Picker: COLOR - MOUSE DOWN"),b.colorMouse=!0},b.colorUp=function(){b.log("Color Picker: COLOR - MOUSE UP"),b.colorMouse=!1},b.colorChange=function(a,c){if(b.colorMouse||c){b.log("Color Picker: COLOR - MOUSE CHANGE");var d=b.find(".color-picker-grid-inner"),e=b.offset(d);b.saturation=(a.pageX-e.left)/d.prop("offsetWidth")*100,b.lightness=100*(1-(a.pageY-e.top)/d.prop("offsetHeight"))}},b.saturationUpdate=function(a){void 0!==b.saturation&&b.saturation!==a&&(b.log("Color Picker: SATURATION - CHANGED"),b.saturationPos=b.saturation/100*100,b.saturationPos<0?b.saturationPos=0:b.saturationPos>100&&(b.saturationPos=100),b.update())},b.$watch("saturation",function(a,c){b.saturationUpdate(c)}),b.lightnessUpdate=function(a){void 0!==b.lightness&&b.lightness!==a&&(b.log("Color Picker: LIGHTNESS - CHANGED"),b.lightnessPos=100*(1-b.lightness/100),b.lightnessPos<0?b.lightnessPos=0:b.lightnessPos>100&&(b.lightnessPos=100),b.update())},b.$watch("lightness",function(a,c){b.lightnessUpdate(c)}),
+//---------------------------
+// HELPER FUNCTIONS
+//---------------------------
+b.log=function(){},
+// taken and modified from jQuery's find
+b.find=function(a){var d,e=b.wrapper?b.wrapper[0]:c[0],f=[];
+// Same basic safeguard as Sizzle
+if(!a)return f;if("string"==typeof a){
+// Early return if context is not an element or document
+if(1!==(d=e.nodeType)&&9!==d)return[];f=e.querySelectorAll(a)}else e.contains(a)&&f.push(a);return angular.element(f)},
+// taken and modified from jQuery's offset
+b.offset=function(a){var b,c,d,e,f=a[0];if(f)
+// Support: IE<=11+
+// Running getBoundingClientRect on a
+// disconnected node in IE throws an error
+// Support: IE<=11+
+// Running getBoundingClientRect on a
+// disconnected node in IE throws an error
+// Make sure element is not hidden (display: none)
+// hack for small chrome screens not position the clicks properly when the page is scrolled
+return f.getClientRects().length?(d=f.getBoundingClientRect(),d.width||d.height?(e=f.ownerDocument,c=null!==e&&e===e.window?e:9===e.nodeType&&e.defaultView,b=e.documentElement,window.chrome&&screen.width<=768?{top:d.top-b.clientTop,left:d.left-b.clientLeft}:{top:d.top+c.pageYOffset-b.clientTop,left:d.left+c.pageXOffset-b.clientLeft}):d):{top:0,left:0}},b.init(),b.$on("$destroy",function(){a.off("click",b.onClick)})}}};a.$inject=["$document","$timeout"],angular.module("color.picker").directive("colorPicker",a)}(),angular.module("color.picker").run(["$templateCache",function(a){a.put("template/color-picker/directive.html",'<div class="color-picker-wrapper" ng-class="{\'color-picker-swatch-only\': config.swatchOnly}">\n   <div ng-class="{\'input-group\': config.swatchBootstrap && config.swatch}">\n       <span ng-if="config.swatchPos === \'left\'" ng-attr-style="background-color: {{swatchColor}};" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}"></span>\n       <input class="color-picker-input form-control" type="text" ng-model="ngModel" size="7" ng-focus="show()" ng-class="{\'color-picker-input-swatch\': config.swatch && !config.swatchOnly && config.swatchPos === \'left\'}">\n       <span ng-if="config.swatchPos === \'right\'" ng-attr-style="background-color: {{swatchColor}};" class="color-picker-swatch" ng-click="focus()" ng-show="config.swatch" ng-class="{\'color-picker-swatch-left\': config.swatchPos !== \'right\', \'color-picker-swatch-right\': config.swatchPos === \'right\', \'input-group-addon\': config.swatchBootstrap}"></span>\n   </div>\n   <div class="color-picker-panel" ng-show="visible" ng-class="{\n       \'color-picker-panel-top color-picker-panel-right\': config.pos === \'top right\',\n       \'color-picker-panel-top color-picker-panel-left\': config.pos === \'top left\',\n       \'color-picker-panel-bottom color-picker-panel-right\': config.pos === \'bottom right\',\n       \'color-picker-panel-bottom color-picker-panel-left\': config.pos === \'bottom left\',\n   }">\n       <div class="color-picker-hue color-picker-sprite" ng-click="hueChange($event, true)" ng-mousemove="hueChange($event, false)" ng-mousedown="hueDown()" ng-mouseup="hueUp()">\n           <div class="color-picker-slider" ng-attr-style="top: {{huePos}}%;"></div>\n       </div>\n       <div class="color-picker-opacity color-picker-sprite" ng-show="config.alpha" ng-click="opacityChange($event, true)" ng-mousemove="opacityChange($event, false)" ng-mousedown="opacityDown()" ng-mouseup="opacityUp()">\n           <div class="color-picker-slider" ng-attr-style="top: {{opacityPos}}%;"></div>\n           </div>\n       <div class="color-picker-grid color-picker-sprite" ng-attr-style="background-color: {{grid}};" ng-click="colorChange($event, true)" ng-mousemove="colorChange($event, false)" ng-mousedown="colorDown()" ng-mouseup="colorUp()">\n           <div class="color-picker-grid-inner"></div>\n           <div class="color-picker-picker" ng-attr-style="top: {{lightnessPos}}%; left: {{saturationPos}}%;">\n               <div></div>\n           </div>\n       </div>\n   </div>\n</div>')}]);
 //# sourceMappingURL=angularjs-color-picker.min.map

bower.json

 {
   "name": "angular-color-picker",
   "description": "Color Picker Directive For AngularJS",
-  "version": "0.6.9",
+  "version": "0.6.11",
   "homepage": "https://github.com/ruhley/angular-color-picker",
@@ -6,0 +6,0 @@ "repository": {

lib/scripts/directive.js

@@ -39,10 +39,12 @@ (function() {
 
-                    $document.on('click', function (evt) {
-                        if ($scope.find(evt.target).length === 0) {
-                            $scope.log('Color Picker: Document Click Event');
-                            $scope.hide();
-                        }
-                    });
+                    $document.on('click', $scope.onClick);
                 };
 
+                $scope.onClick = function(event) {
+                    if ($scope.find(event.target).length === 0) {
+                        $scope.log('Color Picker: Document Click Event');
+                        $scope.hide();
+                    }
+                };
+
                 $scope.initConfig = function() {
@@ -79,5 +81,5 @@ $scope.config = {};
                 $scope.hide = function () {
-                    $scope.log('Color Picker: Hide Event');
+                    if ($scope.visible || element[0].querySelector('.color-picker-panel').offsetParent !== null) {
+                        $scope.log('Color Picker: Hide Event');
 
-                    if ($scope.visible) {
                         $scope.visible = false;
@@ -423,3 +425,3 @@ $scope.$apply();
                 $scope.$on('$destroy', function() {
-                    $document.off('click');
+                    $document.off('click', $scope.onClick);
                 });
@@ -426,0 +428,0 @@ }

package.json

 {
   "name": "angularjs-color-picker",
   "description": "Color Picker Directive For AngularJS",
-  "version": "0.6.9",
+  "version": "0.6.11",
   "main": [
@@ -21,10 +21,10 @@ "angularjs-color-picker.js",
   "devDependencies": {
-    "glob": "~5.0.0",
+    "glob": "~6.0.0",
     "grunt": "~0.4.5",
-    "grunt-contrib-clean": "~0.6.0",
+    "grunt-contrib-clean": "~0.7.0",
     "grunt-contrib-concat": "~0.5.1",
     "grunt-contrib-cssmin": "~0.14.0",
     "grunt-contrib-jshint": "~0.11.0",
-    "grunt-contrib-less": "~1.0.0",
-    "grunt-contrib-uglify": "~0.9.0",
+    "grunt-contrib-less": "~1.1.0",
+    "grunt-contrib-uglify": "~0.10.0",
     "grunt-karma": "~0.12.0",
@@ -31,0 +31,0 @@ "grunt-notify": "~0.4.1",

README.md

@@ -1,13 +0,21 @@
-angularjs-color-picker
-=====================
+# angularjs-color-picker
 
+
 AngularJS Color Picker Directive
 
-Installation
-=====
-* Get through bower
+## Installation
+
+#### Bower
+
 ```shell
-bower install angularjs-color-picker --save-dev
+bower install angularjs-color-picker --save
 ```
 
+#### Npm
+```shell
+npm install angularjs-color-picker --save
+```
+
+#### Usage
+
 * Include tinycolor.js, angularjs-color-picker.js and angularjs-color-picker.css
@@ -32,4 +40,4 @@ ```html
 
-Options
-=====
+## Options
+
 If a list is given then choose one of the items. The first item in the list will be the default.
@@ -50,4 +58,4 @@ ```html
 
-Requirements
-=====
+## Requirements
+
 * angularjs
@@ -59,4 +67,4 @@ * bootstrap - looking at removing in future versions if requested enough (currently only used for styling the input text box)
 
-Inspiration
-=====
+## Inspiration
+
 Inspiration and code taken from projects like
@@ -63,0 +71,0 @@ * http://kaihenzler.github.io/angular-minicolors/

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

417407

increased by0.35%

Lines of code

1670

increased by2.02%

Number of lines in readme file

71

increased by12.7%

No dependency changes