> Jx Jx. Button Jx. ColorPanel Jx. Toolbar Index Everything Classes Functions Properties | # 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
Jx. ColorPanel | A Jx.ColorPanel presents a user interface for selecting colors.
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 a new instance of Jx.ColorPicker
swatchOver | handle the mouse moving over a colour swatch by updating the preview
swatchClick | handle mouse click on a swatch by updating the color and hiding the panel.
colorChanged | handle the user entering a new colour value manually by updating the selected colour if the entered value is valid HEX.
alphaChanged | handle the user entering a new alpha value manually by updating the selected alpha if the entered value is valid alpha (0-100).
setColor | set the colour represented by this colour panel
setAlpha | set the alpha represented by this colour panel
updateSelected | update the colour panel user interface based on the current colour and alpha values
show | show the panel
hide | hide the panel
keypressHandler | handle the user pressing a key.
addColorChangeListener | add a colour change listener, an object that has a colorChanged function.
removeColorChangeListener | remove a previously added colour change listener
Jx. Button. Color | A Jx.ColorPanel wrapped up in a Jx.Button.
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.
{HTMLElement} swatch | a div used to represent the current colour in the button.
{String} color | the current colour of this button in hex.
{Integer} alpha | the current alpha of this button.
{Array} ccl | color change property listeners
Functions |
initialize | initialize a new colour button.
show | show the color panel when the user clicks the button
hide | hide the colour panel
setColor | set the colour represented by this colour panel
setAlpha | set the alpha represented by this colour panel
colorChanged | colorChangeListener callback function when the user changes the colour in the panel (just update the preview).
addColorChangeListener | add a colour change listener, an object that has a colorChanged function.
removeColorChangeListener | 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.
color | a colour to initialize the panel with, defaults to #000000 (black) if not specified.
alpha | an 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
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.
{HTMLElement} swatch | a div used to represent the current colour in the button.
{String} color | the current colour of this button in hex.
{Integer} alpha | the current alpha of this button.
{Array} ccl | color change property listeners
Functions |
initialize | initialize a new colour button.
show | show the color panel when the user clicks the button
hide | hide the colour panel
setColor | set the colour represented by this colour panel
setAlpha | set the alpha represented by this colour panel
colorChanged | colorChangeListener callback function when the user changes the colour in the panel (just update the preview).
addColorChangeListener | add a colour change listener, an object that has a colorChanged function.
removeColorChangeListener | 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.
color | a colour to initialize the panel with, defaults to #000000 (black) if not specified.
alpha | an 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.