Skip to content

Commit 3885d2e

Browse files
ruhleyruhley
committed
New hue, close, clear, and reset options and implementing touch events
1 parent 37da655 commit 3885d2e

File tree

5 files changed

+325
-117
lines changed

5 files changed

+325
-117
lines changed

‎examples/01-simple.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,11 @@ <h1>AngularJS Color Picker</h1>
2626
<select ng-model="options.format" class="form-control" ng-options="option.value as option.label for option in formatOptions"></select>
2727
</div>
2828

29+
<div class="row">
30+
<label class="control-label">Hue (hue) - whether or not to display the hue control</label>
31+
<select ng-model="options.hue" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
32+
</div>
33+
2934
<div class="row">
3035
<label class="control-label">Alpha (alpha) - whether or not to display the alpha control</label>
3136
<select ng-model="options.alpha" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
@@ -66,6 +71,51 @@ <h1>AngularJS Color Picker</h1>
6671
<select ng-model="options.inline" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
6772
</div>
6873

74+
<div class="row">
75+
<label class="control-label">Close Visible (close.show) - whether or not to display the close button - false, true</label>
76+
<select ng-model="options.close.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
77+
</div>
78+
79+
<div class="row">
80+
<label class="control-label">Close Label (close.label) - The label of the close button - "Close"</label>
81+
<input type="text" ng-model="options.close.label" placeholder="Close" class="form-control" />
82+
</div>
83+
84+
<div class="row">
85+
<label class="control-label">Close class (close.class) - The class of the close button - ""</label>
86+
<input type="text" ng-model="options.close.class" placeholder="Class" class="form-control" />
87+
</div>
88+
89+
<div class="row">
90+
<label class="control-label">Clear Visible (clear.show) - whether or not to display the clear button - false, true</label>
91+
<select ng-model="options.clear.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
92+
</div>
93+
94+
<div class="row">
95+
<label class="control-label">Clear Label (clear.label) - The label of the clear button - "Clear"</label>
96+
<input type="text" ng-model="options.clear.label" placeholder="Clear" class="form-control" />
97+
</div>
98+
99+
<div class="row">
100+
<label class="control-label">Clear class (clear.class) - The class of the clear button - ""</label>
101+
<input type="text" ng-model="options.clear.class" placeholder="Class" class="form-control" />
102+
</div>
103+
104+
<div class="row">
105+
<label class="control-label">Reset Visible (reset.show) - whether or not to display the reset button - false, true</label>
106+
<select ng-model="options.reset.show" class="form-control" ng-options="option.value as option.label for option in boolOptions"></select>
107+
</div>
108+
109+
<div class="row">
110+
<label class="control-label">Reset Label (reset.label) - The label of the reset button - "Reset"</label>
111+
<input type="text" ng-model="options.reset.label" placeholder="Reset" class="form-control" />
112+
</div>
113+
114+
<div class="row">
115+
<label class="control-label">Reset class (reset.class) - The class of the reset button - ""</label>
116+
<input type="text" ng-model="options.reset.class" placeholder="Class" class="form-control" />
117+
</div>
118+
69119
<div class="row">
70120
<label class="control-label">Color</label>
71121
<button ng-click="open()">Show</button>

‎examples/app.js‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,12 @@ angular
77
$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'}];
88
$scope.caseOptions = [{label: 'Upper Case', value: 'upper'}, {label: 'Lower Case', value: 'lower'}];
99

10-
$scope.options = {};
10+
$scope.color = 'hsl(0, 100%, 50%)';
11+
$scope.options = {
12+
close: {show: true},
13+
clear: {show: true},
14+
reset: {show: true},
15+
};
1116
$scope.api = {};
1217
$scope.eventApi = {
1318
onChange: function() {
@@ -22,6 +27,12 @@ angular
2227
onClose: function() {
2328
console.info('close', arguments);
2429
},
30+
onClear: function() {
31+
console.info('clear', arguments);
32+
},
33+
onReset: function() {
34+
console.info('reset', arguments);
35+
},
2536
onDestroy: function() {
2637
console.info('destroy', arguments);
2738
}

‎src/scripts/controller.js‎

Lines changed: 105 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,23 @@ export default class AngularColorPickerController {
1919
return;
2020
}
2121

22+
if (newValue !== undefined && oldValue !== undefined && !this.hasOwnProperty('initialNgModel')) {
23+
this.initialNgModel = newValue;
24+
}
25+
26+
// check dirty/pristine state
27+
if (this.hasOwnProperty('initialNgModel')) {
28+
if (newValue === this.initialNgModel) {
29+
if (typeof this.$scope.control[0].$setPristine === 'function') {
30+
this.$scope.control[0].$setPristine();
31+
}
32+
} else {
33+
if (typeof this.$scope.control[0].$setDirty === 'function') {
34+
this.$scope.control[0].$setDirty();
35+
}
36+
}
37+
}
38+
2239
if (newValue !== undefined && newValue !== null && newValue.length > 4) {
2340
var color = tinycolor(newValue);
2441

@@ -45,10 +62,6 @@ export default class AngularColorPickerController {
4562
}
4663

4764
this.$scope.control[0].$setValidity(this.$element.attr('name'), this.isValid);
48-
49-
if (newValue !== oldValue && oldValue !== undefined && typeof this.$scope.control[0].$setDirty === 'function') {
50-
this.$scope.control[0].$setDirty();
51-
}
5265
} else {
5366
if (newValue === null || newValue === '') {
5467
this.hue = 0;
@@ -100,12 +113,28 @@ export default class AngularColorPickerController {
100113
if (!this.options.inline && (this.visible || this.$element[0].querySelector('.color-picker-panel').offsetParent !== null)) {
101114

102115
this.visible = false;
103-
this.$scope.$apply();
116+
this.$scope.$applyAsync();
104117

105118
this.eventApiDispatch('onClose', [event]);
106119
}
107120
};
108121

122+
this.api.clear = (event) => {
123+
if (this.ngModel !== '') {
124+
this.ngModel = '';
125+
126+
this.eventApiDispatch('onClear', [event]);
127+
}
128+
};
129+
130+
this.api.reset = (event) => {
131+
if (this.ngModel !== this.initialNgModel) {
132+
this.ngModel = this.initialNgModel;
133+
134+
this.eventApiDispatch('onReset', [event]);
135+
}
136+
};
137+
109138
this.api.getElement = () => {
110139
return this.$element;
111140
};
@@ -192,6 +221,10 @@ export default class AngularColorPickerController {
192221
this.$document.off('mouseup', this.onMouseUp);
193222
this.$document.off('mousemove', this.onMouseMove);
194223

224+
this.$document.off('touchstart', this.onMouseDown);
225+
this.$document.off('touchend', this.onMouseUp);
226+
this.$document.off('touchmove', this.onMouseMove);
227+
195228
this.eventApiDispatch('onDestroy');
196229
});
197230

@@ -203,9 +236,22 @@ export default class AngularColorPickerController {
203236
this.$document.on('mouseup', this.onMouseUp.bind(this));
204237
this.$document.on('mousemove', this.onMouseMove.bind(this));
205238

239+
// setup touch events
240+
this.$document.on('touchstart', this.onMouseDown.bind(this));
241+
this.$document.on('touchend', this.onMouseUp.bind(this));
242+
this.$document.on('touchmove', this.onMouseMove.bind(this));
243+
244+
// grid click
206245
this.find('.color-picker-grid').on('click', this.onColorClick.bind(this));
246+
this.find('.color-picker-grid').on('touchend', this.onColorClick.bind(this));
247+
248+
// hue click
207249
this.find('.color-picker-hue').on('click', this.onHueClick.bind(this));
250+
this.find('.color-picker-hue').on('touchend', this.onHueClick.bind(this));
251+
252+
// opacity click
208253
this.find('.color-picker-opacity').on('click', this.onOpacityClick.bind(this));
254+
this.find('.color-picker-opacity').on('touchend', this.onOpacityClick.bind(this));
209255
}
210256

211257
onMouseDown (event) {
@@ -314,25 +360,64 @@ export default class AngularColorPickerController {
314360
}
315361

316362
initConfig () {
317-
if (!this.options) {
318-
this.options = {};
319-
}
320-
321-
this.options.disabled = this.options.disabled === undefined ? false : this.options.disabled;
322-
this.options.alpha = this.options.alpha === undefined ? true : this.options.alpha;
323-
this.options.case = this.options.case === undefined ? 'upper' : this.options.case;
324-
this.options.format = this.options.format === undefined ? 'hsl' : this.options.format;
325-
this.options.pos = this.options.pos === undefined ? 'bottom left' : this.options.pos;
326-
this.options.swatch = this.options.swatch === undefined ? true : this.options.swatch;
327-
this.options.swatchOnly = this.options.swatchOnly === undefined ? false : this.options.swatchOnly;
328-
this.options.swatchPos = this.options.swatchPos === undefined ? 'left' : this.options.swatchPos;
329-
this.options.swatchBootstrap = this.options.swatchBootstrap === undefined ? true : this.options.swatchBootstrap;
330-
this.options.inline = this.options.inline === undefined ? false : this.options.inline;
331-
this.options.placeholder = this.options.placeholder === undefined ? '' : this.options.placeholder;
363+
this.options = this.merge(this.options, {
364+
disabled: false,
365+
hue: true,
366+
alpha: true,
367+
case: 'upper',
368+
format: 'hsl',
369+
pos: 'bottom left',
370+
swatch: true,
371+
swatchOnly: false,
372+
swatchPos: 'left',
373+
swatchBootstrap: true,
374+
inline: false,
375+
placeholder: '',
376+
close: {
377+
show: false,
378+
label: 'Close',
379+
class: '',
380+
},
381+
clear: {
382+
show: false,
383+
label: 'Clear',
384+
class: '',
385+
},
386+
reset: {
387+
show: false,
388+
label: 'Reset',
389+
class: '',
390+
},
391+
});
332392

333393
this.visible = this.options.inline;
334394
}
335395

396+
merge(options, defaultOptions) {
397+
var newObject = {};
398+
var attr;
399+
400+
for (attr in defaultOptions) {
401+
if (defaultOptions.hasOwnProperty(attr)) {
402+
newObject[attr] = defaultOptions[attr];
403+
}
404+
}
405+
406+
if (typeof options === 'object') {
407+
for (attr in options) {
408+
if (options.hasOwnProperty(attr)) {
409+
if (typeof options[attr] === 'object') {
410+
newObject[attr] = this.merge(options[attr], newObject[attr]);
411+
} else {
412+
newObject[attr] = options[attr];
413+
}
414+
}
415+
}
416+
}
417+
418+
return newObject;
419+
}
420+
336421
focus () {
337422
this.find('.color-picker-input')[0].focus();
338423
}

0 commit comments

Comments
 (0)