Skip to content

Commit a135380

Browse files
ruhleyruhley
committed
Feature #125 add show/hide control
1 parent 569a7e1 commit a135380

File tree

5 files changed

+101
-27
lines changed

5 files changed

+101
-27
lines changed

‎README.md‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -71,24 +71,39 @@ $scope.color = '#FF0000';
7171

7272
// options - if a list is given then choose one of the items. The first item in the list will be the default
7373
$scope.options = {
74+
// html attributes
7475
required: [false, true],
7576
disabled: [false, true],
76-
round: [false, true],
77+
placeholder: '',
78+
id: undefined,
79+
name: undefined,
80+
// color
7781
format: ['hsl', 'hsv', 'rgb', 'hex', 'hex8'],
7882
hue: [true, false],
7983
saturation: [false, true],
80-
lightness: [false, true], // Note: In the square mode this is HSV instead of HSL
84+
lightness: [false, true], // Note: In the square mode this is HSV and in round mode this is HSL
8185
alpha: [true, false],
86+
case: ['upper', 'lower'],
87+
// swatch
8288
swatch: [true, false],
8389
swatchPos: ['left', 'right'],
8490
swatchBootstrap: [true, false],
8591
swatchOnly: [true, false],
92+
// popup
93+
round: [false, true],
8694
pos: ['bottom left', 'bottom right', 'top left', 'top right'],
87-
case: ['upper', 'lower'],
8895
inline: [false, true],
89-
placeholder: '',
90-
id: undefined,
91-
name: undefined,
96+
// show/hide
97+
show: {
98+
swatch: [true, false],
99+
focus: [true, false],
100+
},
101+
hide: {
102+
blur: [true, false],
103+
escape: [true, false],
104+
click: [true, false],
105+
},
106+
// buttons
92107
close: {
93108
show: [false, true],
94109
label: 'Close',

‎examples/01-simple.html‎

Lines changed: 53 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,8 @@
1616
<h1>AngularJS Color Picker</h1>
1717
<p>An AngularJS directive for a color picker. No requirement on jQuery.</p>
1818
<form class="col-sm-12">
19-
<div class="row">
20-
<label class="control-label">Required (required)</label>
21-
<select ng-model="options.required" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
22-
</div>
2319

24-
<div class="row">
25-
<label class="control-label">Disabled (disabled)</label>
26-
<select ng-model="options.disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
27-
</div>
20+
<h3>Color</h3>
2821

2922
<div class="row">
3023
<label class="control-label">Format (format)</label>
@@ -51,6 +44,13 @@ <h1>AngularJS Color Picker</h1>
5144
<select ng-model="options.alpha" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
5245
</div>
5346

47+
<div class="row">
48+
<label class="control-label">Case (case) - The case of hex colors - 'upper', 'lower'</label>
49+
<select ng-model="options.case" class="form-control" ng-options="option.value as option.label for option in caseOptions"></select>
50+
</div>
51+
52+
<h3>Swatch</h3>
53+
5454
<div class="row">
5555
<label class="control-label">Swatch (swatch) - whether or not to display the swatch inside the input field</label>
5656
<select ng-model="options.swatch" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
@@ -71,16 +71,13 @@ <h1>AngularJS Color Picker</h1>
7171
<select ng-model="options.swatchBootstrap" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
7272
</div>
7373

74+
<h3>Popup</h3>
75+
7476
<div class="row">
7577
<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>
7678
<select ng-model="options.pos" class="form-control" ng-options="option.value as option.label for option in posOptions"></select>
7779
</div>
7880

79-
<div class="row">
80-
<label class="control-label">Case (case) - The case of hex colors - 'upper', 'lower'</label>
81-
<select ng-model="options.case" class="form-control" ng-options="option.value as option.label for option in caseOptions"></select>
82-
</div>
83-
8481
<div class="row">
8582
<label class="control-label">Inline (inline) - whether or not to display inline or in a popup - false, true</label>
8683
<select ng-model="options.inline" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
@@ -91,6 +88,18 @@ <h1>AngularJS Color Picker</h1>
9188
<select ng-model="options.round" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
9289
</div>
9390

91+
<h3>Attributes</h3>
92+
93+
<div class="row">
94+
<label class="control-label">Required (required)</label>
95+
<select ng-model="options.required" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
96+
</div>
97+
98+
<div class="row">
99+
<label class="control-label">Disabled (disabled)</label>
100+
<select ng-model="options.disabled" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
101+
</div>
102+
94103
<div class="row">
95104
<label class="control-label">Placeholder (placeholder)</label>
96105
<input type="text" ng-model="options.placeholder" placeholder="Placeholder" class="form-control" />
@@ -106,6 +115,35 @@ <h1>AngularJS Color Picker</h1>
106115
<input type="text" ng-model="options.name" placeholder="Name" class="form-control" />
107116
</div>
108117

118+
<h3>Show/Hide</h3>
119+
120+
<div class="row">
121+
<label class="control-label">Show Swatch (show.swatch) - whether or not to open when clicking the swatch - true, false</label>
122+
<select ng-model="options.show.swatch" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
123+
</div>
124+
125+
<div class="row">
126+
<label class="control-label">Show Focus (show.focus) - whether or not to open when focusing on the input - true, false</label>
127+
<select ng-model="options.show.focus" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
128+
</div>
129+
130+
<div class="row">
131+
<label class="control-label">Hide Blur (hide.blur) - whether or not to close when losing focus on the input - true, false</label>
132+
<select ng-model="options.hide.blur" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
133+
</div>
134+
135+
<div class="row">
136+
<label class="control-label">Hide Escape (hide.escape) - whether or not to close when pressing the escape key - true, false</label>
137+
<select ng-model="options.hide.escape" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
138+
</div>
139+
140+
<div class="row">
141+
<label class="control-label">Hide Click (hide.click) - whether or not to close when clicking outside the color picker - true, false</label>
142+
<select ng-model="options.hide.click" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
143+
</div>
144+
145+
<h3>Buttons</h3>
146+
109147
<div class="row">
110148
<label class="control-label">Close Visible (close.show) - whether or not to display the close button - false, true</label>
111149
<select ng-model="options.close.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
@@ -151,6 +189,8 @@ <h1>AngularJS Color Picker</h1>
151189
<input type="text" ng-model="options.reset.class" placeholder="Class" class="form-control" />
152190
</div>
153191

192+
<h3>Examples</h3>
193+
154194
<div class="row">
155195
<label class="control-label">Color</label>
156196
<button ng-click="open()">Show</button>

‎src/scripts/controller.js‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -328,7 +328,9 @@ export default class AngularColorPickerController {
328328
// no current mouse events and not an element in the picker
329329
if (!this.colorMouse && !this.hueMouse && !this.opacityMouse && this.find(event.target).length === 0) {
330330
this.setupApi(); // TODO - there are some weird times when this is needed to call close. Need to figure out why.
331-
this.api.close(event);
331+
if (this.options.hide.click) {
332+
this.api.close(event);
333+
}
332334
this.$scope.$apply();
333335
// mouse event on color grid
334336
} else if (this.colorMouse && this.has_moused_moved) {
@@ -389,7 +391,7 @@ export default class AngularColorPickerController {
389391

390392
onKeyUp (event) {
391393
// escape key
392-
if (event.keyCode === 27) {
394+
if (this.options.hide.escape && event.keyCode === 27) {
393395
this.api.close(event);
394396
}
395397
}
@@ -459,7 +461,7 @@ export default class AngularColorPickerController {
459461
this.eventApiDispatch('onBlur', [event]);
460462

461463
// if clicking outside the color picker
462-
if (this.find(event.relatedTarget).length === 0) {
464+
if (this.options.hide.blur && this.find(event.relatedTarget).length === 0) {
463465
this.api.close(event);
464466
}
465467
}
@@ -496,8 +498,16 @@ export default class AngularColorPickerController {
496498
}
497499
}
498500

499-
focus () {
500-
this.find('.color-picker-input')[0].focus();
501+
onSwatchClick ($event) {
502+
if (this.options.show.swatch) {
503+
this.api.open($event);
504+
}
505+
}
506+
507+
onFocus ($event) {
508+
if (this.options.show.focus) {
509+
this.api.open($event);
510+
}
501511
}
502512

503513
update () {

‎src/scripts/options-service.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,15 @@ export default class AngularColorPickerOptions {
1919
placeholder: '',
2020
id: undefined,
2121
name: undefined,
22+
show: {
23+
swatch: true,
24+
focus: true,
25+
},
26+
hide: {
27+
blur: true,
28+
escape: true,
29+
click: true,
30+
},
2231
close: {
2332
show: false,
2433
label: 'Close',

‎src/scripts/template.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ export default function template($templateCache) {
77
'\'color-picker-closed\': !AngularColorPickerController.is_open,' +
88
'}">' +
99
' <div class="color-picker-input-wrapper" ng-class="{\'input-group\': AngularColorPickerController.options.swatchBootstrap && AngularColorPickerController.options.swatch}">' +
10-
' <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>' +
11-
' <input ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" 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}}" ng-required="AngularColorPickerController.options.required">' +
12-
' <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>' +
10+
' <span ng-if="AngularColorPickerController.options.swatchPos === \'left\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" 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>' +
11+
' <input ng-attr-id="{{AngularColorPickerController.options.id}}" ng-attr-name="{{AngularColorPickerController.options.name}}" 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.onFocus($event)" ng-class="{\'color-picker-input-swatch\': AngularColorPickerController.options.swatch && !AngularColorPickerController.options.swatchOnly && AngularColorPickerController.options.swatchPos === \'left\'}" placeholder="{{AngularColorPickerController.options.placeholder}}" ng-required="AngularColorPickerController.options.required">' +
12+
' <span ng-if="AngularColorPickerController.options.swatchPos === \'right\'" class="color-picker-swatch" ng-click="AngularColorPickerController.onSwatchClick($event)" 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>' +
1313
' </div>' +
1414
' <div class="color-picker-panel" ng-class="{' +
1515
' \'color-picker-panel-top color-picker-panel-right\': AngularColorPickerController.options.pos === \'top right\',' +

0 commit comments

Comments
 (0)