documentation.md

cap3Options : object

Knockout Custom Binding for styled drop-down select elements, works with normal select tags as long as there is an options binding and a binding for the selection result

Kind: global namespace
Author: Cap3 GmbH - Kalle Ott

• cap3Options : object
  • .Cap3OptionsState
    • new Cap3OptionsState(valueAccessor, allBindings, element)
    • .getOptionsText(option) ⇒ string ℗
    • .getOptionsValue(option) ⇒ * ℗
    • .createCaptionsElement() ℗
    • .createOptionDiv(option) ⇒ HTMLElement ℗
    • .findOption(options, selectedValue) ⇒ string | undefined ℗
    • .styleOptionsDivMultiple(option, optionDiv) ℗
    • .styleOptionsDivSingle(option, optionDiv) ℗
    • .setCaptionMultiple() ℗
    • .selectItemMultiple(option, element) ℗
    • .selectItemSingle(option, nodes) ℗
    • .onRowHover() ⇒ function ℗
    • .onUpArrowPressed() ⇒ function ℗
    • .onDownArrowPressed() ⇒ function ℗
    • .onSelectPressed() ⇒ function ℗
    • .onMouseOut() ⇒ function ℗
    • .onMouseEnter() ⇒ function ℗
    • .onHoverChanged() ⇒ function ℗
    • .onHideOptions() ⇒ function ℗
    • .onItemSelect() ⇒ function ℗
    • .onKeyDown() ⇒ function ℗
    • .onOptionsChange() ⇒ function ℗
    • .onEnable() ⇒ function ℗
    • .onDisable() ⇒ function ℗
    • .onValueChanged() ⇒ function ℗
    • .onSelectedOptionsChanged() ⇒ function ℗
    • .onOptionsCaptionChanged() ⇒ function ℗
    • .clearCallbacks() ℗
    • .applyContainerStyle(containerDiv, captionElement)
    • .initializeDropDown()
    • .isBindingAllowed() ⇒ boolean
    • .initCallbacks()
    • .initDomElements()
    • .initSubscriptions()
    • .dispose()

cap3Options.Cap3OptionsState

this class holds all the information about the status of the select element.

Kind: static class of cap3Options

• .Cap3OptionsState
  • new Cap3OptionsState(valueAccessor, allBindings, element)
  • .getOptionsText(option) ⇒ string ℗
  • .getOptionsValue(option) ⇒ * ℗
  • .createCaptionsElement() ℗
  • .createOptionDiv(option) ⇒ HTMLElement ℗
  • .findOption(options, selectedValue) ⇒ string | undefined ℗
  • .styleOptionsDivMultiple(option, optionDiv) ℗
  • .styleOptionsDivSingle(option, optionDiv) ℗
  • .setCaptionMultiple() ℗
  • .selectItemMultiple(option, element) ℗
  • .selectItemSingle(option, nodes) ℗
  • .onRowHover() ⇒ function ℗
  • .onUpArrowPressed() ⇒ function ℗
  • .onDownArrowPressed() ⇒ function ℗
  • .onSelectPressed() ⇒ function ℗
  • .onMouseOut() ⇒ function ℗
  • .onMouseEnter() ⇒ function ℗
  • .onHoverChanged() ⇒ function ℗
  • .onHideOptions() ⇒ function ℗
  • .onItemSelect() ⇒ function ℗
  • .onKeyDown() ⇒ function ℗
  • .onOptionsChange() ⇒ function ℗
  • .onEnable() ⇒ function ℗
  • .onDisable() ⇒ function ℗
  • .onValueChanged() ⇒ function ℗
  • .onSelectedOptionsChanged() ⇒ function ℗
  • .onOptionsCaptionChanged() ⇒ function ℗
  • .clearCallbacks() ℗
  • .applyContainerStyle(containerDiv, captionElement)
  • .initializeDropDown()
  • .isBindingAllowed() ⇒ boolean
  • .initCallbacks()
  • .initDomElements()
  • .initSubscriptions()
  • .dispose()

new Cap3OptionsState(valueAccessor, allBindings, element)

Creates a new Cap3OptionsState object

Param	Type	Description
valueAccessor	KnockoutObservable.<any>	the accessor function to the binding value
allBindings	KnockoutObservable.<any>	the other bindings bound to the element
element	HTMLSelectElement	the element this binding is bound to

cap3OptionsState.getOptionsText(option) ⇒ string ℗

gets the text representation of the option

Kind: instance method of Cap3OptionsState
Access: private

Param	Type	Description
option	observable | Object | string	the object containing the option information

cap3OptionsState.getOptionsValue(option) ⇒ * ℗

gets the value-representation of the option

Kind: instance method of Cap3OptionsState
Access: private

Param	Type	Description
option	observable | Object | string	the object containing the option information

cap3OptionsState.createCaptionsElement() ℗

creates the button which opens the options container and replaces the normal select element

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.createOptionDiv(option) ⇒ HTMLElement ℗

creates a div element which holds the information of one possible select option

Kind: instance method of Cap3OptionsState
Access: private

Param	Type	Description
option	observable | Object | string	the object containing the option information

cap3OptionsState.findOption(options, selectedValue) ⇒ string | undefined ℗

searches the options which belongs to the given selected-option and returns the option itself or the gui representation

Kind: instance method of Cap3OptionsState
Access: private

Param	Type	Description
options	Array.<observable> | Array.<Object> | Array.<string>	the array with all options to select from
selectedValue	observable | Object | string	the value to find in options

cap3OptionsState.styleOptionsDivMultiple(option, optionDiv) ℗

sets class style and attribute according to the state of the given option, only used when multiple flag is set

Kind: instance method of Cap3OptionsState
Access: private

Param	Type	Description
option	KnockoutObservable.<any> | Object | string	option which has changed
optionDiv	HTMLDivElement	representation of the option

cap3OptionsState.styleOptionsDivSingle(option, optionDiv) ℗

sets class style and attribute according to the state of the given option, only used when multiple flag is not set also sets the caption text for the select element

Kind: instance method of Cap3OptionsState
Access: private

Param	Type	Description
option	observable | Object | string	option which has changed
optionDiv	HTMLDivElement	representation of the option

cap3OptionsState.setCaptionMultiple() ℗

sets the caption of the select element, only used when multiple flag is set

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.selectItemMultiple(option, element) ℗

toggles the select status of an option, only used when the multiple flag is set

Kind: instance method of Cap3OptionsState
Access: private

Param	Type	Description
option	observable | Object | string	option which has changed
element	HTMLElement	element which was clicked

cap3OptionsState.selectItemSingle(option, nodes) ℗

sets the selected option as value

Kind: instance method of Cap3OptionsState
Access: private

Param	Type	Description
option	observable | Object | string	option which got selected by the user
nodes	NodeList	the childnodes of the options-container

cap3OptionsState.onRowHover() ⇒ function ℗

returns the hover callback which changes the hover-index according to mouse-position

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onUpArrowPressed() ⇒ function ℗

returns the callback for up-arrow-key, the callback reduces the hover-index by 1

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onDownArrowPressed() ⇒ function ℗

returns the callback for down-arrow-key, the callback increases the hover-index by 1

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onSelectPressed() ⇒ function ℗

returns the callback for the select-element-button, which opens or hides the options-container

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onMouseOut() ⇒ function ℗

returns the callback for the mouse-out event, hover-index is reset and the inside state is set to false

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onMouseEnter() ⇒ function ℗

returns the callback for the mouse-enter event, hover-index is reset and the inside state is set to true

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onHoverChanged() ⇒ function ℗

returns the callback for the hover-index-changed event, which toggles the active class for a visual hover effect

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onHideOptions() ⇒ function ℗

returns callback which hides the options-container

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onItemSelect() ⇒ function ℗

returns the callback for the item-select event, which changes the actual selection

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onKeyDown() ⇒ function ℗

returns the key-down-callback, which reacts on up-arrow, down-arrow, escape and space-bar escape hides the options-container and blurs the select element space-bar can be used to select the element marked by the hover-index

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onOptionsChange() ⇒ function ℗

returns the callback for the options-change-event, when the options change the dropdown element is initialized again

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onEnable() ⇒ function ℗

returns the callback for the enable-event, only used when enable is bound to an observable enables or disables the select element according to bound data

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onDisable() ⇒ function ℗

returns the callback for the disable-event, only used when disable is bound to an observable enables or disables the select element according to bound data

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onValueChanged() ⇒ function ℗

updates the selection when the value observable changes

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onSelectedOptionsChanged() ⇒ function ℗

updates the selection whe the selectedOptions observableArray changes

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.onOptionsCaptionChanged() ⇒ function ℗

updates the captionText when necessary

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.clearCallbacks() ℗

Removes all event listeners from the dom element.

Kind: instance method of Cap3OptionsState
Access: private

cap3OptionsState.applyContainerStyle(containerDiv, captionElement)

This function applies necessary styles to the container and caption-element ( e.g. z-index)

Kind: instance method of Cap3OptionsState
Access: public

Param	Type	Description
containerDiv	HTMLDivElement	element to hold all select options
captionElement	HTMLElement	element to show information about selection state and to open options container on click

cap3OptionsState.initializeDropDown()

initializes dropdown-container and caption-element with the actual options and status

Kind: instance method of Cap3OptionsState
Access: public

cap3OptionsState.isBindingAllowed() ⇒ boolean

checks if this binding is allowed

Kind: instance method of Cap3OptionsState
Returns: boolean - true if binding is allowed
Access: public

cap3OptionsState.initCallbacks()

initializes all callbacks

Kind: instance method of Cap3OptionsState
Access: public

cap3OptionsState.initDomElements()

initializes all DOM Elements

Kind: instance method of Cap3OptionsState
Access: public

cap3OptionsState.initSubscriptions()

initializes all necessary subscriptions on possible observables

Kind: instance method of Cap3OptionsState
Access: public

cap3OptionsState.dispose()

disposes all subscriptions and cuts connections to other objects

Kind: instance method of Cap3OptionsState
Access: public