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.
new Celesta(document.getElementById('my_select'), {
space_key_open: false,
options_nav_cycling: true,
closed_options_pagekey_jump_by: 5
});You can also override configuration defaults with
setConfigDefaults.
That will affect all newly created Celesta instances.
Celesta.prototype.setConfigDefaults({
space_key_open: false,
options_nav_cycling: true,
closed_options_pagekey_jump_by: 5
});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 |
{
width: null,
height: null,
inherit_width: false,
inherit_height: false,
inherit_classes: true,
inherit_optgroup_classes: true,
inherit_option_classes: true,
optlist_smart_reverse: true,
use_optgroups: true,
handle_mouse: true,
outer_mousewheel_close: true,
handle_arrowkeys: true,
handle_pagekeys: true,
enter_key_open: true,
space_key_open: true,
enter_key_select: true,
space_key_select: false,
escape_key_close: true,
handle_keyboard_typed: true,
typed_life: 1000,
typed_collapse_repeated: true,
closed_options_pagekey_jump_by: 3,
open_options_pagekey_jump_by: true,
options_type_cycling: true,
options_nav_cycling: false,
keyboard_hover_preselect: true,
mouse_hover_preselect: false,
mouse_hover_scroll: true,
fallback_dropdown: /iPad|iPhone|iPod|Android|IEMobile|BlackBerry/i.test(navigator.userAgent),
fix_ie_mouse_focus: ('ActiveX' in window),
ie_tagname_prefix: 'ie-',
container_tagname: 'span',
container_classname: 'celesta-container',
container_classname_open: 'celesta-container-open',
container_classname_disabled: 'celesta-container-disabled',
container_classname_fallback: 'celesta-container-fallback',
facade_tagname: 'span',
facade_classname: 'celesta-facade',
facadelabel_pseudo: false,
facade_attrname_label: 'data-label',
facadelabel_tagname: 'span',
facadelabel_classname: 'celesta-facadelabel',
optlist_tagname: 'div',
optlist_classname: 'celesta-optlist',
optlist_classname_reversed: 'celesta-optlist-reversed',
optgroup_tagname: 'div',
optgroup_classname: 'celesta-optgroup',
optgroup_classname_disabled: 'celesta-optgroup-disabled',
optgrouplabel_pseudo: true,
optgroup_attrname_label: 'data-label',
optgrouplabel_tagname: 'span',
optgrouplabel_classname: 'celesta-optgrouplabel',
option_tagname: 'span',
option_classname: 'celesta-option',
option_classname_selected: 'celesta-option-selected',
option_classname_hovered: 'celesta-option-hovered',
option_classname_disabled: 'celesta-option-disabled'
}