Sabre Spark

SelectInput

A select input container.

Option name Type Description
module components/select-input.js
Example
new SelectInput(el);

SelectInput

function
 SelectInput() 

SelectInput constructor.

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

  if (!el) {
    return;
  }

  this._setParams(this.defaults, true);
  this._cacheElements(el);
  this._setParams(params || {});
  this._bindEventListenerCallbacks();
  this._addEventListeners();
};

SelectInput.prototype = {

_setParams

property
 _setParams 

Include common functionality.

_setParams: Base.setParams,
_toggleClass: Base.toggleClass,
remove: Base.remove,

_whitelistedParams

property
 _whitelistedParams 

Whitelisted parameters which can be set on construction.

Option name Type Description
_whitelistedParams: ['onChange', 'onFocus', 'onBlur'],

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,
  selectEl: null,
  labelEl: null,
  hasValue: false,
  isActive: false,
  onChange: null,
  onFocus: null,
  onBlur: null,
  previousValue: null,
  _onFocusBound: null,
  _onBlurBound: null,
  _onInputBound: null
},

getValue

method
 getValue() 

Get the value.

Option name Type Description
return String
getValue: function() {
  return this.selectEl.value;
},

setValue

method
 setValue() 

Set the value.

Option name Type Description
val String, Number
setValue: function(val) {

  // Cast to a string for comparison
  val = val + '';

  var i = 0;
  var len = this.selectEl.children.length;

  for (; i < len; i++) {
    if (this.selectEl.children[i].value === val) {
      this.selectEl.children[i].selected = true;
      this._updateClass();
      return;
    }
  }
},

setOptions

method
 setOptions() 

Set the options.

Option name Type Description
opts Array
setOptions: function(opts) {

  var i = 0;
  var len = opts.length;
  var str = '';

  // Store the index of the currently selected option so we can set
  // it when we're all done.
  var curIndex = this.selectEl.selectedIndex;

  for (; i < len; i++) {
    str += '<option ' + (opts[i].value !== undefined ? 'value="' + (opts[i].value || '') + '"' : '') + '>' + (opts[i].text || '') + '</option>';
  }

  this.selectEl.innerHTML = str;
  this.selectEl.selectedIndex = Math.min(len - 1, curIndex);
},

setLabel

method
 setLabel() 

Set the value of the label.

Option name Type Description
text String
setLabel: function(text) {
  if (!this.labelEl) return;
  this.labelEl.innerHTML = text;
},

_cacheElements

method
 _cacheElements() 

Store a reference to the needed elements.

Option name Type Description
el Element
_cacheElements: function(el) {

  this.el = el;
  this.selectEl = this.el.querySelector('select');
  this.labelEl = this.el.querySelector('.spark-label');

  if (!this.selectEl) {
    throw new Error('A <select> element must be present!', this.el);
  }

  this._updateClass();
},

_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._onFocusBound = this._onFocus.bind(this);
  this._onBlurBound = this._onBlur.bind(this);
  this._onInputBound = this._onInput.bind(this);
},

_addEventListeners

method
 _addEventListeners() 

Add event listeners for focus, blur and input.

_addEventListeners: function() {
  this.selectEl.addEventListener('focus', this._onFocusBound);
  this.selectEl.addEventListener('blur', this._onBlurBound);
  this.selectEl.addEventListener('input', this._onInputBound);
},

_removeEventListeners

method
 _removeEventListeners() 

Remove event listeners for focus, blur and input.

_removeEventListeners: function() {
  this.selectEl.removeEventListener('focus', this._onFocusBound);
  this.selectEl.removeEventListener('blur', this._onBlurBound);
  this.selectEl.removeEventListener('input', this._onInputBound);
},

_updateClass

method
 _updateClass() 

Update the active class.

_updateClass: function() {
  this.hasValue = this.selectEl.value ? true : false;
  this._toggleClass(this.el, 'has-value', this.hasValue);
  this._toggleClass(this.el, 'active', this.isActive);
},

_onFocus

method
 _onFocus() 

When the input element gains focus.

Option name Type Description
e Object
_onFocus: function() {
  this.isActive = true;
  this._updateClass();
  var value = this.getValue();
  (this.onFocus || noop)(value);
},

_onBlur

method
 _onBlur() 

When the input element loses focus.

Option name Type Description
e Object
_onBlur: function() {
  this.isActive = false;
  this._updateClass();
  var value = this.getValue();
  (this.onBlur || noop)(value);
},

_onInput

method
 _onInput() 

When the value is about to change, run the validation, set the characters count
and resize if we're a textarea.

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

  this._updateClass();

  var value = this.getValue();

  if (value !== this.previousValue) {
    this.previousValue = value;
    (this.onChange || noop)(value);
  }
}
  };

  Base.exportjQuery(SelectInput, 'SelectInput');

  return SelectInput;
}));