While leveraging the Style (CSS) settings module to have #2420905: Configurable CSS for the Flickr module (see step nr. 3 of the instructions), I had a hard time to add a ColorPicker field to the settings form.

Fact is that a lot of CSS attributes contain a color value. Although also a simple text field could hold a color hex value, it would enhance UX a lot if also a colorpicker is offered and the choosen color would be visible. Apart from validating the user input as being a valid color.

Some contrib module does offer an API to have a 'color' field but this implies:

  • having a dependency
  • not only on the module itself but also a jQuery library
  • overkill as the contrib module also adds functionality we don't use.

Drupal core does already have the Farbtastic plugin used by the core Color module located at '/misc/farbtastic/farbtastic.js'. It is hard to make use of it as the Drupal form API does not offer a 'color' form element type.

CommentFileSizeAuthor
#5 field_wrapper_to_target_right_with_js-2528252-5.patch695 byteslolandese
#1 style_settings_colorpicker.jpeg24.4 KBlolandese
#1 colorpicker_field_api-2528252-1.patch7.19 KBlolandese

Comments

lolandese’s picture

lolandese commented
Issue summary: View changes
Status: Active » Needs review
StatusFileSize
new colorpicker_field_api-2528252-1.patch7.19 KB
new style_settings_colorpicker.jpeg24.4 KB

Attached patch:

  • Adds a new form API element type 'style_settings_colorpicker'.
  • Takes care of the validation as being a valid color. Also shorthand (like #fff) and valid color names are accepted.
  • Does not depend on any contrib or the core Color module.
  • Does not need an additional jQuery library.
  • Stores the variable value as a hex or valid color name. It does not need conversion to be used in CSS files.

For project maintainers adding a color setting to their configuration is as easy as:

  $form['YOURMODULE_bgcolor'] = array(
    '#type' => 'style_settings_colorpicker',
    '#title' => t('Background color'),
    '#default_value' => variable_get('YOURMODULE_bgcolor', 'IndianRed'),
  );

to get:
Colorpicker provided by the Style (CSS) Settings module

  • lolandese committed 0566fb7 on 7.x-1.x 
    Issue #2528252: Offer a ColorPicker API form element for developers
lolandese’s picture

lolandese commented
Status: Needs review » Fixed
lolandese’s picture

lolandese commented
Status: Fixed » Needs work

Buggy with multiple color fields. Clicking not the first instance opens the color picker under the first.

lolandese’s picture

lolandese commented
Status: Needs work » Fixed
StatusFileSize
new field_wrapper_to_target_right_with_js-2528252-5.patch695 bytes

  • lolandese committed 7e73f88 on 7.x-1.x 
    Issue #2528252: Added a field wrapper to target it correctly with the...
lolandese’s picture

lolandese commented
Title: Offer a ColorPicker API form element type for project maintainers » Offer a ColorPicker API form element type for developers

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.