Sabre Spark

ToggleSwitch

ToggleSwitch and collapse an element.

Option name Type Description
module components/ToggleSwitch.js
Example
new ToggleSwitch(el);

ToggleSwitch

function
 ToggleSwitch() 

ToggleSwitch constructor.

Option name Type Description
el Element
params Object
var ToggleSwitch = function(el) {

    if (!el) {
        return;
    }

    this._cacheElements(el);
    this._bindEventListenerCallbacks();
    this._addEventListeners();
};

ToggleSwitch.prototype = {

_getElementMatchingParent

property
 _getElementMatchingParent 

Include common functionality.

_getElementMatchingParent: Base.getElementMatchingParent,
_getMatchingChild: Base.getMatchingChild,
remove: Base.remove,

defaults

property
 defaults 

Default values for internal properties we will be setting.
These are set on each construction so we don't leak properties
into the prototype chain.

Option name Type Description
defaults: {
    el: null,
    activate: null,
    deactivate: null,
    toggle: null,
    input: null,
    _onKeydownBound: null
},

toggle

method
 toggle() 

Toggle the ToggleSwitch state.

toggle: function() {
    // Check if input exists
    if (!this.input) return;

    // toggle checked property
    if (this.input.checked)
        this.deactivate();
    else
        this.activate();
},

activate

method
 activate() 

Activate toggle state

activate: function() {
    // Check if input exists
    if (!this.input) return;
    this.input.checked = true;
},

deactivate

method
 deactivate() 

Deactivate toggle state

deactivate: function() {
    // Check if input exists
    if (!this.input) return;
    this.input.checked = false;
},

_cacheElements

method
 _cacheElements() 

Store a reference to the element.

Option name Type Description
el Element
_cacheElements: function(el) {
    this.el = el;
    this.input = el.querySelector('.spark-toggle__input');
},

_bindEventListenerCallbacks

method
 _bindEventListenerCallbacks() 

Create bound versions of event listener callbacks and store them.
Otherwise we can't unbind from these events later because the
function signatures won't match.

_bindEventListenerCallbacks: function() {
    this._onKeydownBound = this._onKeydown.bind(this);
},

_addEventListeners

method
 _addEventListeners() 

Add event listeners for DOM events.

_addEventListeners: function() {
    this.el.addEventListener('keydown', this._onKeydownBound);
},

_removeEventListeners

method
 _removeEventListeners() 

Remove event listeners for DOM events..

_removeEventListeners: function() {
    this.el.removeEventListener('keydown', this._onKeydownBound);
},

_onKeydown

method
 _onKeydown() 

When the space or enter key is pressed on the toggle, toggle!

Option name Type Description
e Object
_onKeydown: function(e) {

    if (!this._getElementMatchingParent(e.target, '.spark-toggle-switch, spark-toggle-switch__handle', this.el)) {
        return;
    }

    var code = e.keyCode || e.which;

    switch (code) {
        case 32:
            // space
            // Skip, native works as expected
            break;
        case 13:
            // enter
            e.preventDefault();
            this.toggle();
            break;
        case 39:
        case 40:
            // right
            // down
            e.preventDefault();
            this.activate();
            break;
        case 37:
        case 38:
            // left
            // up
            e.preventDefault();
            this.deactivate();
            break;
    }

}
    };

    Base.exportjQuery(ToggleSwitch, 'ToggleSwitch');

    return ToggleSwitch;
}));