| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147 |
2×
2×
2×
2×
4×
4×
4×
4×
4×
4×
4×
4×
| import Component from '@ember/component';
import { computed } from '@ember/object';
import { typeOf, isNone } from '@ember/utils';
import { htmlSafe } from '@ember/string';
import layout from '../templates/components/polaris-color-picker';
import { clamp } from '../utils/math';
import { hsbaToRgba } from '../utils/color';
/**
* Polaris color picker component.
* See https://polaris.shopify.com/components/forms/color-picker
*/
export default Component.extend({
classNames: ['Polaris-ColorPicker'],
layout,
/*
* Public attributes.
*/
/**
* The currently selected color
*
* @property color
* @type {Object}
* @default null
*/
color: null,
/**
* Allow user to select an alpha value
*
* @property allowAlpha
* @type {boolean}
* @default false
*/
allowAlpha: false,
/**
* Callback when color is selected
*
* @property onChange
* @type {function}
* @default null
*/
onChange: null,
/*
* Internal properties.
*/
pickerSize: null,
colorLayerStyle: computed('color.{hue,alpha}', function() {
const { hue, alpha = 1 } = this.get('color');
const { red, green, blue } = hsbaToRgba({
hue,
saturation: 1,
brightness: 1,
});
const backgroundColor = `rgba(${ red }, ${ green }, ${ blue }, ${ alpha })`;
return htmlSafe(`background-color: ${ backgroundColor };`);
}).readOnly(),
draggerX: computed('color.saturation', 'pickerSize', function() {
const { color: { saturation }, pickerSize } = this.getProperties('color', 'pickerSize');
return clamp(saturation * pickerSize, 0, pickerSize);
}).readOnly(),
draggerY: computed('color.brightness', 'pickerSize', function() {
const { color: { brightness }, pickerSize } = this.getProperties('color', 'pickerSize');
return clamp(pickerSize - (brightness * pickerSize), 0, pickerSize);
}).readOnly(),
/*
* Lifecycle hooks.
*/
didRender() {
this._super(...arguments);
// Grab the size of the picker for positioning the draggable markers.
const mainColorElement = this.$('div.Polaris-ColorPicker__MainColor')[0];
Iif (isNone(mainColorElement)) {
return;
}
this.set('pickerSize', mainColorElement.clientWidth);
},
actions: {
draggerMoved({x, y}) {
const {
pickerSize,
color: { hue, alpha = 1 },
onChange,
} = this.getProperties('pickerSize', 'color', 'onChange');
if (typeOf(onChange) !== 'function') {
return;
}
const saturation = clamp(x / pickerSize, 0, 1);
const brightness = clamp(1 - y / pickerSize, 0, 1);
onChange({
hue,
saturation,
brightness,
alpha,
});
},
handleHueChange(hue) {
const {
color: { brightness, saturation, alpha = 1 },
onChange,
} = this.getProperties('color', 'onChange');
if (typeOf(onChange) === 'function') {
onChange({
hue,
brightness,
saturation,
alpha,
});
}
},
handleAlphaChange(alpha) {
const {
color: { hue, brightness, saturation },
onChange,
} = this.getProperties('color', 'onChange');
if (typeOf(onChange) === 'function') {
onChange({
hue,
brightness,
saturation,
alpha,
});
}
}
}
});
|