Components Bin

compo-color-picker.mask

import '/bower_components/spectrum/spectrum.css';
import '/bower_components/spectrum/spectrum.js';

define ColorPickButton {

	slot domInsert () {
		this.$.find('.color-picker').spectrum({
			cancelText: 'Abbrechen',
			chooseText: 'Auswählen',
			allowEmpty: true,
			showAlpha: true,
			showPalette: true,
			showSelectionPalette: true,
		    color: null,
		    move: this.emit,
		    hide: this.emit
		});
	}

	slot private showColorPicker () {
		this.$.find('.color-picker').spectrum('show');
	}

	function self emit (tinyColor) {
		Compo.pipe('toolbar').emit('backgroundColor', tinyColor && tinyColor.toRgbString() || null);
	}

	.toolbar-button x-tap='showColorPicker' {
		i.material-icons > 'color_lens'
		span .is-text-optional > ' Hintergrund '
		input .color-picker;
	}
}