Frontfire documentation

ColorPicker plugin

Version 2.1.0

The default colour picker opens a platform-specific and much outdated colour selection dialog window. On Windows 10, this dialog usually still originates from Windows 3.1 and 95, over 30 years ago. Frontfire replaces that with a modern and simple colour selector including palettes and component sliders in a combined view. It can be used independently anywhere on the page, or triggered through an input field in a form.

This plugin is only available in the Complete bundle.

This plugin depends on the plugins: modal, slider, tabs

globe Please excuse the wild spelling of the word “colour”. While source code is generally expected to use US English spelling for consistency with existing APIs, this documentation uses British/int’l English spelling which becomes especially apparent on this page.

Colour picker view

A colour picker is defined with the color-picker CSS class, or by calling the colorPicker() plugin method on an element.

Data colour integration

The DataColor palette can be used in this picker by setting the colorUse option.

Options

The following options are available:

Name Type Description Default
color String The initially selected color. None
colorUse String The type of use for the color (foreground, background). This determines which data colour palette is displayed. None
language String The language to use for text labels (see below). Page language
previewHex Boolean Indicates whether the preview panel shows the currently selected color in HTML hex notation. true
withAlpha Boolean Indicates whether the alpha channel is displayed and editable. false

If no language is specified, the language is determined by the lang attribute of the document root element (<html>). Currently, the following languages are supported. Specifying a different language will use "en".

Plugin properties

This plugin provides properties to access the view.

color

Gets or sets the selected colour of the colour picker.

dataColor

Gets the selected data colour of the colour picker, in the format “colorId-level”, e.g. “red-0” or “green-2”. If the selected colour is not a data colour, null is returned.

Added in v2.1.0

Plugin methods

This plugin provides methods to control the view.

deinit

Deinitializes the plugin and empties the elements.

Plugin events

This plugin triggers events for the input field.

apply

Triggered when a colour was double-clicked to confirm its selection.

change

Triggered when the colour selection was changed.

Besides showing a colour picker in a selected (existing) HTML element, there is another method to open a colour picker in a modal without any preparations. The static Frontfire.colorPickerModal() plugin function creates and opens a modal that contains a colour picker as shown above. This method accepts the options as described above as a single object argument. Additional options (see below) are used to define the content of the generated modal element.

The modal selects the first tab that contains the initial colour. (This can only be seen in the colour input examples below as the following example starts with a fixed colour.) The modal can also be quickly confirmed by double-clicking on a colour box, or cancelled by pressing the Esc key.

The method returns a Promise that is resolved to the selected color (color property, or dataColor property if enabled and selected) when the modal is confirmed, or "" if the “no color” button was clicked, or undefined if the modal was cancelled or otherwise closed. Like with the Frontfire.modal() function, the Promise has an additional cancel() method to close the modal before a user interaction.

Result: Not yet opened

In addition to the colour picker options listed above, these options are available for the static method:

Name Type Description Default
allowEmpty Boolean Indicates whether the “no color” button is available. false
separateDark Boolean Shows a checkbox to select whether a separate colour is used for the dark theme. This has no effect on the colour picker itself and needs to be interpreted by the application. When true, the modal’s result is an object with the properties color (String) and separateDark (Boolean) instead of just the selected colour string. false
separateDarkChecked Boolean Checks the separateDark checkbox. false

separateDark and separateDarkChecked options added in v2.1.0

Colour input field

The standard <input type="color"> element is too limited and not used here. Instead, use a regular text input field and add the color-picker CSS class or call the colorInput() plugin method on the element.

A button is added next to the input field that opens the picker modal. Alternatively, the modal can be opened by pressing the Space key within the input field.

Additional options

In addition to the colour picker modal options listed above, these options are available for the input field:

Name Type Description Default
color Not supported here; the selected colour is synchronised with the input field value.