Sandbox: JavaScript

Displays a color picker for the user to select a color, updating the target input with the selected color.

Example

<div class="box">
    <input class="form-control" data-behavior="ColorPicker" data-colorpicker-options="{"imgs":{"moor_woverlay.png":"/assets/behavior_ui/assets/images/moor_woverlay-ad0c84ff1d6bf6b66a6902350101bf26.png","moor_boverlay.png":"/assets/behavior_ui/assets/images/moor_boverlay-f59ce340a722fd598598c97c30af0be4.png","blank.gif":"/assets/blank-ad0cf88e0d409ca6229153afafd5038c.gif","moor_slider.png":"/assets/behavior_ui/assets/images/moor_slider-406e28468f78b69b2d2fbc228c3eb50b.png","moor_cursor.gif":"/assets/moor_cursor-2d02aef6c0744e30d71e2e9e65c1ca89.gif"},"startColor":[255,255,255],"update":"!div.box"}" id="backgroundColor" name="backgroundColor" type="text" value="#ffffff" />
  </div>

Example with optional property

Color change
<div class="colorbox">
    <span>Color change</span>
    <input class="form-control" data-behavior="ColorPicker" data-colorpicker-options="{"imgs":{"moor_woverlay.png":"/assets/behavior_ui/assets/images/moor_woverlay-ad0c84ff1d6bf6b66a6902350101bf26.png","moor_boverlay.png":"/assets/behavior_ui/assets/images/moor_boverlay-f59ce340a722fd598598c97c30af0be4.png","blank.gif":"/assets/blank-ad0cf88e0d409ca6229153afafd5038c.gif","moor_slider.png":"/assets/behavior_ui/assets/images/moor_slider-406e28468f78b69b2d2fbc228c3eb50b.png","moor_cursor.gif":"/assets/moor_cursor-2d02aef6c0744e30d71e2e9e65c1ca89.gif"},"startColor":[0,0,0],"update":"!div.colorbox span","property":"color"}" id="color" name="color" type="text" value="#000000" />
  </div>

Behavior Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-colorpicker-options="...".

Image Assets

Because our JS assets are pre-compiled, they don't have references to our deployed assets. Consequently, you must pass the paths to the following images:

  • moor_woverlay.png
  • moor_boverlay.png
  • blank.gif
  • moor_slider.png
  • moor_cursor.gif

The easy way:

imgs = {}
['moor_woverlay.png',
 'moor_boverlay.png',
 'blank.gif',
 'moor_slider.png',
 'moor_cursor.gif'].each do |filename|
  imgs[filename] = asset_path("color-picker/#{filename}")
end

...and then pass imgs to your filter (see ruby example below).

Ruby Example

<%= text_field_tag 'color', '#ffffff',
    class: 'form-control',
    data: {
      behavior: "ColorPicker",
      colorpicker_options: {
        imgs: imgs, //see below
        startColor: [255,255,255],
        update: "!div.box"
      }
    } %>

Behavior Options

These options apply only to the data- tag invocation. See the MooRainbow docs for JavaScript options, methods, and events.

Name type default description
startColor string #ff0000 (red) The starting color.
imgs array (of strings) ~ See above about Image Assets
imgPath string ~ If provided, the images listed in the Image Assets section above will be references against this base path.
update string ~ If set, defines the elements in the DOM to update colors when the user selects one.
property string 'backgroundColor' Allows control over which property of the 'update' target is to be changed.
setOnStart boolean true If false, ignores the startColor in the color picker UI.