HexagonJS
Edit Page
Color Picker
A component for selecting colors
Examples

HTML

<button class="hx-btn" id="basicPickerButton">Button</button>

JavaScript

var pickerBasic = new hx.ColorPicker("#basicPickerButton")

HTML

<button class="hx-btn" id="colorPickerButton">Button</button>

JavaScript

var pickerColor = new hx.ColorPicker("#colorPickerButton", {startColor: "#C40030"})

HTML

<button class="hx-btn" id="inputPickerButton">Button</button>

JavaScript

var pickerBasic = new hx.ColorPicker("#inputPickerButton", {showInputs: true})

HTML

<button class="hx-btn" id="eventsPickerButton">Button</button>
<input id="eventsInputL"/>
<input id="eventsInputR" />

JavaScript

// Update an input box to set the background and text color and display the hex color value in the box.
var updateBox = function(box, col){
  var elem = hx.select(box)
  elem.value(col.toString().toUpperCase());
  elem.style("background", col.toString());
  elem.style("color", col.textCol());
}

var pickerEvents = new hx.ColorPicker("#eventsPickerButton", {showInputs: true})

// Set the initial values of the inputs
updateBox("#eventsInputL", hx.color(pickerEvents.value()));
updateBox("#eventsInputR", hx.color(pickerEvents.value()));

// Add listener for when the currentColor changes.
pickerEvents.on("change", function(col){
  updateBox("#eventsInputL", col);
});

// Add listener for when the color has stopped changing (the user has stopped dragging the controls)
pickerEvents.on("changeend", function(col){
  updateBox("#eventsInputR", col);
});
Api
Prototypes
hx.ColorPickerextendsEventEmitterdeprecated
Deprecated
The colour picker has been deprecated and will be removed in a later release.
Please use a suitable third-party colour picker if you still require this module.
The ColorPicker class can be used to allow a user to select a color with a visual representation.
Constructors
hx.ColorPickerselectorString / HTMLElementoptionsObject
Arguments
selectorString / HTMLElement
The selector to show the color picker for.
options
The options to use when setting up the color picker
Properties
alignString
The alignment of the dropdown (options can be found in the dropdown documentation)
Default: lblt
disabledBoolean
Whether the color picker should be disabled
Default: false
showInputsBoolean
Boolean to decide whether or not to show the input boxes for the hex, red, green, blue, hue, saturation and lightness values.
Default: false
startColorColor
The start color to use when creating the color picker.
Default: #000000
Events
changeColor
Emitted when the dropdown is opened, whilst the color is changed and when the color has finished changing. The data emitted with the event is the current color selected.
changeendColor
Emitted when the color has finished being changed (either by the visual method or by the input boxes). The data emitted with the event is the current color selected.
dropdown.changeBoolean
Emitted when the dropdown is shown or hidden. The data that comes with the event is a boolean indicating whether or not the dropdown is hidden. True means that the dropdown has just been shown, false means that it has just been hidden.
dropdown.hideend
Emitted when the dropdown animation ends. No data is sent with this event.
dropdown.hidestart
Emitted when the dropdown animation starts. No data is sent with this event.
dropdown.showend
Emitted when the dropdown animation finishes. No data is sent with this event.
dropdown.showstart
Emitted when the dropdown animation starts. No data is sent with this event.
Methods
disabledvalueBooleanColorPicker
A method for disabling or enabling a color picker
Arguments
valueBoolean
Whether the color picker should be disabled
Returns
ColorPicker
This color picker
disabledBoolean
Gets the disabled state of a color picker
Returns
Whether the button group is disabled
valuevalueString / ColorColorPicker
Sets the value of a color picker
Arguments
valueString / Color
The color to set the color picker to.
Returns
ColorPicker
This ColorPicker
valueString
Gets the value of a color picker
Returns
The currently set color value.
Functions
hx.colorPickeroptionsObjectSelection
Creates a new ColorPicker set up on a detached element, wrapped in a selection
Arguments
options
See the options object for constructing ColorPicker
Returns
Selection
A selection containing an element with an ColorPicker initialised on it