36 lines
922 B
JavaScript
36 lines
922 B
JavaScript
|
import Picker from './picker';
|
||
|
|
|
||
|
|
|
||
|
|
class ColorPicker extends Picker {
|
||
|
|
constructor(select, label) {
|
||
|
|
super(select);
|
||
|
|
this.label.innerHTML = label;
|
||
|
|
this.container.classList.add('ql-color-picker');
|
||
|
|
[].slice.call(this.container.querySelectorAll('.ql-picker-item'), 0, 7).forEach(function(item) {
|
||
|
|
item.classList.add('ql-primary');
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
buildItem(option) {
|
||
|
|
let item = super.buildItem(option);
|
||
|
|
item.style.backgroundColor = option.getAttribute('value') || '';
|
||
|
|
return item;
|
||
|
|
}
|
||
|
|
|
||
|
|
selectItem(item, trigger) {
|
||
|
|
super.selectItem(item, trigger);
|
||
|
|
let colorLabel = this.label.querySelector('.ql-color-label');
|
||
|
|
let value = item ? item.getAttribute('data-value') || '' : '';
|
||
|
|
if (colorLabel) {
|
||
|
|
if (colorLabel.tagName === 'line') {
|
||
|
|
colorLabel.style.stroke = value;
|
||
|
|
} else {
|
||
|
|
colorLabel.style.fill = value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
export default ColorPicker;
|