simonwep / pickr

🎨 Flat, simple, multi-themed, responsive and hackable Color-Picker library. No dependencies, no jQuery. Compatible with all CSS Frameworks e.g. Bootstrap, Materialize. Supports alpha channel, rgba, hsla, hsva and more!
https://simonwep.github.io/pickr
MIT License
4.31k stars 284 forks source link

Color of opacity Slider should not be Black everytime #310

Open saeednazarix opened 2 years ago

saeednazarix commented 2 years ago

What is the current behavior?

The color of the Opacity Slider Should not be black every time. when I change the color, the color of the opacity slider should update to that color but the color is black every time.

Screen Shot 1400-09-12 at 15 04 34

Please provide the steps to reproduce and create a JSFiddle.

Just Open picker in the demo that you provided

What is the expected behavior?

after changing the color, the color of the opacity slider should change to that color. something like this:

Screen Shot 1400-09-12 at 15 01 43

I saw the code and definitely it's not a bug and hardcoded to use black color every time but regardless of this, it is more like a bug than a feature request.

btw I implemented that for pickers in my projects so I share that (maybe it helps someone else). something like this:


const pickr = Pickr.create({
    // Options
});
Pickr.prototype.opacityUpdater = () => {
    const opacityPtrn = `url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path fill="white" d="M1,0H2V1H1V0ZM0,1H1V2H0V1Z"/><path fill="gray" d="M0,0H1V1H0V0ZM1,1H2V2H1V1Z"/></svg>')`;
    const colorRGBA = this._color.toRGBA().toString(0);
    const [r, g, b] = colorRGBA.match(/[\d\.]+/g);
    const rgb = `rgb(${r}, ${g}, ${b})`;
    this._root.opacity.slider.style.backgroundImage = `linear-gradient(to right, #0000, ${rgb}),${opacityPtrn}`;
    this._root.opacity.picker.style.backgroundColor = colorRGBA;
};

pickr.on("change", (color, source, instance) => {
    instance.opacityUpdater();
});

Demo:

simonwep commented 2 years ago

Very nice to see this! Great job :) Unfortunately this project will be deprecated starting 2022... Anyway, I'll mark this as a feature-request!

saeednazarix commented 2 years ago

no problem, thanks to you for this helpful plugin.