efeskucuk / svelte-color-picker Goto Github PK

View Code? Open in Web Editor NEW

103.0 103.0 24.0 191 KB

A color picker component for svelte

License: MIT License

JavaScript 12.88% HTML 1.54% CSS 3.79% Svelte 81.78%

color-picker svelte svelte-v3 sveltejs

svelte-color-picker's People

Contributors

Stargazers

Watchers

svelte-color-picker's Issues

Multiple instances fail

I tried to use the color picker with multiple instances and it didn't work.
I updated the svelte component to allow this.

Here's the updated code for reference.

script

import { onMount, createEventDispatcher } from "svelte";

export let startColor = "#FF0000";
export let id = "colorPicker";

onMount(() => {
    document.addEventListener("mouseup", mouseUp);
    document.addEventListener("touchend", mouseUp);
    document.addEventListener("mousemove", mouseMove);
    document.addEventListener("touchmove", touchMove);
    document.addEventListener("touchstart", killMouseEvents);
    document.addEventListener("mousedown", killTouchEvents);
    setStartColor();
});

Number.prototype.mod = function (n) {
    return ((this % n) + n) % n;
};
const dispatch = createEventDispatcher();
let tracked;
let h = 1;
let s = 1;
let v = 1;
let a = 1;
let r = 255;
let g = 0;
let b = 0;
let hexValue = "#FF0000";

function setStartColor() {
    let hex = startColor.replace("#", "");
    if (hex.length !== 6 && hex.length !== 3 && !hex.match(/([^A-F0-9])/gi)) {
        alert("Invalid property value (startColor)");
        return;
    }
    let hexFiltered = "";
    if (hex.length === 3)
        hex.split("").forEach((c) => {
            hexFiltered += c + c;
        });
    else hexFiltered = hex;
    hexValue = hexFiltered;
    r = parseInt(hexFiltered.substring(0, 2), 16);
    g = parseInt(hexFiltered.substring(2, 4), 16);
    b = parseInt(hexFiltered.substring(4, 6), 16);
    rgbToHSV(r, g, b, true);
    updateCsPicker();
    updateHuePicker();
}

function removeEventListenerFromElement(elementId, eventName, listenerCallback) {
    let element = document.querySelector(elementId);
    if (element) element.removeEventListener(eventName, listenerCallback);
}

function killMouseEvents() {
    removeEventListenerFromElement(`#alpha-event-${id}`, "mousedown", alphaDown);
    removeEventListenerFromElement(`#colorsquare-event-${id}`, "mousedown", csDown);
    removeEventListenerFromElement(`#hue-event-${id}`, "mousedown", hueDown);
    document.removeEventListener("mouseup", mouseUp);
    document.removeEventListener("mousemove", mouseMove);
    document.removeEventListener("touchstart", killMouseEvents);
    document.removeEventListener("mousedown", killTouchEvents);
}

function killTouchEvents() {
    removeEventListenerFromElement(`#alpha-event-${id}`, "touchstart", alphaDownTouch);
    removeEventListenerFromElement(`#colorsquare-event-${id}`, "touchstart", csDownTouch);
    removeEventListenerFromElement(`#hue-event-${id}`, "touchstart", hueDownTouch);
    document.removeEventListener("touchend", mouseUp);
    document.removeEventListener("touchmove", touchMove);
    document.removeEventListener("touchstart", killMouseEvents);
    document.removeEventListener("mousedown", killTouchEvents);
}

function updateCsPicker() {
    let csPicker = document.querySelector(`#colorsquare-picker-${id}`);
    let xPercentage = s * 100;
    let yPercentage = (1 - v) * 100;
    csPicker.style.top = yPercentage + "%";
    csPicker.style.left = xPercentage + "%";
}

function updateHuePicker() {
    let huePicker = document.querySelector(`#hue-picker-${id}`);
    let xPercentage = h * 100;
    huePicker.style.left = xPercentage + "%";
}

function colorChangeCallback() {
    dispatch("colorChange", {
        r: r,
        g: g,
        b: b,
        a: a,
    });
}

function mouseMove(event) {
    if (tracked) {
        let mouseX = event.clientX;
        let mouseY = event.clientY;
        let trackedPos = tracked.getBoundingClientRect();
        let xPercentage, yPercentage, picker;
        switch (tracked.id) {
            case `colorsquare-event-${id}`:
                xPercentage = ((mouseX - trackedPos.x) / 240) * 100;
                yPercentage = ((mouseY - trackedPos.y) / 160) * 100;
                xPercentage > 100 ? (xPercentage = 100) : xPercentage < 0 ? (xPercentage = 0) : null;
                yPercentage > 100 ? (yPercentage = 100) : yPercentage < 0 ? (yPercentage = 0) : null;
                picker = document.querySelector(`#colorsquare-picker-${id}`);
                yPercentage = yPercentage.toFixed(2);
                xPercentage = xPercentage.toFixed(2);
                picker.style.top = yPercentage + "%";
                picker.style.left = xPercentage + "%";
                s = xPercentage / 100;
                v = 1 - yPercentage / 100;
                colorChange();
                break;
            case `hue-event-${id}`:
                xPercentage = ((mouseX - 10 - trackedPos.x) / 220) * 100;
                xPercentage > 100 ? (xPercentage = 100) : xPercentage < 0 ? (xPercentage = 0) : null;
                xPercentage = xPercentage.toFixed(2);
                picker = document.querySelector(`#hue-picker-${id}`);
                picker.style.left = xPercentage + "%";
                h = xPercentage / 100;
                hueChange();
                break;
            case `alpha-event-${id}`:
                xPercentage = ((mouseX - 10 - trackedPos.x) / 220) * 100;
                xPercentage > 100 ? (xPercentage = 100) : xPercentage < 0 ? (xPercentage = 0) : null;
                xPercentage = xPercentage.toFixed(2);
                picker = document.querySelector(`#alpha-picker-${id}`);
                picker.style.left = xPercentage + "%";
                a = xPercentage / 100;
                colorChange();
                break;
        }
    }
}

function touchMove(event) {
    if (tracked) {
        let mouseX = event.touches[0].clientX;
        let mouseY = event.touches[0].clientY;
        let trackedPos = tracked.getBoundingClientRect();
        let xPercentage, yPercentage, picker;
        switch (tracked.id) {
            case `colorsquare-event-${id}`:
                xPercentage = ((mouseX - trackedPos.x) / 240) * 100;
                yPercentage = ((mouseY - trackedPos.y) / 160) * 100;
                xPercentage > 100 ? (xPercentage = 100) : xPercentage < 0 ? (xPercentage = 0) : null;
                yPercentage > 100 ? (yPercentage = 100) : yPercentage < 0 ? (yPercentage = 0) : null;
                picker = document.querySelector(`#colorsquare-picker-${id}`);
                yPercentage = yPercentage.toFixed(2);
                xPercentage = xPercentage.toFixed(2);
                picker.style.top = yPercentage + "%";
                picker.style.left = xPercentage + "%";
                s = xPercentage / 100;
                v = 1 - yPercentage / 100;
                colorChange();
                break;
            case `hue-event-${id}`:
                xPercentage = ((mouseX - 10 - trackedPos.x) / 220) * 100;
                xPercentage > 100 ? (xPercentage = 100) : xPercentage < 0 ? (xPercentage = 0) : null;
                xPercentage = xPercentage.toFixed(2);
                picker = document.querySelector(`#hue-picker-${id}`);
                picker.style.left = xPercentage + "%";
                h = xPercentage / 100;
                hueChange();
                break;
            case `alpha-event-${id}`:
                xPercentage = ((mouseX - 10 - trackedPos.x) / 220) * 100;
                xPercentage > 100 ? (xPercentage = 100) : xPercentage < 0 ? (xPercentage = 0) : null;
                xPercentage = xPercentage.toFixed(2);
                picker = document.querySelector(`#alpha-picker-${id}`);
                picker.style.left = xPercentage + "%";
                a = xPercentage / 100;
                colorChange();
                break;
        }
    }
}

function csDown(event) {
    tracked = event.currentTarget;
    let xPercentage = ((event.offsetX + 1) / 240) * 100;
    let yPercentage = ((event.offsetY + 1) / 160) * 100;
    yPercentage = yPercentage.toFixed(2);
    xPercentage = xPercentage.toFixed(2);
    let picker = document.querySelector(`#colorsquare-picker-${id}`);
    picker.style.top = yPercentage + "%";
    picker.style.left = xPercentage + "%";
    s = xPercentage / 100;
    v = 1 - yPercentage / 100;
    colorChange();
}

function csDownTouch(event) {
    tracked = event.currentTarget;
    let rect = event.target.getBoundingClientRect();
    let offsetX = event.targetTouches[0].clientX - rect.left;
    let offsetY = event.targetTouches[0].clientY - rect.top;
    let xPercentage = ((offsetX + 1) / 240) * 100;
    let yPercentage = ((offsetY + 1) / 160) * 100;
    yPercentage = yPercentage.toFixed(2);
    xPercentage = xPercentage.toFixed(2);
    let picker = document.querySelector(`#colorsquare-picker-${id}`);
    picker.style.top = yPercentage + "%";
    picker.style.left = xPercentage + "%";
    s = xPercentage / 100;
    v = 1 - yPercentage / 100;
    colorChange();
}

function mouseUp(event) {
    tracked = null;
}

function hueDown(event) {
    tracked = event.currentTarget;
    let xPercentage = ((event.offsetX - 9) / 220) * 100;
    xPercentage = xPercentage.toFixed(2);
    let picker = document.querySelector(`#hue-picker-${id}`);
    picker.style.left = xPercentage + "%";
    h = xPercentage / 100;
    hueChange();
}

function hueDownTouch(event) {
    tracked = event.currentTarget;
    let rect = event.target.getBoundingClientRect();
    let offsetX = event.targetTouches[0].clientX - rect.left;
    let xPercentage = ((offsetX - 9) / 220) * 100;
    xPercentage = xPercentage.toFixed(2);
    let picker = document.querySelector(`#hue-picker-${id}`);
    picker.style.left = xPercentage + "%";
    h = xPercentage / 100;
    hueChange();
}

function hueChange() {
    let rgb = hsvToRgb(h, 1, 1);
    let colorsquare = document.querySelector(`#colorsquare-${id}`);
    colorsquare.style.background = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},1)`;
    colorChange();
}

function colorChange() {
    let rgb = hsvToRgb(h, s, v);
    r = rgb[0];
    g = rgb[1];
    b = rgb[2];
    hexValue = RGBAToHex();
    let pickedColor = document.querySelector(`#color-picked-${id}`);
    pickedColor.style.background = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`;
    colorChangeCallback();
}

function alphaDown(event) {
    tracked = event.currentTarget;
    let xPercentage = ((event.offsetX - 9) / 220) * 100;
    xPercentage = xPercentage.toFixed(2);
    let picker = document.querySelector(`#alpha-picker-${id}`);
    picker.style.left = xPercentage + "%";
    a = xPercentage / 100;
    colorChange();
}

function alphaDownTouch(event) {
    tracked = event.currentTarget;
    let rect = event.target.getBoundingClientRect();
    let offsetX = event.targetTouches[0].clientX - rect.left;
    let xPercentage = ((offsetX - 9) / 220) * 100;
    xPercentage = xPercentage.toFixed(2);
    let picker = document.querySelector(`#alpha-picker-${id}`);
    picker.style.left = xPercentage + "%";
    a = xPercentage / 100;
    colorChange();
}

//Math algorithms
function hsvToRgb(h, s, v) {
    var r, g, b;

    var i = Math.floor(h * 6);
    var f = h * 6 - i;
    var p = v * (1 - s);
    var q = v * (1 - f * s);
    var t = v * (1 - (1 - f) * s);

    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 [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

function RGBAToHex() {
    let rHex = r.toString(16);
    let gHex = g.toString(16);
    let bHex = b.toString(16);

    if (rHex.length == 1) rHex = "0" + rHex;
    if (gHex.length == 1) gHex = "0" + gHex;
    if (bHex.length == 1) bHex = "0" + bHex;

    return ("#" + rHex + gHex + bHex).toUpperCase();
}

function rgbToHSV(r, g, b, update) {
    let rperc, gperc, bperc, max, min, diff, pr, hnew, snew, vnew;
    rperc = r / 255;
    gperc = g / 255;
    bperc = b / 255;
    max = Math.max(rperc, gperc, bperc);
    min = Math.min(rperc, gperc, bperc);
    diff = max - min;

    vnew = max;
    vnew == 0 ? (snew = 0) : (snew = diff / max);

    for (let i = 0; i < 3; i++) {
        if ([rperc, gperc, bperc][i] === max) {
            pr = i;
            break;
        }
    }
    if (diff == 0) {
        hnew = 0;
        if (update) {
            h = hnew;
            s = snew;
            v = vnew;
            hueChange();
            return;
        } else {
            return { h: hnew, s: snew, v: vnew };
        }
    } else {
        switch (pr) {
            case 0:
                hnew = (60 * (((gperc - bperc) / diff) % 6)) / 360;
                break;
            case 1:
                hnew = (60 * ((bperc - rperc) / diff + 2)) / 360;
                break;
            case 2:
                hnew = (60 * ((rperc - gperc) / diff + 4)) / 360;
                break;
        }
        if (hnew < 0) hnew += 6;
    }

    if (update) {
        h = hnew;
        s = snew;
        v = vnew;
        hueChange();
    } else {
        return { h: hnew, s: snew, v: vnew };
    }
}

**html**

<div class="hue-selector">
    <div id="hue-picker-{id}" class="hue-picker" />
    <div id="hue-event-{id}" class="hue-event" on:mousedown={hueDown} on:touchstart={hueDownTouch} />
</div>

<div class="alpha-selector">
    <div class="alpha-value" />
    <div id="alpha-picker-{id}" class="alpha-picker" />
    <div id="alpha-event-{id}" class="alpha-event" on:mousedown={alphaDown} on:touchstart={alphaDownTouch} />
</div>

<div class="color-info-box">
    <div class="color-picked-bg">
        <div id="color-picked-{id}" class="color-picked" />
    </div>

    <div class="hex-text-block">
        <p class="text">{hexValue}</p>
    </div>

    <div class="rgb-text-div">
        <div class="rgb-text-block">
            <p class="text">{r}</p>
            <p class="text-label">R</p>
        </div>

        <div class="rgb-text-block">
            <p class="text">{g}</p>
            <p class="text-label">G</p>
        </div>

        <div class="rgb-text-block">
            <p class="text">{b}</p>
            <p class="text-label">B</p>
        </div>
    </div>
</div>

` **style** `

.main-container {
    width: 240px;
    height: 265px;
    background: #f2f2f2;
    border-radius: 1px;
    -webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);
    -moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.51);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.saturation-gradient {
    background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0));
    width: 240px;
    height: 160px;
}

.value-gradient {
    background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
    overflow: hidden;
    width: 240px;
    height: 160px;
}

.hue-selector {
    background: linear-gradient(
        to right,
        #ff0000 0%,
        #ffff00 17%,
        #00ff00 33%,
        #00ffff 50%,
        #0000ff 67%,
        #ff00ff 83%,
        #ff0000 100%
    );
    margin: 15px 10px 10px 10px;
    border-radius: 10px;
    height: 10px;
}

.hue-selector .hue-picker {
    background: #fff;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    left: 0%;
    position: relative;
    cursor: default;
    transform: translate(-5px, -1px);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);
}

.hue-selector .hue-event {
    width: 236px;
    height: 14px;
    transform: translate(-8px, -14px);
    cursor: default;
    touch-action: none;
}

.alpha-selector {
    background-image: linear-gradient(45deg, #808080 25%, transparent 25%),
        linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%),
        linear-gradient(-45deg, transparent 75%, #808080 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    margin: 10px 10px;
    border-radius: 10px;
    height: 10px;
    position: relative;
}

.alpha-selector .alpha-picker {
    background: #fff;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    left: 100%;
    position: relative;
    cursor: default;
    transform: translate(-5px, -11px);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.67);
}

.alpha-selector .alpha-event {
    width: 236px;
    height: 14px;
    transform: translate(-8px, -24px);
    cursor: default;
    touch-action: none;
}

.alpha-value {
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.colorsquare {
    background: rgb(255, 0, 0);
}

.value-gradient .colorsquare-picker {
    margin: 0;
    padding: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fffb;
    position: relative;
    transform: translate(-9px, -9px);
    left: 100%;
}

.value-gradient .colorsquare-event {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translate(0, -16px);
    touch-action: none;
}

.color-info-box {
    margin: 10px;
    width: 100%;
    height: 22px;
    vertical-align: middle;
    position: relative;
}

.color-picked {
    width: 18px;
    height: 18px;
    border-radius: 2px;
    background: rgba(255, 0, 0, 1);
    display: inline-block;
}

.color-picked-bg {
    background-image: linear-gradient(45deg, #808080 25%, transparent 25%),
        linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%),
        linear-gradient(-45deg, transparent 75%, #808080 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    border: 2px solid #fff;
    border-radius: 4px;
    width: 18px;
    height: 18px;
    color: #fff;
    display: inline-block;
}

.hex-text-block {
    display: inline-block;
    background: white;
    border-radius: 2px;
    padding: 2px;
    border: 1px solid #e3e3e3;
    height: 16px;
    width: 54px;
    vertical-align: top;
    text-align: center;
}

.rgb-text-block {
    display: inline-block;
    background: white;
    border-radius: 2px;
    padding: 2px;
    margin: 0 1px;
    border: 1px solid #dcdcdc;
    height: 16px;
    width: 23px;
    vertical-align: top;
    text-align: center;
}

.rgb-text-div {
    right: 10%;
    display: inline-block;
    vertical-align: top;
    position: absolute;
}

.text-label {
    position: relative;
    top: -12px;
    font-family: sans-serif;
    font-size: small;
    color: #888;
}

.text {
    display: inline;
    font-family: sans-serif;
    margin: 0;
    display: inline-block;
    font-size: 12px;
    font-size-adjust: 0.5;
    position: relative;
    top: -1px;
    vertical-align: middle;
    -webkit-touch-callout: all;
    -webkit-user-select: all;
    -khtml-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

Input hex/RGB not working

Hi,

The input for hex/RGB is not allowing you to change the values. I have tried the example page and my own app, with no luck.

Many Thanks,

Ryan Arpe

How can be setted the value programatically?

I need to update the value programatically, how can i do that?

Greatio, Horatio! Can we get hex color from console.log?

Thanks

sirv-cli wrongfully set as dependency

sirv-cli is set as a dependency, but it's not required by the color picker component.

This causes sirv-cli and its dependencies to get added to a project's own dependencies when svelte-color-picker is added among the project dependencies and installs the package.

Feature request : Permit multiple color pickers on same page

Hello; your colorpicker is really awesome ! thx for that !
I would suggest a feature request:

Scope all mouse events to the component itself rather that to the global document, to permit to have several colorpicker in the same page

you could use
let me;
and in the first div:

and change 'document.' by 'me.' everywhere execept for document.addEventListener("mouseup", mouseUp); document.addEventListener("touchend", mouseUp); to let them handle end of select when mouse goes outside of color picker....

If you could have a look on this.
Thx.

Would like to have access to a palette.

Two user interaction types not represented.

color wheel
a palette grid

I have a medicine dropper to make work on my app. So, it would be nice to have a complementary medicine dropper.

Demo page leads to 404

opacity setting doesn't work on demo

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.