Jx.Button.Color

Extends: Jx.Button.Flyout

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

A color button is essentially a Jx.Button.Flyout where the content of the flyout is a Jx.ColorPalette. For performance, all color buttons share an instance of Jx.ColorPalette which means only one button can be open at a time. This isn’t a huge restriction as flyouts already close each other when opened.

Example

var colorButton = new Jx.Button.Color({
    onChange: function(button) {
        console.log('color:' + button.options.color + ' alpha: ' +
                    button.options.alpha);
    }
});

Events

change

fired when the color is changed.

License

This file is licensed under an MIT style license

Summary

Jx.Button.Color	Extends: Jx.Button.Flyout
Options
color	a color 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.
Constructor
Jx.Button.Color	initialize a new color button.
Functions
clicked	override Jx.Button.Flyout to use a singleton color palette.
hide	hide the color panel
setColor	set the color represented by this color panel
setAlpha	set the alpha represented by this color panel
changed	handle the color changing in the palette by updating the preview swatch in the button and firing the change event.
updateSwatch	Update the swatch color for the current color

Options

color

a color 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.

Constructor

Jx.Button.Color

initialize a new color button.

Parameters

options

Jx.Button.Color.Options initialize instance options.

Functions

clicked

clicked: function()

override Jx.Button.Flyout to use a singleton color palette.

hide

hide: function()

hide the color panel

setColor

setColor: function( color )

set the color represented by this color panel

Parameters

color

{String} the new hex color value

setAlpha

setAlpha: function( alpha )

set the alpha represented by this color panel

Parameters

alpha

{Integer} the new alpha value (between 0 and 100)

changed

changed: function( panel )

handle the color changing in the palette by updating the preview swatch in the button and firing the change event.

Parameters

panel

Jx.ColorPalette the palette that changed.

updateSwatch

updateSwatch: function()

Update the swatch color for the current color