salix/front/core/components/input-number/index.js

201 lines
4.2 KiB
JavaScript
Raw Normal View History

2018-09-13 09:27:38 +00:00
import ngModule from '../../module';
2019-04-04 09:53:13 +00:00
import Input from '../../lib/input';
2018-09-13 09:27:38 +00:00
import './style.scss';
2019-04-04 09:53:13 +00:00
export default class InputNumber extends Input {
constructor($element, $scope, $attrs, vnTemplate) {
super($element, $scope);
2019-04-09 11:18:55 +00:00
this.displayControls = false;
2019-04-04 09:53:13 +00:00
this.hasFocus = false;
2019-04-09 11:18:55 +00:00
vnTemplate.normalizeInputAttrs($attrs);
2019-04-04 09:53:13 +00:00
this.registerEvents();
}
/**
* Registers all event emitters
*/
registerEvents() {
2019-04-09 11:18:55 +00:00
this.input.addEventListener('change', event => {
if (!isNaN(this.value))
this.input.value = this.value;
2019-04-10 10:04:11 +00:00
this.validateValue();
2019-04-09 11:18:55 +00:00
this.emit('change', {event});
2018-09-13 09:27:38 +00:00
});
2019-04-04 09:53:13 +00:00
this.input.addEventListener('focus', event => {
this.emit('focus', {event});
});
2018-09-13 09:27:38 +00:00
}
2019-04-09 11:18:55 +00:00
/**
* Gets current value
*/
2018-09-13 09:27:38 +00:00
get value() {
return this._value;
}
2019-04-09 11:18:55 +00:00
/**
* Sets input value
*
* @param {Number} value - Value
*/
2018-09-13 09:27:38 +00:00
set value(value) {
2019-04-10 10:04:11 +00:00
if (!this.hasOwnProperty('_value') && value)
this.input.value = value;
2018-09-13 09:27:38 +00:00
this._value = value;
2019-04-10 10:04:11 +00:00
this.hasValue = !(value === null || value === undefined || value === '');
2018-09-13 09:27:38 +00:00
2019-04-09 11:18:55 +00:00
if (this.hasValue)
this.element.classList.add('not-empty');
else
this.element.classList.remove('not-empty');
2018-09-13 09:27:38 +00:00
2019-04-09 11:18:55 +00:00
this.validateValue();
2018-09-13 09:27:38 +00:00
}
2019-04-09 11:18:55 +00:00
/**
* Gets max value
*/
2018-09-13 09:27:38 +00:00
get max() {
return this.input.max;
}
2019-04-09 11:18:55 +00:00
/**
* Sets max allowed value
*
* @param {Number} value - Value
*/
2018-09-13 09:27:38 +00:00
set max(value) {
2019-04-09 11:18:55 +00:00
if (value) this.input.max = value;
2018-09-13 09:27:38 +00:00
}
2019-04-09 11:18:55 +00:00
/**
* Gets min value
*/
2018-09-13 09:27:38 +00:00
get min() {
return this.input.min;
}
2019-04-09 11:18:55 +00:00
/**
* Sets min allowed value
*
* @param {Number} value - Value
*/
2018-09-13 09:27:38 +00:00
set min(value) {
2019-04-11 05:29:41 +00:00
if (value) this.input.min = value;
2018-09-13 09:27:38 +00:00
}
2019-04-09 11:18:55 +00:00
/**
* Gets min step value
*/
2018-09-13 09:27:38 +00:00
get step() {
2018-09-19 13:05:07 +00:00
return parseFloat(this.input.step);
2018-09-13 09:27:38 +00:00
}
2019-04-09 11:18:55 +00:00
/**
* Sets min step value
*
* @param {Number} value - Value
*/
2018-09-13 09:27:38 +00:00
set step(value) {
2019-04-11 05:29:41 +00:00
if (value) this.input.step = value;
2018-09-13 09:27:38 +00:00
}
2019-04-10 10:04:11 +00:00
get validationError() {
return this.input.validationMessage;
}
2019-04-09 11:18:55 +00:00
/**
* Increases the input value
*/
stepUp() {
this.input.stepUp();
2018-09-13 09:27:38 +00:00
}
2019-04-09 11:18:55 +00:00
/**
* Decreases the input value
*/
stepDown() {
this.input.stepDown();
2018-09-13 09:27:38 +00:00
}
2019-04-09 11:18:55 +00:00
/**
* Validates a valid input value
*
* @return {Boolean} - True if has a valid value
*/
hasValidValue() {
return this.input.checkValidity();
}
2019-02-25 09:03:50 +00:00
2019-04-09 11:18:55 +00:00
/**
* Changes the input element
* if has a validation error
*/
validateValue() {
if (!this.hasValidValue()) {
2019-04-10 10:04:11 +00:00
this.hideError();
this.showError();
} else
this.hideError();
}
/**
* Shows the input validation error
*/
showError() {
const infixElement = this.element.querySelector('.infix');
const infixClassList = infixElement.classList;
const errorSpan = document.createElement('span');
errorSpan.className = 'mdl-textfield__error';
const errorText = document.createTextNode(this.validationError);
errorSpan.append(errorText);
infixElement.append(errorSpan);
infixClassList.add('validated', 'invalid');
}
/**
* Hides the input validation error
*/
hideError() {
const infixElement = this.element.querySelector('.infix');
const infixClassList = infixElement.classList;
const errorElement = this.element.querySelector('.infix span.mdl-textfield__error');
if (errorElement)
errorElement.remove();
infixClassList.remove('validated', 'invalid');
2018-09-13 09:27:38 +00:00
}
}
2019-04-09 11:18:55 +00:00
InputNumber.$inject = ['$element', '$scope', '$attrs', 'vnTemplate'];
2018-09-13 09:27:38 +00:00
ngModule.component('vnInputNumber', {
template: require('./index.html'),
controller: InputNumber,
bindings: {
label: '@?',
name: '@?',
2018-09-13 09:27:38 +00:00
disabled: '<?',
min: '<?',
max: '<?',
step: '<?',
displayControls: '<?',
2018-09-13 09:27:38 +00:00
rule: '@?',
value: '=model',
validate: '&',
onChange: '&',
onClear: '&'
}
});