Alpha handling & formatting

[marcandre]

We use spectrum to select colours but we deal ourselves with the alpha selection with a separate control.

It works well, and it's nice that spectrum handles this very well with the setAlpha method and showAlpha == false option.

I'm not sure why the preferredFormat of 'hex' is overridden in the showInput section when alpha < 1 to insure the alpha is shown (not really what we'd like, to be honest), but the output itself to the input is not overridden (and thus does not contain the alpha), which is exactly what we want.

Is it a "feature" we can rely on? Would it be appropriate (at least if showAlpha == false) to not do the override?
Ideally, typing a color's hex code would also change the colour but not the alpha (again, at least if showAlpha == false).

[bgrins]

I'm having a bit of trouble understanding exactly what functionality you are wanting.

So you are setting the value to be something like rgba(255, 0, 0, .5), but with showAlpha as false and preferredFormat of hex? Currently, that causes the output to turn into a hex after a change, doesn't it?

Here is a test case set up how I think you are explaining, can you modify it if needed to explain the issue you are seeing? http://jsfiddle.net/bgrins/UzPRF/

[marcandre]

Mmm, sorry, looks like the behavior I'm describing has changed with f8301b7 👎

This change makes it harder to use spectrum to pick the color (while the alpha is selected independently). Isn't it a bit inconsistent also that clicking exactly where the marker is already will make a change (i.e. reset the opacity to 100%)?

Is there any hope of having a mode (showAlpha = false, color's alpha < 1) that maintains the alpha but does not output it, neither in the input's value nor in the 'showInput' section?

[marcandre]

Also, the colors added to the palette are affected by the opacity. We use the showAlpha = false mode to make it a RGB selector, and ideally only the swatch would show the alpha and the colors in the palette would be solid.

[bgrins]

This could probably be an option. I believe that it was introduced because otherwise you could get stuck with an alpha value that you didn't want. I'm thinking a basic workaround (that could be rolled into an option) is to remove the sp-alpha-enabled class on the container, but keep showAlpha set to true. As a quick test, can you set showAlpha true, but add the following CSS to your app after spectrum.css:

.sp-alpha-enabled .sp-top {
    margin-bottom: 0;
}
.sp-alpha-enabled .sp-alpha {
    display: none;
}

If this is sufficient, then we should be able to either provide a new option, or somehow overload the showAlpha option to allow this behavior.

[marcandre]

Right, this indeed bypasses the code of f8301b7 and css hides the alpha controller, so this has the right effect.
An official option would be welcome, as I'm not comfortable using this hack...

[bgrins]

OK, I've pushed this up as an option on a branch here: https://github.com/bgrins/spectrum/blob/revertAlpha/spectrum.js.

I don't really like the name revertAlpha. It's a bit of a weird API, because really what we want to have is 3 possible options for showAlpha. Here are the possibilities I can think of:

1. Use a new option like this push - I think allowAlpha may be a better name
2. We could make it something like showAlpha could be one of 0, 1, or 2 where 1 is the current behavior and 2 is the behavior you want, but I don't really like that either.
3. We could make it something like showAlpha could be one of false, true, "allow" (this has the advantage of keeping the current API the same without adding a new option, but is still a bit weird).

[marcandre]

I agree that it's really 3 options for showAlpha. I prefer 3). I have no problem with the 3 values, but but maybe it's worth renaming the option (supporting the previous name). Maybe alphaControl with possible values false, true, and 'external'?

In any case, the choice is yours. Thanks for considering this 😸