| Option name | Type | Description |
|---|---|---|
| el | Element | |
| params | Object |
NumberSelector constructor.
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 = {
Include common functionality.
_setParams: Base.setParams,
_getElementMatchingParent: Base.getElementMatchingParent,
remove: Base.remove,
Whitelisted parameters which can be set on construction.
_whitelistedParams: [],
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.
defaults: {
el: null,
inputEl: null,
buttonUpEl: null,
buttonDownEl: null,
_onChangeBound: null,
_onClickBound: null
},
| Option name | Type | Description |
|---|---|---|
| val | Number | @optional |
| return | Number | The current value |
Get or set the current value of the number selector.
value: function(val) {
if (val !== undefined) {
this.inputEl.value = this._getConformedNumber(val);
}
return parseInt(this.inputEl.value, 10);
},
Increment by the step value.
increment: function() {
this.value(this.value() + (this._getStep() || 1));
},
Decrement by the step value.
decrement: function() {
this.value(this.value() - (this._getStep() || 1));
},
Disable number selector
disable: function() {
this.inputEl.disabled = true;
this.buttonUpEl.disabled = true;
this.buttonDownEl.disabled = true;
},
Enable number selector
enable: function() {
this.inputEl.disabled = false;
this.buttonUpEl.disabled = false;
this.buttonDownEl.disabled = false;
},
| Option name | Type | Description |
|---|---|---|
| el | Element |
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).
_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!');
}
},
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);
},
Add event listeners for touchstart and mouse click.
_addEventListeners: function() {
this.el.addEventListener('click', this._onClickBound);
this.el.addEventListener('change', this._onChangeBound);
},
Remove event listeners for touchstart and mouse click.
_removeEventListeners: function() {
this.el.removeEventListener('click', this._onClickBound);
this.el.removeEventListener('change', this._onChangeBound);
},
Get the current value of the min property.
_getMin: function() {
return this._getInputPropAsNumber('min');
},
Get the current value of the max property.
_getMax: function() {
return this._getInputPropAsNumber('max');
},
Get the current value of the step property.
_getStep: function() {
return this._getInputPropAsNumber('step');
},
| Option name | Type | Description |
|---|---|---|
| key | String | |
| return | Number |
Get a property as a number.
_getInputPropAsNumber: function(key) {
return parseFloat(this.inputEl.getAttribute(key));
},
| Option name | Type | Description |
|---|---|---|
| num | Number | |
| return | Number |
Get the given number within the min/max range of the input element.
_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);
},
| Option name | Type | Description |
|---|---|---|
| e | Object |
When either of the buttons are clicked, update the value.
_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();
}
},
| Option name | Type | Description |
|---|---|---|
| e | Object |
When the input value changes, max sure we are in bounds.
_onChange: function() {
this.value(parseFloat(this.inputEl.value));
}
};
Base.exportjQuery(NumberSelector, 'NumberSelector');
return NumberSelector;
}));