Documentation

Class: Picker

Picker

new Picker(options)

Create a color picker.

Parameters:
Name Type Description
options Object

@see setOptions()
Examples
var picker = new Picker(myParentElement);
picker.onDone = function(color) {
    myParentElement.style.backgroundColor = color.rgbaString;
};
var picker = new Picker({
    parent: myParentElement,
    color: 'gold',
    onChange: function(color) {
                  myParentElement.style.backgroundColor = color.rgbaString;
              },
});

Members

onChange :Picker~colorCallback

Callback whenever the color changes.

Type:

onDone :Picker~colorCallback

Callback when the user clicks "Ok".

Type:

onOpen :Picker~colorCallback

Callback when the popup opens.

Type:

onClose :Picker~colorCallback

Callback when the popup closes.

Type:

<static> StyleElement

The <style> element for picker CSS which is added to the document.

Methods

setOptions(options)

Set the picker options.

Parameters:
Name Type Description
options Object
Properties
Name Type Argument Default Description
parent HTMLElement

Which element the picker should be attached to.
popup 'top' | 'bottom' | 'left' | 'right' | false <optional>
 right

If the picker is used as a popup, where to place it relative to the parent. false to add the picker as a normal child element of the parent.
template string <optional>

Custom HTML string from which to build the picker. See /src/picker.pug for required elements and class names.
layout string <optional>
 default

Suffix of a custom "layout_..." CSS class to handle the overall arrangement of the picker elements.
alpha boolean <optional>
 true

Whether to enable adjusting the alpha channel.
editor boolean <optional>
 true

Whether to show a text field for color value editing.
editorFormat 'hex' | 'hsl' | 'rgb' <optional>
 hex

How to display the selected color in the text field (the text field still supports input in any format).
cancelButton boolean <optional>
 false

Whether to have a "Cancel" button which closes the popup.
color string <optional>

Initial color for the picker.
onChange function <optional>

@see onChange
onDone function <optional>

@see onDone
onOpen function <optional>

@see onOpen
onClose function <optional>

@see onClose

openHandler()

Default behavior for opening the popup

closeHandler()

Default behavior for closing the popup

movePopup(options, open)

Move the popup to a different parent, optionally opening it at the same time.

Parameters:
Name Type Description
options Object

@see setOptions() (Usually a new .parent and .color).
open boolean

Whether to open the popup immediately.

setColor(color, silent)

Set/initialize the picker's color.

Parameters:
Name Type Description
color string

Color name, RGBA/HSLA/HEX string, or RGBA array.
silent boolean

If true, won't trigger onChange.

setColour()

See:

show()

Show/open the picker.

hide()

Hide the picker.

destroy()

Release all resources used by this picker instance.

Type Definitions

colorCallback(color)

A callback that gets the picker's current color value.

Parameters:
Name Type Description
color Object
Properties
Name Type Description
rgba Array.<number>

RGBA color components.
hsla Array.<number>

HSLA color components (all values between 0 and 1, inclusive).
rgbString string

RGB CSS value (e.g. rgb(255,215,0)).
rgbaString string

RGBA CSS value (e.g. rgba(255,215,0, .5)).
hslString string

HSL CSS value (e.g. hsl(50.6,100%,50%)).
hslaString string

HSLA CSS value (e.g. hsla(50.6,100%,50%, .5)).
hex string

8 digit #RRGGBBAA (not supported in all browsers).