Allow transparent as value about jquery-minicolors HOT 54 CLOSED

Great suggestion. I'll keep it in mind for a future release.

from jquery-minicolors.

Thanks!

from jquery-minicolors.

I'm thinking that this could be added to the UI as a label + checkbox, possibly in a small horizontal placement below the color square. The 'transparent' option would be disabled by default, so the control's appearance would only change for those who specifically enabled this feature.

Just some mental notes for now. Let me know if you have any ideas about the proposed changes.

from jquery-minicolors.

Label + checkbox sounds spot on. Having it optional is fine by me, just please expose it through $.miniColors.defaults so we can set for the app in one call.

from jquery-minicolors.

how far off is the transparent solution?

from jquery-minicolors.

Working on a big release this week and next, so I won't be able to get to it until after. If you want to take a stab at it in the meantime, feel free.

from jquery-minicolors.

Definitely looking forward to this =)

from jquery-minicolors.

Any updates on this? This feature would be awesome.

Maybe we can add an option to allow for blank values? Or would that fall under "transparent".

Currently on one of my forms, a text color is optional, but blank values default to #FFFFFF, which causes issues as I'd like the color to be inherited instead of set to white.

from jquery-minicolors.

Yea, maybe an option to default to "inherit" if the option is left blank.

from jquery-minicolors.

I changed the following lines in jquery.miniColors.js to allow blank values have been just testing it and haven't found any issues yet.

if( !color ) color = 'ffffff';

to

if( !color ) color = '';

.val('#' + convertCase(color, o.letterCase));

to

.val((color) ? '#' + convertCase(color, o.letterCase) : ''); //'#' + convertCase(color, o.letterCase));

input.val( '#' + cleanHex(input.val()));

to

input.val( (input.val()) ? '#' + cleanHex(input.val()) : '' );//'#' + cleanHex(input.val()));

from jquery-minicolors.

Would like this feature as well. @claviska, any chance to see this in the near future?

from jquery-minicolors.

Probably not in the immediate future, unless someone wants to contribute to it. Although I would like to see it as an option, I personally have no need and therefore can't justify spending a lot of time on it at the moment.

In the meantime, why not incorporate a checkbox next to the input control that, when selected, disables the color picker and indicates transparent?

On Monday, July 9, 2012 at 8:31 AM, Juriy Zaytsev wrote:

Would like this feature as well. @claviska, any chance to see this in the near future?

---

Reply to this email directly or view it on GitHub:
#2 (comment)

from jquery-minicolors.

I don't think checkbox disabling entire colorpicker would work well in my case.

In our app, colorpicker is responsible for changing background color of text objects. That background color can be transparent, which essentially makes text not have any background. Text object can be selected for editing, and it is this selection that makes colorpicker enabled. When text object is deselected, colorpicker gets disabled. So disabling colorpicker and setting object's color to transparent are 2 distinct actions.

I'll tinker with the script meanwhile, see what I can do.

from jquery-minicolors.

Makes sense. I've thought about how to implement this, but short of having a checkbox inside of the color picker, I'm not sure how to do it elegantly. I guess there could be a small swatch with common colors, with transparent being displayed as a white/gray checkerboard pattern.

In any case, make sure the data gets updated so API calls continue to work properly when transparent is selected :)

On Monday, July 9, 2012 at 3:14 PM, Juriy Zaytsev wrote:

I don't think checkbox disabling entire colorpicker would work well in my case.

In our app, colorpicker is responsible for changing background color of text objects. That background color can be transparent, which essentially makes text not have any background. Text object can be selected for editing, and it is this selection that makes colorpicker enabled. When text object is deselected, colorpicker gets disabled. So disabling colorpicker and setting object's color to transparent are 2 distinct actions.

I'll tinker with the script meanwhile, see what I can do.

---

Reply to this email directly or view it on GitHub:
#2 (comment)

from jquery-minicolors.

+1 for transparent as an option

from jquery-minicolors.

Modified the code a bit more (besides the modifications done by timsmr2 above) to enable the "preview color square" to show when transparent (no color) value is set. transparent color shows up as white/gray checkboard pattern.

you can find the neccesary png file here: http://www.nattstad.se/javascript/images/triggertrans.png
and the .js file for minicolors here: http://www.nattstad.se/javascript/jquery.minicolors.js

Modification 1 (in the create trigger section):
// Create trigger
var trigger;
if (expandHex(input.val())) {
trigger = $('');
}
else {
trigger = $('');
}
trigger.insertAfter(input);

modification 2 (in "var setColor = function (input, hsb, updateInput) {"-function):

input.data('trigger').css('backgroundColor', '#' + hex).css;
changed to:
if (input.val() != '#') { input.data('trigger').css('backgroundColor', '#' + hex).css('backgroundImage', 'url(javascript/images/trigger.png)'); } else { input.data('trigger').css('backgroundColor', '#' + hex).css('backgroundImage', 'url(javascript/images/triggertrans.png)'); }

modification 3 (in the "var setColorFromInput = function (input) {"-function):
input.val((input.val()) ? '#' + cleanHex(input.val()) : '');
if (input.val() != '') { input.data('trigger').css('backgroundImage', 'url(javascript/images/trigger.png)'); } else { input.data('trigger').css('backgroundImage', 'url(javascript/images/triggertrans.png)'); }

from jquery-minicolors.

EDIT! (modification 1)

            var trigger;
            if (expandHex(input.val())) {
                trigger = $('<a class="miniColors-trigger" style="background-color: #' + color + ';" href="#"></a>');
            }
            else {
                trigger = $('<a class="miniColors-trigger" style="background-color: #00ff00;background: url(javascript/images/triggertrans.png) center no-repeat;" href="#"></a>');
            }
            trigger.insertAfter(input);

from jquery-minicolors.

@TeleJack, thanks for the contribution. A few things:

1. I'd like to see this as an option, as not all users will require/want transparent selections. The default should be off.
2. I'd like to see a mockup of the UI with the transparent option. (I couldn't get your modifications to work. It will be easier if you send a pull request next time.)
3. The transparent image shouldn't include the trigger image. We should find a way to use a checkered background image so the plugin remains theme-able.

I may spend some time on this today, but I have a couple other things to take care of beforehand.

from jquery-minicolors.

I've been playing with some ideas and I think one of the best options will be a color swatch. I started with 16 web-safe colors plus transparent. Keep in mind that you'll be able to enable/disable the palette, but the only way to get transparent would be to have it enabled:

If it were implemented this way, the palette would be configurable through the settings, which might be handy.

At this point, I'm looking for some feedback before proceeding with any development. Feel free to submit your own ideas so we can bounce them back and forth.

from jquery-minicolors.

I realize that there were 16 web-safe colors according to HTML 4.01, but if you consider just putting 8 colors plus transparent, the whole palette would be smaller. I guess the question would be, why not just 8 favorites plus transparent?

from jquery-minicolors.

If we go with ROYGBIV (minus 'indigo'), it may work. I'll admit I like how it still looks compact.

The idea is to at least have a logical default, because I think having favorites would be more of an edge case for this plugin.

from jquery-minicolors.

I like the compactness. I also agree that giving a predefined palette (ROYGBV)BW Tr is the way to go. Unless there's an overwhelming request, or it's really simple to do, I'd leave the palette predefined with the only option as on/off.

from jquery-minicolors.

This was another idea that I came up with, but I'm starting to feel like it goes outside the scope of the project.

I spent hours yesterday playing with various ideas in Photoshop (swatches, checkboxes, sliders, etc.), only to arrive at the conclusion that a transparency option probably doesn't "fit" well because it simply doesn't belong there.

I could be wrong, but after sleeping on it I really don't feel great about any of these mockups. The palette, as pointed out by @afragen in another issue, doesn't really add anything to the project and the opacity slider takes things beyond the scope of MiniColors.

I'm at the point where I can't seem to come up with a great solution for this within the control, so I'm not going to force it. I'm still open to ideas, but the beauty behind this plugin is its minimalistic approach to color selection. I think most of you would agree that we should work hard to maintain that, so I'd rather not settle on a half-ass attempt.

For what it's worth, my idea of implementing a transparent option in a web app wouldn't be inside a color picker control, which is why I was initially reluctant to consider this. I'm not saying I won't do it, I'm just saying that, if it's going to be done, it needs to be done without sacrificing aesthetics, without adding unnecessary fillers, and without going outside the scope of the project.

So, if you have a mockup or a great idea for this feature, feel free to share.

from jquery-minicolors.

I still think that 'transparent' should be within the scope of MiniColors as it clearly is a valid color choice. I'm currently using a kludge to work around this issue. It's simply a checkbox for transparent above MiniColors. You can see a mockup at http://wordpress.org/extend/plugins/the-events-calendar-category-colors/screenshots/

I really like MiniColors and you've done a fantastic job making it simple, compact and intuitive. I can't improve on your decisions. I think most of us in this thread do feel that we would like to add transparent as a color option in places where we use MiniColors. In my case, transparency is used at least as much as a traditional color.

Thanks Cory.

from jquery-minicolors.

Let me clarify—full RGBA support is, at least in the immediate future, outside the scope of MiniColors. I'm totally fine with supporting transparent, but it needs to be done in a way that doesn't compromise aesthetics and the overall experience of using the control. I'm just out of ideas at this point, but I'm open to suggestions.

from jquery-minicolors.

I still like the look of a single row underneath the color palette. 2 other options I can think of are a long rectangle with transparent checkerboard or perhaps a radio button or checkbox with a label.

I still think, no words and a ROYGBIV Tr variations is cleanest so far.

from jquery-minicolors.

I found myself needing the same feature, so I implemented it in the pull request here:
#26

My modification allows you to provide the color swatch options as an array of HEX color codes. I only needed a single line of swatches below the color picker, but it would be an easy change to allow an arbitrary number of lines like the example from @claviska above. I didn't need to deal with transparency, but any kind of token could be passed in that array of color codes to indicate transparency.

As for the initial palette, it shouldn't matter what each of our preferences are since it's passed as an option. We could just share the arrays of HEX color codes, or use an existing theme depending on the application.

I'd happily switch to the official option when that becomes available.

from jquery-minicolors.

At this point, if nobody else has any feedback about how to implement transparency, I'll probably go with the single-row swatch version posted above. There is obviously a need for transparency, so that will at least be covered [finally].

If we go with that concept, it should have intelligent defaults but they should also be customizable. Are there any use cases that require multiple rows of swatches? (i.e. more than eight preset colors)

from jquery-minicolors.

I'm using swatches to give users solid default color choices for dashboards (e.g. gauges, bar charts, line charts, scatterplots). I happened to arrive at eight swatches before I read this conversation, although it isn't a fixed limit. Having only eight swatches hasn't limited our ability to display dozens of user-created charts on the same screen while still keeping them visually distinct.

I think eight would be a reasonable limitation, and a necessary default; although there's no reason it must be no more than eight. I used slightly smaller swatches than your example above, so I could fit more than eight on a line; but the approach in my hack could just expand the height of the picker based on Math.ceil(num_swatches / swatches_per_row). To keep things 'mini', the default should be on a single row.

Really, though, if someone needs considerably more than eight presets, they probably don't need a freeform color picker at all. They'd just have their users choosing from a list of presets.

In my case, the swatches are there so that someone can intentionally pick the same color in multiple elements on the screen. For example, we allow people to build a gauge with colored zones (e.g. OK, Warning, Critical). Those colors should be consistent and easily selected whether there's one gauge or 100. There's no usable and aesthetic way to do that right now. In pure miniColors, the only option is exposing the raw HEX color codes in the field -- and that's not user friendly at all. I just need a solution that hides the computer science behind hex color encoding. :)

from jquery-minicolors.

Hi,
I've been using minicolors for some months now to our Web CMS, and I love it!
I also have been missing rgba-support, and noticed that suprisingly few color pickers support this.
Claviska, you have done an amazing work keeping this color picker slim and easy, and I think you should continue doing so! The other jQuery color pickers I found are either too ugly or too much, and looks like PhotoShop wannabees.

I've been following this issue for a couple of months now, and hoping that you would bring rgba-support to minicolors. But when I read your message "Let me clarify—full RGBA support is, at least in the immediate future, outside the scope of MiniColors", I thought to myself. Ok, I better fix this myself.

Thanks to your smart code, it only took me 4-5 hours to fix! This is how I did it:

You had done such a nice job with the hue selector, so I just duplicated all of its functionality to a "alpha-version. I also created a png-24 background with transparency for the alpha selector, so I just have to update the background color in that alpha-selector in the same fashion as you do with the color-selector.

Then off course, I needed to add a bunch of functions to allow the rgba syntax being read, validated and set from and to the input.val().

I also needed to convert the 150 pixel scale to a "100-scale" instead of a "360-scale" as for hue, and so on, but it was very easy to do, thanks to your easy code.

I also put the trigger swatch inside a holder with a background of white and gray squares, to better visualize the preview of any transparent colors.

The logic will only return a rgba css value to the input field if the transparency picker is at a state between 0 and 1.
If it is 1, a hex-color will be returned, if it is 0, a blank value is returned.

I also limited the alpha steps to 0.05. Feel free to change this.

I've commented in the code with //ALPHA START and //ALPHA END around all code blocks that are new.

I have no interest in developing minicolors any further, but may I suggest that you (Claviska) goes through the code, and adjust it as you want, and then publish a new version, to make it available, if other people are interested that is.

Thanks!

Here is a screenshot

And here is a link to working demo

from jquery-minicolors.

yze77, it's perfect! That's exactly what I had in mind.

Just wanted to say to say I concur, this is the best color picker out there, thank you all for the work you've put in. I'll try to pitch in a little bit later and make the alpha channel optional for those who want to disable it. Other than that, I hardly think there's much of anything to improve. Subtle, simple and usable.

from jquery-minicolors.

Thanks Greg-kmg! Are you Claviska?
Anyway, I was looking through my code, and you wanna take a look at "Handle calls to $([selector]).miniColors()" and the "getter" for "value" - it seems to only return a hex. And also securing that the hex-value is displayed in the correct lettercase.
Looking forward to the new release.

from jquery-minicolors.

@yze77 That looks great. Nice work!

from jquery-minicolors.

@yze77 No, I'm not Claviska. Just thought I'd try to contribute as well, whether anyone decides to use the code or not. Thanks again for the update. It's working great with a collaborative whiteboard script I'm working on.

from jquery-minicolors.

@yze77, excellent work. Obviously the community is interested in having full RGBA support (as opposed to just a transparent option). I stand corrected and look forward to getting this into a production-ready version.

However, before we can release the updates I'll need to address a couple issues. Off the top of my head, these come to mind:

1. We need settings that let you choose between hex/rgb/rgba output in the text field and in the value getter; the default should be hex to keep things backwards compatible. The callbacks also need to be modified so you can access the opacity level if you choose hex.
2. We need to properly support hex/rgb/rgba values in the value setter
3. We need a setting to enable the opacity slider. The default should be off for backwards compatibility

In the next couple days, I'm going to work on integrating your solution into the project and tightening up the callbacks, getter, setter, etc. I'm also going to implement the ROYGBPBWT palette to solve the initial issue so we'll have transparent.

To recap, I'd like to have a full update with the following features by the end of the week:

• transparent support
• RGBA support
• Inline selector (i.e. always open)

I'll touch base here soon with an update :)

from jquery-minicolors.

I posted an update with opacity support. There were two contributors who inspired this, but both versions had issues and were more of a hack than a solid update. I ended up going back to the last release and doing it from scratch. Here's the result:

What's changed:

• The opacity slider can be enabled by setting opacity: true on init
• You can get and set opacity using the opacity method (see the readme)
• You can specify a preset value using the data-opacity attribute on the input element
• opacity has been added as the third argument in the open/close/change callbacks
• Slider handles and the color circles have been improved visually

The control still uses hex colors, not RGBA values. I feel this is a good approach for usability instead of swapping between hex/RGBA as the user makes their selection. The hex color can still be obtained using value and the opacity can be obtained using opacity. You can also obtain the hex code, RGB value, and opacity as arguments in any callback.

I didn't get around to making the control display inline, but I think this will suffice to the needs of most. Please help test and provide feedback :)

from jquery-minicolors.

And, of course, the demo: http://labs.abeautifulsite.net/jquery-miniColors/

from jquery-minicolors.

Any chance of reopening this thread? RGBA is great and it's implemented very nicely but is it possible to add a swatch bar as discussed above so we can have a real transparent option?

from jquery-minicolors.

An (optional!) row of swatches across the bottom much like described previously in this thread seems like it would make an excellent addition to this plugin. The opacity slider is still an awesome feature too, so why not offer both?

This would especially be useful if, for instance, you have a set of standard colors across your site that you want users to be able to easily choose from without remembering hex values or playing with sliders.

It could also be used to set a 'transparent' value for css as @afragen mentions, but I do feel like that swatch's behavior should be configurable so that it can switch between 'transparent' or white with opacity 255 for cases where the plugin's not being used to set CSS values.

from jquery-minicolors.

I agree, the opacity is great but doesn't resolve my need as stated in the opening of this ticket. Thanks!

from jquery-minicolors.

Thanks for the transparency its very useful but...

1. rgb.a should have value '1' by default, without the need to go over the inputs to preset them with data-opacity="1" to that value.
2. RGB should be string instead of an object like - rgba(25,25, 255, .5)
   Currently theres no easy way to set the value of an input by rgb. So I am to save like 3 different things if I want to save user selected color, or do some converting function. Let the user see always hex in the input, it looks better, but going rgb(going transparency) should work as hex - super easy to save, super easy to set.

from jquery-minicolors.

@DoTheEvolution

1. I've made an update that enforces 1 as the default for opacity.
2. The rgba object is more useful for developers. You can easily concatenate the properties you need to form RGB or RGBA values. Not everyone will be applying it as a CSS property.

from jquery-minicolors.

1. nice, thnx
2. well I dunno, I believe that it will most of the time go to css, but I only see my angle I guess. Anyway here is jsfiddle where I try to transfer value from one input to the other with transparency. http://jsfiddle.net/kbKVK/5/
   Is this intended way to do it?

from jquery-minicolors.

var rgbaString = 'rgba(' + rgba.r + ', ' + rgba.g + ', ' + rgba.b + ', ' + rgba.a + ')';

from jquery-minicolors.

yeah, I saw the example. the issue is not getting the rgba value, its setting it back in to input. That you cant use rgb object to set the value, or this string, you can only use hex to set the value.

from jquery-minicolors.

Ah, gotcha. I'd suggest opening a new issue for that. Not hard to add, you could take a stab at it if you want. Just detect whether the value in the value setter is an object or a string. If it's an object, use the rgb2hex() method to convert it to a string.

from jquery-minicolors.

Hey, everyone. I completely rewrote the plugin, which I'm dubbing 2.0 (beta). I put a lot of effort into simplifying the code and I'm pretty happy with the result. The new version is about 150 lines shorter than the old one, yet packs in a lot more features:

• Auto-initializing
• Ability to place controls inline
• Color wheel option (color wheel image and math functions courtesy of M. Mager of flatout-tech.com)
• Touch support
• Support for default values (blank reverts to transparent)
• Opacity support
• Ability to place swatch on the left or right of the input element
• Adjustable dropdown position
• Utility functions to get RGB(A) objects/strings
• $.minicolors.settings for letterCase, hideSpeed, and showSpeed
• Fresh but familiar new look

Unfortunately, the new version isn't backwards compatible with the one you've been using. However, 2.0 makes it much easier to initialize a color picker:

<input type="minicolors" name="color" />

All input controls with the minicolors type will be automatically initialized when the page loads. (See $.minicolors.init() for initializing controls added dynamically.)

The plugin makes use of HTML5 data- attributes to make configuration easy. Here is an example with a few options set. This will add a preset color, opacity, a default (i.e. forced) value, and turn the picker into a color wheel:

<input type="minicolors" name="color" value="#090" 
       data-opacity="0.75" data-default="#fffffff" data-type="wheel" />

There are other options you can play with. You can see all the available settings in index.html, which is the new demo/documentation for this project.

Please try out the new version and let me know what you think. Keep in mind that, even though I tested as thoroughly as possible in IE7-9, Chrome, Firefox, Safari, and Opera, there may be some bugs that need to be worked out. If you find anything, please post it as an issue so I can address it.

from jquery-minicolors.

Here's a link to the demo and docs: http://labs.abeautifulsite.net/jquery-miniColors/

from jquery-minicolors.

Just checking in here - has the whole "transparent" idea been scrapped? Opacity is a great option but doesn't really help with those of us who want to be able to choose transparent as a color.

Even if there's some sort of hack that will allow the word "transparent" in the hex box, that would work for me..

Thanks!

from jquery-minicolors.

You can achieve transparency by not setting a default hex color. The absence of a value indicates transparency (and the swatch even shows as being transparent), it just doesn't say "transparent" in the text box. This was the best solution I could come up with considering everything that was discussed, and it seems to be working well so far.

Let me know what you think :)

On Friday, April 5, 2013 at 2:31 PM, midnightdonkey wrote:

Just checking in here - has the whole "transparent" idea been scrapped? Opacity is a great option but doesn't really help with those of us who want to be able to choose transparent as a color.
Even if there's some sort of hack that will allow the word "transparent" in the hex box, that would work for me..
Thanks!

—
Reply to this email directly or view it on GitHub (#2 (comment)).

from jquery-minicolors.

Thanks for getting back to me! :)

In my project, default colors are set in the options for the default style, so when someone deletes the value and refreshes, the default value is reset into the option. The initial removal of the color works, but when the options are saved again, the default value is re-added to the database.

If there was an option to select "transparent" or even "none", then the default value wouldn't be reset, and the element could be cleared of the color.

Thanks again for getting back to me, I appreciate it!
Tom

from jquery-minicolors.

Why not check for the value when saved and, if empty, set it to transparent in your database?

On Apr 6, 2013, at 11:17 AM, midnightdonkey [email protected] wrote:

Thanks for getting back to me! :)

In my project, default colors are set in the options for the default style, so when someone deletes the value and refreshes, the default value is reset into the option. The initial removal of the color works, but when the options are saved again, the default value is re-added to the database.

If there was an option to select "transparent" or even "none", then the default value wouldn't be reset, and the element could be cleared of the color.

Thanks again for getting back to me, I appreciate it!
Tom

—
Reply to this email directly or view it on GitHub.

from jquery-minicolors.

I thought about that, but not all empty options should necessarily be transparent. For example, I have options for link colors - link, hover and visited. While the link and hover are set colors, there isn't anything set for visited, as it inherits the link color unless another value is set.

Of course, I can see how I'm probably not in the majority, so no worries if it's not realistic. However, I really like this mockup you did: #2 (comment)

Thanks for your time,
Tom

from jquery-minicolors.

Gotcha. Maybe the best option for now is having a checkbox in the app

On Apr 6, 2013, at 3:45 PM, midnightdonkey [email protected] wrote:

I thought about that, but not all empty options should necessarily be transparent. For example, I have options for link colors - link, hover and visited. While the link and hover are set colors, there isn't anything set for visited, as it inherits the link color unless another value is set.

Of course, I can see how I'm probably not in the majority, so no worries if it's not realistic. However, I really like this mockup you did: #2

Thanks for your time,
Tom

—
Reply to this email directly or view it on GitHub.

from jquery-minicolors.