Developing (v7+)

How To - A quick rundown on how to use the color picker widget in concrete5 5.7 blocks

Permalink 1 user found helpful April 01, 2015 at 5:52 AM

The concrete5 5.7 color picker widget uses the Spectrum color picker.
http://bgrins.github.io/spectrum/...

A working Color Picker Examples block is included with this How To.

Core::make('helper/form/color')
output( string $inputName, value $value = null, array $options = array() )

http://concrete5.org/api/class-Concrete.Core.Form.Service.Widget.Co...

Default Options:

$defaults = array();
$defaults['value'] = $value;
$defaults['className'] = 'ccm-widget-colorpicker';
$defaults['showInitial'] = true;
// Show the color that was initially set when the color picker was opened next to the current selection.
$defaults['showInput'] = true;
// Type, copy, and paste into the color picker input text box.
$defaults['allowEmpty'] = true;
// Allow an empty value to be selected.
$defaults['cancelText'] = t('Cancel');
$defaults['chooseText'] = t('Choose');
$defaults['preferredFormat'] = 'rgb';
// The color format that is displayed in the text box and the format saved.
$defaults['clearText'] = t('Clear Color Selection');

http://concrete5.org/api/source-class-Concrete.Core.Form.Service.Wi...

More information on Spectrum color picker options.
http://bgrins.github.io/spectrum/#options...

The color picker options are added to the output() method as a multidimensional array. The array is added as a third argument.
Example:

output('color_name', $color_name, array(…options…))

in form.php:

Basic Use:

<?php
$color = Core::make('helper/form/color');
$color->output('basic', $basic);
?>

Start with a Default Color:

<?php
$color = Core::make('helper/form/color');
$color->output('defaultColor', $defaultColor ? $defaultColor : '#000000');
?>

$defaultColor ? $defaultColor : '#000000'
A ternary operator is used in the second argument.
If $defaultColor is true, use the value of $defaultColor.
If $defaultColor is false, set the value to #000000.

Select a Preferred Color Format

<?php
$color = Core::make('helper/form/color');
$color->output('hex', $hex, array('preferredFormat' => 'hex'));
?>

Format Options:
hex
array('preferredFormat' => 'hex')
hex3
array('preferredFormat' => 'hex3')
hsl
array('preferredFormat' => 'hsl')
Default when no format is specified:
rgb

RGB Color Format with Transparency Slider (RGBA)

<?php
$color = Core::make('helper/form/color');
$color->output('rgba', $rgba, array('showAlpha' => 'true'));
?>

array('showAlpha' => 'true')

*** Palette colors can be HTML named colors, hex, hex3, rgba, rgba, hsl, and hsla.

Show a Color Palette

<?php
$color = Core::make('helper/form/color');
$color->output('showPalette', $showPalette, array('showPalette' => 'true', 'palette' => array(
    array('yellow', 'blue', 'red'),
    )));
?>

array('showPalette' => 'true', 'palette' => array(
array('palette_color1', 'palette_color2', 'palette_color3')
))

Show a Color Palette with Custom Rows

<?php
$color = Core::make('helper/form/color');
$color->output('showPaletteRows', $showPaletteRows, array('showPalette' => 'true', 'palette' => array(
    // Row One - one color
    array('red'),
    // Row Two - two colors
    array('yellow', 'blue'),
    // Row Three - three colors
    array('orange', 'grey', 'aquamarine'),
    // Row Four - four colors
    array('#9113C6', 'rgba(95, 91, 0, 0.7)', 'rgba(58, 56, 0, 0.7)', 'lightblue'),
    )));
?>

array('showPalette' => 'true', 'palette' => array(
array('palette_color_row1_1'),
array('palette_color_row2_1', 'palette_color_row2_2'),
array('palette_color_row3_1', 'palette_color_row3_2', 'palette_color_row3_3')
array('palette_color_row4_1', 'palette_color_row4_2', 'palette_color_row4_3', 'palette_color_row4_4')
))
The color palette can be divided into rows. Each sub-array of the palette array forms a new row. Each row can have differing numbers of colors.

Show a Color Palette in RGB Color Format with Transparency Slider (RGBA)

<?php
$color = Core::make('helper/form/color');
$color->output('showPaletteRGBA', $showPaletteRGBA, array('showAlpha' => 'true', 'showPalette' => 'true', 'palette' => array(
    // green
    array('rgba(0, 141, 6, 0.7)', 'rgba(0, 95, 4, 0.7)', 'rgba(0, 58, 3, 0.7)'),
    // lightblue
    array('rgba(0, 90, 141, 0.7)', 'rgba(0, 61, 95, 0.7)', 'rgba(0, 37, 58, 0.7)'),
    // blue
    array('rgba(0, 23, 142, 0.7)', 'rgba(0, 15, 95, 0.7)', 'rgba(0, 9, 58, 0.7)'),
    // purple
    array('rgba(61, 0, 142, 0.7)', 'rgba(41, 0, 95, 0.7)', 'rgba(25, 0, 58, 0.7)')
    )));
?>

array('showAlpha' => 'true','showPalette' => 'true', 'palette' => array(
array('palette_color1', 'palette_color2', 'palette_color3')
))

Show Color Palette Only

<?php
$color = Core::make('helper/form/color');
$color->output('showPaletteOnly', $showPaletteOnly, array('showPalette' => 'true', 'showPaletteOnly' => 'true', 'palette' => array(
    // green
    array('rgba(0, 141, 6, 0.7)', 'rgba(0, 95, 4, 0.7)', 'rgba(0, 58, 3, 0.7)'),
    // lightblue
    array('rgba(0, 90, 141, 0.7)', 'rgba(0, 61, 95, 0.7)', 'rgba(0, 37, 58, 0.7)'),
    // blue
    array('rgba(0, 23, 142, 0.7)', 'rgba(0, 15, 95, 0.7)', 'rgba(0, 9, 58, 0.7)'),
    // purple
    array('rgba(61, 0, 142, 0.7)', 'rgba(41, 0, 95, 0.7)', 'rgba(25, 0, 58, 0.7)')
    )));
?>

array(showPalette' => 'true', 'showPaletteOnly' => 'true', 'palette' => array(
array('palette_color1', 'palette_color2', 'palette_color3')
))
Restrict color choices to a predefined color palette.

in db.xml:

The color selected is a string and will need a field in the block table to be saved.

<field name="color_variable" type="C"></field>

The type="C" field type to MySQL is VARCHAR.
VARCHAR - variable characters with a 255 maximum
http://www.concrete5.org/documentation/how-tos/developers/creating-...

1 Attachment

Forums

Developing (v7+)

How To - A quick rundown on how to use the color picker widget in concrete5 5.7 blocks

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?