New Feature - Disabled

Author: ruhley

examples/01-simple.html

@@ -16,6 +16,11 @@
             <h1>AngularJS Color Picker</h1>
             <p>An AngularJS directive for a color picker. No requirement on jQuery.</p>
             <form class="col-sm-12">
+                <div class="row">
+                    <label class="control-label">Disabled (disabled)</label>
+                    <select ng-model="disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
+                </div>
+                
                 <div class="row">
                     <label class="control-label">Format (format)</label>
                     <select ng-model="format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
@@ -60,6 +65,7 @@ <h1>AngularJS Color Picker</h1>
                     <label class="control-label">Color</label>
                     <color-picker
                         ng-model="color"
+                        color-picker-disabled="disabled"
                         color-picker-format="format"
                         color-picker-alpha="alpha"
                         color-picker-swatch="swatch"

examples/02-testing-lib.html

@@ -19,6 +19,11 @@
             <h1>AngularJS Color Picker</h1>
             <p>An AngularJS directive for a color picker. No requirement on jQuery.</p>
             <form class="col-sm-12">
+                <div class="row">
+                    <label class="control-label">Disabled (disabled)</label>
+                    <select ng-model="disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
+                </div>
+
                 <div class="row">
                     <label class="control-label">Format (format)</label>
                     <select ng-model="format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
@@ -63,6 +68,7 @@ <h1>AngularJS Color Picker</h1>
                     <label class="control-label">Color</label>
                     <color-picker
                         ng-model="color"
+                        color-picker-disabled="disabled"
                         color-picker-format="format"
                         color-picker-alpha="alpha"
                         color-picker-swatch="swatch"

examples/03-testing-preset-value.html

@@ -19,6 +19,11 @@
             <h1>AngularJS Color Picker</h1>
             <p>An AngularJS directive for a color picker. No requirement on jQuery.</p>
             <form class="col-sm-12">
+                <div class="row">
+                    <label class="control-label">Disabled (disabled)</label>
+                    <select ng-model="disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
+                </div>
+                
                 <div class="row">
                     <label class="control-label">Format (format)</label>
                     <select ng-model="format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
@@ -63,6 +68,7 @@ <h1>AngularJS Color Picker</h1>
                     <label class="control-label">Color</label>
                     <color-picker
                         ng-model="color"
+                        color-picker-disabled="disabled"
                         color-picker-format="format"
                         color-picker-alpha="alpha"
                         color-picker-swatch="swatch"

examples/04-testing-lib-angularjs-1.3.html

@@ -19,6 +19,11 @@
             <h1>AngularJS Color Picker</h1>
             <p>An AngularJS directive for a color picker. No requirement on jQuery.</p>
             <form class="col-sm-12">
+                <div class="row">
+                    <label class="control-label">Disabled (disabled)</label>
+                    <select ng-model="disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
+                </div>
+                
                 <div class="row">
                     <label class="control-label">Format (format)</label>
                     <select ng-model="format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
@@ -63,6 +68,7 @@ <h1>AngularJS Color Picker</h1>
                     <label class="control-label">Color</label>
                     <color-picker
                         ng-model="color"
+                        color-picker-disabled="disabled"
                         color-picker-format="format"
                         color-picker-alpha="alpha"
                         color-picker-swatch="swatch"

examples/05-testing-bootstrap.html

@@ -22,6 +22,11 @@
             <h1>AngularJS Color Picker</h1>
             <p>An AngularJS directive for a color picker. No requirement on jQuery.</p>
             <form class="col-sm-12">
+                <div class="row">
+                    <label class="control-label">Disabled (disabled)</label>
+                    <select ng-model="disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
+                </div>
+                
                 <div class="row">
                     <label class="control-label">Format (format)</label>
                     <select ng-model="format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
@@ -66,6 +71,7 @@ <h1>AngularJS Color Picker</h1>
                     <label class="control-label">Color</label>
                     <color-picker
                         ng-model="color"
+                        color-picker-disabled="disabled"
                         color-picker-format="format"
                         color-picker-alpha="alpha"
                         color-picker-swatch="swatch"

lib/scripts/directive.js

@@ -7,6 +7,7 @@
             require: ['^ngModel'],
             scope: {
                 ngModel: '=',
+                colorPickerDisabled: '=',
                 colorPickerAlpha: '=',
                 colorPickerCase: '=',
                 colorPickerFormat: '=',
@@ -137,6 +138,7 @@
 
                 $scope.initConfig = function() {
                     $scope.config = {};
+                    $scope.config.disabled = $scope.colorPickerDisabled === undefined ? false : $scope.colorPickerDisabled;
                     $scope.config.alpha = $scope.colorPickerAlpha === undefined ? true : $scope.colorPickerAlpha;
                     $scope.config.case = $scope.colorPickerCase === undefined ? 'upper' : $scope.colorPickerCase;
                     $scope.config.format = $scope.colorPickerFormat === undefined ? 'hsl' : $scope.colorPickerFormat;
@@ -313,7 +315,7 @@
                 );
 
                 $scope.$watchGroup(
-                    ['colorPickerSwatchPos', 'colorPickerSwatchBootstrap', 'colorPickerSwatchOnly', 'colorPickerSwatch', 'colorPickerPos'],
+                    ['colorPickerDisabled', 'colorPickerSwatchPos', 'colorPickerSwatchBootstrap', 'colorPickerSwatchOnly', 'colorPickerSwatch', 'colorPickerPos'],
                     function (newValue, oldValue) {
                         if (newValue !== undefined) {
                             $scope.initConfig();

lib/scripts/template.js

@@ -3,7 +3,7 @@ angular.module('color.picker').run(['$templateCache', function($templateCache) {
         '<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-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-disabled="config.disabled" 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' +