Skip to content

Commit 26a017b

Browse files
ruhleyruhley
committed
[NEW FEATURE] Swatch Bootstrap option
1 parent 2598d6b commit 26a017b

File tree

5 files changed

+223
-164
lines changed

5 files changed

+223
-164
lines changed

‎examples/01-simple.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@ <h1>AngularJS Color Picker</h1>
4343
<select ng-model="swatchPos" class="form-control" ng-options="option.value as option.label for option in swatchPosOptions"></select>
4444
</div>
4545

46+
<div class="row">
47+
<label class="control-label">Swatch Bootstrap Add On (swatch-bootstrap) - whether or not the swatch should appear as a bootstrap add on</label>
48+
<select ng-model="swatchBootstrap" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
49+
</div>
50+
4651
<div class="row">
4752
<label class="control-label">Position (pos) - the position of the picker control in relation to the input field - 'bottom left', 'bottom right', 'top left', 'top right'</label>
4853
<select ng-model="pos" class="form-control" ng-options="option.value as option.label for option in posOptions"></select>
@@ -61,6 +66,7 @@ <h1>AngularJS Color Picker</h1>
6166
color-picker-alpha="alpha"
6267
color-picker-swatch="swatch"
6368
color-picker-swatch-pos="swatchPos"
69+
color-picker-swatch-bootstrap="swatchBootstrap"
6470
color-picker-pos="pos"
6571
color-picker-case="case"
6672
color-picker-swatch-only="swatchOnly">

‎examples/02-testing-lib.html‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,11 @@ <h1>AngularJS Color Picker</h1>
4646
<select ng-model="swatchPos" class="form-control" ng-options="option.value as option.label for option in swatchPosOptions"></select>
4747
</div>
4848

49+
<div class="row">
50+
<label class="control-label">Swatch Bootstrap Add On (swatch-bootstrap) - whether or not the swatch should appear as a bootstrap add on</label>
51+
<select ng-model="swatchBootstrap" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
52+
</div>
53+
4954
<div class="row">
5055
<label class="control-label">Position (pos) - the position of the picker control in relation to the input field - 'bottom left', 'bottom right', 'top left', 'top right'</label>
5156
<select ng-model="pos" class="form-control" ng-options="option.value as option.label for option in posOptions"></select>
@@ -64,6 +69,7 @@ <h1>AngularJS Color Picker</h1>
6469
color-picker-alpha="alpha"
6570
color-picker-swatch="swatch"
6671
color-picker-swatch-pos="swatchPos"
72+
color-picker-swatch-bootstrap="swatchBootstrap"
6773
color-picker-pos="pos"
6874
color-picker-case="case"
6975
color-picker-swatch-only="swatchOnly">
@@ -72,7 +78,7 @@ <h1>AngularJS Color Picker</h1>
7278

7379
<div class="row">
7480
Two Way Binding
75-
<color-picker ng-model="color"></color-picker>
81+
<!-- <color-picker ng-model="color"></color-picker> -->
7682
{{color}}
7783
</div>
7884

‎lib/scripts/directive.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
colorPickerSwatch: '=',
1515
colorPickerSwatchOnly: '=',
1616
colorPickerSwatchPos: '=',
17+
colorPickerSwatchBootstrap: '='
1718
},
1819
templateUrl: 'template/color-picker/directive.html',
1920
link: function ($scope, element, attrs, control) {
@@ -51,6 +52,7 @@
5152
$scope.config.swatch = $scope.colorPickerSwatch === undefined ? true : $scope.colorPickerSwatch;
5253
$scope.config.swatchOnly = $scope.colorPickerSwatchOnly === undefined ? false : $scope.colorPickerSwatchOnly;
5354
$scope.config.swatchPos = $scope.colorPickerSwatchPos === undefined ? 'left' : $scope.colorPickerSwatchPos;
55+
$scope.config.swatchBootstrap = $scope.colorPickerSwatchBootstrap === undefined ? true : $scope.colorPickerSwatchBootstrap;
5456
$scope.log('Color Picker: Config', $scope.config);
5557
};
5658

@@ -190,7 +192,7 @@
190192
);
191193

192194
$scope.$watchGroup(
193-
['colorPickerSwatchPos', 'colorPickerSwatchOnly', 'colorPickerSwatch', 'colorPickerPos'],
195+
['colorPickerSwatchPos', 'colorPickerSwatchBootstrap', 'colorPickerSwatchOnly', 'colorPickerSwatch', 'colorPickerPos'],
194196
function (newValue, oldValue) {
195197
if (newValue !== undefined) {
196198
$scope.initConfig();

‎lib/scripts/template.js‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,35 @@
11
angular.module('color.picker').run(['$templateCache', function($templateCache) {
2-
$templateCache.put('template/color-picker/directive.html',
3-
'<div class="color-picker-wrapper" ng-class="{\'color-picker-swatch-only\': config.swatchOnly}">\n' +
4-
' <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' +
5-
' <span 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\'}">\n' +
6-
' <span class="color-picker-swatch-color" style="background-color: {{swatchColor}};"></span>\n' +
7-
' </span>\n' +
8-
' <div class="color-picker-panel" ng-show="visible" ng-class="{\n' +
9-
' \'color-picker-panel-top color-picker-panel-right\': config.pos === \'top right\',\n' +
10-
' \'color-picker-panel-top color-picker-panel-left\': config.pos === \'top left\',\n' +
11-
' \'color-picker-panel-bottom color-picker-panel-right\': config.pos === \'bottom right\',\n' +
12-
' \'color-picker-panel-bottom color-picker-panel-left\': config.pos === \'bottom left\',\n' +
13-
' }">\n' +
14-
' <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' +
15-
' <div class="color-picker-slider" style="top: {{huePos}}%;"></div>\n' +
16-
' </div>\n' +
17-
' <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' +
18-
' <div class="color-picker-slider" style="top: {{opacityPos}}%;"></div>\n' +
19-
' </div>\n' +
20-
' <div class="color-picker-grid color-picker-sprite" style="background-color: {{grid}};" ng-click="colorChange($event, true)" ng-mousemove="colorChange($event, false)" ng-mousedown="colorDown()" ng-mouseup="colorUp()">\n' +
21-
' <div class="color-picker-grid-inner"></div>\n' +
22-
' <div class="color-picker-picker" style="top: {{lightnessPos}}%; left: {{saturationPos}}%;">\n' +
23-
' <div></div>\n' +
24-
' </div>\n' +
25-
' </div>\n' +
26-
' </div>\n' +
27-
'</div>' +
28-
'');
2+
$templateCache.put('template/color-picker/directive.html',
3+
'<div class="color-picker-wrapper" ng-class="{\'color-picker-swatch-only\': config.swatchOnly}">\n' +
4+
' <div ng-class="{\'input-group\': config.swatchBootstrap}">\n' +
5+
' <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}">\n' +
6+
' <span class="color-picker-swatch-color" style="background-color: {{swatchColor}};"></span>\n' +
7+
' </span>\n' +
8+
' <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' +
9+
' <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}">\n' +
10+
' <span class="color-picker-swatch-color" style="background-color: {{swatchColor}};"></span>\n' +
11+
' </span>\n' +
12+
' </div>\n' +
13+
' <div class="color-picker-panel" ng-show="visible" ng-class="{\n' +
14+
' \'color-picker-panel-top color-picker-panel-right\': config.pos === \'top right\',\n' +
15+
' \'color-picker-panel-top color-picker-panel-left\': config.pos === \'top left\',\n' +
16+
' \'color-picker-panel-bottom color-picker-panel-right\': config.pos === \'bottom right\',\n' +
17+
' \'color-picker-panel-bottom color-picker-panel-left\': config.pos === \'bottom left\',\n' +
18+
' }">\n' +
19+
' <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' +
20+
' <div class="color-picker-slider" style="top: {{huePos}}%;"></div>\n' +
21+
' </div>\n' +
22+
' <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' +
23+
' <div class="color-picker-slider" style="top: {{opacityPos}}%;"></div>\n' +
24+
' </div>\n' +
25+
' <div class="color-picker-grid color-picker-sprite" style="background-color: {{grid}};" ng-click="colorChange($event, true)" ng-mousemove="colorChange($event, false)" ng-mousedown="colorDown()" ng-mouseup="colorUp()">\n' +
26+
' <div class="color-picker-grid-inner"></div>\n' +
27+
' <div class="color-picker-picker" style="top: {{lightnessPos}}%; left: {{saturationPos}}%;">\n' +
28+
' <div></div>\n' +
29+
' </div>\n' +
30+
' </div>\n' +
31+
' </div>\n' +
32+
'</div>'
33+
);
34+
2935
}]);

‎lib/styles/angularjs-color-picker.less‎

Lines changed: 174 additions & 135 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)