ColorPicker

ColorPicker

new ColorPicker(optionsopt)

Source:
Properties:
Name Type Attributes Default Description
hsl object <optional>
 {h:0, s:0.5, l:0}

An object containing members hue, saturation and lightness as numerical values.
rgb object <optional>
 {r:0, r:0, b:0}

An object containing members red, green and blue as numerical values.
hex string <optional>
 000000

A HEX color value, either with or without leading #.
hue number <optional>
 0

A numerical value 0..1 for the hue.
saturation number <optional>
 0

A numerical value 0..1 for the saturation.
lightness number <optional>
 0

A numerical value 0..1 for the lightness.
red number <optional>
 0

A numerical value 0..255 for the amount of red.
green number <optional>
 0

A numerical value 0..255 for the amount of green.
blue number <optional>
 0

A numerical value 0..255 for the amount of blue.
show_hue boolean <optional>
 true

Set to false to hide the ValueKnob for hue.
show_saturation boolean <optional>
 true

Set to false to hide the ValueKnob for saturation.
show_lightness boolean <optional>
 true

Set to false to hide the ValueKnob for lightness.
show_red boolean <optional>
 true

Set to false to hide the ValueKnob for red.
show_green boolean <optional>
 true

Set to false to hide the ValueKnob for green.
show_blue boolean <optional>
 true

Set to false to hide the ValueKnob for blue.
show_hex boolean <optional>
 true

Set to false to hide the Value for the HEX color.
show_apply boolean <optional>
 true

Set to false to hide the Button to apply.
show_cancel boolean <optional>
 true

Set to false to hide the Button to cancel.
show_canvas boolean <optional>
 true

Set to false to hide the color canvas.
show_grayscale boolean <optional>
 true

Set to false to hide the grayscale.
show_indicator boolean <optional>
 true

Set to false to hide the color indicator.

ColorPicker provides a collection of widgets to select a color in RGB or HSL color space.

Parameters:
Name Type Attributes Default Description
options Object <optional>
 { }

An object containing initial options.

Extends

Members

apply :Button

Source:

The Button to apply. Has class .aux-apply`,

Type:

blue :ValueKnob

Source:

The ValueKnob for the blue color. Has class .aux-blue`,

Type:

cancel :Button

Source:

The Button to cancel. Has class .aux-cancel`,

Type:

canvas :HTMLDivElement

Source:

The color background. Has class .aux-canvas`,

Type:
  • HTMLDivElement

drag_x :Range

Source:

The DragValue for the x axis.

Type:

drag_y :Range

Source:

The DragValue for the y axis.

Type:

element :HTMLDivElement

Source:
Overrides:

The main DIV container. Has class .aux-colorpicker.

Type:
  • HTMLDivElement

grayscale :HTMLDivElement

Source:

The grayscale background. Has class .aux-grayscale`,

Type:
  • HTMLDivElement

green :ValueKnob

Source:

The ValueKnob for the green color. Has class .aux-green`,

Type:

hex :Value

Source:

The Value for the HEX color. Has class .aux-hex`,

Type:

hue :ValueKnob

Source:

The ValueKnob for the hue. Has class .aux-hue`,

Type:

indicator :HTMLDivElement

Source:

The indicator element. Has class .aux-indicator`,

Type:
  • HTMLDivElement

lightness :ValueKnob

Source:

The ValueKnob for the lightness. Has class .aux-lightness`,

Type:

range_x :Range

Source:

The Range for the x axis.

Type:

range_y :Range

Source:

The Range for the y axis.

Type:

red :ValueKnob

Source:

The ValueKnob for the red color. Has class .aux-red`,

Type:

saturation :ValueKnob

Source:

The ValueKnob for the saturation. Has class .aux-saturation`,

Type:

Methods

hide()

Source:
Inherited From:

Starts the transition of the visible to false.

hideChild(child)

Source:
Inherited From:

Switches the hidden state of a child to hidden. The argument is either the child index or the child itself.

Parameters:
Name Type Description
child Object | integer

Child or its index.

isChildHidden(child) → {boolean}

Source:
Inherited From:

Returns true if the given child is currently marked as hidden in this container.

Parameters:
Name Type Description
child number | Widget
Returns:
Type
boolean

show()

Source:
Inherited From:

Starts the transition of the visible to true.

showChild(child)

Source:
Inherited From:

Switches the hidden state of a child to shown. The argument is either the child index or the child itself.

Parameters:
Name Type Description
child Object | integer

Child or its index.

toggleChild(child)

Source:
Inherited From:

Toggles the hidden state of a child. The argument is either the child index or the child itself.

Parameters:
Name Type Description
child Object | integer

Child or its index.

Events

apply

Source:

Is fired whenever the apply button gets clicked or return is hit on input.

Parameters:
Name Type Description
colors object

Object containing all color objects: rgb, hsl, hex, hue, saturation, lightness, red, green, blue

cancel

Source:

Is fired whenever the cancel button gets clicked or ESC is hit on input.