Configuration
Configuration params are some options that customize Celesta functioning and UX.
(I'd use the word options, but it has ambiguous meaning when speaking around <select>
matters :)
Any configuration param can be set when initializing new Celesta object, and cannot be changed for the instance already created.
You can also override configuration defaults with
setConfigDefaults
.
That will affect all newly created Celesta instances.
Here is the reference for all those configuration parameters.
Parameter | Accepted value | Default value | Description |
---|---|---|---|
width | {number} | null |
null |
Explicit element width (null for automatic/inherited width)
|
height | {number} | null |
null |
Explicit element width (null for automatic/inherited width)
|
inherit_width | {boolean} | false |
Inherit source select width |
inherit_height | {boolean} | false |
Inherit source select height |
inherit_classes | {boolean} | true |
Inherit classnames from source select |
inherit_optgroup_classes | {boolean} | true |
Inherit classnames from every source optgroup to correspondent generated element |
inherit_option_classes | {boolean} | true |
Inherit classnames from every source option to correspondent generated element (and facade label, if selected) |
optlist_smart_reverse | {boolean} | true |
Detect best dropdown direction (down/up) based on available space and scroll position |
use_optgroups | {boolean} | true |
Find optgroups in source select and generate correspondent containers in optlist |
handle_mouse | {boolean} | true |
Handle mouse events (click, hover etc.) |
outer_mousewheel_close | {boolean} | true |
Close open Celesta when mouse wheel used out of its area (requires handle_mouse to be enabled) |
handle_arrowkeys | {boolean} | true |
Handle pressing arrow keys (↑/↓) |
handle_pagekeys | {boolean} | true |
Handle pressing PageUp/PageDown keys |
enter_key_open | {boolean} | true |
Open closed Celesta with Space key |
space_key_open | {boolean} | true |
Open closed Celesta with Space key |
enter_key_select | {boolean} | true |
Select hovered option with Enter key |
space_key_select | {boolean} | false |
Select hovered option with Space key |
escape_key_close | {boolean} | true |
Close open Celesta with Esc key |
handle_keyboard_typed | {boolean} | true |
Enable options quicksearch with keyboard typing |
typed_life | {number} | 1000 |
Storing life (milliseconds) for previously typed quicksearch characters if no other char is typed |
typed_collapse_repeated | {boolean} | true |
When a single key press hold detected, cycle through matching options |
closed_options_pagekey_jump_by | {number} | 3 |
PageUp/PageDown jump size on closed Celesta |
open_options_pagekey_jump_by | {number} | true |
true |
PageUp/PageDown jump size on open Celesta (true for jump to first invisible or partially visible item)
|
options_type_cycling | {boolean} | true |
Cycle options forward when quicksearch typing |
options_nav_cycling | {boolean} | false |
Cycle options forward/backward with arrow and page keys |
keyboard_hover_preselect | {boolean} | true |
Pre-select keyboard focused option (set to facade and select if Celesta is closed in any way) |
mouse_hover_preselect | {boolean} | false |
Pre-select mouse hovered option (set to facade and select if Celesta is closed in any way) |
mouse_hover_scroll | {boolean} | true |
When partially visible option is mouse hovered, scroll to make it fully visible |
fallback_dropdown | {boolean} | /iPad|iPhone|iPod|Android|IEMobile|BlackBerry/i.test(navigator.userAgent) |
Use source select dropdown (and its native key/mouse handlers) while keep showing stylized (closed) Celesta element (useful on mobile devices) |
fix_ie_mouse_focus | {boolean} | ('ActiveX' in window) |
Generate custom HTML elements to fix IE mouseclick focus issue: http://stackoverflow.com/a/25953721 |
ie_tagname_prefix | {string} | 'ie-' |
HTML element name prefix to fix IE mouseclick issue (see fix_ie_mouse_focus) |
container_tagname | {string} | 'span' |
HTML element name for overall Celesta container |
container_classname | {string} | 'celesta-container' |
Main classname for overall Celesta container |
container_classname_open | {string} | 'celesta-container-open' |
Additional classname for open Celesta container |
container_classname_disabled | {string} | 'celesta-container-disabled' |
Additional classname for disabled Celesta container |
container_classname_fallback | {string} | 'celesta-container-fallback' |
Additional classname for Celesta container when dropdown fallback is used |
facade_tagname | {string} | 'span' |
HTML element name for facade (an element that displays currently selected option) |
facade_classname | {string} | 'celesta-facade' |
Celesta facade classname |
facadelabel_pseudo | {boolean} | false |
Don’t generate separate element for facade label (use ::before , and if so, facade label cannot inherit selected option classnames)
|
facade_attrname_label | {string} | 'data-label' |
Attribute name to store currently selected option title (if ::before is used)
|
facadelabel_tagname | {string} | 'span' |
HTML element name for facade label (if real element is used) |
facadelabel_classname | {string} | 'celesta-facadelabel' |
Main classname for facade label (if real element is used) |
optlist_tagname | {string} | 'div' |
HTML element name for options list container |
optlist_classname | {string} | 'celesta-optlist' |
Main classname for options list container |
optlist_classname_reversed | {string} | 'celesta-optlist-reversed' |
Additional classname for reversed options list container |
optgroup_tagname | {string} | 'div' |
HTML element name for options group container (optgroup) |
optgroup_classname | {string} | 'celesta-optgroup' |
Main classname for options group container (optgroup) |
optgroup_classname_disabled | {string} | 'celesta-optgroup-disabled' |
Additional classname for disabled optgroup |
optgrouplabel_pseudo | {boolean} | true |
Don’t generate separate element for optgroup label (use ::before )
|
optgroup_attrname_label | {string} | 'data-label' |
Attribute name to store optgroup label (if ::before is used)
|
optgrouplabel_tagname | {string} | 'span' |
HTML element name for optgroup label (if real element is used) |
optgrouplabel_classname | {string} | 'celesta-optgrouplabel' |
Main classname for optgroup label (if real element is used) |
option_tagname | {string} | 'span' |
HTML element name for option item |
option_classname | {string} | 'celesta-option' |
Main classname for option item |
option_classname_selected | {string} | 'celesta-option-selected' |
Additional classname for currently selected option item |
option_classname_hovered | {string} | 'celesta-option-hovered' |
Additional classname for currently hovered/focused option item |
option_classname_disabled | {string} | 'celesta-option-disabled' |
Additional classname for disabled option item |