angularjs-color-picker - npm Package Compare versions

Comparing version 1.0.7 to 1.1.0

bower.json

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

dist/angularjs-color-picker.js

 /*!
- * angularjs-color-picker v1.0.7
+ * angularjs-color-picker v1.1.0
  * https://github.com/ruhley/angular-color-picker/
@@ -7,3 +7,3 @@ *
  *
- * 2016-04-29 08:36:22
+ * 2016-05-06 09:23:49
  *
@@ -39,2 +39,3 @@ */
                 colorPickerSwatchBootstrap: '=',
+                colorPickerInline: '=',
                 colorPickerOnChange: '&',
@@ -78,3 +79,3 @@ },
                     // an element in this picker
-                    if ($scope.find(event.target).length > 0) {
+                    if (!$scope.config.disabled && $scope.find(event.target).length > 0) {
                         // mouse event on color grid
@@ -136,17 +137,23 @@ 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.onColorClick = function(event) {
-                    $scope.colorChange(event);
-                    $scope.$apply();
-                    $scope.onChange(event);
+                    if (!$scope.config.disabled) {
+                        $scope.colorChange(event);
+                        $scope.$apply();
+                        $scope.onChange(event);
+                    }
                 };
 
                 $scope.onHueClick = function(event) {
-                    $scope.hueChange(event);
-                    $scope.$apply();
-                    $scope.onChange(event);
+                    if (!$scope.config.disabled) {
+                        $scope.hueChange(event);
+                        $scope.$apply();
+                        $scope.onChange(event);
+                    }
                 };
 
                 $scope.onOpacityClick = function(event) {
-                    $scope.opacityChange(event);
-                    $scope.$apply();
-                    $scope.onChange(event);
+                    if (!$scope.config.disabled) {
+                        $scope.opacityChange(event);
+                        $scope.$apply();
+                        $scope.onChange(event);
+                    }
                 };
@@ -177,2 +184,6 @@
                     $scope.config.swatchBootstrap = $scope.colorPickerSwatchBootstrap === undefined ? true : $scope.colorPickerSwatchBootstrap;
+                    $scope.config.inline = $scope.colorPickerInline === undefined ? false : $scope.colorPickerInline;
+
+                    $scope.visible = $scope.config.inline;
+
                     $scope.log('Color Picker: Config', $scope.config);
@@ -199,3 +210,3 @@ };
                 $scope.hide = function () {
-                    if ($scope.visible || element[0].querySelector('.color-picker-panel').offsetParent !== null) {
+                    if (!$scope.config.inline && ($scope.visible || element[0].querySelector('.color-picker-panel').offsetParent !== null)) {
                         $scope.log('Color Picker: Hide Event');
@@ -281,2 +292,9 @@
 
+                $scope.updateSwatchBackground = function () {
+                    var el = angular.element(element[0].querySelector('.color-picker-swatch'));
+                    el.css({
+                        'background-color': $scope.swatchColor,
+                    });
+                };
+
                 $scope.$watch('ngModel', function (newValue, oldValue) {
@@ -337,3 +355,3 @@ if (newValue !== undefined && newValue !== null && newValue !== oldValue && newValue.length > 4) {
                 $scope.$watchGroup(
-                    ['colorPickerDisabled', 'colorPickerSwatchPos', 'colorPickerSwatchBootstrap', 'colorPickerSwatchOnly', 'colorPickerSwatch', 'colorPickerPos'],
+                    ['colorPickerDisabled', 'colorPickerSwatchBootstrap', 'colorPickerSwatchOnly', 'colorPickerSwatch', 'colorPickerPos', 'colorPickerInline'],
                     function (newValue, oldValue) {
@@ -346,16 +364,28 @@ if (newValue !== undefined) {
 
+                $scope.$watch('colorPickerSwatchPos', function (newValue, oldValue) {
+                    if (newValue !== undefined) {
+                        $scope.initConfig();
+
+                        $timeout(function() {
+                            $scope.updateSwatchBackground();
+                        });
+                    }
+                });
+
+
+
                 //---------------------------
                 // Update Positions And Colors On Elements
                 //---------------------------
-                $scope.$watch('swatchColor', function(newValue) {
-                    var el = angular.element(element[0].querySelector('.color-picker-swatch'));
-                    el.css({
-                        'background-color': newValue,
-                    });
+                $scope.$watch('swatchColor', function() {
+                    $scope.updateSwatchBackground();
                 });
 
                 $scope.$watch('huePos', function(newValue) {
+                    var container = element[0].querySelector('.color-picker-hue');
                     var el = angular.element(element[0].querySelector('.color-picker-hue .color-picker-slider'));
+                    var bounding = container.getBoundingClientRect();
+
                     el.css({
-                        'top': newValue + '%',
+                        'top': (bounding.height * newValue / 100) + 'px',
                     });
@@ -365,5 +395,8 @@ });
                 $scope.$watch('opacityPos', function(newValue) {
+                    var container = element[0].querySelector('.color-picker-opacity');
                     var el = angular.element(element[0].querySelector('.color-picker-opacity .color-picker-slider'));
+                    var bounding = container.getBoundingClientRect();
+
                     el.css({
-                        'top': newValue + '%',
+                        'top': (bounding.height * newValue / 100) + 'px',
                     });
@@ -373,5 +406,8 @@ });
                 $scope.$watch('lightnessPos', function(newValue) {
+                    var container = element[0].querySelector('.color-picker-grid');
                     var el = angular.element(element[0].querySelector('.color-picker-grid .color-picker-picker'));
+                    var bounding = container.getBoundingClientRect();
+
                     el.css({
-                        'top': newValue + '%',
+                        'top': (bounding.height * newValue / 100) + 'px',
                     });
@@ -381,5 +417,8 @@ });
                 $scope.$watch('saturationPos', function(newValue) {
+                    var container = element[0].querySelector('.color-picker-grid');
                     var el = angular.element(element[0].querySelector('.color-picker-grid .color-picker-picker'));
+                    var bounding = container.getBoundingClientRect();
+
                     el.css({
-                        'left': newValue + '%',
+                        'left': (bounding.width * newValue / 100) + 'px',
                     });
@@ -390,2 +429,3 @@ });
                     var el = angular.element(element[0].querySelector('.color-picker-grid'));
+
                     el.css({
@@ -692,15 +732,19 @@ 'background-color': newValue,
         '       \'color-picker-panel-bottom color-picker-panel-left\': config.pos === \'bottom left\',\n' +
+        '       \'color-picker-show-alpha\': config.alpha && config.format !== \'hex\',\n' +
+        '       \'color-picker-show-inline\': config.inline,\n' +
         '   }">\n' +
-        '       <div class="color-picker-grid color-picker-sprite">\n' +
-        '           <div class="color-picker-grid-inner"></div>\n' +
-        '           <div class="color-picker-picker">\n' +
-        '               <div></div>\n' +
+        '       <div class="color-picker-row">\n' +
+        '           <div class="color-picker-grid color-picker-sprite">\n' +
+        '               <div class="color-picker-grid-inner"></div>\n' +
+        '               <div class="color-picker-picker">\n' +
+        '                   <div></div>\n' +
+        '               </div>\n' +
         '           </div>\n' +
+        '           <div class="color-picker-hue color-picker-sprite">\n' +
+        '               <div class="color-picker-slider"></div>\n' +
+        '           </div>\n' +
+        '           <div class="color-picker-opacity color-picker-sprite" ng-show="config.alpha && config.format !== \'hex\'">\n' +
+        '               <div class="color-picker-slider"></div>\n' +
+        '           </div>\n' +
         '       </div>\n' +
-        '       <div class="color-picker-hue color-picker-sprite">\n' +
-        '           <div class="color-picker-slider"></div>\n' +
-        '       </div>\n' +
-        '       <div class="color-picker-opacity color-picker-sprite" ng-show="config.alpha && config.format !== \'hex\'">\n' +
-        '           <div class="color-picker-slider"></div>\n' +
-        '       </div>\n' +
         '   </div>\n' +
@@ -707,0 +751,0 @@ '</div>'

dist/angularjs-color-picker.min.js

 /*!
- * angularjs-color-picker v1.0.7
+ * angularjs-color-picker v1.1.0
  * https://github.com/ruhley/angular-color-picker/
@@ -7,6 +7,6 @@ *
  *
- * 2016-04-29 08:36:22
+ * 2016-05-06 09:23:49
  *
  */
-"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:"=",colorPickerDisabled:"=",colorPickerAlpha:"=",colorPickerCase:"=",colorPickerFormat:"=",colorPickerPos:"=",colorPickerSwatch:"=",colorPickerSwatchOnly:"=",colorPickerSwatchPos:"=",colorPickerSwatchBootstrap:"=",colorPickerOnChange:"&"},templateUrl:"template/color-picker/directive.html",link:function(c,d,e,f){c.onChangeValue=null,c.updateModel=!0,c.init=function(){
+"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:"=",colorPickerDisabled:"=",colorPickerAlpha:"=",colorPickerCase:"=",colorPickerFormat:"=",colorPickerPos:"=",colorPickerSwatch:"=",colorPickerSwatchOnly:"=",colorPickerSwatchPos:"=",colorPickerSwatchBootstrap:"=",colorPickerInline:"=",colorPickerOnChange:"&"},templateUrl:"template/color-picker/directive.html",link:function(c,d,e,f){c.onChangeValue=null,c.updateModel=!0,c.init=function(){
 // if no color provided
@@ -19,3 +19,3 @@ if(void 0===c.ngModel)c.setDefaults();else{var b=tinycolor(c.ngModel);if(b.isValid()){var d=b.toHsv();c.hue=d.h,c.saturation=100*d.s,c.lightness=100*d.v,c.opacity=100*d.a}}
 // an element in this picker
-c.find(a.target).length>0&&(
+!c.config.disabled&&c.find(a.target).length>0&&(
 // mouse event on color grid
@@ -26,9 +26,9 @@ a.target.classList.contains("color-picker-grid-inner")||a.target.classList.contains("color-picker-picker")||a.target.parentNode.classList.contains("color-picker-picker")?(c.colorDown(a),c.$apply()):a.target.classList.contains("color-picker-hue")||a.target.parentNode.classList.contains("color-picker-hue")?(c.hueDown(a),c.$apply()):(a.target.classList.contains("color-picker-opacity")||a.target.parentNode.classList.contains("color-picker-opacity"))&&(c.opacityDown(a),c.$apply()))},c.onMouseUp=function(a){
 // mouse event on color grid
-c.colorMouse?(c.colorChange(a),c.$apply()):c.hueMouse?(c.hueChange(a),c.$apply()):c.opacityMouse&&(c.opacityChange(a),c.$apply())},c.onColorClick=function(a){c.colorChange(a),c.$apply(),c.onChange(a)},c.onHueClick=function(a){c.hueChange(a),c.$apply(),c.onChange(a)},c.onOpacityClick=function(a){c.opacityChange(a),c.$apply(),c.onChange(a)},c.onChange=function(a){c.ngModel!==c.onChangeValue&&(c.onChangeValue=c.ngModel,c.colorPickerOnChange({$event:a,color:c.ngModel}))},c.onBlur=function(){c.updateModel=!0,c.update()},c.initConfig=function(){c.config={},c.config.disabled=void 0===c.colorPickerDisabled?!1:c.colorPickerDisabled,c.config.alpha=void 0===c.colorPickerAlpha?!0:c.colorPickerAlpha,c.config.case=void 0===c.colorPickerCase?"upper":c.colorPickerCase,c.config.format=void 0===c.colorPickerFormat?"hsl":c.colorPickerFormat,c.config.pos=void 0===c.colorPickerPos?"bottom left":c.colorPickerPos,c.config.swatch=void 0===c.colorPickerSwatch?!0:c.colorPickerSwatch,c.config.swatchOnly=void 0===c.colorPickerSwatchOnly?!1:c.colorPickerSwatchOnly,c.config.swatchPos=void 0===c.colorPickerSwatchPos?"left":c.colorPickerSwatchPos,c.config.swatchBootstrap=void 0===c.colorPickerSwatchBootstrap?!0:c.colorPickerSwatchBootstrap,c.log("Color Picker: Config",c.config)},c.focus=function(){c.log("Color Picker: Focus Event"),c.find(".color-picker-input")[0].focus()},c.show=function(){c.log("Color Picker: Show Event"),c.visible=!0,c.hueMouse=!1,c.opacityMouse=!1,c.colorMouse=!1,
+c.colorMouse?(c.colorChange(a),c.$apply()):c.hueMouse?(c.hueChange(a),c.$apply()):c.opacityMouse&&(c.opacityChange(a),c.$apply())},c.onColorClick=function(a){c.config.disabled||(c.colorChange(a),c.$apply(),c.onChange(a))},c.onHueClick=function(a){c.config.disabled||(c.hueChange(a),c.$apply(),c.onChange(a))},c.onOpacityClick=function(a){c.config.disabled||(c.opacityChange(a),c.$apply(),c.onChange(a))},c.onChange=function(a){c.ngModel!==c.onChangeValue&&(c.onChangeValue=c.ngModel,c.colorPickerOnChange({$event:a,color:c.ngModel}))},c.onBlur=function(){c.updateModel=!0,c.update()},c.initConfig=function(){c.config={},c.config.disabled=void 0===c.colorPickerDisabled?!1:c.colorPickerDisabled,c.config.alpha=void 0===c.colorPickerAlpha?!0:c.colorPickerAlpha,c.config.case=void 0===c.colorPickerCase?"upper":c.colorPickerCase,c.config.format=void 0===c.colorPickerFormat?"hsl":c.colorPickerFormat,c.config.pos=void 0===c.colorPickerPos?"bottom left":c.colorPickerPos,c.config.swatch=void 0===c.colorPickerSwatch?!0:c.colorPickerSwatch,c.config.swatchOnly=void 0===c.colorPickerSwatchOnly?!1:c.colorPickerSwatchOnly,c.config.swatchPos=void 0===c.colorPickerSwatchPos?"left":c.colorPickerSwatchPos,c.config.swatchBootstrap=void 0===c.colorPickerSwatchBootstrap?!0:c.colorPickerSwatchBootstrap,c.config.inline=void 0===c.colorPickerInline?!1:c.colorPickerInline,c.visible=c.config.inline,c.log("Color Picker: Config",c.config)},c.focus=function(){c.log("Color Picker: Focus Event"),c.find(".color-picker-input")[0].focus()},c.show=function(){c.log("Color Picker: Show Event"),c.visible=!0,c.hueMouse=!1,c.opacityMouse=!1,c.colorMouse=!1,
 // force the grid selection circle to redraw and fix its position
-c.saturationUpdate(),c.lightnessUpdate()},c.hide=function(){(c.visible||null!==d[0].querySelector(".color-picker-panel").offsetParent)&&(c.log("Color Picker: Hide Event"),c.visible=!1,c.$apply())},c.setDefaults=function(){void 0===c.hue&&(c.hue=0),void 0===c.saturation&&(c.saturation=0),void 0===c.lightness&&(c.lightness=100),void 0===c.opacity&&(c.opacity=100)},c.update=function(){if(void 0===c.hue&&void 0===c.saturation&&void 0===c.lightness)return!1;c.setDefaults();var a,b=tinycolor({h:c.hue,s:c.saturation/100,v:c.lightness/100});switch(c.config.alpha&&b.setAlpha(c.opacity/100),c.log("Color Picker: COLOR CHANGED TO ",b,c.hue,c.saturation,c.lightness,c.opacity),c.swatchColor=b.toHslString(),c.config.format){case"rgb":a=b.toRgbString();break;case"hex":a=b.toHexString(),a="lower"===c.config.case?a.toLowerCase():a.toUpperCase();break;case"hex8":a=b.toHex8String(),a="lower"===c.config.case?a.toLowerCase():a.toUpperCase();break;case"hsv":a=b.toHsvString();break;default:a=b.toHslString()}c.updateModel&&(c.ngModel=a)},c.$watch("ngModel",function(a,d){if(void 0!==a&&null!==a&&a!==d&&a.length>4){c.log("Color Picker: MODEL - CHANGED",a);var g=tinycolor(a);if(g.isValid()){var h=g.toHsv();c.updateModel=!1,c.hue=h.h,c.saturation=100*h.s,c.lightness=100*h.v,c.config.alpha&&(c.opacity=100*h.a),b(function(){c.updateModel=!0}),c.isValid=!0}else c.isValid=!1;f[0].$setValidity(e.name,c.isValid),void 0!==d&&"function"==typeof f[0].$setDirty&&f[0].$setDirty()}else null!==a&&""!==a||(c.hue=void 0,c.saturation=void 0,c.lightness=void 0,c.opacity=void 0),c.swatchColor=""}),c.$watchGroup(["colorPickerFormat","colorPickerAlpha","colorPickerCase"],function(a,b){void 0!==a&&(c.initConfig(),c.update())}),c.$watchGroup(["colorPickerDisabled","colorPickerSwatchPos","colorPickerSwatchBootstrap","colorPickerSwatchOnly","colorPickerSwatch","colorPickerPos"],function(a,b){void 0!==a&&c.initConfig()}),
+c.saturationUpdate(),c.lightnessUpdate()},c.hide=function(){c.config.inline||!c.visible&&null===d[0].querySelector(".color-picker-panel").offsetParent||(c.log("Color Picker: Hide Event"),c.visible=!1,c.$apply())},c.setDefaults=function(){void 0===c.hue&&(c.hue=0),void 0===c.saturation&&(c.saturation=0),void 0===c.lightness&&(c.lightness=100),void 0===c.opacity&&(c.opacity=100)},c.update=function(){if(void 0===c.hue&&void 0===c.saturation&&void 0===c.lightness)return!1;c.setDefaults();var a,b=tinycolor({h:c.hue,s:c.saturation/100,v:c.lightness/100});switch(c.config.alpha&&b.setAlpha(c.opacity/100),c.log("Color Picker: COLOR CHANGED TO ",b,c.hue,c.saturation,c.lightness,c.opacity),c.swatchColor=b.toHslString(),c.config.format){case"rgb":a=b.toRgbString();break;case"hex":a=b.toHexString(),a="lower"===c.config.case?a.toLowerCase():a.toUpperCase();break;case"hex8":a=b.toHex8String(),a="lower"===c.config.case?a.toLowerCase():a.toUpperCase();break;case"hsv":a=b.toHsvString();break;default:a=b.toHslString()}c.updateModel&&(c.ngModel=a)},c.updateSwatchBackground=function(){var a=angular.element(d[0].querySelector(".color-picker-swatch"));a.css({"background-color":c.swatchColor})},c.$watch("ngModel",function(a,d){if(void 0!==a&&null!==a&&a!==d&&a.length>4){c.log("Color Picker: MODEL - CHANGED",a);var g=tinycolor(a);if(g.isValid()){var h=g.toHsv();c.updateModel=!1,c.hue=h.h,c.saturation=100*h.s,c.lightness=100*h.v,c.config.alpha&&(c.opacity=100*h.a),b(function(){c.updateModel=!0}),c.isValid=!0}else c.isValid=!1;f[0].$setValidity(e.name,c.isValid),void 0!==d&&"function"==typeof f[0].$setDirty&&f[0].$setDirty()}else null!==a&&""!==a||(c.hue=void 0,c.saturation=void 0,c.lightness=void 0,c.opacity=void 0),c.swatchColor=""}),c.$watchGroup(["colorPickerFormat","colorPickerAlpha","colorPickerCase"],function(a,b){void 0!==a&&(c.initConfig(),c.update())}),c.$watchGroup(["colorPickerDisabled","colorPickerSwatchBootstrap","colorPickerSwatchOnly","colorPickerSwatch","colorPickerPos","colorPickerInline"],function(a,b){void 0!==a&&c.initConfig()}),c.$watch("colorPickerSwatchPos",function(a,d){void 0!==a&&(c.initConfig(),b(function(){c.updateSwatchBackground()}))}),
 //---------------------------
 // Update Positions And Colors On Elements
 //---------------------------
-c.$watch("swatchColor",function(a){var b=angular.element(d[0].querySelector(".color-picker-swatch"));b.css({"background-color":a})}),c.$watch("huePos",function(a){var b=angular.element(d[0].querySelector(".color-picker-hue .color-picker-slider"));b.css({top:a+"%"})}),c.$watch("opacityPos",function(a){var b=angular.element(d[0].querySelector(".color-picker-opacity .color-picker-slider"));b.css({top:a+"%"})}),c.$watch("lightnessPos",function(a){var b=angular.element(d[0].querySelector(".color-picker-grid .color-picker-picker"));b.css({top:a+"%"})}),c.$watch("saturationPos",function(a){var b=angular.element(d[0].querySelector(".color-picker-grid .color-picker-picker"));b.css({left:a+"%"})}),c.$watch("grid",function(a){var b=angular.element(d[0].querySelector(".color-picker-grid"));b.css({"background-color":a})}),
+c.$watch("swatchColor",function(){c.updateSwatchBackground()}),c.$watch("huePos",function(a){var b=d[0].querySelector(".color-picker-hue"),c=angular.element(d[0].querySelector(".color-picker-hue .color-picker-slider")),e=b.getBoundingClientRect();c.css({top:e.height*a/100+"px"})}),c.$watch("opacityPos",function(a){var b=d[0].querySelector(".color-picker-opacity"),c=angular.element(d[0].querySelector(".color-picker-opacity .color-picker-slider")),e=b.getBoundingClientRect();c.css({top:e.height*a/100+"px"})}),c.$watch("lightnessPos",function(a){var b=d[0].querySelector(".color-picker-grid"),c=angular.element(d[0].querySelector(".color-picker-grid .color-picker-picker")),e=b.getBoundingClientRect();c.css({top:e.height*a/100+"px"})}),c.$watch("saturationPos",function(a){var b=d[0].querySelector(".color-picker-grid"),c=angular.element(d[0].querySelector(".color-picker-grid .color-picker-picker")),e=b.getBoundingClientRect();c.css({left:e.width*a/100+"px"})}),c.$watch("grid",function(a){var b=angular.element(d[0].querySelector(".color-picker-grid"));b.css({"background-color":a})}),
 //---------------------------
@@ -66,2 +66,2 @@ // HUE
 // 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}},c.init(),c.$on("$destroy",function(){a.off("mousedown",c.onMouseDown),a.off("mouseup",c.onMouseUp),a.off("mousemove",c.onMouseMove)})}}};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 class="color-picker-input-wrapper" ng-class="{\'input-group\': config.swatchBootstrap && config.swatch}">\n       <span ng-if="config.swatchPos === \'left\'" 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" ng-disabled="config.disabled" ng-blur="onBlur()" ng-change="onChange($event)" 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\'" 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-grid color-picker-sprite">\n           <div class="color-picker-grid-inner"></div>\n           <div class="color-picker-picker">\n               <div></div>\n           </div>\n       </div>\n       <div class="color-picker-hue color-picker-sprite">\n           <div class="color-picker-slider"></div>\n       </div>\n       <div class="color-picker-opacity color-picker-sprite" ng-show="config.alpha && config.format !== \'hex\'">\n           <div class="color-picker-slider"></div>\n       </div>\n   </div>\n</div>')}]);
+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}},c.init(),c.$on("$destroy",function(){a.off("mousedown",c.onMouseDown),a.off("mouseup",c.onMouseUp),a.off("mousemove",c.onMouseMove)})}}};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 class="color-picker-input-wrapper" ng-class="{\'input-group\': config.swatchBootstrap && config.swatch}">\n       <span ng-if="config.swatchPos === \'left\'" 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" ng-disabled="config.disabled" ng-blur="onBlur()" ng-change="onChange($event)" 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\'" 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       'color-picker-show-alpha': config.alpha && config.format !== 'hex',\n       'color-picker-show-inline': config.inline,\n   }\">\n       <div class=\"color-picker-row\">\n           <div class=\"color-picker-grid color-picker-sprite\">\n               <div class=\"color-picker-grid-inner\"></div>\n               <div class=\"color-picker-picker\">\n                   <div></div>\n               </div>\n           </div>\n           <div class=\"color-picker-hue color-picker-sprite\">\n               <div class=\"color-picker-slider\"></div>\n           </div>\n           <div class=\"color-picker-opacity color-picker-sprite\" ng-show=\"config.alpha && config.format !== 'hex'\">\n               <div class=\"color-picker-slider\"></div>\n           </div>\n       </div>\n   </div>\n</div>")}]);

lib/scripts/directive.js

@@ -19,2 +19,3 @@ (function() {
                 colorPickerSwatchBootstrap: '=',
+                colorPickerInline: '=',
                 colorPickerOnChange: '&',
@@ -58,3 +59,3 @@ },
                     // an element in this picker
-                    if ($scope.find(event.target).length > 0) {
+                    if (!$scope.config.disabled && $scope.find(event.target).length > 0) {
                         // mouse event on color grid
@@ -116,17 +117,23 @@ 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.onColorClick = function(event) {
-                    $scope.colorChange(event);
-                    $scope.$apply();
-                    $scope.onChange(event);
+                    if (!$scope.config.disabled) {
+                        $scope.colorChange(event);
+                        $scope.$apply();
+                        $scope.onChange(event);
+                    }
                 };
 
                 $scope.onHueClick = function(event) {
-                    $scope.hueChange(event);
-                    $scope.$apply();
-                    $scope.onChange(event);
+                    if (!$scope.config.disabled) {
+                        $scope.hueChange(event);
+                        $scope.$apply();
+                        $scope.onChange(event);
+                    }
                 };
 
                 $scope.onOpacityClick = function(event) {
-                    $scope.opacityChange(event);
-                    $scope.$apply();
-                    $scope.onChange(event);
+                    if (!$scope.config.disabled) {
+                        $scope.opacityChange(event);
+                        $scope.$apply();
+                        $scope.onChange(event);
+                    }
                 };
@@ -157,2 +164,6 @@
                     $scope.config.swatchBootstrap = $scope.colorPickerSwatchBootstrap === undefined ? true : $scope.colorPickerSwatchBootstrap;
+                    $scope.config.inline = $scope.colorPickerInline === undefined ? false : $scope.colorPickerInline;
+
+                    $scope.visible = $scope.config.inline;
+
                     $scope.log('Color Picker: Config', $scope.config);
@@ -179,3 +190,3 @@ };
                 $scope.hide = function () {
-                    if ($scope.visible || element[0].querySelector('.color-picker-panel').offsetParent !== null) {
+                    if (!$scope.config.inline && ($scope.visible || element[0].querySelector('.color-picker-panel').offsetParent !== null)) {
                         $scope.log('Color Picker: Hide Event');
@@ -261,2 +272,9 @@
 
+                $scope.updateSwatchBackground = function () {
+                    var el = angular.element(element[0].querySelector('.color-picker-swatch'));
+                    el.css({
+                        'background-color': $scope.swatchColor,
+                    });
+                };
+
                 $scope.$watch('ngModel', function (newValue, oldValue) {
@@ -317,3 +335,3 @@ if (newValue !== undefined && newValue !== null && newValue !== oldValue && newValue.length > 4) {
                 $scope.$watchGroup(
-                    ['colorPickerDisabled', 'colorPickerSwatchPos', 'colorPickerSwatchBootstrap', 'colorPickerSwatchOnly', 'colorPickerSwatch', 'colorPickerPos'],
+                    ['colorPickerDisabled', 'colorPickerSwatchBootstrap', 'colorPickerSwatchOnly', 'colorPickerSwatch', 'colorPickerPos', 'colorPickerInline'],
                     function (newValue, oldValue) {
@@ -326,16 +344,28 @@ if (newValue !== undefined) {
 
+                $scope.$watch('colorPickerSwatchPos', function (newValue, oldValue) {
+                    if (newValue !== undefined) {
+                        $scope.initConfig();
+
+                        $timeout(function() {
+                            $scope.updateSwatchBackground();
+                        });
+                    }
+                });
+
+
+
                 //---------------------------
                 // Update Positions And Colors On Elements
                 //---------------------------
-                $scope.$watch('swatchColor', function(newValue) {
-                    var el = angular.element(element[0].querySelector('.color-picker-swatch'));
-                    el.css({
-                        'background-color': newValue,
-                    });
+                $scope.$watch('swatchColor', function() {
+                    $scope.updateSwatchBackground();
                 });
 
                 $scope.$watch('huePos', function(newValue) {
+                    var container = element[0].querySelector('.color-picker-hue');
                     var el = angular.element(element[0].querySelector('.color-picker-hue .color-picker-slider'));
+                    var bounding = container.getBoundingClientRect();
+
                     el.css({
-                        'top': newValue + '%',
+                        'top': (bounding.height * newValue / 100) + 'px',
                     });
@@ -345,5 +375,8 @@ });
                 $scope.$watch('opacityPos', function(newValue) {
+                    var container = element[0].querySelector('.color-picker-opacity');
                     var el = angular.element(element[0].querySelector('.color-picker-opacity .color-picker-slider'));
+                    var bounding = container.getBoundingClientRect();
+
                     el.css({
-                        'top': newValue + '%',
+                        'top': (bounding.height * newValue / 100) + 'px',
                     });
@@ -353,5 +386,8 @@ });
                 $scope.$watch('lightnessPos', function(newValue) {
+                    var container = element[0].querySelector('.color-picker-grid');
                     var el = angular.element(element[0].querySelector('.color-picker-grid .color-picker-picker'));
+                    var bounding = container.getBoundingClientRect();
+
                     el.css({
-                        'top': newValue + '%',
+                        'top': (bounding.height * newValue / 100) + 'px',
                     });
@@ -361,5 +397,8 @@ });
                 $scope.$watch('saturationPos', function(newValue) {
+                    var container = element[0].querySelector('.color-picker-grid');
                     var el = angular.element(element[0].querySelector('.color-picker-grid .color-picker-picker'));
+                    var bounding = container.getBoundingClientRect();
+
                     el.css({
-                        'left': newValue + '%',
+                        'left': (bounding.width * newValue / 100) + 'px',
                     });
@@ -370,2 +409,3 @@ });
                     var el = angular.element(element[0].querySelector('.color-picker-grid'));
+
                     el.css({
@@ -372,0 +412,0 @@ 'background-color': newValue,

lib/scripts/template.js

@@ -6,3 +6,3 @@ angular.module('color.picker').run(['$templateCache', function($templateCache) {
         '       <span ng-if="config.swatchPos === \'left\'" 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" ng-disabled="config.disabled" ng-blur="onBlur()" ng-change="onChange($event)" size="7" ng-focus="show()" ng-class="{\'color-picker-input-swatch\': config.swatch && !config.swatchOnly && config.swatchPos === \'left\'}">\n' +
+        '       <input class="color-picker-input form-control" type="text" ng-model="ngModel" ng-readonly="config.swatchOnly" ng-disabled="config.disabled" ng-blur="onBlur()" ng-change="onChange($event)" 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\'" 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' +
@@ -15,15 +15,19 @@ '   </div>\n' +
         '       \'color-picker-panel-bottom color-picker-panel-left\': config.pos === \'bottom left\',\n' +
+        '       \'color-picker-show-alpha\': config.alpha && config.format !== \'hex\',\n' +
+        '       \'color-picker-show-inline\': config.inline,\n' +
         '   }">\n' +
-        '       <div class="color-picker-grid color-picker-sprite">\n' +
-        '           <div class="color-picker-grid-inner"></div>\n' +
-        '           <div class="color-picker-picker">\n' +
-        '               <div></div>\n' +
+        '       <div class="color-picker-row">\n' +
+        '           <div class="color-picker-grid color-picker-sprite">\n' +
+        '               <div class="color-picker-grid-inner"></div>\n' +
+        '               <div class="color-picker-picker">\n' +
+        '                   <div></div>\n' +
+        '               </div>\n' +
         '           </div>\n' +
+        '           <div class="color-picker-hue color-picker-sprite">\n' +
+        '               <div class="color-picker-slider"></div>\n' +
+        '           </div>\n' +
+        '           <div class="color-picker-opacity color-picker-sprite" ng-show="config.alpha && config.format !== \'hex\'">\n' +
+        '               <div class="color-picker-slider"></div>\n' +
+        '           </div>\n' +
         '       </div>\n' +
-        '       <div class="color-picker-hue color-picker-sprite">\n' +
-        '           <div class="color-picker-slider"></div>\n' +
-        '       </div>\n' +
-        '       <div class="color-picker-opacity color-picker-sprite" ng-show="config.alpha && config.format !== \'hex\'">\n' +
-        '           <div class="color-picker-slider"></div>\n' +
-        '       </div>\n' +
         '   </div>\n' +
@@ -30,0 +34,0 @@ '</div>'

package.json

 {
   "name": "angularjs-color-picker",
   "description": "Color Picker Directive For AngularJS",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "license": "MIT",
@@ -30,3 +30,3 @@ "main": "dist/angularjs-color-picker.min.js",
     "grunt-contrib-uglify": "~1.0.0",
-    "grunt-karma": "~0.12.0",
+    "grunt-karma": "~1.0.0",
     "grunt-notify": "~0.4.1",
@@ -33,0 +33,0 @@ "load-grunt-tasks": "~3.5.0",

README.md

@@ -71,2 +71,3 @@ # angularjs-color-picker
     color-picker-case="'upper', 'lower'"
+    color-picker-inline="false, true"
     color-picker-on-change="onColorChange($event, color)"
@@ -73,0 +74,0 @@ ></color-picker>

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

459985

increased by3.25%

Number of package files

40

increased by2.56%

Lines of code

2210

increased by3.85%

Number of lines in readme file

89

increased by1.14%

No dependency changes