hakumi_components 0.1.3.pre

data/app/javascript/hakumi_components/controllers/hakumi/color_picker_controller.js

@@ -0,0 +1,735 @@
+import RegistryController from "../base/registry_controller.js"
+
+export default class extends RegistryController {
+    static targets = [
+        "trigger",
+        "colorBlock",
+        "displayText",
+        "clearBtn",
+        "panel",
+        "saturation",
+        "saturationHandler",
+        "hueSlider",
+        "hueHandler",
+        "alphaSlider",
+        "alphaHandler",
+        "colorInput",
+        "formatSelect",
+        "hiddenInput"
+    ]
+
+    static values = {
+        value: String,
+        defaultValue: String,
+        format: { type: String, default: "hex" },
+        trigger: { type: String, default: "click" },
+        placement: { type: String, default: "bottom_left" },
+        disabled: Boolean,
+        disabledAlpha: Boolean,
+        allowClear: Boolean,
+        showText: Boolean,
+        showFormatSelect: { type: Boolean, default: true }
+    }
+
+    setup() {
+        this.isOpen = false
+        this.isDragging = false
+        this.dragType = null
+
+        // Initialize color from value or default
+        const initialColor = this.valueValue || this.defaultValueValue || "#1677ff"
+        this.hsv = this.parseColorToHSV(initialColor)
+        this.alpha = this.extractAlpha(initialColor)
+
+        // Bind handlers
+        this.boundOutsideClick = this.handleOutsideClick.bind(this)
+        this.boundMouseMove = this.handleMouseMove.bind(this)
+        this.boundMouseUp = this.handleMouseUp.bind(this)
+
+        // Initialize UI
+        this.updateUI()
+        this.syncDisabledState()
+
+        // Setup hover trigger if needed
+        if (this.triggerValue === "hover") {
+            this.element.addEventListener("mouseenter", () => this.open())
+            this.element.addEventListener("mouseleave", () => this.close())
+        }
+    }
+
+    teardown() {
+        document.removeEventListener("click", this.boundOutsideClick)
+        document.removeEventListener("mousemove", this.boundMouseMove)
+        document.removeEventListener("mouseup", this.boundMouseUp)
+    }
+
+    registerApi() {
+        this.element.hakumiComponent = {
+            name: "color_picker",
+            version: 1,
+            singleton: false,
+            api: {
+                getValue: () => this.getCurrentColor(),
+                setValue: (value) => this.setValue(value),
+                open: () => this.open(),
+                close: () => this.close(),
+                toggle: () => this.toggle(),
+                clear: () => this.clear(),
+                getFormat: () => this.formatValue,
+                setFormat: (format) => this.setFormat(format),
+                getHSV: () => ({ ...this.hsv }),
+                getAlpha: () => this.alpha
+            }
+        }
+    }
+
+    toggle(event) {
+        if (event) event.stopPropagation()
+        if (this.disabledValue) return
+
+        this.isOpen ? this.close() : this.open()
+    }
+
+    open() {
+        if (this.disabledValue || this.isOpen) return
+
+        this.isOpen = true
+        this.element.classList.add("hakumi-color-picker-open")
+
+        if (this.hasPanelTarget) {
+            this.panelTarget.classList.remove("hakumi-color-picker-panel-hidden")
+        }
+
+        if (this.hasTriggerTarget) {
+            this.triggerTarget.setAttribute("aria-expanded", "true")
+        }
+
+        document.addEventListener("click", this.boundOutsideClick)
+        this.dispatchEvent("open-change", { open: true })
+    }
+
+    close() {
+        if (!this.isOpen) return
+
+        this.isOpen = false
+        this.element.classList.remove("hakumi-color-picker-open")
+
+        if (this.hasPanelTarget) {
+            this.panelTarget.classList.add("hakumi-color-picker-panel-hidden")
+        }
+
+        if (this.hasTriggerTarget) {
+            this.triggerTarget.setAttribute("aria-expanded", "false")
+        }
+
+        document.removeEventListener("click", this.boundOutsideClick)
+        this.dispatchEvent("open-change", { open: false })
+    }
+
+    handleOutsideClick(event) {
+        if (!this.element.contains(event.target)) {
+            this.close()
+        }
+    }
+
+    stopPropagation(event) {
+        event.stopPropagation()
+    }
+
+    // ===== CLEAR & SET VALUE =====
+
+    clear(event) {
+        if (event) event.stopPropagation()
+        if (this.disabledValue) return
+
+        this.hsv = { h: 215, s: 91, v: 100 }
+        this.alpha = 1
+        this.updateUI()
+        this.updateHiddenInput("")
+        this.dispatchEvent("change", { value: "", hsv: this.hsv, alpha: this.alpha })
+    }
+
+    setValue(value) {
+        if (this.disabledValue) return
+
+        this.hsv = this.parseColorToHSV(value)
+        this.alpha = this.extractAlpha(value)
+        this.updateUI()
+        this.updateHiddenInput(value)
+        this.dispatchEvent("change", { value, hsv: this.hsv, alpha: this.alpha })
+    }
+
+    setFormat(format) {
+        if (!["hex", "rgb", "hsl", "hsb"].includes(format)) return
+
+        // Si show_format_select es false, no permitir cambiar el formato
+        if (!this.showFormatSelectValue) return
+
+        this.formatValue = format
+
+        if (this.hasFormatSelectTarget) {
+            this.formatSelectTarget.value = format
+        }
+
+        this.updateColorInput()
+    }
+
+    // ===== SATURATION/BRIGHTNESS DRAG =====
+
+    startSaturationDrag(event) {
+        if (this.disabledValue) return
+
+        event.preventDefault()
+        this.isDragging = true
+        this.dragType = "saturation"
+
+        document.addEventListener("mousemove", this.boundMouseMove)
+        document.addEventListener("mouseup", this.boundMouseUp)
+
+        this.updateSaturationFromMouse(event)
+    }
+
+    // ===== HUE DRAG =====
+
+    startHueDrag(event) {
+        if (this.disabledValue) return
+
+        event.preventDefault()
+        this.isDragging = true
+        this.dragType = "hue"
+
+        document.addEventListener("mousemove", this.boundMouseMove)
+        document.addEventListener("mouseup", this.boundMouseUp)
+
+        this.updateHueFromMouse(event)
+    }
+
+    // ===== ALPHA DRAG =====
+
+    startAlphaDrag(event) {
+        if (this.disabledValue) return
+
+        event.preventDefault()
+        this.isDragging = true
+        this.dragType = "alpha"
+
+        document.addEventListener("mousemove", this.boundMouseMove)
+        document.addEventListener("mouseup", this.boundMouseUp)
+
+        this.updateAlphaFromMouse(event)
+    }
+
+    // ===== DRAG HANDLERS =====
+
+    handleMouseMove(event) {
+        if (!this.isDragging) return
+
+        event.preventDefault()
+
+        switch (this.dragType) {
+            case "saturation":
+                this.updateSaturationFromMouse(event)
+                break
+            case "hue":
+                this.updateHueFromMouse(event)
+                break
+            case "alpha":
+                this.updateAlphaFromMouse(event)
+                break
+        }
+    }
+
+    handleMouseUp(event) {
+        if (!this.isDragging) return
+
+        this.isDragging = false
+        this.dragType = null
+
+        document.removeEventListener("mousemove", this.boundMouseMove)
+        document.removeEventListener("mouseup", this.boundMouseUp)
+    }
+
+    updateSaturationFromMouse(event) {
+        if (!this.hasSaturationTarget) return
+
+        const rect = this.saturationTarget.getBoundingClientRect()
+        const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width))
+        const y = Math.max(0, Math.min(event.clientY - rect.top, rect.height))
+
+        this.hsv.s = Math.round((x / rect.width) * 100)
+        this.hsv.v = Math.round((1 - y / rect.height) * 100)
+
+        this.updateUI()
+        this.emitColorChange()
+    }
+
+    updateHueFromMouse(event) {
+        if (!this.hasHueSliderTarget) return
+
+        const rect = this.hueSliderTarget.getBoundingClientRect()
+        const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width))
+
+        this.hsv.h = Math.round((x / rect.width) * 360)
+
+        this.updateUI()
+        this.emitColorChange()
+    }
+
+    updateAlphaFromMouse(event) {
+        if (!this.hasAlphaSliderTarget) return
+
+        const rect = this.alphaSliderTarget.getBoundingClientRect()
+        const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width))
+
+        this.alpha = Math.round((x / rect.width) * 100) / 100
+
+        this.updateUI()
+        this.emitColorChange()
+    }
+
+    // ===== COLOR INPUT HANDLERS =====
+
+    handleColorInput(event) {
+        // Real-time input - don't update yet, just validate
+        const value = event.target.value
+        if (this.isValidColor(value)) {
+            event.target.classList.remove("hakumi-color-picker-input-invalid")
+        } else {
+            event.target.classList.add("hakumi-color-picker-input-invalid")
+        }
+    }
+
+    handleColorInputChange(event) {
+        const value = event.target.value
+
+        if (this.isValidColor(value)) {
+            this.hsv = this.parseColorToHSV(value)
+            this.alpha = this.extractAlpha(value)
+            this.updateUI()
+            this.emitColorChange()
+            event.target.classList.remove("hakumi-color-picker-input-invalid")
+        }
+    }
+
+    handleFormatChange(event) {
+        this.setFormat(event.target.value)
+    }
+
+    // ===== PRESET SELECTION =====
+
+    selectPreset(event) {
+        if (this.disabledValue) return
+
+        const color = event.currentTarget.dataset.color
+        this.setValue(color)
+    }
+
+    // ===== UI UPDATE =====
+
+    updateUI() {
+        this.updateSaturationPanel()
+        this.updateSaturationHandler()
+        this.updateHueSlider()
+        this.updateHueHandler()
+        this.updateAlphaSlider()
+        this.updateAlphaHandler()
+        this.updateColorBlock()
+        this.updateColorInput()
+        this.updateDisplayText()
+        this.updateClearButton()
+    }
+
+    updateSaturationPanel() {
+        if (!this.hasSaturationTarget) return
+
+        const hue = this.hsv.h
+        const baseColor = this.hsvToRgb(hue, 100, 100)
+        this.saturationTarget.style.backgroundColor = `rgb(${baseColor.r}, ${baseColor.g}, ${baseColor.b})`
+    }
+
+    updateSaturationHandler() {
+        if (!this.hasSaturationHandlerTarget || !this.hasSaturationTarget) return
+
+        const left = this.hsv.s
+        const top = 100 - this.hsv.v
+
+        this.saturationHandlerTarget.style.left = `${left}%`
+        this.saturationHandlerTarget.style.top = `${top}%`
+    }
+
+    updateHueSlider() {
+        // Hue slider background is CSS gradient, nothing to update
+    }
+
+    updateHueHandler() {
+        if (!this.hasHueHandlerTarget) return
+
+        const left = (this.hsv.h / 360) * 100
+        this.hueHandlerTarget.style.left = `${left}%`
+    }
+
+    updateAlphaSlider() {
+        if (!this.hasAlphaSliderTarget) return
+
+        const rgb = this.hsvToRgb(this.hsv.h, this.hsv.s, this.hsv.v)
+        const colorStr = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
+
+        this.alphaSliderTarget.style.background = `
+            linear-gradient(to right, transparent, ${colorStr}),
+            conic-gradient(#d3d3d3 0.25turn, #fff 0turn 0.5turn, #d3d3d3 0turn 0.75turn, #fff 0turn 1turn)
+        `
+        this.alphaSliderTarget.style.backgroundSize = "100%, 8px 8px"
+    }
+
+    updateAlphaHandler() {
+        if (!this.hasAlphaHandlerTarget) return
+
+        const left = this.alpha * 100
+        this.alphaHandlerTarget.style.left = `${left}%`
+    }
+
+    updateColorBlock() {
+        if (!this.hasColorBlockTarget) return
+
+        const color = this.getCurrentColor()
+        this.colorBlockTarget.style.backgroundColor = color
+    }
+
+    updateColorInput() {
+        if (!this.hasColorInputTarget) return
+
+        const color = this.getCurrentColor()
+        this.colorInputTarget.value = color
+    }
+
+    updateDisplayText() {
+        if (!this.hasDisplayTextTarget) return
+
+        const color = this.getCurrentColor()
+        this.displayTextTarget.textContent = color
+    }
+
+    updateClearButton() {
+        if (!this.allowClearValue || !this.hasClearBtnTarget) return
+
+        const hasValue = Boolean(this.getCurrentColor())
+        this.clearBtnTarget.style.display = hasValue ? "" : "none"
+    }
+
+    updateHiddenInput(value = null) {
+        if (!this.hasHiddenInputTarget) return
+
+        const color = value !== null ? value : this.getCurrentColor()
+        this.hiddenInputTarget.value = color
+        this.hiddenInputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+    }
+
+    // ===== COLOR CONVERSION =====
+
+    getCurrentColor() {
+        switch (this.formatValue) {
+            case "hex":
+                return this.hsvToHex(this.hsv.h, this.hsv.s, this.hsv.v, this.alpha)
+            case "rgb":
+                return this.hsvToRgbString(this.hsv.h, this.hsv.s, this.hsv.v, this.alpha)
+            case "hsl":
+                return this.hsvToHslString(this.hsv.h, this.hsv.s, this.hsv.v, this.alpha)
+            case "hsb":
+                return this.hsvToHsbString(this.hsv.h, this.hsv.s, this.hsv.v, this.alpha)
+            default:
+                return this.hsvToHex(this.hsv.h, this.hsv.s, this.hsv.v, this.alpha)
+        }
+    }
+
+    parseColorToHSV(color) {
+        if (!color) return { h: 215, s: 91, v: 100 }
+
+        color = color.trim()
+
+        // HEX
+        if (color.startsWith("#")) {
+            return this.hexToHsv(color)
+        }
+
+        // RGB/RGBA
+        if (color.startsWith("rgb")) {
+            return this.rgbStringToHsv(color)
+        }
+
+        // HSL/HSLA
+        if (color.startsWith("hsl")) {
+            return this.hslStringToHsv(color)
+        }
+
+        // HSB/HSBA (treat as HSV)
+        if (color.startsWith("hsb")) {
+            return this.hsbStringToHsv(color)
+        }
+
+        return { h: 215, s: 91, v: 100 }
+    }
+
+    extractAlpha(color) {
+        if (!color) return 1
+
+        color = color.trim()
+
+        // RGBA
+        if (color.startsWith("rgba")) {
+            const match = color.match(/rgba?\(([^)]+)\)/)
+            if (match) {
+                const parts = match[1].split(",").map(p => p.trim())
+                if (parts[3]) return parseFloat(parts[3])
+            }
+        }
+
+        // HSLA
+        if (color.startsWith("hsla")) {
+            const match = color.match(/hsla?\(([^)]+)\)/)
+            if (match) {
+                const parts = match[1].split(",").map(p => p.trim())
+                if (parts[3]) return parseFloat(parts[3])
+            }
+        }
+
+        // HEX with alpha (#RRGGBBAA)
+        if (color.startsWith("#") && color.length === 9) {
+            const alpha = parseInt(color.slice(7, 9), 16)
+            return Math.round((alpha / 255) * 100) / 100
+        }
+
+        return 1
+    }
+
+    // HSV to RGB
+    hsvToRgb(h, s, v) {
+        h = h / 360
+        s = s / 100
+        v = v / 100
+
+        const i = Math.floor(h * 6)
+        const f = h * 6 - i
+        const p = v * (1 - s)
+        const q = v * (1 - f * s)
+        const t = v * (1 - (1 - f) * s)
+
+        let r, g, b
+
+        switch (i % 6) {
+            case 0: r = v; g = t; b = p; break
+            case 1: r = q; g = v; b = p; break
+            case 2: r = p; g = v; b = t; break
+            case 3: r = p; g = q; b = v; break
+            case 4: r = t; g = p; b = v; break
+            case 5: r = v; g = p; b = q; break
+        }
+
+        return {
+            r: Math.round(r * 255),
+            g: Math.round(g * 255),
+            b: Math.round(b * 255)
+        }
+    }
+
+    // RGB to HSV
+    rgbToHsv(r, g, b) {
+        r = r / 255
+        g = g / 255
+        b = b / 255
+
+        const max = Math.max(r, g, b)
+        const min = Math.min(r, g, b)
+        const delta = max - min
+
+        let h = 0
+        let s = max === 0 ? 0 : delta / max
+        let v = max
+
+        if (delta !== 0) {
+            if (max === r) {
+                h = ((g - b) / delta + (g < b ? 6 : 0)) / 6
+            } else if (max === g) {
+                h = ((b - r) / delta + 2) / 6
+            } else {
+                h = ((r - g) / delta + 4) / 6
+            }
+        }
+
+        return {
+            h: Math.round(h * 360),
+            s: Math.round(s * 100),
+            v: Math.round(v * 100)
+        }
+    }
+
+    // HEX conversions
+    hexToHsv(hex) {
+        hex = hex.replace("#", "")
+
+        const r = parseInt(hex.slice(0, 2), 16)
+        const g = parseInt(hex.slice(2, 4), 16)
+        const b = parseInt(hex.slice(4, 6), 16)
+
+        return this.rgbToHsv(r, g, b)
+    }
+
+    hsvToHex(h, s, v, alpha = 1) {
+        const rgb = this.hsvToRgb(h, s, v)
+        const hex = `#${this.toHex(rgb.r)}${this.toHex(rgb.g)}${this.toHex(rgb.b)}`
+
+        if (alpha < 1 && !this.disabledAlphaValue) {
+            const alphaHex = this.toHex(Math.round(alpha * 255))
+            return `${hex}${alphaHex}`
+        }
+
+        return hex
+    }
+
+    toHex(n) {
+        const hex = n.toString(16)
+        return hex.length === 1 ? "0" + hex : hex
+    }
+
+    // RGB string conversions
+    rgbStringToHsv(rgbString) {
+        const match = rgbString.match(/rgba?\(([^)]+)\)/)
+        if (!match) return { h: 215, s: 91, v: 100 }
+
+        const [r, g, b] = match[1].split(",").map(p => parseInt(p.trim()))
+        return this.rgbToHsv(r, g, b)
+    }
+
+    hsvToRgbString(h, s, v, alpha = 1) {
+        const rgb = this.hsvToRgb(h, s, v)
+
+        if (alpha < 1 && !this.disabledAlphaValue) {
+            return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`
+        }
+
+        return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
+    }
+
+    // HSL conversions
+    hslStringToHsv(hslString) {
+        const match = hslString.match(/hsla?\(([^)]+)\)/)
+        if (!match) return { h: 215, s: 91, v: 100 }
+
+        const parts = match[1].split(",").map(p => p.trim())
+        const h = parseFloat(parts[0])
+        const s = parseFloat(parts[1])
+        const l = parseFloat(parts[2])
+
+        return this.hslToHsv(h, s, l)
+    }
+
+    hslToHsv(h, s, l) {
+        s = s / 100
+        l = l / 100
+
+        const v = l + s * Math.min(l, 1 - l)
+        const sv = v === 0 ? 0 : 2 * (1 - l / v)
+
+        return {
+            h: Math.round(h),
+            s: Math.round(sv * 100),
+            v: Math.round(v * 100)
+        }
+    }
+
+    hsvToHsl(h, s, v) {
+        s = s / 100
+        v = v / 100
+
+        const l = v * (1 - s / 2)
+        const sl = l === 0 || l === 1 ? 0 : (v - l) / Math.min(l, 1 - l)
+
+        return {
+            h: Math.round(h),
+            s: Math.round(sl * 100),
+            l: Math.round(l * 100)
+        }
+    }
+
+    hsvToHslString(h, s, v, alpha = 1) {
+        const hsl = this.hsvToHsl(h, s, v)
+
+        if (alpha < 1 && !this.disabledAlphaValue) {
+            return `hsla(${hsl.h}, ${hsl.s}%, ${hsl.l}%, ${alpha})`
+        }
+
+        return `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`
+    }
+
+    // HSB conversions (HSB is same as HSV)
+    hsbStringToHsv(hsbString) {
+        const match = hsbString.match(/hsba?\(([^)]+)\)/)
+        if (!match) return { h: 215, s: 91, v: 100 }
+
+        const parts = match[1].split(",").map(p => p.trim())
+        return {
+            h: Math.round(parseFloat(parts[0])),
+            s: Math.round(parseFloat(parts[1])),
+            v: Math.round(parseFloat(parts[2]))
+        }
+    }
+
+    hsvToHsbString(h, s, v, alpha = 1) {
+        if (alpha < 1 && !this.disabledAlphaValue) {
+            return `hsba(${h}, ${s}%, ${v}%, ${alpha})`
+        }
+
+        return `hsb(${h}, ${s}%, ${v}%)`
+    }
+
+    // Color validation
+    isValidColor(color) {
+        if (!color) return false
+
+        color = color.trim()
+
+        // HEX
+        if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/.test(color)) return true
+
+        // RGB/RGBA
+        if (/^rgba?\(\s*\d+\s*,\s*\d+\s*,\s*\d+\s*(,\s*[\d.]+\s*)?\)$/.test(color)) return true
+
+        // HSL/HSLA
+        if (/^hsla?\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*[\d.]+\s*)?\)$/.test(color)) return true
+
+        // HSB/HSBA
+        if (/^hsba?\(\s*\d+\s*,\s*\d+%\s*,\s*\d+%\s*(,\s*[\d.]+\s*)?\)$/.test(color)) return true
+
+        return false
+    }
+
+    // ===== UTILS =====
+
+    syncDisabledState() {
+        this.element.classList.toggle("hakumi-color-picker-disabled", this.disabledValue)
+
+        if (this.hasTriggerTarget) {
+            this.triggerTarget.setAttribute("aria-disabled", this.disabledValue)
+            this.triggerTarget.tabIndex = this.disabledValue ? -1 : 0
+        }
+    }
+
+    emitColorChange() {
+        const color = this.getCurrentColor()
+        this.updateHiddenInput(color)
+        this.dispatchEvent("change", {
+            value: color,
+            hsv: { ...this.hsv },
+            alpha: this.alpha,
+            format: this.formatValue
+        })
+    }
+
+    dispatchEvent(name, detail) {
+        this.element.dispatchEvent(
+            new CustomEvent(`hakumi:color-picker:${name}`, {
+                detail,
+                bubbles: true
+            })
+        )
+    }
+}