| 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;
|