Sabre Spark

NumberSelector

An increment/decrement for number inputs.

Option name Type Description
module components/number-selector.js
Example
new NumberSelector(el);

NumberSelector

function
 NumberSelector() 

NumberSelector constructor.

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

  if (!el) {
    return;
  }

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

NumberSelector.prototype = {

_setParams

property
 _setParams 

Include common functionality.

_setParams: Base.setParams,
_getElementMatchingParent: Base.getElementMatchingParent,
remove: Base.remove,

_whitelistedParams

property
 _whitelistedParams 

Whitelisted parameters which can be set on construction.

Option name Type Description
_whitelistedParams: [],

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,
  inputEl: null,
  buttonUpEl: null,
  buttonDownEl: null,
  _onChangeBound: null,
  _onClickBound: null
},

value

method
 value() 

Get or set the current value of the number selector.

Option name Type Description
val Number

@optional

return Number

The current value

value: function(val) {

  if (val !== undefined) {
    this.inputEl.value = this._getConformedNumber(val);
  }

  return parseInt(this.inputEl.value, 10);
},

increment

method
 increment() 

Increment by the step value.

increment: function() {
  this.value(this.value() + (this._getStep() || 1));
},

decrement

method
 decrement() 

Decrement by the step value.

decrement: function() {
  this.value(this.value() - (this._getStep() || 1));
},

disable

method
 disable() 

Disable number selector

disable: function() {
  this.inputEl.disabled = true;
  this.buttonUpEl.disabled = true;
  this.buttonDownEl.disabled = true;
},

enable

method
 enable() 

Enable number selector

enable: function() {
  this.inputEl.disabled = false;
  this.buttonUpEl.disabled = false;
  this.buttonDownEl.disabled = false;
},

_cacheElements

method
 _cacheElements() 

Store a reference to the whole number-selector, as well as the
input element. Also, get some default values from the input
element (min, max, steps).

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

  this.el = el;
  this.inputEl = el.querySelector('input');
  this.buttonUpEl = el.querySelector('.spark-number-selector__up, .spark-number-picker__up');
  this.buttonDownEl = el.querySelector('.spark-number-selector__down, .spark-number-picker__down');

  if (!this.inputEl) {
    throw new Error('NumberSelector must include an `<input>` element!');
  }
},

_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._onClickBound = this._onClick.bind(this);
  this._onChangeBound = this._onChange.bind(this);
},

_addEventListeners

method
 _addEventListeners() 

Add event listeners for touchstart and mouse click.

_addEventListeners: function() {
  this.el.addEventListener('click', this._onClickBound);
  this.el.addEventListener('change', this._onChangeBound);
},

_removeEventListeners

method
 _removeEventListeners() 

Remove event listeners for touchstart and mouse click.

_removeEventListeners: function() {
  this.el.removeEventListener('click', this._onClickBound);
  this.el.removeEventListener('change', this._onChangeBound);
},

_getMin

method
 _getMin() 

Get the current value of the min property.

Option name Type Description
return Number
_getMin: function() {
  return this._getInputPropAsNumber('min');
},

_getMax

method
 _getMax() 

Get the current value of the max property.

Option name Type Description
return Number
_getMax: function() {
  return this._getInputPropAsNumber('max');
},

_getStep

method
 _getStep() 

Get the current value of the step property.

Option name Type Description
return Number
_getStep: function() {
  return this._getInputPropAsNumber('step');
},

_getInputPropAsNumber

method
 _getInputPropAsNumber() 

Get a property as a number.

Option name Type Description
key String
return Number
_getInputPropAsNumber: function(key) {
  return parseFloat(this.inputEl.getAttribute(key));
},

_getConformedNumber

method
 _getConformedNumber() 

Get the given number within the min/max range of the input element.

Option name Type Description
num Number
return Number
_getConformedNumber: function(num) {

  var max = this._getMax();
  var min = this._getMin();
  var step = this._getStep();

  // Move in increments if we have a defined step size
  if (step) {

    var diff = num % step;
    var halfStep = step / 2;
    var overHalf = diff >= halfStep;

    num = overHalf ? num + (step - diff) : num - diff;
  }

  return max !== undefined && num > max ? max : (min !== undefined && num < min ? min : num);
},

_onClick

method
 _onClick() 

When either of the buttons are clicked, update the value.

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

  // The increment button is clicked
  // @todo Remove .spark-number-picker in 2.0.0
  if (this._getElementMatchingParent(e.target, '.spark-number-selector__up, .spark-number-picker__up', this.el)) {
    e.preventDefault();
    this.increment();
  }
  // The decrement button is clicked
  // @todo Remove .spark-number-picker in 2.0.0
  else if (this._getElementMatchingParent(e.target, '.spark-number-selector__down, .spark-number-picker__down', this.el)) {
    e.preventDefault();
    this.decrement();
  }
},

_onChange

method
 _onChange() 

When the input value changes, max sure we are in bounds.

Option name Type Description
e Object
_onChange: function() {
  this.value(parseFloat(this.inputEl.value));
}
  };

  Base.exportjQuery(NumberSelector, 'NumberSelector');

  return NumberSelector;
}));