Bumping to v2.3.0

ruhley · ruhley · commit 8d846dbf6a54 · 2016-07-29T09:30:58.000+10:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog
 
+## v2.3.0
+
+#### Breaking Changes
+  * None
+
+#### New Features
+  * New `round` option to show a round color picker
+
+#### Bug Fixes
+  * None
+
 ## v2.2.0
 
 #### Breaking Changes
diff --git a/README.md b/README.md
@@ -72,6 +72,7 @@ $scope.color = '#FF0000';
 // options - if a list is given then choose one of the items. The first item in the list will be the default
 $scope.options = {
     disabled: [false, true],
+    round: [false, true],
     format: ['hsl', 'hsv', 'rgb', 'hex', 'hex8'],
     hue: [true, false],
     alpha: [true, false],
diff --git a/bower.json b/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "angular-color-picker",
   "description": "Color Picker Directive For AngularJS",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "homepage": "https://github.com/ruhley/angular-color-picker",
   "repository": {
     "type": "git",
diff --git a/dist/angularjs-color-picker.css b/dist/angularjs-color-picker.css
diff --git a/dist/angularjs-color-picker.js b/dist/angularjs-color-picker.js
@@ -1,10 +1,10 @@
 /*!
- * angularjs-color-picker v2.1.7
+ * angularjs-color-picker v2.3.0
  * https://github.com/ruhley/angular-color-picker/
  *
  * Copyright 2016 ruhley
  *
- * 2016-07-26 12:23:44
+ * 2016-07-29 09:30:27
  *
  */
 
@@ -239,7 +239,7 @@
 
               this.$scope.$watchGroup(['AngularColorPickerController.options.format', 'AngularColorPickerController.options.alpha', 'AngularColorPickerController.options.case'], this.reInitAndUpdate.bind(this));
 
-              this.$scope.$watchGroup(['AngularColorPickerController.options.disabled', 'AngularColorPickerController.options.swatchBootstrap', 'AngularColorPickerController.options.swatchOnly', 'AngularColorPickerController.options.swatch', 'AngularColorPickerController.options.pos', 'AngularColorPickerController.options.inline', 'AngularColorPickerController.options.placeholder'], this.reInit.bind(this));
+              this.$scope.$watchGroup(['AngularColorPickerController.options.disabled', 'AngularColorPickerController.options.swatchBootstrap', 'AngularColorPickerController.options.swatchOnly', 'AngularColorPickerController.options.swatch', 'AngularColorPickerController.options.pos', 'AngularColorPickerController.options.inline', 'AngularColorPickerController.options.placeholder', 'AngularColorPickerController.options.round'], this.reInit.bind(this));
 
               // api
 
@@ -447,6 +447,10 @@
               });
 
               this.visible = this.options.inline;
+
+              if (this.options.round) {
+                  this.options.hue = false;
+              }
           }
       }, {
           key: 'merge',
@@ -579,9 +583,11 @@
                   var el = angular.element(_this7.$element[0].querySelector('.color-picker-grid .color-picker-picker'));
                   var bounding = container.getBoundingClientRect();
 
-                  el.css({
-                      'top': bounding.height * _this7.lightnessPos / 100 + 'px'
-                  });
+                  if (!_this7.options.round) {
+                      el.css({
+                          'top': bounding.height * _this7.lightnessPos / 100 + 'px'
+                      });
+                  }
               });
           }
       }, {
@@ -609,7 +615,6 @@
       }, {
           key: 'gridUpdate',
           value: function gridUpdate() {
-              if (!this.options.updateBackgroundColor) return;
               var el = angular.element(this.$element[0].querySelector('.color-picker-grid'));
 
               el.css({
@@ -761,7 +766,9 @@
 
                   this.saturation = 100 * tmpSaturation;
                   var degHue = tmpHue * 57.29577951308233; // rad to deg
-                  if (degHue < 0.0) degHue += 360.0;
+                  if (degHue < 0.0) {
+                      degHue += 360.0;
+                  }
                   this.hue = degHue;
                   this.lightness = 100;
               } else {
@@ -792,6 +799,21 @@
 
                       this.xPos = (px + 100.0) * 0.5;
                       this.yPos = (py + 100.0) * 0.5;
+
+                      // because we are using percentages this can be half of 100%
+                      var center = 50;
+                      // distance of pointer from the center of the circle
+                      var distance = Math.pow(center - this.xPos, 2) + Math.pow(center - this.yPos, 2);
+                      // distance of edge of circle from the center of the circle
+                      var radius = Math.pow(center, 2);
+
+                      // if not inside the circle
+                      if (distance > radius) {
+                          var rads = Math.atan2(this.yPos - center, this.xPos - center);
+
+                          this.xPos = Math.cos(rads) * center + center;
+                          this.yPos = Math.sin(rads) * center + center;
+                      }
                   } else {
                       this.saturationPos = this.saturation / 100 * 100;
 
@@ -946,8 +968,9 @@
   }
 
   function template($templateCache) {
-    $templateCache.put('template/color-picker/directive.html', '<div class="color-picker-wrapper" ng-class="{' + '\'color-picker-disabled\': AngularColorPickerController.options.disabled,' + '\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,' + '}">' + '   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">' + '       <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' + '       <input class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}">' + '       <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' + '   </div>' + '   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{' + '       \'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',' + '       \'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',' + '       \'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',' + '       \'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',' + '       \'color-picker-panel-round\': AngularColorPickerController.options.round,' + '       \'color-picker-show-hue\': AngularColorPickerController.options.hue,' + '       \'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',' + '       \'color-picker-show-inline\': AngularColorPickerController.options.inline,' + '   }">' + '       <div class="color-picker-grid-wrapper">' + '           <div class="color-picker-row">' + '               <div class="color-picker-grid color-picker-sprite">' + '                   <div class="color-picker-grid-inner"></div>' + '                   <div class="color-picker-picker">' + '                       <div></div>' + '                   </div>' + '               </div>' + '               <div class="color-picker-hue color-picker-sprite" ng-show="AngularColorPickerController.options.hue">' + '                   <div class="color-picker-slider"></div>' + '               </div>' + '               <div class="color-picker-opacity color-picker-sprite" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">' + '                   <div class="color-picker-slider"></div>' + '               </div>' + '           </div>' + '       </div>' + '       <div class="color-picker-actions">' + '           <button ' + '               class="color-picker-action color-picker-action-clear"' + '               ng-class="AngularColorPickerController.options.clear.class"' + '               ng-show="AngularColorPickerController.options.clear.show"' + '               ng-click="AngularColorPickerController.api.clear($event)"' + '           >' + '               {{AngularColorPickerController.options.clear.label}}' + '           </button><!--' + '           --><button ' + '               class="color-picker-action color-picker-action-reset"' + '               ng-class="AngularColorPickerController.options.reset.class"' + '               ng-show="AngularColorPickerController.options.reset.show"' + '               ng-click="AngularColorPickerController.api.reset($event)"' + '           >' + '               {{AngularColorPickerController.options.reset.label}}' + '           </button><!--' + '           --><button' + '               class="color-picker-action color-picker-action-close"' + '               ng-class="AngularColorPickerController.options.close.class"' + '               ng-show="AngularColorPickerController.options.close.show"' + '               ng-click="AngularColorPickerController.api.close($event)"' + '           >' + '               {{AngularColorPickerController.options.close.label}}' + '           </button>' + '       </div>' + '   </div>' + '</div>');
-  };
+      $templateCache.put('template/color-picker/directive.html', '<div class="color-picker-wrapper" ng-class="{' + '\'color-picker-disabled\': AngularColorPickerController.options.disabled,' + '\'color-picker-swatch-only\': AngularColorPickerController.options.swatchOnly,' + '}">' + '   <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">' + '       <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' + '       <input class="color-picker-input form-control" type="text" ng-model="AngularColorPickerController.ngModel" ng-readonly="AngularColorPickerController.options.swatchOnly" ng-disabled="AngularColorPickerController.options.disabled" ng-blur="AngularColorPickerController.onBlur($event)" ng-change="AngularColorPickerController.onChange($event)" size="7" ng-focus="AngularColorPickerController.api.open($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}">' + '       <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.focus()" ng-show="AngularColorPickerController.options.swatch" ng-class="{\'color-picker-swatch-left\': AngularColorPickerController.options.swatchPos !== \'right\', \'color-picker-swatch-right\': AngularColorPickerController.options.swatchPos === \'right\', \'input-group-addon\': AngularColorPickerController.options.swatchBootstrap}"></span>' + '   </div>' + '   <div class="color-picker-panel" ng-show="AngularColorPickerController.visible" ng-class="{' + '       \'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',' + '       \'color-picker-panel-top color-picker-panel-left\': AngularColorPickerController.options.pos === \'top left\',' + '       \'color-picker-panel-bottom color-picker-panel-right\': AngularColorPickerController.options.pos === \'bottom right\',' + '       \'color-picker-panel-bottom color-picker-panel-left\': AngularColorPickerController.options.pos === \'bottom left\',' + '       \'color-picker-panel-round\': AngularColorPickerController.options.round,' + '       \'color-picker-show-hue\': AngularColorPickerController.options.hue,' + '       \'color-picker-show-alpha\': AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\',' + '       \'color-picker-show-inline\': AngularColorPickerController.options.inline,' + '   }">' + '       <div class="color-picker-grid-wrapper">' + '           <div class="color-picker-row">' + '               <div class="color-picker-grid color-picker-sprite">' + '                   <div class="color-picker-grid-inner"></div>' + '                   <div class="color-picker-picker">' + '                       <div></div>' + '                   </div>' + '               </div>' + '               <div class="color-picker-hue color-picker-sprite" ng-show="AngularColorPickerController.options.hue">' + '                   <div class="color-picker-slider"></div>' + '               </div>' + '               <div class="color-picker-opacity color-picker-sprite" ng-show="AngularColorPickerController.options.alpha && AngularColorPickerController.options.format !== \'hex\'">' + '                   <div class="color-picker-slider"></div>' + '               </div>' + '           </div>' + '       </div>' + '       <div class="color-picker-actions">' + '           <button ' + '               class="color-picker-action color-picker-action-clear"' + '               ng-class="AngularColorPickerController.options.clear.class"' + '               ng-show="AngularColorPickerController.options.clear.show"' + '               ng-click="AngularColorPickerController.api.clear($event)"' + '           >' + '               {{AngularColorPickerController.options.clear.label}}' + '           </button><!--' + '           --><button ' + '               class="color-picker-action color-picker-action-reset"' + '               ng-class="AngularColorPickerController.options.reset.class"' + '               ng-show="AngularColorPickerController.options.reset.show"' + '               ng-click="AngularColorPickerController.api.reset($event)"' + '           >' + '               {{AngularColorPickerController.options.reset.label}}' + '           </button><!--' + '           --><button' + '               class="color-picker-action color-picker-action-close"' + '               ng-class="AngularColorPickerController.options.close.class"' + '               ng-show="AngularColorPickerController.options.close.show"' + '               ng-click="AngularColorPickerController.api.close($event)"' + '           >' + '               {{AngularColorPickerController.options.close.label}}' + '           </button>' + '       </div>' + '   </div>' + '</div>');
+  }
+
   template.$inject = ['$templateCache'];
 
   var colorPicker = angular.module('color.picker', []).directive('colorPicker', colorPickerDirective).run(template);
diff --git a/dist/angularjs-color-picker.min.css b/dist/angularjs-color-picker.min.css
diff --git a/dist/angularjs-color-picker.min.js b/dist/angularjs-color-picker.min.js
diff --git a/dist/themes/angularjs-color-picker-bootstrap.css b/dist/themes/angularjs-color-picker-bootstrap.css
@@ -1,10 +1,10 @@
 /*!
- * angularjs-color-picker v2.1.7
+ * angularjs-color-picker v2.3.0
  * https://github.com/ruhley/angular-color-picker/
  *
  * Copyright 2016 ruhley
  *
- * 2016-07-26 12:23:44
+ * 2016-07-29 09:30:30
  *
  */
 .color-picker-wrapper .color-picker-input-wrapper {
diff --git a/dist/themes/angularjs-color-picker-bootstrap.min.css b/dist/themes/angularjs-color-picker-bootstrap.min.css
@@ -1,9 +1,9 @@
 /*!
- * angularjs-color-picker v2.1.7
+ * angularjs-color-picker v2.3.0
  * https://github.com/ruhley/angular-color-picker/
  *
  * Copyright 2016 ruhley
  *
- * 2016-07-26 12:23:44
+ * 2016-07-29 09:30:30
  *
  */.color-picker-wrapper .color-picker-input-wrapper{width:100%}.color-picker-wrapper .color-picker-swatch:not(.input-group-addon){height:28px}.color-picker-wrapper.color-picker-swatch-only .input-group .input-group-addon{border-radius:4px}
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "angularjs-color-picker",
   "description": "Color Picker Directive For AngularJS",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "license": "MIT",
   "main": "dist/angularjs-color-picker.min.js",
   "dependencies": {

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "angular-color-picker",`
`3`	`3`	`"description": "Color Picker Directive For AngularJS",`
`4`		`- "version": "2.2.0",`
	`4`	`+ "version": "2.3.0",`
`5`	`5`	`"homepage": "https://github.com/ruhley/angular-color-picker",`
`6`	`6`	`"repository": {`
`7`	`7`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -1,10 +1,10 @@`
`1`	`1`	`/*!`
`2`		`- * angularjs-color-picker v2.1.7`
	`2`	`+ * angularjs-color-picker v2.3.0`
`3`	`3`	`* https://github.com/ruhley/angular-color-picker/`
`4`	`4`	`*`
`5`	`5`	`* Copyright 2016 ruhley`
`6`	`6`	`*`
`7`		`- * 2016-07-26 12:23:44`
	`7`	`+ * 2016-07-29 09:30:30`
`8`	`8`	`*`
`9`	`9`	`*/`
`10`	`10`	`.color-picker-wrapper .color-picker-input-wrapper {`
Original file line number	Diff line number	Diff line change
`@@ -1,9 +1,9 @@`
`1`	`1`	`/*!`
`2`		`- * angularjs-color-picker v2.1.7`
	`2`	`+ * angularjs-color-picker v2.3.0`
`3`	`3`	`* https://github.com/ruhley/angular-color-picker/`
`4`	`4`	`*`
`5`	`5`	`* Copyright 2016 ruhley`
`6`	`6`	`*`
`7`		`- * 2016-07-26 12:23:44`
	`7`	`+ * 2016-07-29 09:30:30`
`8`	`8`	`*`
`9`	`9`	`*/.color-picker-wrapper .color-picker-input-wrapper{width:100%}.color-picker-wrapper .color-picker-swatch:not(.input-group-addon){height:28px}.color-picker-wrapper.color-picker-swatch-only .input-group .input-group-addon{border-radius:4px}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "angularjs-color-picker",`
`3`	`3`	`"description": "Color Picker Directive For AngularJS",`
`4`		`- "version": "2.2.0",`
	`4`	`+ "version": "2.3.0",`
`5`	`5`	`"license": "MIT",`
`6`	`6`	`"main": "dist/angularjs-color-picker.min.js",`
`7`	`7`	`"dependencies": {`