Jx.ColorPalette

Extends: Object

Implements: Options, Events, Jx.Addable

A Jx.ColorPalette 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.ColorPalette can be embedded anywhere in a web page using its addTo method. However, 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 change event. To be notified of changes in a Jx.ColorPalette, use the addEvent method.

Example

Events

change	triggered when the color changes.
click	the user clicked on a color swatch (emitted after a change event)

License

This file is licensed under an MIT style license

Summary

Jx.ColorPalette	Extends: Object
Properties
{HTMLElement} domObj	the HTML element representing the color panel
Options
parent	default null, the DOM element to add the palette to.
color	default #000000, the initially selected color
alpha	default 100, the initial alpha value
hexColors	an array of hex colors for creating the palette, defaults to a set of web safe colors.
alphaLabel	the text to display next to the alpha input for i18n.
Constructor
Jx.ColorPalette	initialize a new instance of Jx.ColorPalette
Functions
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.
changed	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

Properties

{HTMLElement} domObj

the HTML element representing the color panel

Options

parent

default null, the DOM element to add the palette to.

color

default #000000, the initially selected color

alpha

default 100, the initial alpha value

hexColors

an array of hex colors for creating the palette, defaults to a set of web safe colors.

alphaLabel

the text to display next to the alpha input for i18n.

Constructor

Jx.ColorPalette

initialize a new instance of Jx.ColorPalette

Parameters

options

Jx.ColorPalette.Options

Functions

swatchOver

swatchOver: function( e )

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

Parameters

e	{Event} the mousemove event object

swatchClick

swatchClick: function( e )

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

Parameters

e	{Event} the mouseclick event object

changed

changed: 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

Parameters

color

{String} the new hex color value

setAlpha

setAlpha: function( alpha )

set the alpha represented by this colour panel

Parameters

alpha

{Integer} 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