Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Color of opacity Slider should not be Black everytime #310

Open
saeednazarix opened this issue Dec 3, 2021 · 2 comments
Open

Color of opacity Slider should not be Black everytime #310

saeednazarix opened this issue Dec 3, 2021 · 2 comments
Labels
unconfirmed The problem isn't really clear

Comments

@saeednazarix
Copy link

saeednazarix commented Dec 3, 2021

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:

Untitled.mp4

Your environment:

Version (see Pickr.version): 1.8.2
Used bundle (es5 or normal one): All
Used theme (default is classic): All
Browser-version:  Latest Browsers to date
Operating-system:  macOS
@saeednazarix saeednazarix added the unconfirmed The problem isn't really clear label Dec 3, 2021
@simonwep
Copy link
Owner

simonwep commented Dec 4, 2021

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
Copy link
Author

saeednazarix commented Dec 4, 2021

no problem, thanks to you for this helpful plugin.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
unconfirmed The problem isn't really clear
Projects
None yet
Development

No branches or pull requests

2 participants