Class ColorPicker

Object
   |
   +--ColorPicker

class ColorPicker

Defined in widgets/colorpicker.js

Field Detail

container

Object container

Container element, used by flat mode

curColor

String curColor

Current selected color

defaultColor

String defaultColor

Default color

disabled

Boolean disabled

Enable state

id

String id

Component id

mode

String mode

Component mode - flat or popup

nullColor

String nullColor

Color to be used as initial/reset value for highlight area and text input

onClose

Function onClose

If set, will be called when a popup color picker is closed

onOpen

Function onOpen

If set, will be called when a popup color picker opens

onSelect

Function onSelect

Called when a color is selected. This function will receive the selected color as an RGB string

text

Object text

Holds the text input used to display the RGB value

trigger

Object trigger

Trigger element, used by popup mode

ColorPicker

ColorPicker(<Object> opts)

The ColorPicker class builds a color picker widget. It can work in 2 different modes: "flat", displayed directly in the page document, using a div as its container; and "popup", using a trigger element to toggle its visibility state

Parameters:
opts - Set of configuration options

build

void build()

This method is called from inside ColorPicker.setup() and builds the HTML structure of the color picker. It's also responsible for setting up the event handlers in all the color cells

colorClick

void colorClick(item)

Handles the onClick event of a color cell. Changes the current color in the instance and calls the onSelect callback

Parameters:
Object - item Color cell

colorOut

void colorOut()

Handles the onMouseOut event on a color cell

Parameters:
Object - item Color cell

colorOver

void colorOver(item)

Handles the onMouseOver event on a color cell

Parameters:
Object - item Color cell

hidePopup

void hidePopup()

Hides the color picker popup

mouseDownHandler

void mouseDownHandler(<Event> e)

Listen to mousedown events in the HTML document. If the clicked element is outside the color picker area and is not its trigger element, the widget is closed

Parameters:
e - Event

rgbToHex

String rgbToHex(s)

Utility method to convert a color from rgb(N, N, N) format to #XXXXXX format

Parameters:
String - s Color string to be converted

setColor

void setColor(<String> color)

Change current selected color of the widget

Parameters:
color - Color, in RGB format #[0-9]{3-6}

setDisabled

void setDisabled(<Boolean> b)

Enable/disable the component

Parameters:
b - Flag value

setup

void setup()

Initialize the component, settin up the necessary events and element attributes. Under flat mode, this method will build the color picker element and attach it to the container. Under popup mode, the widget will be built only in the first instance and will be shared among all popup instances

showPopupAt

void showPopupAt(<Object> trg)

Shows the color picker popup in the right side of a given trigger

Parameters:
trg - Trigger element