Skip to content

Commit 9c9d856

Browse files
estelleestelle
committed
Update: modernize color picker
1 parent e78e413 commit 9c9d856

File tree

2 files changed

+76
-132
lines changed

2 files changed

+76
-132
lines changed

‎tools/color-picker/script.js‎

Lines changed: 49 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ var UIColorPicker = (function UIColorPicker() {
1212
/**
1313
* RGBA Color class
1414
*
15-
* HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
15+
* HWB/HSB and HSL (hue, saturation, value / brightness, lightness)
1616
* @param hue 0-360
1717
* @param saturation 0-100
1818
* @param value 0-100
@@ -34,7 +34,7 @@ var UIColorPicker = (function UIColorPicker() {
3434
this.saturation = 0;
3535
this.value = 0;
3636
this.lightness = 0;
37-
this.format = 'HSV';
37+
this.format = 'HWB';
3838
}
3939

4040
function RGBColor(r, g, b) {
@@ -49,15 +49,15 @@ var UIColorPicker = (function UIColorPicker() {
4949
return color;
5050
}
5151

52-
function HSVColor(h, s, v) {
52+
function HWBColor(h, s, v) {
5353
var color = new Color();
54-
color.setHSV(h, s, v);
54+
color.setHWB(h, s, v);
5555
return color;
5656
}
5757

58-
function HSVAColor(h, s, v, a) {
58+
function HWBAColor(h, s, v, a) {
5959
var color = new Color();
60-
color.setHSV(h, s, v);
60+
color.setHWB(h, s, v);
6161
color.a = a;
6262
return color;
6363
}
@@ -93,8 +93,8 @@ var UIColorPicker = (function UIColorPicker() {
9393
};
9494

9595
Color.prototype.setFormat = function setFormat(format) {
96-
if (format === 'HSV')
97-
this.format = 'HSV';
96+
if (format === 'HWB')
97+
this.format = 'HWB';
9898
if (format === 'HSL')
9999
this.format = 'HSL';
100100
};
@@ -130,11 +130,11 @@ var UIColorPicker = (function UIColorPicker() {
130130
}
131131
};
132132

133-
Color.prototype.setHSV = function setHSV(hue, saturation, value) {
133+
Color.prototype.setHWB = function setHWB(hue, saturation, value) {
134134
this.hue = hue;
135135
this.saturation = saturation;
136136
this.value = value;
137-
this.HSVtoRGB();
137+
this.HWBtoRGB();
138138
};
139139

140140
Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
@@ -165,7 +165,7 @@ var UIColorPicker = (function UIColorPicker() {
165165
value < 0 || value > 100)
166166
return;
167167
this.value = value;
168-
this.HSVtoRGB();
168+
this.HWBtoRGB();
169169
};
170170

171171
Color.prototype.setLightness = function setLightness(value) {
@@ -193,7 +193,7 @@ var UIColorPicker = (function UIColorPicker() {
193193
this.b = parseInt(value.substr(4, 2), 16);
194194

195195
this.alpha = 1;
196-
this.RGBtoHSV();
196+
this.RGBtoHWB();
197197
};
198198

199199
/*========== Conversion Methods ==========*/
@@ -206,19 +206,19 @@ var UIColorPicker = (function UIColorPicker() {
206206
this.RGBtoHSL();
207207
};
208208

209-
Color.prototype.convertToHSV = function convertToHSV() {
210-
if (this.format === 'HSV')
209+
Color.prototype.convertToHWB = function convertToHWB() {
210+
if (this.format === 'HWB')
211211
return;
212212

213-
this.setFormat('HSV');
214-
this.RGBtoHSV();
213+
this.setFormat('HWB');
214+
this.RGBtoHWB();
215215
};
216216

217217
/*========== Update Methods ==========*/
218218

219219
Color.prototype.updateRGB = function updateRGB() {
220-
if (this.format === 'HSV') {
221-
this.HSVtoRGB();
220+
if (this.format === 'HWB') {
221+
this.HWBtoRGB();
222222
return;
223223
}
224224

@@ -229,8 +229,8 @@ var UIColorPicker = (function UIColorPicker() {
229229
};
230230

231231
Color.prototype.updateHSX = function updateHSX() {
232-
if (this.format === 'HSV') {
233-
this.RGBtoHSV();
232+
if (this.format === 'HWB') {
233+
this.RGBtoHWB();
234234
return;
235235
}
236236

@@ -240,7 +240,7 @@ var UIColorPicker = (function UIColorPicker() {
240240
}
241241
};
242242

243-
Color.prototype.HSVtoRGB = function HSVtoRGB() {
243+
Color.prototype.HWBtoRGB = function HWBtoRGB() {
244244
var sat = this.saturation / 100;
245245
var value = this.value / 100;
246246
var C = sat * value;
@@ -282,7 +282,7 @@ var UIColorPicker = (function UIColorPicker() {
282282
if (H >= 5 && H < 6) { this.setRGBA(C, m, X); return; }
283283
};
284284

285-
Color.prototype.RGBtoHSV = function RGBtoHSV() {
285+
Color.prototype.RGBtoHWB = function RGBtoHWB() {
286286
var red = this.r / 255;
287287
var green = this.g / 255;
288288
var blue = this.b / 255;
@@ -347,21 +347,21 @@ var UIColorPicker = (function UIColorPicker() {
347347

348348
Color.prototype.getRGBA = function getRGBA() {
349349

350-
var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
350+
var rgb = '(' + this.r + ' ' + this.g + ' ' + this.b;
351351
var a = '';
352352
var v = '';
353353
var x = parseFloat(this.a);
354354
if (x !== 1) {
355-
a = 'a';
356-
v = ', ' + x;
355+
a = '';
356+
v = ' / ' + x;
357357
}
358358

359359
var value = 'rgb' + a + rgb + v + ')';
360360
return value;
361361
};
362362

363363
Color.prototype.getHSLA = function getHSLA() {
364-
if (this.format === 'HSV') {
364+
if (this.format === 'HWB') {
365365
var color = new Color(this);
366366
color.setFormat('HSL');
367367
color.updateHSX();
@@ -370,11 +370,11 @@ var UIColorPicker = (function UIColorPicker() {
370370

371371
var a = '';
372372
var v = '';
373-
var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
373+
var hsl = '(' + this.hue + ' ' + this.saturation + '% ' + this.lightness +'%';
374374
var x = parseFloat(this.a);
375375
if (x !== 1) {
376-
a = 'a';
377-
v = ', ' + x;
376+
a = '';
377+
v = ' / ' + x;
378378
}
379379

380380
var value = 'hsl' + a + hsl + v + ')';
@@ -416,7 +416,7 @@ var UIColorPicker = (function UIColorPicker() {
416416
var topic = this.node.getAttribute('data-topic');
417417

418418
this.topic = topic;
419-
this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
419+
this.picker_mode = (type === 'HSL') ? 'HSL' : 'HWB';
420420
this.color.setFormat(this.picker_mode);
421421

422422
this.createPickingArea();
@@ -539,10 +539,10 @@ var UIColorPicker = (function UIColorPicker() {
539539
var button = document.createElement('div');
540540
button.className = 'switch_mode';
541541
button.addEventListener('click', function() {
542-
if (this.picker_mode === 'HSV')
542+
if (this.picker_mode === 'HWB')
543543
this.setPickerMode('HSL');
544544
else
545-
this.setPickerMode('HSV');
545+
this.setPickerMode('HWB');
546546

547547
}.bind(this));
548548

@@ -569,8 +569,8 @@ var UIColorPicker = (function UIColorPicker() {
569569
var value = 100 - (y * 100 / size) | 0;
570570
var saturation = x * 100 / size | 0;
571571

572-
if (this.picker_mode === 'HSV')
573-
this.color.setHSV(this.color.hue, saturation, value);
572+
if (this.picker_mode === 'HWB')
573+
this.color.setHWB(this.color.hue, saturation, value);
574574
if (this.picker_mode === 'HSL')
575575
this.color.setHSL(this.color.hue, saturation, value);
576576

@@ -662,7 +662,7 @@ var UIColorPicker = (function UIColorPicker() {
662662
var value = 0;
663663
var offset = 5;
664664

665-
if (this.picker_mode === 'HSV')
665+
if (this.picker_mode === 'HWB')
666666
value = this.color.value;
667667
if (this.picker_mode === 'HSL')
668668
value = this.color.lightness;
@@ -698,7 +698,7 @@ var UIColorPicker = (function UIColorPicker() {
698698

699699
ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
700700
var nc = new Color(this.color);
701-
nc.setHSV(nc.hue, 100, 100);
701+
nc.setHWB(nc.hue, 100, 100);
702702
this.picking_area.style.backgroundColor = nc.getHexa();
703703
};
704704

@@ -830,7 +830,7 @@ var UIColorPicker = (function UIColorPicker() {
830830
};
831831

832832
ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
833-
if (mode !== 'HSV' && mode !== 'HSL')
833+
if (mode !== 'HWB' && mode !== 'HSL')
834834
return;
835835

836836
this.picker_mode = mode;
@@ -890,8 +890,8 @@ var UIColorPicker = (function UIColorPicker() {
890890
Color : Color,
891891
RGBColor : RGBColor,
892892
RGBAColor : RGBAColor,
893-
HSVColor : HSVColor,
894-
HSVAColor : HSVAColor,
893+
HWBColor : HWBColor,
894+
HWBAColor : HWBAColor,
895895
HSLColor : HSLColor,
896896
HSLAColor : HSLAColor,
897897
setColor : setColor,
@@ -1541,14 +1541,9 @@ var ColorPickerTool = (function ColorPickerTool() {
15411541
var HSLA;
15421542

15431543
var updateInfo = function updateInfo(color) {
1544-
if (color.a | 0 === 1) {
1545-
RGBA.info.textContent = 'RGB';
1546-
HSLA.info.textContent = 'HSL';
1547-
}
1548-
else {
1549-
RGBA.info.textContent = 'RGBA';
1550-
HSLA.info.textContent = 'HSLA';
1551-
}
1544+
RGBA.info.textContent = 'RGB';
1545+
HSLA.info.textContent = 'HSL';
1546+
HEXA.info.textContent = 'HEX';
15521547

15531548
RGBA.value.value = color.getRGBA();
15541549
HSLA.value.value = color.getHSLA();
@@ -2028,16 +2023,16 @@ var ColorPickerTool = (function ColorPickerTool() {
20282023
var parent = getElemById('controls');
20292024
var icon = document.createElement('div');
20302025
var button = document.createElement('div');
2031-
var hsv = document.createElement('div');
2026+
var HWB = document.createElement('div');
20322027
var hsl = document.createElement('div');
20332028
var active = null;
20342029

20352030
icon.className = 'icon picker-icon';
20362031
button.className = 'switch';
2037-
button.appendChild(hsv);
2032+
button.appendChild(HWB);
20382033
button.appendChild(hsl);
20392034

2040-
hsv.textContent = 'HSV';
2035+
HWB.textContent = 'HWB';
20412036
hsl.textContent = 'HSL';
20422037

20432038
active = hsl;
@@ -2052,14 +2047,14 @@ var ColorPickerTool = (function ColorPickerTool() {
20522047

20532048
var picker_sw = new StateButton(icon);
20542049
picker_sw.subscribe(function() {
2055-
if (active === hsv)
2050+
if (active === HWB)
20562051
switchPickingModeTo(hsl);
20572052
else
2058-
switchPickingModeTo(hsv);
2053+
switchPickingModeTo(HWB);
20592054
});
20602055

2061-
hsv.addEventListener('click', function() {
2062-
switchPickingModeTo(hsv);
2056+
HWB.addEventListener('click', function() {
2057+
switchPickingModeTo(HWB);
20632058
});
20642059
hsl.addEventListener('click', function() {
20652060
switchPickingModeTo(hsl);

0 commit comments

Comments
 (0)