<protected> new ColorPicker()
- Since:
-
- 9.1.0 Added emitter.
Examples
Set colors for instance: `setColors()` can be passed a two dimensional array of colors
const myColorPicker = document.querySelector("cq-color-picker");
myColorPicker.setColors([["#ffffff", "#e1e1e1", "#cccccc", "#b7b7b7", "#a0a0a5", "#898989", "#707070", "#626262", "#555555", "#464646", "#363636", "#262626", "#1d1d1d", "#000000"]]);
Set colors for Component class: `ColorPicker.defaultColors` can be set to a two dimensional array of colors
// Note: do this before creating the ChartEngine
const pickerClassDef = CIQ.UI.components("cq-color-picker")[0].classDefinition;
pickerClassDef.defaultColors=[["#ffffff", "#e1e1e1", "#cccccc", "#b7b7b7", "#a0a0a5", "#898989", "#707070", "#626262", "#555555", "#464646", "#363636", "#262626", "#1d1d1d", "#000000"]];
Extends
Members
-
<static> defaultColors :Array.<Array.<String>>
-
Default array of colors for the component.
Type:
- Array.<Array.<String>>
Example
ColorPicker.defaultColors = [ ["#ffffff", "#e1e1e1", "#cccccc", "#b7b7b7"], ["#f4977c", "#f7ac84", "#fbc58d", "#fff69e"] ];
-
<static> markup :String
-
Default markup for the component's innerHTML, to be used when the component is added to the DOM without any innerHTML.
Type:
- String
Methods
-
addActiveAttribute(attribute)
-
Creates a new attribute to be activated when the dialog is open. Use this to style the dialog. This is automatically set by any component that is derived from DialogContentTag.
Parameters:
Name Type Description attribute
string The attribute to add or remove
- Since:
-
4.1.0
- Inherited From:
- Overrides:
Example
<style> cq-dialog[cq-study-context]{ padding:0; } </style> <cq-dialog cq-study-context></cq-dialog>
-
addClaim()
-
Claim any keystrokes that come in. Once claimed, any keystrokes that come in are passed to the element. The element can then choose to capture or propagate the keystrokes. This enables an element to capture keystrokes even if it doesn't have mouse focus.
- Inherited From:
- Overrides:
-
addDefaultMarkup(component [, markup])
-
Adds default markup to a web component if the component does not have any child nodes.
Parameters:
Name Type Argument Description component
HTMLElement The component to which the markup is added.
markup
String <optional>
The markup to add to the web component. Unused if the component has a static markup property that specifies the markup; for example, MyComponent.markup.
- Since:
-
7.5.0
- Inherited From:
- Overrides:
-
build()
-
Sets the class members up with the proper colors and overrides.
-
channelMergeObject(path, value, stx)
-
Merges an object in the chart engine communication channel.
Parameters:
Name Type Description path
String The channel path.
value
Object The value merged to the channel.
stx
CIQ.ChartEngine A reference to the chart engine.
- Since:
-
7.5.0
- Inherited From:
- Overrides:
-
channelRead(path [, stx])
-
Reads the current value in the chart engine communication channel.
Parameters:
Name Type Argument Description path
String The channel path.
stx
CIQ.ChartEngine <optional>
Unused.
- Since:
-
7.5.0
- Inherited From:
- Overrides:
Returns:
The current value in channel.
- Type
- *
-
channelSubscribe(path, cb, stx)
-
Subscribes to the chart engine messaging channel.
Parameters:
Name Type Description path
* The channel path.
cb
* A callback invoked upon subscribing and whenever a new message is posted in the channel.
stx
CIQ.ChartEngine A reference to the chart engine.
- Since:
-
7.5.0
- Inherited From:
- Overrides:
Returns:
A callback invoked when unsubscribing from the channel.
- Type
- function
-
channelWrite(path, value, stx)
-
Writes in the chart engine communication channel.
Parameters:
Name Type Description path
String The channel path.
value
* The value written to the channel.
stx
CIQ.ChartEngine A reference to the chart engine.
- Since:
-
7.5.0
- Inherited From:
- Overrides:
-
clickFocusedItem(items, e)
-
Selects (clicks) the first element in
items
that has acq-focused
attribute.Parameters:
Name Type Description items
NodeList A list of elements that are selectable via keyboard navigation.
e
Event The keystroke event.
- Since:
-
8.3.0
- Inherited From:
- Overrides:
-
clickItem(item, e, originationElement)
-
Click a keyboard selectable element.
Parameters:
Name Type Description item
HTMLElement Element to click.
e
Event The keystroke event.
originationElement
HTMLElement The keyboard active element which initiated the click.
- Inherited From:
- Overrides:
-
close( [propagate])
-
Close the dialog and make it inactive. Calls the
onClose()
function if it is defined on this component.Parameters:
Name Type Argument Description propagate
boolean <optional>
True if child elements should also call onClose functions
- Inherited From:
- Overrides:
-
closeActiveMenu()
-
Close the active menu.
- Inherited From:
- Overrides:
Returns:
returns true if a menu was closed.
- Type
- boolean
-
deactivateItem(item)
-
Blurs and removes the
cq-keyboard-active
attribute fromitem
.Parameters:
Name Type Description item
HTMLElement - Since:
-
8.4.0
- Inherited From:
- Overrides:
-
display(activator)
-
Displays the color picker in proximity to the node passed in
Parameters:
Name Type Description activator
object The object representing what caused picker to display
Properties
Name Type Argument Description node
HTMLElement <optional>
The node near where to display the color picker
overrides
Array.<string> <optional>
Array of overrides. For each of these, a button will be created that if pressed will pass that override back instead of the color
-
emitCustomEvent(params)
-
Emits a custom event from the webcomponent. The event type of the emitted event is determined by the particular user action taken. Up to two events are emitted when this function is executed. The first is an event with the type of action performed, if there is one. For example, events which are spawned without user action will not emit this first event. The second event will have a type derived from the component name. For example, the
cq-study-legend
component will emit a "StudyLegend" type event. The payload of the event will contain a detail section specifying the component which emitted the event as well as theeffect
- which more clearly defines the type of action causing the emittance. The detail section may also include custom fields further categorizing the event and providing additional information. These details are documented within the web component's documentation.Parameters:
Name Type Description params
object Properties
Name Type Argument Default Description cause
string <optional>
The cause of the event. e.g., useraction, timeout, alert. Defaults to "useraction" if not set and
action
parameter is set.effect
string <optional>
The effect of the user's action. Required if not provided in
detail
. e.g., open, help, toggle, select.action
string | null <optional>
"click" The action a user performed, if applicable. e.g. click, longpress, drag. Set to null if no user action was performed.
detail
Object <optional>
{} Optional extra parameters to include in the detail of the Custom Event.
- Since:
-
- 8.9.0
- 9.1.0 Changed
params
object's property names.
- Inherited From:
- Overrides:
-
enableMultichartColorPickerFloat( [val])
-
Configure CSS layering to enable the color picker to float above the dialog.
Parameters:
Name Type Argument Default Description val
boolean <optional>
true Setting "val" to false will restore the original style values of the element.
- Since:
-
9.3.0
- Inherited From:
- Overrides:
-
findFocused(items)
-
Finds the elements in
items
that have acq-focused
attribute.Parameters:
Name Type Description items
NodeList A list of elements that are selectable via keyboard navigation.
- Since:
-
8.3.0
- Inherited From:
- Overrides:
Returns:
The elements in
items
that have acq-focused
attribute, or an empty array if no elements are found.- Type
- array
-
findKeyboardActive(items)
-
Finds the elements in
items
that have acq-keyboard-active
attribute.Parameters:
Name Type Description items
NodeList A list of elements that are selectable via keyboard navigation
- Since:
-
8.4.0
- Inherited From:
- Overrides:
Returns:
The elements in
items
that have acq-keyboard-active
attribute, or an empty array if no elements are found.- Type
- Array
-
focusItem(item)
-
Adds a
cq-focused
attribute toitem
and highlightsitem
.Parameters:
Name Type Description item
HTMLElement Element that receives keyboard focus and is highlighted.
- Since:
-
8.3.0
- Inherited From:
- Overrides:
-
focusNextItem(items [, reverse] [, loop])
-
Overrides focusNextItem in BaseComponent. This will prevent next/previous selection when the alpha slider is focused.
Parameters:
Name Type Argument Description items
NodeList List of items in the picker (rows and overrides)
reverse
boolean <optional>
If true, reverses order for focus
loop
boolean <optional>
Loops back to the first item if the last element in
items
is selected.- Since:
-
9.8.0
- Overrides:
Returns:
The newly focused element if a
cq-focused
attribute has changed.- Type
- HTMLElement | undefined
-
focusNextRow(items [, options])
-
Switches the focus to the next row of colors.
Parameters:
Name Type Argument Description items
NodeList List of items in the picker (rows and overrides)
options
object <optional>
Properties
Name Type Argument Description reverse
boolean <optional>
If true, reverses order for focus
Returns:
true if next item is focusable
- Type
- boolean
-
getChartContainer( [el])
-
Searches the DOM for the chart container element. Begins the search with
el
(orthis
) and proceeds parent-by-parent up the ancestry tree until an element is found.Parameters:
Name Type Argument Description el
HTMLElement <optional>
The element on which to start the search. If not provided,
this
is used.- Since:
-
7.5.0
- Inherited From:
- Overrides:
Returns:
The chart container element or undefined if an element is not found.
- Type
- HTMLElement | undefined
-
getContextContainer( [el])
-
Searches the DOM for the chart context element. Begins the search with
el
(orthis
ifel
is not provided) and proceeds up the ancestry tree until an element is found or the root of the tree has been reached.Parameters:
Name Type Argument Description el
HTMLElement <optional>
The element on which to start the search. If not provided,
this
is used.- Since:
-
7.5.0
- Inherited From:
- Overrides:
Returns:
The chart context element or undefined if an element is not found.
- Type
- HTMLElement | undefined
-
getKeyboardSelectableItems()
-
Returns an array of dialog elements that are keyboard selectable.
- Inherited From:
- Overrides:
Returns:
An array of DOM elements
- Type
- NodeList
-
handlePropertyChange(name, oldValue, newValue)
-
Processes attribute changes. This is called whenever an observed attribute has changed.
Parameters:
Name Type Description name
string Attribute name
oldValue
string Original attribute value
newValue
string new Attribute value
- Overrides:
-
hide()
-
Override the default hide function to ensure that keyboard navigation is properly cleaned up.
- Since:
-
9.8.0
- Overrides:
-
initialize()
-
Generates the HTML for the component.
-
inputEntry(node, cb)
-
Attaches a keyboard input entry event.
Parameters:
Name Type Description node
HTMLElement The element to which the input entry event is attached.
cb
function The callback function invoked when input entry occurs.
- Inherited From:
- Overrides:
-
keyStroke(hub, key, e)
-
Handler for keyboard interaction. Arrow keys move around the picker, while
Enter
will select.Parameters:
Name Type Description hub
CIQ.UI.KeystrokeHub The hub that processed the key
key
string Key that was stroked
e
Event The event object
- Overrides:
Returns:
true if keystroke was processed
- Type
- boolean
-
onKeyboardDeselection()
-
If we're using keyboard navigation, returns the highlight to the tab selected element. Called when dialog is no longer keyboard navigable.
- Inherited From:
- Overrides:
-
onKeyboardSelection()
-
Hides the highlight on select because the study dialog contents re-render quite often, throwing off the highlight position (e.g. When a dropdown selection is made). Called when dialog becomes keyboard navigable
- Inherited From:
- Overrides:
-
open(params)
-
Open the dialog.
Parameters:
Name Type Description params
object Dialog parameters
Properties
Name Type Description caller
HTMLElement The HTML element that triggered this dialog to open
- Inherited From:
- Overrides:
-
pickColor(color [, preventInputUpdate])
-
After color is chosen from the picker, this function will pass it back to the element which caused the picker to display.
Parameters:
Name Type Argument Description color
string Color to pass back.
preventInputUpdate
boolean <optional>
If true, prevents the hex and alpha inputs from being updated.
-
processEsc(hub)
-
Handle escape key press.
Parameters:
Name Type Description hub
CIQ.UI.KeystrokeHub The hub that processed the key.
- Inherited From:
- Overrides:
Returns:
returns false if nothing was done.
- Type
- boolean
-
qs(path, context)
-
Adapts the querySelector method.
Parameters:
Name Type Description path
String The CSS selectors for which to search.
context
HTMLElement | String The chart context element, which is the starting point of the DOM query, or "thisChart" to indicate the chart context in which this function is called.
- Since:
-
7.5.0
- Inherited From:
- Overrides:
Returns:
The selected DOM element or undefined if an element is not found.
- Type
- HTMLElement | undefined
-
qsa(path, root, bustShadowRoots)
-
Adapts the querySelectorAll method. Returns an array instead of a node list to enable chaining of the array
map
,filter
,forEach
, andreduce
functions.Parameters:
Name Type Description path
String The CSS selectors to find.
root
HTMLElement | String The root element, which is the starting point of the DOM query, or "thisChart" to indicate the chart context in which this function is called.
bustShadowRoots
boolean Set to true to penetrate shadow root boundaries.
- Since:
-
- 7.5.0
- 8.9.0 Added
bustShadowRoots
parameter
- Inherited From:
- Overrides:
Returns:
An array of selected DOM element.
- Type
- Array.<HTMLElement>
-
refreshFocus()
-
Finds the first element in
items
that has acq-focused
attribute or a name attribute that matches the value ofactiveElementName
. If found, that element is focused.- Inherited From:
- Overrides:
-
removeClaim()
-
Remove a claim on keystrokes.
- Inherited From:
- Overrides:
-
removeFocused(items)
-
Removes the
cq-focused
attribute from all elements initems
.Parameters:
Name Type Description items
NodeList A list of elements that are selectable via keyboard navigation.
- Since:
-
8.3.0
- Inherited From:
- Overrides:
-
reposition()
-
Repositions the color picker so it fits on the screen.
-
resize()
-
Handles dialog resizing. Resizes child
cq-scroll
elements. Centers the dialog.- Inherited From:
- Overrides:
-
setColors(colorMap)
-
Sets the colors to a newly provided two dimensional array of colors.
Parameters:
Name Type Description colorMap
object Object that holds an array of various color arrays.
-
setTitle(title)
-
Forces a title change, even if the title is the same as before. Use this method to change the title of the dialog rather than just changing the cq-title attribute;
Parameters:
Name Type Description title
string New title
- Inherited From:
- Overrides:
-
show( [params])
-
Show the dialog. Use X,Y screen location (pageX, pageY from an event) for where to display context menus. If the context menu cannot fit on the screen then it will be adjusted leftward and upward by enough pixels so that it shows.
Parameters:
Name Type Argument Description params
object <optional>
Parameters
Properties
Name Type Argument Default Description bypassOverlay
Boolean <optional>
false If true will not display the scrim overlay
x
Number <optional>
X location of top left corner. Use for context menus, otherwise dialog will be centered.
y
Number <optional>
Y location of top left corner. Use for context menus, otherwise dialog will be centered.
- Inherited From:
- Overrides:
-
stxContextMenu()
-
Set context menu position to mouse location.
- Inherited From:
- Overrides:
-
tap(e)
-
Tap event handler for dialog. Prevents touch and mouse events from propagating outside of the dialog.
Parameters:
Name Type Description e
Event tap event
- Inherited From:
- Overrides:
-
trimInnerHTMLWhitespace()
-
Returns a copy of the innerHTML of an element, with leading and trailing characters stripped. The following characters are stripped: newline, carriage return, tab.
- Since:
-
9.1.0
- Inherited From:
- Overrides:
Returns:
Trimmed innerHTML
- Type
- String
-
validateColor(color)
-
This is a helper function to check if the color is valid. It creates a temporary div element and sets its background color to the provided color.
Parameters:
Name Type Description color
string The color value to validate
- Since:
-
9.8.0
Returns:
true if the color is valid, false otherwise
- Type
- boolean