Jx. ColorPanel

A Jx.ColorPanel presents a user interface for selecting colors.  Currently, the user can either enter a HEX colour value or select from a palette of web-safe colours.  The user can also enter an opacity value.

A Jx.ColorPanel can be embedded anywhere in a web page by appending its <Jx.ColorPanel.domObj> property to an HTML element.  However, a a Jx.Button subclass is provided ( Jx.Button.Color ) that embeds a colour panel inside a button for easy use in toolbars.

Colour changes are propogated via a colorChanged listener pattern.  To be notified of changes in a Jx.ColorPanel, register a color change listener that implements a colorChanged method.  For instance:

var colorChangeListener = {
colorChanged: function(colorPanel) {
alert('the color changed to: ' + colorPanel.color);
}
}

var colorPanel = new Jx.ColorPanel();
colorPanel.addColorChangeListener(colorChangeListener);

document.getElementsByTagName('BODY')[0].appendChild(colorPanel.domObj);
Summary
A Jx.ColorPanel presents a user interface for selecting colors.
the HTML element representing the color panel
the current alpha value, between 0 (transparent) and 1 (opaque)
color change property listeners
an array of valid hex values that are used to build a web-safe palette
initialize a new instance of Jx.ColorPicker
handle the mouse moving over a colour swatch by updating the preview
handle mouse click on a swatch by updating the color and hiding the panel.
handle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX.
handle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100).
set the colour represented by this colour panel
set the alpha represented by this colour panel
update the colour panel user interface based on the current colour and alpha values
show the panel
hide the panel
handle the user pressing a key.
add a colour change listener, an object that has a colorChanged function.
remove a previously added colour change listener
A Jx.ColorPanel wrapped up in a Jx.Button.
By declaring this property as an array in the prototype, the array is used for all instances making it a Class property.
a div used to represent the current colour in the button.
the current colour of this button in hex.
the current alpha of this button.
color change property listeners
initialize a new colour button.
show the color panel when the user clicks the button
hide the colour panel
set the colour represented by this colour panel
set the alpha represented by this colour panel
colorChangeListener callback function when the user changes the colour in the panel (just update the preview).
add a colour change listener, an object that has a colorChanged function.
remove a previously added colour change listener

Properties

{HTMLElement} domObj

the HTML element representing the color panel

{Float} alpha

the current alpha value, between 0 (transparent) and 1 (opaque)

{Array} ccl

color change property listeners

{Array} hexColors

an array of valid hex values that are used to build a web-safe palette

Functions

initialize

initialize: function(options)

initialize a new instance of Jx.ColorPicker

Parameter: {Object} options

an object containing a variable list of optional initialization parameters.

colora colour to initialize the panel with, defaults to #000000 (black) if not specified.
alphaan alpha value to initialize the panel with, defaults to 1 (opaque) if not specified.

swatchOver

swatchOver: function(e)

handle the mouse moving over a colour swatch by updating the preview

Parameter: {Event} e

the mousemove event object

swatchClick

swatchClick: function(e)

handle mouse click on a swatch by updating the color and hiding the panel.

Parameter: {Event} e

the mouseclick event object

colorChanged

colorChanged: function()

handle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX.

alphaChanged

alphaChanged: function()

handle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100).

setColor

setColor: function(color)

set the colour represented by this colour panel

Parameter: {String} color

the new hex color value

setAlpha

setAlpha: function(alpha)

set the alpha represented by this colour panel

Parameter: {Integer} alpha

the new alpha value (between 0 and 100)

updateSelected

updateSelected: function()

update the colour panel user interface based on the current colour and alpha values

show

show: function()

show the panel

hide

hide: function()

hide the panel

keypressHandler

keypressHandler: function(e)

handle the user pressing a key.  If the key is the ESC key, then hide the color panel

Parameter: {Event} e

The keypress event

addColorChangeListener

addColorChangeListener: function(obj)

add a colour change listener, an object that has a colorChanged function.

Parameter: {Object} obj

The colour change listener to call when the colour changes.

removeColorChangeListener

removeColorChangeListener: function(obj)

remove a previously added colour change listener

Parameter: {Object} obj

The colour change listener to remove

Jx. Button. Color

A Jx.ColorPanel wrapped up in a Jx.Button.  The button includes a preview of the currently selected color.  Clicking the button opens the color panel.

Extends: Jx.Button.Flyout

Summary
By declaring this property as an array in the prototype, the array is used for all instances making it a Class property.
a div used to represent the current colour in the button.
the current colour of this button in hex.
the current alpha of this button.
color change property listeners
initialize a new colour button.
show the color panel when the user clicks the button
hide the colour panel
set the colour represented by this colour panel
set the alpha represented by this colour panel
colorChangeListener callback function when the user changes the colour in the panel (just update the preview).
add a colour change listener, an object that has a colorChanged function.
remove a previously added colour change listener

Properties

{ Array } colorPanel

By declaring this property as an array in the prototype, the array is used for all instances making it a Class property.  A Jx.ColorPanel instance used by all color buttons is made the first element so that only one color panel is ever created.

{HTMLElement} swatch

a div used to represent the current colour in the button.

{String} color

the current colour of this button in hex.  We have to maintain it here because we share a colour panel with all other colour buttons

{Integer} alpha

the current alpha of this button.  We have to maintain it here because we share a colour panel with all other colour buttons

{Array} ccl

color change property listeners

Functions

initialize

initialize: function(options)

initialize a new colour button.

Parameter: {Object} options

an object containing a variable list of optional initialization parameters.

colora colour to initialize the panel with, defaults to #000000 (black) if not specified.
alphaan alpha value to initialize the panel with, defaults to 1 (opaque) if not specified.

show

show: function()

show the color panel when the user clicks the button

hide

hide: function()

hide the colour panel

setColor

setColor: function(color)

set the colour represented by this colour panel

Parameter: {String} color

the new hex color value

setAlpha

setAlpha: function(alpha)

set the alpha represented by this colour panel

Parameter: {Integer} alpha

the new alpha value (between 0 and 100)

colorChanged

colorChanged: function(panel)

colorChangeListener callback function when the user changes the colour in the panel (just update the preview).

addColorChangeListener

addColorChangeListener: function(obj)

add a colour change listener, an object that has a colorChanged function.

Parameter: {Object} obj

The colour change listener to call when the colour changes.

removeColorChangeListener

removeColorChangeListener: function(obj)

remove a previously added colour change listener

Parameter: {Object} obj

The colour change listener to remove

initialize: function(options)
initialize a new instance of Jx.ColorPicker
swatchOver: function(e)
handle the mouse moving over a colour swatch by updating the preview
swatchClick: function(e)
handle mouse click on a swatch by updating the color and hiding the panel.
colorChanged: function()
handle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX.
alphaChanged: function()
handle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100).
setColor: function(color)
set the colour represented by this colour panel
setAlpha: function(alpha)
set the alpha represented by this colour panel
updateSelected: function()
update the colour panel user interface based on the current colour and alpha values
show: function()
show the panel
hide: function()
hide the panel
keypressHandler: function(e)
handle the user pressing a key.
addColorChangeListener: function(obj)
add a colour change listener, an object that has a colorChanged function.
removeColorChangeListener: function(obj)
remove a previously added colour change listener
A Jx.ColorPanel presents a user interface for selecting colors.
initialize: function(options)
initialize a new colour button.
show: function()
show the color panel when the user clicks the button
hide: function()
hide the colour panel
setColor: function(color)
set the colour represented by this colour panel
setAlpha: function(alpha)
set the alpha represented by this colour panel
colorChanged: function(panel)
colorChangeListener callback function when the user changes the colour in the panel (just update the preview).
addColorChangeListener: function(obj)
add a colour change listener, an object that has a colorChanged function.
removeColorChangeListener: function(obj)
remove a previously added colour change listener
A Jx.ColorPanel wrapped up in a Jx.Button.
Flyout buttons expose a panel when the user clicks the button.