Coded something up in Couch in an interesting way? Have a snippet or shortcode to share? Post it here for the community to benefit.
9 posts Page 1 of 1
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

Attachments

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?
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.
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.

MiB wrote: 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. :D

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.
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
opacity0.png (5.25 KiB) Viewed 20836 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

default-width.png
same width as a dropdown plus a controlling radio
default-width.png (14.83 KiB) Viewed 20836 times


MiB wrote: Utile et dulce, @trendoman. :D
I pushed another update that replaces default styling of alpha slider with something more dynamic (oninput).

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


Hints at selected color way better with zero alpha.

opacity0.png
opacity0.png (5.17 KiB) Viewed 20832 times


Pull the changes from the same repository.
That`s neat, thanks!
9 posts Page 1 of 1
cron