ColorPalette
ColorPalette is a UI widget for displaying dropdowns with a color palette.
Learn more about the ColorPalette plugin.
constructor
constructor(opt?: ColorPalette.Options);
The ColorPalette constructor accepts several parameters:
width
[optional] The width of the color palette in pixels.
options
[optional] An array of items. Each item is an object with the following properties:
content
The color in hex or other color formats (rgb, rgba).
icon
A path to an image (note that it can also be an image embedded via the Data URI Scheme). The icon can be handy for representing the transparent color.
selected
true if the item should be selected by default. If none of the items are selected, the first item is selected by default.
selected
[optional] The index of the item which should be selected by default. If this value is undefined (which it is by default),
the ui.ColorPalette widget looks up the selected item from the options array (by using the selected boolean property).
If nothing is selected, the first item in the options array is selected by default.
keyboardNavigation
[optional] true (the default) if you want the ui.ColorPalette to provide a keyboard navigation
(up/down/left/right/enter/escape keys are supported).
selectBoxOptionsClass
[optional] When the color palette is opened, the ui.ColorPalette generates a HTML container that contains all the
items. This container is then appended to the document body (or target if provided). Sometimes, you want to provide
custom styling to this color palette container. selectBoxOptionsClass gives you a chance to define a CSS class that
will be set on this container, so that you can style it in your CSS.
target
[optional] ui.ColorPalette generates a HTML container that contains all the color palette items. This container is
by default appended to the document body. In some situations (e.g. if you want the color palette to scroll with some
other container), you want to append this container to a different DOM element. The target option is exactly for that.
It accepts a HTML element that will be used as a container for the generated color palette items.
placeholder
[optional] In some cases, you want to "deselect" the color palette, and show a placeholder in place of the selected
item. This is when you don't want any of the items to be selected. In this case, set the selected index to -1, and
the placeholder to any HTML you want to display in the selected item window. This placeholder has the
selected-box-placeholder CSS class that you can use for further styling.
Methods
render()
colorPalette.render(): this;
Render the color palette. Note that once you render the color palette, you can use the el property that points to the
container HTML element, and append it anywhere in the DOM (e.g. document.body.appendChild(colorPalette.el)).
getSelection()
colorPalette.getSelection(): SelectBox.Selection;
getSelectionValue()
colorPalette.getSelectionValue(selection?: SelectBox.Selection): any;
Get the current selection value (the color).
getSelectionIndex()
colorPalette.getSelectionIndex(): number;
Get the index in the options array of the item that is currently selected.
select()
colorPalette.select(idx: number, opt?: { [key: string]: any }): void;
Select an item. idx is the index to the options array. opt is optional and can be an arbitrary object that will
be passed to the option:select event handler.
selectByValue()
colorPalette.selectByValue(value: any, opt?: { [key: string]: any }): void;
Select an item by color.
isOpen()
colorPalette.isOpen(): boolean;
Returns true if the color palette is currently opened. It is false otherwise.
toggle()
colorPalette.toggle(): void;
Programmatically toggle the color palette.
open()
colorPalette.open(): void;
Programmatically open the color palette.
close()
colorPalette.close(): void;
Programmatically close the color palette.
remove()
colorPalette.remove(): this;
Remove the color palette from the DOM.
on()
colorPalette..on(eventName: string, callback: EventHandler, context?: any): this;
Register a handler function that will be called whenever eventName is triggered. The optional context is an object
that will be the context of the handler function (the this).
Events
option:hover
Triggered when the user hovers over one of the color items. The handler is passed the option object, and the index of the
option in the options array.
option:select
Triggered when the user selects an item. The handler is passed the option object, and the index of the option in the
options array. If you selected the item with the select(index, opt) method, the third argument to the event handler
will be your opt object.
option:mouseout
Triggered when the user leaves an item with mouse cursor. The handler is passed an event object as the only argument.
close
Triggered when the color palette gets closed.
Types
Options
ColorPalette.Options extends SelectBox.Options.