YUI recommends YUI 3.

YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.

Yahoo! UI Library

colorpicker  2.4.1

Yahoo! UI Library > colorpicker > YAHOO.widget.ColorPicker

Show Private Show Protected

Class YAHOO.widget.ColorPicker - extends YAHOO.util.Element

A widget to select colors

Constructor

YAHOO.widget.ColorPicker ( el(optional) , attr )
Parameters:
el(optional) <HTMLElement | String | Object> The html element that represents the colorpicker, or the attribute object to use. An element will be created if none provided.
attr <Object> (optional) A key map of the colorpicker's initial attributes. Ignored if first arg is attributes object.

Properties

DEFAULT - final object

Constants for the control's default default values

hueSlider - YAHOO.widget.Slider

The hue slider

ID - final object

The element ids used by this control

ID.B - final String

The id for the "blue" form field
Default Value: yui-picker-b

ID.B_HEX - final String

The id for the "blue" hex pair output
Default Value: yui-picker-bhex

ID.CONTROLS - final object

The id for the control details
Default Value: yui-picker-controls

ID.CONTROLS_LABEL - final object

The id for the controls section header
Default Value: yui-picker-controls-label

ID.G - final String

The id for the "green" form field
Default Value: yui-picker-g

ID.G_HEX - final String

The id for the "green" hex pair output
Default Value: yui-picker-ghex

ID.H - final String

The id for the "hue" form field
Default Value: yui-picker-h

ID.HEX - final String

The id for the hex value form field
Default Value: yui-picker-hex

ID.HEX_CONTROLS - final object

The id for the hsv controls
Default Value: yui-picker-hex-controls

ID.HEX_SUMMARY - final object

The id for the hex summary
Default Value: yui-picker-hex-summary

ID.HSV_CONTROLS - final object

The id for the hsv controls
Default Value: yui-picker-hsv-controls

ID.HUE_BG - final String

The id for the hue slider
Default Value: yui-picker-hue-bg

ID.HUE_THUMB - final String

The id for the hue thumb
Default Value: yui-picker-hue-thumb

ID.PICKER_BG - final String

The id for the picker region slider
Default Value: yui-picker-bg

ID.PICKER_THUMB - final String

The id for the picker region thumb
Default Value: yui-picker-thumb

ID.R - final String

The id for the "red" form field
Default Value: yui-picker-r

ID.R_HEX - final String

The id for the "red" hex pair output
Default Value: yui-picker-rhex

ID.RGB_CONTROLS - final object

The id for the rgb controls
Default Value: yui-picker-rgb-controls

ID.S - final String

The id for the "saturation" form field
Default Value: yui-picker-s

ID.SWATCH - final String

The id for the color swatch
Default Value: yui-picker-swatch

ID.V - final String

The id for the "value" form field
Default Value: yui-picker-v

ID.WEBSAFE_SWATCH - final String

The id for the websafe color swatch
Default Value: yui-picker-websafe-swatch

IMAGE - final object

Constants for the default image locations for img tags that are generated by the control. They can be modified by passing the complete list to the contructor for the "images" attribute

OPT - final object

Constants for the control's configuration attributes

pickerSlider - YAHOO.widget.Slider

The picker region

TXT - final object

Constants for any script-generated messages. The values here are the default messages. They can be updated by providing the complete list to the constructor for the "txt" attribute.

Properties inherited from YAHOO.util.Element:

DOM_EVENTS

Properties inherited from YAHOO.util.AttributeProvider:

_configs

Properties inherited from YAHOO.util.EventProvider:

__yui_events, __yui_subscribers

Methods

_getCommand

private int _getCommand ( e )
Key map to well-known commands for txt field input
Parameters:
e <Event> the keypress or keydown event
Returns: int
a command code
  • 0 = not a number, letter in range, or special key
  • 1 = number
  • 2 = a-fA-F
  • 3 = increment (up arrow)
  • 4 = decrement (down arrow)
  • 5 = special key (tab, delete, return, escape, left, right)
  • 6 = return

_getH

private int _getH ( )
Translates the slider value into hue, int[0,359]
Returns: int
the hue from 0 to 359

_getS

private int _getS ( )
Translates the slider value into saturation, int[0,1], left to right
Returns: int
the saturation from 0 to 1

_getV

private int _getV ( )
Translates the slider value into value/brightness, int[0,1], top to bottom
Returns: int
the value from 0 to 1

_getValuesFromSliders

private void _getValuesFromSliders ( )
Reads the sliders and converts the values to RGB, updating the internal state for all the individual form fields
Returns: void

_hexFieldKeypress

private void _hexFieldKeypress ( e , el , prop )
Use the value of the text field to update the control
Parameters:
e <Event> an event
el <HTMLElement> the field
prop <string> the key to the linked property
Returns: void

_hexOnly

private boolean _hexOnly ( e , numbersOnly )
Allows numbers and special chars, and by default allows a-f. Used for the hex field keypress handler.
Parameters:
e <Event> the event
numbersOnly <object> omits a-f if set to true
Returns: boolean
false if we are canceling the event

_numbersOnly

private boolean _numbersOnly ( e )
Allows numbers and special chars only. Used for the rgb and hsv fields keypress handler.
Parameters:
e <Event> the event
Returns: boolean
false if we are canceling the event

_onHueSliderChange

private void _onHueSliderChange ( newOffset )
Event handler for the hue slider.
Parameters:
newOffset <int> pixels from the start position
Returns: void

_onPickerSliderChange

private void _onPickerSliderChange ( newOffset )
Event handler for the picker slider, which controls the saturation and value/brightness.
Parameters:
newOffset <{x: int, y: int}> x/y pixels from the start position
Returns: void

_rgbFieldKeypress

private void _rgbFieldKeypress ( e , el , prop )
Handle keypress on one of the rgb or hsv fields.
Parameters:
e <Event> the keypress event
el <HTMLElement> the field
prop <string> the key to the linked property
Returns: void

_updateFormFields

private void _updateFormFields ( )
Updates the form field controls with the state data contained in the control.
Returns: void

_updateHex

private void _updateHex ( )
Parses the hex string to normalize shorthand values, converts the hex value to rgb and updates the rgb attribute (which updates the state for all of the other values) method _updateHex
Returns: void

_updateHueSlider

private void _updateHueSlider ( )
Moves the hue slider into the position dictated by the current state of the control
Returns: void

_updatePickerSlider

private void _updatePickerSlider ( )
Moves the picker slider into the position dictated by the current state of the control
Returns: void

_updateRGB

private void _updateRGB ( )
Updates the rgb attribute with the current state of the r,g,b fields. This is invoked from change listeners on these attributes to facilitate updating these values from the individual form fields
Returns: void

_updateRGBFromHSV

private void _updateRGBFromHSV ( )
Updates the RGB values from the current state of the HSV values. Executed when the one of the HSV form fields are updated _updateRGBFromHSV
Returns: void

_updateSliders

private void _updateSliders ( )
Moves the sliders into the position dictated by the current state of the control
Returns: void

_updateSwatch

private void _updateSwatch ( )
Updates the background of the swatch with the current rbg value. Also updates the websafe swatch to the closest websafe color
Returns: void

getElement

HTMLElement getElement ( id )
Returns the element reference that is saved. The id can be either the element id, or the key for this id in the "id" config attribute. For instance, the host element id can be obtained by passing its id (default: "yui_picker") or by its key "YUI_PICKER".
Parameters:
id <string> the element id, or key
Returns: HTMLElement
a reference to the element

initAttributes

void initAttributes ( attr )
Sets up the config attributes and the change listeners for this properties
Parameters:
attr <object> An object containing default attribute values
Returns: void

initPicker

void initPicker ( )
Sets the initial state of the sliders
Returns: void

setValue

void setValue ( rgb , silent )
Sets the control to the specified rgb value and moves the sliders to the proper positions
Parameters:
rgb <[int, int, int]> the rgb value
silent <boolean> whether or not to fire the change event
Returns: void

Methods inherited from YAHOO.util.Element:

_registerHTMLAttr, addClass, addListener, appendChild, appendTo, fireQueue, getElementsByClassName, getElementsByTagName, getStyle, hasChildNodes, hasClass, initAttributes, insertBefore, on, removeChild, removeClass, removeListener, replaceChild, replaceClass, setStyle, subscribe

Methods inherited from YAHOO.util.AttributeProvider:

configureAttribute, fireBeforeChangeEvent, fireChangeEvent, get, getAttributeConfig, getAttributeKeys, refresh, register, resetAttributeConfig, resetValue, set, setAttributeConfig, setAttributes

Methods inherited from YAHOO.util.EventProvider:

createEvent, fireEvent, hasEvent, subscribe, unsubscribe, unsubscribeAll

Events

beforeBlueChangeEvent

beforeBlueChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'blue' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeContainerChangeEvent

beforeContainerChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'container' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeElementsChangeEvent

beforeElementsChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'elements' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeGreenChangeEvent

beforeGreenChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'green' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeHexChangeEvent

beforeHexChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'hex' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeHueChangeEvent

beforeHueChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'hue' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeIdsChangeEvent

beforeIdsChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'ids' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeImagesChangeEvent

beforeImagesChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'images' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforePickersizeChangeEvent

beforePickersizeChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'pickersize' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeRedChangeEvent

beforeRedChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'red' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeSaturationChangeEvent

beforeSaturationChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'saturation' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeShowcontrolsChangeEvent

beforeShowcontrolsChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'showcontrols' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeShowhexcontrolsChangeEvent

beforeShowhexcontrolsChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'showhexcontrols' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeShowhexsummaryChangeEvent

beforeShowhexsummaryChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'showhexsummary' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeShowhsvcontrolsChangeEvent

beforeShowhsvcontrolsChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'showhsvcontrols' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeShowrgbcontrolsChangeEvent

beforeShowrgbcontrolsChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'showrgbcontrols' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeShowwebsafeChangeEvent

beforeShowwebsafeChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'showwebsafe' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeTxtChangeEvent

beforeTxtChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'txt' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeValueChangeEvent

beforeValueChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'value' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

beforeWebsafeChangeEvent

beforeWebsafeChangeEvent ( eventInfo )
Fires before the value for the configuration attribute 'websafe' changes. Return false to cancel the attribute change.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the current attribute value and the new value.

blueChangeEvent

blueChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'blue' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

containerChangeEvent

containerChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'container' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

elementsChangeEvent

elementsChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'elements' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

greenChangeEvent

greenChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'green' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

hexChangeEvent

hexChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'hex' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

hueChangeEvent

hueChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'hue' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

idsChangeEvent

idsChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'ids' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

imagesChangeEvent

imagesChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'images' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

pickersizeChangeEvent

pickersizeChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'pickersize' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

redChangeEvent

redChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'red' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

saturationChangeEvent

saturationChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'saturation' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

showcontrolsChangeEvent

showcontrolsChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'showcontrols' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

showhexcontrolsChangeEvent

showhexcontrolsChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'showhexcontrols' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

showhexsummaryChangeEvent

showhexsummaryChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'showhexsummary' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

showhsvcontrolsChangeEvent

showhsvcontrolsChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'showhsvcontrols' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

showrgbcontrolsChangeEvent

showrgbcontrolsChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'showrgbcontrols' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

showwebsafeChangeEvent

showwebsafeChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'showwebsafe' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

txtChangeEvent

txtChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'txt' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

valueChangeEvent

valueChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'value' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

websafeChangeEvent

websafeChangeEvent ( eventInfo )
Fires when the value for the configuration attribute 'websafe' changes.
Parameters:
eventInfo <{oldValue: any, newValue: any}> An object containing the previous attribute value and the new value.

Events inherited from YAHOO.util.Element:

available, contentReady,

Configuration Attributes

blue - int

The current blue value 0-255

container - YAHOO.widget.Panel

If the color picker will live inside of a container object, set, provide a reference to it so the control can use the container's events.

elements - {id: HTMLElement}

The element refs used by this control. Set at initialization

green - int

The current green value 0-255

hex - string

The current hex value #000000-#FFFFFF, without the #

hue - int

The current hue value 0-360

ids - writeonce {referenceid: realid}

A list of element ids and/or element references used by the control. The default is the this.ID list, and can be customized by passing a list in the contructor

images - writeonce {key: image}

The img src default list is this.IMAGES

pickersize - int

The size of the picker. Trying to change this is not recommended.
Default Value: 180

red - int

The current red value 0-255

saturation - int

The current saturation value 0-100

showcontrols - boolean

Hide/show the entire set of controls
Default Value: true

showhexcontrols - boolean

Hide/show the hex controls
Default Value: true

showhexsummary - boolean

Hide/show the hex summary
Default Value: true

showhsvcontrols - boolean

Hide/show the hsv controls
Default Value: false

showrgbcontrols - boolean

Hide/show the rgb controls
Default Value: true

showwebsafe - boolean

Hide/show the websafe swatch
Default Value: true

txt - writeonce {key: txt}

A list of txt strings for internationalization. Default is this.TXT

value - int

The current value/brightness value 0-100

websafe - int

The closest current websafe value

Configuration attributes inherited from YAHOO.util.Element:

element,

Modules

Classes

Files

Properties

Methods

Events

Configuration Attributes

Copyright © 2007 Yahoo! Inc. All rights reserved.