angularjs-color-picker - npm Package Compare versions

Comparing version 1.1.5 to 1.1.6

bower.json

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

dist/angularjs-color-picker.js

 /*!
- * angularjs-color-picker v1.1.5
+ * angularjs-color-picker v1.1.6
  * https://github.com/ruhley/angular-color-picker/
@@ -7,3 +7,3 @@ *
  *
- * 2016-06-21 07:56:41
+ * 2016-06-23 08:36:52
  *
@@ -210,5 +210,7 @@ */
 
-                    // force the grid selection circle to redraw and fix its position
+                    // force the sliders to re-caculate their position
+                    $scope.hueUpdate();
                     $scope.saturationUpdate();
                     $scope.lightnessUpdate();
+                    $scope.opacityUpdate();
                 };
@@ -389,8 +391,10 @@
                 $scope.huePosUpdate = function() {
-                    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();
+                    $timeout(function() {
+                        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': (bounding.height * $scope.huePos / 100) + 'px',
+                        el.css({
+                            'top': (bounding.height * $scope.huePos / 100) + 'px',
+                        });
                     });
@@ -400,8 +404,10 @@ };
                 $scope.opacityPosUpdate = function() {
-                    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();
+                    $timeout(function() {
+                        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': (bounding.height * $scope.opacityPos / 100) + 'px',
+                        el.css({
+                            'top': (bounding.height * $scope.opacityPos / 100) + 'px',
+                        });
                     });
@@ -408,0 +414,0 @@ };

dist/angularjs-color-picker.min.js

 /*!
- * angularjs-color-picker v1.1.5
+ * angularjs-color-picker v1.1.6
  * https://github.com/ruhley/angular-color-picker/
@@ -7,3 +7,3 @@ *
  *
- * 2016-06-21 07:56:41
+ * 2016-06-23 08:36:52
  *
@@ -28,8 +28,8 @@ */
 // if already visible then don't run show again
-// force the grid selection circle to redraw and fix its position
-return c.visible?!0:(c.log("Color Picker: Show Event"),c.visible=!0,c.hueMouse=!1,c.opacityMouse=!1,c.colorMouse=!1,c.saturationUpdate(),void 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()}))}),
+// force the sliders to re-caculate their position
+return c.visible?!0:(c.log("Color Picker: Show Event"),c.visible=!0,c.hueMouse=!1,c.opacityMouse=!1,c.colorMouse=!1,c.hueUpdate(),c.saturationUpdate(),c.lightnessUpdate(),void c.opacityUpdate())},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(){c.updateSwatchBackground()}),c.huePosUpdate=function(){var a=d[0].querySelector(".color-picker-hue"),b=angular.element(d[0].querySelector(".color-picker-hue .color-picker-slider")),e=a.getBoundingClientRect();b.css({top:e.height*c.huePos/100+"px"})},c.opacityPosUpdate=function(){var a=d[0].querySelector(".color-picker-opacity"),b=angular.element(d[0].querySelector(".color-picker-opacity .color-picker-slider")),e=a.getBoundingClientRect();b.css({top:e.height*c.opacityPos/100+"px"})},c.lightnessPosUpdate=function(){b(function(){var a=d[0].querySelector(".color-picker-grid"),b=angular.element(d[0].querySelector(".color-picker-grid .color-picker-picker")),e=a.getBoundingClientRect();b.css({top:e.height*c.lightnessPos/100+"px"})})},c.saturationPosUpdate=function(){b(function(){var a=d[0].querySelector(".color-picker-grid"),b=angular.element(d[0].querySelector(".color-picker-grid .color-picker-picker")),e=a.getBoundingClientRect();b.css({left:e.width*c.saturationPos/100+"px"})})},c.gridUpdate=function(){var a=angular.element(d[0].querySelector(".color-picker-grid"));a.css({"background-color":c.grid})},
+c.$watch("swatchColor",function(){c.updateSwatchBackground()}),c.huePosUpdate=function(){b(function(){var a=d[0].querySelector(".color-picker-hue"),b=angular.element(d[0].querySelector(".color-picker-hue .color-picker-slider")),e=a.getBoundingClientRect();b.css({top:e.height*c.huePos/100+"px"})})},c.opacityPosUpdate=function(){b(function(){var a=d[0].querySelector(".color-picker-opacity"),b=angular.element(d[0].querySelector(".color-picker-opacity .color-picker-slider")),e=a.getBoundingClientRect();b.css({top:e.height*c.opacityPos/100+"px"})})},c.lightnessPosUpdate=function(){b(function(){var a=d[0].querySelector(".color-picker-grid"),b=angular.element(d[0].querySelector(".color-picker-grid .color-picker-picker")),e=a.getBoundingClientRect();b.css({top:e.height*c.lightnessPos/100+"px"})})},c.saturationPosUpdate=function(){b(function(){var a=d[0].querySelector(".color-picker-grid"),b=angular.element(d[0].querySelector(".color-picker-grid .color-picker-picker")),e=a.getBoundingClientRect();b.css({left:e.width*c.saturationPos/100+"px"})})},c.gridUpdate=function(){var a=angular.element(d[0].querySelector(".color-picker-grid"));a.css({"background-color":c.grid})},
 //---------------------------
@@ -36,0 +36,0 @@ // HUE

examples/app-preset-hex.js

 angular
     .module('app', ['color.picker'])
-    .controller('AppCtrl', function($scope) {
-        $scope.formatOptions = [{label: 'HSL', value: 'hsl'}, {label: 'HSV', value: 'hsv'}, {label: 'RGB', value: 'rgb'}, {label: 'HEX', value: 'hex'}, {label: 'HEX8', value: 'hex8'}];
-        $scope.boolOptions = [{label: 'Yes', value: true}, {label: 'No', value: false}];
-        $scope.swatchPosOptions = [{label: 'Left', value: 'left'}, {label: 'Right', value: 'right'}];
-        $scope.posOptions = [{label: 'Bottom Left', value: 'bottom left'}, {label: 'Top Left', value: 'top left'}, {label: 'Bottom Right', value: 'bottom right'}, {label: 'Top Right', value: 'top right'}];
-        $scope.caseOptions = [{label: 'Upper Case', value: 'upper'}, {label: 'Lower Case', value: 'lower'}];
+    .controller('AppCtrl', function($scope, $timeout) {
+        $timeout(function() {
+            $scope.color = '#0000aa';
+        });
 
-        $scope.color = '#294EBC';
-        $scope.format= 'hex';
-
         $scope.$watch('color', function(newValue, oldValue) {
@@ -14,0 +9,0 @@ // console.log(newValue, oldValue);

lib/scripts/directive.js

@@ -190,5 +190,7 @@ (function() {
 
-                    // force the grid selection circle to redraw and fix its position
+                    // force the sliders to re-caculate their position
+                    $scope.hueUpdate();
                     $scope.saturationUpdate();
                     $scope.lightnessUpdate();
+                    $scope.opacityUpdate();
                 };
@@ -369,8 +371,10 @@
                 $scope.huePosUpdate = function() {
-                    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();
+                    $timeout(function() {
+                        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': (bounding.height * $scope.huePos / 100) + 'px',
+                        el.css({
+                            'top': (bounding.height * $scope.huePos / 100) + 'px',
+                        });
                     });
@@ -380,8 +384,10 @@ };
                 $scope.opacityPosUpdate = function() {
-                    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();
+                    $timeout(function() {
+                        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': (bounding.height * $scope.opacityPos / 100) + 'px',
+                        el.css({
+                            'top': (bounding.height * $scope.opacityPos / 100) + 'px',
+                        });
                     });
@@ -388,0 +394,0 @@ };

package.json

 {
   "name": "angularjs-color-picker",
   "description": "Color Picker Directive For AngularJS",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "license": "MIT",
@@ -6,0 +6,0 @@ "main": "dist/angularjs-color-picker.min.js",

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

Lines of code

2270

increased by0.35%

Worsened metrics

Total package byte prevSize

458967

decreased by-0.96%

No dependency changes