HTML5 Color Picker

This color picker uses the HTML5 input type="color" to select colors in the admin panel. We're all using modern browsers now, so there is no longer any need for a JS utility unless you want to get fancy. Because it uses the native HTML5 input type, the look and function of the field will vary between browsers and platforms.

Simply add an editable field of type 'color' to allow editors to select a color using their native tools.

Code: Select all

<cms:editable type='color' name='my_color' label='Color Picker' desc='pick a color, any color' />

You may add four optional parameters to the tag:
color
This will be the initial value of the field before it is saved. The default is white (#ffffff).

field_width
field_height
The width and height of the input field within the admin panel. Requires valid CSS width and height values. The default width is 100%. The default height is empty.

alpha
Allow the user to add opacity to the color with the parameter alpha='1'. This will add an HTML5 slider to the admin field for setting the color's alpha value. The color is saved as an 8-digit hexadecimal color. The additional two digits are the alpha value. This is a relatively new standard, but it's widely adopted except for the now retired Internet Explorer. If your site needs to support IE, don't use this alpha feature.

Code: Select all

<cms:editable type='color' 
   name='my_color'
   label='Color Picker'
   desc='pick a color, any color'
   color='#d4fdd5'
   alpha='1'
   width='50%'
   height='100px'
/>

Installing the Add-On
Download and unzip the color-picker.zip file. Place the unzipped folder in your couch/addons/ folder. Register the add-on by adding a line of code to couch/addons/kfunctions.php.

Code: Select all

require_once( K_COUCH_DIR.'addons/color-picker/color-picker.php' );

https://github.com/fallingsprings/couch-add-ons/tree/master/color-picker

Looks cool, tim, thanks a lot - came across the plugin just as I was thinking something such would be a great toy!

One small thing, though: I am using it in a mosaic (essentially, I thus edit the color in a modal window along with other vontent for that tile). I noticed that if I lower alpha to zero, the mosaic does not save ... from my observation over about 6% alpha (#ffffff10 ) the modal remains open. As far as I can tell, the mosaic itself is okay. Have you perhaps encountered something of kind?

[trendoman]

I confirm, there is a deficiency in code that does not pad hex value properly.

Minimal working opacity would be Opacity (6.3%) (=16) and values less than that will make the hex value not padded and fail validation. Also there is no error message printed, because @tim forgot to add a value to the $color_error variable.

If anyone has free time, you are welcome to fix the code using this free debugging report.

UPDATE: Check out repository with addons (#Addons → color-picker) for the fixed version.

Thanks, trendoman, I confirm it seems to work on my side - saved properly with alpha of both 0.2% and 0%.

Still, if I may suggest, perhaps you would like to wrap the color picker with some border. It I take it down to 0, the entire thing disappears until I move the alpha up again. May only be a fringe issue, yet I imagine a site user might be quite confused.

[trendoman]

Everyone's welcome.

I myself prefer JSColor library (posted in the same repository). In my opinion @tim did a good work code-wise (once fixed problems), and the default look of inputs could be better.

@MiB If you have a good idea about a better "some border" thing, PM or PR and I'll see to integrate it.

Thanks, trendoman, I confirm it seems to work on my side - saved properly with alpha of both 0.2% and 0%.

Still, if I may suggest, perhaps you would like to wrap the color picker with some border. It I take it down to 0, the entire thing disappears until I move the alpha up again. May only be a fringe issue, yet I imagine a site user might be quite confused.

Utile et dulce, @trendoman.

My quick and dirty hotfix is wrapping that part in ad div, such as

Code: Select all

$html = '<div style="border:thin solid #cecece; padding:5px; "><input type="color" name="' . $input_name . '[color]"  id="' . $input_id . '" value="' . htmlspecialchars( $color, ENT_QUOTES, K_CHARSET ) . '" style="cursor:pointer; width:' . $this->field_width . ';';
$html .= strlen( $this->field_height ) ? 'height:' . $this->field_height .';' : '';
$html .= strlen( $alpha ) ? 'opacity:' . $alpha/255 .';' : '';
$html .= '" ' . $extra . '/></div>';

around the line 48. I am sure it can be done more ellegantly, tho, just find the closest parent wrapper, that is not affected by the alpha value.

I see another small shortcoming of this whole addon, anyway: the color cannot be easily rid of, can it? I have blocks I would like to distinguish visually, either with borders or with customizable background color (for which this is cool and easy on non-tech user). Unfortunately, with the logic being something like

Code: Select all

<section 
class="<cms:if "<cms:not_empty bgr-color />" >no-border</cms:if>" 
style="<cms:if "<cms:not_empty bgr-color />" >background:<cms:show bgr-color /></cms:if>"
>
...
</section>

painting the background white will not trigger the "no-border" class.

Quite likely I will end up limiting the user creativity by only offering a drop-down with a few complementary soft colors to choose from.

[trendoman]

Hi,

Let's see if my update serves your use-case. First, I integrated a border and added a new one around the combo with alpha.

Now the zero-alpha setting looks neat:

opacity0.png (5.25 KiB) Viewed 36146 times

Picker is aligned further with other editable fields, such as dropdowns, by width.

And your no-value issue can not be resolved easily, as the HTML specifications do not even allow NULL value for this kind. I posted a good workaround based on conditional field feature here color-picker → reset value

same width as a dropdown plus a controlling radio

default-width.png (14.83 KiB) Viewed 36146 times

Utile et dulce, @trendoman.

[trendoman]

I pushed another update that replaces default styling of alpha slider with something more dynamic (oninput).

dynamic-opacity.gif (26.1 KiB) Viewed 35887 times

Hints at selected color way better with zero alpha.

opacity0.png (5.17 KiB) Viewed 35887 times

Pull the changes from the same repository.

That`s neat, thanks!

Hello @Trendoman,



When I use this picker, I get this error:

! ) Parse error: syntax error, unexpected identifier "strlen", expecting "(" in ...admin\addons\color-picker\color-picker.php on line 85

This is line 85:

Code: Select all

// create 8-digit hexadecimal color with alpha value                 
   85                                 if strlen($post_val['alpha']) == 1{                                      
   86                                         $post_val['color'] .= '0';                                               
   87                                 }                                                                 
   88                 $post_val['color'] .= $post_val['alpha'];   

Is there supposed to be an open paren after the 'if'?

I put one there and the error went away. I pulled the code from here: https://github.com/fallingsprings/couch-add-ons/blob/master/color-picker/color-picker.php I'm not sure if that's the right spot or not.

However, I'm not getting an 8-digit output when I 'show' those colors. I'm just seeing the normal 6. I have the params for type='color' to alpha='1' and I'm seeing the slider. this is the result of my dump: clr_one: #d01616. I'm not seeing any other variable that shows an alpha setting.
Any ideas on why I'm not seeing the alpha channel on my output?
[UPDATE:] I didn't realize there is no opacity if it is at 100%. Once I moved it off, I have the 8-digit output