Виджет iro Color picker

Valentin Lysenko · 13 апр 2025 в 12:02

Добавил удобный цветовой пикер на основе библиотеки с iro.js.
Возможности:

Выбор цвета в разных форматах (HEX, RGB, HSL)
Простая интеграция

Код:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iro.js Color Picker Demo</title>
    <!-- Include iro.js from CDN -->
    <style>
        #color-picker-container {
            margin: 20px 0;
        }
        #color-values {
            margin-top: 20px;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 5px;
            /* width: 300px; */
        }
        .picker_body {
            width: 300px;
        }
        .picker_body h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class='picker_body'>
        <h1>Color Picker</h1>
        <div id="color-picker-container"></div>
        <div id="color-values">
            <p>Selected Color:</p>
            <p>Hex: <span id="hex-value"></span></p>
            <p>RGB: <span id="rgb-value"></span></p>
            <p>HSL: <span id="hsl-value"></span></p>
        </div>
    </div>
</body>
</html>

Код:


declare const document: any;
declare const console: any;

import iro from "iro.min.js";

interface ColorPickerOptions {
    width: number;
    color: string;
    borderWidth: number;
    borderColor: string;
    layout: Array<{
        component: any;
        options: any;
    }>;
}

interface IroColor {
    hexString: string;
    rgb: {
        r: number;
        g: number;
        b: number;
    };
    hsl: {
        h: number;
        s: number;
        l: number;
    };
}

async function onRender(): Promise<void> {
    setPicker()
}

async function setPicker(): Promise<void> {

    const colorPickerOptions: ColorPickerOptions = {
        width: 300,
        color: "#ff0000",
        borderWidth: 1,
        borderColor: "#fff",
        layout: [
            {
                component: iro.ui.Wheel,
                options: {}
            },
            {
                component: iro.ui.Slider,
                options: {}
            },
            {
                component: iro.ui.Slider,
                options: {
                    sliderType: 'hue'
                }
            }
        ]
    };

    const colorPicker = new iro.ColorPicker('#color-picker-container', colorPickerOptions);
    // Записываем в контекст. Далее работаем с ним
    Context.data.colorPicker = colorPicker

    // Навешиваем обработчик событий
    addListener()
}


// Обработчик события клика
function addListener(): void {
    let colorPicker = document.getElementById('color-picker-container')
    colorPicker.addEventListener('click', function() {
        updateColorDisplay(Context.data.colorPicker.color);
    });
}

// Функция обновления цветов
function updateColorDisplay(color: IroColor): void {
    //Находим элементы
    const hexValue = document.getElementById('hex-value');
    const rgbValue = document.getElementById('rgb-value');
    const hslValue = document.getElementById('hsl-value');
    const colorValuesContainer = document.getElementById('color-values');

    if (!hexValue || !rgbValue || !hslValue || !colorValuesContainer) {
        console.error('One or more DOM elements not found');
        return;
    }

    // Обновляем значения кодировок
    hexValue.textContent = color.hexString;
    rgbValue.textContent = `rgb(${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b})`;
    hslValue.textContent = `hsl(${Math.round(color.hsl.h)}, ${Math.round(color.hsl.s)}%, ${Math.round(color.hsl.l)}%)`;

    // Меняем фон в зависимости от выбранного цвета
    colorValuesContainer.style.backgroundColor = color.hexString;

    // Меняем цвет текста для лучшего восприятия
    const brightness: number = (color.rgb.r * 299 + color.rgb.g * 587 + color.rgb.b * 114) / 1000;
    colorValuesContainer.style.color = brightness > 128 ? '#000' : '#fff';
}

Виджет iro Color picker

Valentin Lysenko Участник

Вложения:

Color picker.e365