search

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.29k stars 287 forks source link

Remove alpha field from color-functions if lockOpacity is set to true #257

Open FirstVertex opened 3 years ago

FirstVertex commented 3 years ago

Bug Report

Hi there! I'm trying to disable any selection of alpha channel, our application does not support it.

I set input options like

{
  lockOpacity: true,
  components: {
    opacity: false
  }
}

This has the desired effect of suppressing UI elements for the user to use mouse for selecting transparency. Also this has the desired effect of changing button text of RGBA to RGB and HSLA to HSL.

Here are the problems that arise:

  1. The text input still contains rgba() and hsla() functions. Expect these to only contain rgb() and hsl()
  2. These rgba and hsla representations do not match the text of the buttons that triggered them (RGB/HSL).
  3. The user can type an alpha value into the text input, but it is reset to 1 when the text input is blurred

Stackblitz

I prepared this Stackblitz to demo the issue https://stackblitz.com/edit/js-qur2ih

Teraskull commented 3 years ago

For now you can do something like this:

color.toRGBA().toString(0).replace(', 1)', ')').replace('rgba', 'rgb');
simonwep commented 3 years ago

Okay, that is unexpected and not well-implemented. I'll see what I can do :)