Adding Color Wheel to Form Element in Drupal

You may have input for choosing color. While there are many different ways to add color wheel, here we demonstrate one powered by Spectrum.js

1. Download Library and Customize Basic Palette

First download the Spectrum.js library(spectrum.js and spectrum.css) and then create basic color palette. Here is an example:

jQuery(".basic-color-palette").spectrum(
    {
        color: this.value,
        allowEmpty:true,
        showInput: true,
        className: "full-spectrum",
        showInitial: true,
        showPalette: true,
        showSelectionPalette: true,
        maxPaletteSize: 10,
        preferredFormat: "hex",
        localStorageKey: "spectrum.demo",
        move: function (color) {

        },
        show: function () {

        },
        beforeShow: function () {

        },
        hide: function () {

        },
        change: function() {

        },
        palette: [
            ["#000","#444","#666","#999","#ccc","#eee","#f3f3f3","#fff"],
            ["#f00","#f90","#ff0","#0f0","#0ff","#00f","#90f","#f0f"],
            ["#f4cccc","#fce5cd","#fff2cc","#d9ead3","#d0e0e3","#cfe2f3","#d9d2e9","#ead1dc"],
            ["#ea9999","#f9cb9c","#ffe599","#b6d7a8","#a2c4c9","#9fc5e8","#b4a7d6","#d5a6bd"],
            ["#e06666","#f6b26b","#ffd966","#93c47d","#76a5af","#6fa8dc","#8e7cc3","#c27ba0"],
            ["#c00","#e69138","#f1c232","#6aa84f","#45818e","#3d85c6","#674ea7","#a64d79"],
            ["#900","#b45f06","#bf9000","#38761d","#134f5c","#0b5394","#351c75","#741b47"],
            ["#600","#783f04","#7f6000","#274e13","#0c343d","#073763","#20124d","#4c1130"]
        ]
    }
);

So, we have three artifacts – spectrum.js, spectrum.css and basic-color-palette.js the last is the above code

2. Import Artifacts

Next, we attach these artifacts to the form. One way to do is as following:

$form['backgrounds'] = array(
        '#type' => 'fieldset',
        '#title' => t('Background'),
        '#group' => 'builder',
        '#attached' => array(
            'js' => array(
                drupal_get_path('module', 'MODULE-NAME') . '/js/color-picker/spectrum.js' => array(
                    'type' => 'file',
                    'scope' => 'header'
                ),
                drupal_get_path('module', 'MODULE-NAME') . '/js/color-picker/basic-palette.js' => array(
                    'type' => 'file',
                    'scope' => 'footer'
                ),
            ),
            'css' => array(
                drupal_get_path('module', 'MODULE-NAME') . '/js/color-picker/spectrum.css' => array(
                    'type' => 'file',
                    'scope' => 'header'
                ),
            ),
        ),
    );

Here, we have fieldset ‘background’ that will have input text field for the color(see next section). In this fieldset, we attach the three artifacts stored in some module – MODULE-NAME ‘js/color-picker’ directory. This will load the artifacts whenever we load the form for our color wheel

3. Attach the Wheel

At last, we attach the color wheel for particular form input field:

..
$form['backgrounds']['SOME-FORM-INPUT'] = array(
        '#type' => 'textfield',
        '#title' => t('Choose Background Color'),
        '#default_value' => isset($form_state['value']['SOME-FORM-INPUT']) ? $form_state['value']['SOME-FORM-INPUT'] : theme_get_setting('ds_theme_bg_color'),
        '#attributes' => array(
            'class' => array('basic-color-palette'),
        ),
    );

Here, we attach color wheel to the field – SOME-FORM-INPUT that is part of the field set – backgrounds. By adding class ‘basic-color-palette’ to this field, we attach the color wheel. Note, the class ‘basic-color-palette’ is the same element specified in the artifact basic-palette.js

Resources

http://bgrins.github.io/spectrum/