Sha256: 38fbb8c4951f62c0b734d9e55ae0ebc488d85ff692936b951772f33aa3afb4d0
Contents?: true
Size: 1.53 KB
Versions: 27
Compression:
Stored size: 1.53 KB
Contents
import ApplicationController from "satis/controllers/application_controller" import * as dummy from "pickr"; export default class ColorPickerComponentController extends ApplicationController { static targets = ["picker", "input"] static values = { submit: Boolean, cssVariable: String, cssScope: String } connect() { this.setupPickr(); this.pickr.on('save', (color, _instance) => { this.inputTarget.value = color.toHEXA().toString(); this.pickr.hide(); if (this.submitValue && !this.forcedUpdate) { this.inputTarget.form.submit(); } if (this.cssVariableValue) { var element = this.cssScopeValue ? document.querySelector(this.cssScopeValue) : document.documentElement; console.log(element, this.cssScopeValue); element.style.setProperty(this.cssVariableValue, this.inputTarget.value); } }); } disconnect() { if (this.pickr) { this.pickr.destroyAndRemove(); } } setupPickr() { this.pickr = Pickr.create({ el: this.element.querySelector('.picker'), theme: 'classic', default: this.inputTarget.value, components: { preview: true, opacity: false, hue: true, interaction: { hex: true, rgba: false, hsla: false, hsva: false, cmyk: false, input: true, clear: false, save: true, }, }, }); } inputUpdate() { if (this.pickr) { this.pickr.setColor(this.inputTarget.value); } } }
Version data entries
27 entries across 27 versions & 1 rubygems