ColorPicker

ColorPicker

Creates a input for entering color values, with a preview swatch. Now includes optional sliders for visually setting colors.

Constructor

# new ColorPicker(parent, x, y, label, color, defaultHandler)

Constructor
Parameters:
Name Type Description
parent HTMLElement The element to add this color picker to.
x number The x position of the color picker. Default 0.
y number The y position of the color picker. Default 0.
label string The text shown in the text label of the color picker. Default empty string.
color string The initial color value of the color picker. Default #f00.
defaultHandler function A function that will handle the "change" event.
Source:
Example 
const panel = new Panel(document.body, 20, 20, 200, 200);
new ColorPicker(panel, 20, 20, "Color", "#f00", event => console.log(event.target.color));

Extends

Classes

ColorPicker

Members

# (static) labelPosition

Default labelPosition of all ColorPickers.
Source:

# (static) sliderPosition

Default sliderPosition of all ColorPickers.
Source:

# (static) useSliders

Default useSliders value of all ColorPickers.
Source:

# blue

Gets the blue channel of the current color value as a numerical value from 0 to 255.
Source:

# color

Sets and gets the color value of this color picker. Valid inputs are three or six character strings containing hexadecimal digits (0-9 and upper or lower case A-F), optionally preceded by a "#" character.
Source:
Example
colorpicker.color = "#f9c";
colorpicker.color = "#F9C";
colorpicker.color = "f9c";
colorpicker.color = "F9C";
colorpicker.color = "#ff99cc";
colorpicker.color = "#FF99CC";
colorpicker.color = "ff99cc";
colorpicker.color = "FF99CC";

# enabled

Sets and gets whether or not this component is enabled. Non-enabled components will be faded out and not respond to events.
Overrides:
Source:

# green

Gets the green channel of the current color value as a numerical value from 0 to 255.
Source:

# height

Sets and gets the height of this component.
Overrides:
Source:

# label

Gets and sets the text of the color picker's label.
Source:

# labelPosition

Gets and sets the position of the text label displayed on the color picker. Valid values are "top" (default), "left", "right" and "bottom".
Source:

# red

Gets the red channel of the current color value as a numerical value from 0 to 255.
Source:

# sliderPosition

Gets and sets the position of the slider popup. Valid values are "bottom" (default) and "top".
Source:

# useSliders

Gets and sets whether clicking into the input area will open up a pane with sliders for setting colors visually.
Source:

# width

Sets and gets the width of this component.
Overrides:
Source:

# x

Sets and gets the x position of this component.
Overrides:
Source:

# y

Sets and gets the y position of this component.
Overrides:
Source:

Methods

# addHandler(handler)

Adds a handler function for the "change" event on this color picker.
Parameters:
Name Type Description
handler function A function that will handle the "change" event.
Source:
Returns:
This instance, suitable for chaining.

# bind(target, prop)

Automatically changes the value of a property on a target object with the main value of this component changes.
Parameters:
Name Type Description
target object The target object to change.
prop string The string name of a property on the target object.
Source:
Returns:
This instance, suitable for chaining.

# getBlue()

Gets the blue channel of the current color value as a numerical value from 0 to 255.
Source:

# getColor()

Source:
Returns:
the current color.

# getEnabled()

Gets whether the component is enabled.
Overrides:
Source:
Returns:
Whether or not the component is enabled.

# getGreen()

Gets the green channel of the current color value as a numerical value from 0 to 255.
Source:

# getHeight()

Gets the height of the component.
Overrides:
Source:
Returns:
The height of the component.

# getLabel()

Source:
Returns:
the current label text.

# getLabelPosition()

Gets the current label position.
Source:
Returns:
The position of the label.

# getNumber() → {number}

Gets the current value of this component as a single 24-bit number from 0 to 16777215 (0x000000 to 0xffffff).
Source:
Returns:
The numeric representation of this color picker's color.
Type
number

# getRed()

Gets the red channel of the current color value as a numerical value from 0 to 255.
Source:

# getSliderPosition()

Source:
Returns:
the position of the sliders.

# getUseSliders()

Source:
Returns:
Whether or not the color picker is set to use sliders.

# getWidth()

Gets the width of the component.
Overrides:
Source:
Returns:
The width of the component.

# getX()

Gets the x position of the component.
Overrides:
Source:
Returns:
The x position of the component.

# getY()

Gets the y position of the component.
Overrides:
Source:
Returns:
The y position of the component.

# move(x, y)

Moves the component to a specified position.
Parameters:
Name Type Description
x number The new x position of the component.
y number The new y position of the component.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# rotate(rad)

Rotates the component.
Parameters:
Name Type Description
rad number The number of radians to rotate the component by.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# rotateDeg(deg)

Rotates the component.
Parameters:
Name Type Description
deg number The number of degrees to rotate the component by.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setColor(color)

Sets the color value of this color picker. Valid inputs are three or six character strings containing hexadecimal digits (0-9 and upper or lower case A-F), optionally preceded by a "#" character.
Parameters:
Name Type Description
color string The color to set.
Source:
Returns:
This instance, suitable for chaining.
Example 
colorpicker.setColor("#f9c");
colorpicker.setColor("#F9C");
colorpicker.setColor("f9c");
colorpicker.setColor("F9C");
colorpicker.setColor("#ff99cc");
colorpicker.setColor("#FF99CC");
colorpicker.setColor("ff99cc");
colorpicker.setColor("FF99CC");

# setEnabled(enabled)

Sets the enabled state of this component.
Parameters:
Name Type Description
enabled boolean Whether or not the component will be enabled.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setHeight()

Sets the height of this component. In reality, this component is fixed size, so setting height or width has no effect.
Overrides:
Source:

# setLabel(label)

Sets the label of this color picker.
Parameters:
Name Type Description
label string The label to set on this color picker.
Source:
Returns:
this instance, suitable for chaining.

# setLabelPosition(position)

Sets the position of the text label.
Parameters:
Name Type Description
position string The position to place the text label: "top" (default), "left" or "bottom".
Source:
Returns:
this instance, suitable for chaining.

# setNumber(num)

Sets the color value using a single 24-bit number.
Parameters:
Name Type Description
num number The number to parse into a color value. This would usually be in decimal (e.g. 16777215) or hexadecimal (e.g. 0xffffff).
Source:
Returns:
This instance, suitable for chaining.

# setRandom()

Sets the color value to a random RGB value.
Source:
Returns:
This instance, suitable for chaining.

# setRGB(r, g, b)

Sets the color value using three values for red, green and blue.
Parameters:
Name Type Description
r number The value of the red channel (0 - 255).
g number The value of the red channel (0 - 255).
b number The value of the red channel (0 - 255).
Source:
Returns:
This instance, suitable for chaining.

# setSize(w, h)

Sizes the component.
Parameters:
Name Type Description
w number The new width of the component.
h number The new height of the component.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setSliderPosition(position)

Gets and sets the position of the slider popup.
Parameters:
Name Type Description
position string The position where the popup will open. Valid values are "bottom" (default) and "top".
Source:
Returns:
This instance, suitable for chaining.

# setUseSliders(useSliders)

Sets whether clicking into the input area will open up a pane with sliders for setting colors visually.
Parameters:
Name Type Description
useSliders boolean Whether or not to use the slider ui.
Source:
Returns:
This instance, suitable for chaining.

# setWidth()

Sets the width of this component. In reality, this component is fixed size, so setting height or width has no effect.
Overrides:
Source:

# setX(x)

Sets the x position of this component.
Parameters:
Name Type Description
x number The x position of this component.
Overrides:
Source:
Returns:
This instance, suitable for chaining.

# setY(y)

Sets the y position of this component.
Parameters:
Name Type Description
y number The y position of this component.
Overrides:
Source:
Returns:
this instance, suitable for chaining.

# showSliders(show)

Programatically show or hide the slider container for setting rgb values visually.
Parameters:
Name Type Description
show boolean Whether to show or hide the sliders.
Source:
Returns:
This instance, suitable for chaining.