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