colorPicker.js

/*function wheelR(event)
{
    event.preventDefault();
    colorR += event.deltaY * -0.1;
    colorR = Math.min(Math.max(0, colorR),255);
    rgbContainer.style.backgroundColor = `rgb(${colorR},${colorG},${colorB})`;
    console.log(`rgb(${colorR},${colorG},${colorB})`);
};
function wheelG(event)
{
    event.preventDefault();
    colorG += event.deltaY * -0.1;
    colorG = Math.min(Math.max(0, colorG),255);
    rgbContainer.style.backgroundColor = `rgb(${colorR},${colorG},${colorB})`;
    console.log(`rgb(${colorR},${colorG},${colorB})`);
};

function wheelB(event)
{
    event.preventDefault();
    colorB += event.deltaY * -0.1;
    colorB = Math.min(Math.max(0, colorB),255);
    rgbContainer.style.backgroundColor = `rgb(${colorR},${colorG},${colorB})`;
    console.log(`rgb(${colorR},${colorG},${colorB})`);
};*/

//red.addEventListener('wheel', wheelR);
//green.addEventListener('wheel', wheelG);
//blue.addEventListener('wheel', wheelB);

/*
let colorR = 0;
let colorG = 0;
let colorB = 0;

function wheel(event)
{
    event.preventDefault();
    let targetId = event.target.id;
    console.log(targetId);

    if (targetId === 'red')
    {
        colorR += event.deltaY * -0.1;
        colorR = Math.min(Math.max(0, colorR),255);
    }
    if (targetId === 'green')
    {
        colorG += event.deltaY * -0.1;
        colorG = Math.min(Math.max(0, colorG),255);
    }
    if (targetId === 'blue')
    {
        colorB += event.deltaY * -0.1;
        colorB = Math.min(Math.max(0, colorB),255);
    }
    rgbContainer.style.backgroundColor = `rgb(${colorR},${colorG},${colorB})`;
    console.log(`rgb(${colorR},${colorG},${colorB})`);
};

rgbContainer.addEventListener('wheel', wheel);
*/

class ColorPicker
{
    constructor()
    {
        this._red = 0;
        this._green = 0;
        this._blue = 0;
        this._active = 'none';
    }

    static colorElements = ['red','green','blue'];
    static inElements = ['inRed','inGreen','inBlue'];

    get red() {return this._red;};
    get green() {return this._green;};
    get blue() {return this._blue;};
    get active() {return this._active;};

    set red(val) { this._red = Math.min(Math.max(0, val),255); this._updateColor() };
    set green(val) { this._green = Math.min(Math.max(0, val),255); this._updateColor() };
    set blue(val) { this._blue = Math.min(Math.max(0, val),255); this._updateColor() };
    set active(val) { this._active = val; this._setActive(this._active); };

    _changeActiveColor(val)
    {
        let color = this.active === 'none' ? 'red' : this.active;
        this[color] += val;
        this._updateNumbers();
    }

    _cycleActive(dir=1)
    {
        if (this.active === 'none') { this.active = 'red'; return;};
        let activeId = ColorPicker.colorElements.indexOf(this.active);
        activeId += dir;
        if (activeId > 2) { activeId = 0;};
        if (activeId < 0) { activeId = 2;};
        this.active = ColorPicker.colorElements[activeId];
    }

    _setActive(color)
    {
        for (let colorId of ColorPicker.colorElements)
        {
            if (colorId != color ) { document.getElementById(colorId).style.borderStyle = 'solid'; };
            if (colorId == color ) { document.getElementById(colorId).style.borderStyle = 'dotted'; };
        }
    }

    _updateColor()
    {
        let rgbStr = `rgb(${this.red},${this.green},${this.blue})`;
        rgbContainer.style.backgroundColor = rgbStr;
        //console.log(rgbStr);
    }

    _updateNumbers()
    {
        inRed.value = this.red;
        inGreen.value = this.green;
        inBlue.value = this.blue;
    }

    handleEvent(event)
    {
        //console.log(event.target.id);
        this[`on${event.type[0].toUpperCase() + event.type.slice(1)}`](event);
    }

    onWheel(event)
    {
        let color = event.target.id;
        //console.log(color);
        event.preventDefault();
        if (ColorPicker.colorElements.includes(color))
        {
            this[color] += Math.floor( event.deltaY * -0.1 );
        }
        if ( color === 'rgbContainer')
        {
            for(let colorId of ColorPicker.colorElements)
            {
                this[colorId] += Math.floor( event.deltaY * -0.1 );
            }
        }
        this._updateNumbers();
    }

    onChange(event)
    {
        let inColor = event.target.id;
        console.log(inColor);
        if (ColorPicker.inElements.includes(inColor))
        {
            let color = inColor.slice(2).toLowerCase();
            this[color] = parseInt(event.target.value);
        }
    }

    onMousedown(event)
    {
        let clickerClassList = event.target.classList;
        if ( clickerClassList.contains('colorBlock'))
        {
            let color = event.target.id;
            event.preventDefault();
            if (event.button === 0 ) { this[color] = 0; this._updateNumbers();};
            if (event.button === 1 ) { this[color] = 255; this._updateNumbers();};
        }
    }

    onClick(event)
    {
        let clickerClassList = event.target.classList;
        if ( clickerClassList.contains('changeButtons'))
        {
            let action = event.target.id[0];
            let color = event.target.id.slice(1).toLowerCase();
            if ( action === 'p') { this[color] += 15; };
            if ( action === 'm') { this[color] -= 15; };
            this._updateNumbers();
        }
        this._cycleActive();
    }

    onMouseover(event)
    {
        let clickerClassList = event.target.classList;
        if ( clickerClassList.contains('colorBlock'))
        {
            let color = event.target.id;
            this.active = color;
        }
    }

    onMouseout(event)
    {
        let clickerClassList = event.target.classList;
        if ( clickerClassList.contains('colorBlock'))
        {
            let color = event.target.id;
            this.active = 'none';
        }
    }

    onKeydown(event)
    {
        if ( event.target.id === 'rgbContainer')
        {
            if (event.code === 'ArrowLeft') { this._cycleActive(-1); };
            if (event.code === 'ArrowRight') { this._cycleActive(1); };
            if (event.code === 'ArrowUp') { this._changeActiveColor(10); };
            if (event.code === 'ArrowDown') { this._changeActiveColor(-10); };
        }
    }
}

let colorPicker = new ColorPicker();

rgbContainer.addEventListener('wheel', colorPicker);
rgbContainer.addEventListener('change', colorPicker);
rgbContainer.addEventListener('mousedown', colorPicker);
rgbContainer.addEventListener('click', colorPicker);
rgbContainer.addEventListener('mouseover', colorPicker);
rgbContainer.addEventListener('mouseout', colorPicker);
rgbContainer.addEventListener('keydown', colorPicker);