1 | import Picker from './picker';
|
2 |
|
3 |
|
4 | class ColorPicker extends Picker {
|
5 | constructor(select, label) {
|
6 | super(select);
|
7 | this.label.innerHTML = label;
|
8 | this.container.classList.add('ql-color-picker');
|
9 | [].slice.call(this.container.querySelectorAll('.ql-picker-item'), 0, 7).forEach(function(item) {
|
10 | item.classList.add('ql-primary');
|
11 | });
|
12 | }
|
13 |
|
14 | buildItem(option) {
|
15 | let item = super.buildItem(option);
|
16 | item.style.backgroundColor = option.getAttribute('value') || '';
|
17 | return item;
|
18 | }
|
19 |
|
20 | selectItem(item, trigger) {
|
21 | super.selectItem(item, trigger);
|
22 | let colorLabel = this.label.querySelector('.ql-color-label');
|
23 | let value = item ? item.getAttribute('data-value') || '' : '';
|
24 | if (colorLabel) {
|
25 | if (colorLabel.tagName === 'line') {
|
26 | colorLabel.style.stroke = value;
|
27 | } else {
|
28 | colorLabel.style.fill = value;
|
29 | }
|
30 | }
|
31 | }
|
32 | }
|
33 |
|
34 |
|
35 | export default ColorPicker;
|