237 lines
5.2 KiB
JavaScript
237 lines
5.2 KiB
JavaScript
import ngModule from '../../module';
|
|
import FormInput from '../form-input';
|
|
import './style.scss';
|
|
|
|
export default class Field extends FormInput {
|
|
constructor($element, $scope, $compile) {
|
|
super($element, $scope);
|
|
this.$compile = $compile;
|
|
|
|
this.prefix = null;
|
|
this.suffix = null;
|
|
|
|
this.control = this.element.querySelector('.control');
|
|
this.classList.add('vn-field');
|
|
this.element.addEventListener('click', e => this.onClick(e));
|
|
|
|
this.container = this.element.querySelector('.container');
|
|
this.container.addEventListener('mousedown', e => this.onMouseDown(e));
|
|
}
|
|
|
|
$onInit() {
|
|
super.$onInit();
|
|
|
|
if (this.info) this.classList.add('has-icons');
|
|
|
|
this.input.addEventListener('focus', () => this.onFocus(true));
|
|
this.input.addEventListener('blur', () => this.onFocus(false));
|
|
this.input.addEventListener('change', e => {
|
|
this.emit('change', {event: e});
|
|
});
|
|
}
|
|
|
|
set field(value) {
|
|
if (value === this.field) return;
|
|
super.field = value;
|
|
this.classList.toggle('not-empty', value != null && value !== '');
|
|
this.validateValue();
|
|
}
|
|
|
|
get field() {
|
|
return super.field;
|
|
}
|
|
|
|
set input(value) {
|
|
if (this.input)
|
|
this.control.removeChild(this.input);
|
|
this._input = value;
|
|
if (value)
|
|
this.control.appendChild(value);
|
|
}
|
|
|
|
get input() {
|
|
return this._input;
|
|
}
|
|
|
|
set value(value) {
|
|
this.field = value;
|
|
}
|
|
|
|
get value() {
|
|
return this.input.value;
|
|
}
|
|
|
|
set type(value) {
|
|
this.input.type = value;
|
|
}
|
|
|
|
get type() {
|
|
return this.input.type;
|
|
}
|
|
|
|
set name(value) {
|
|
this.input.name = value;
|
|
}
|
|
|
|
get name() {
|
|
return this.input.name;
|
|
}
|
|
|
|
set placeholder(value) {
|
|
this.input.placeholder = value;
|
|
}
|
|
|
|
get placeholder() {
|
|
return this.input.placeholder;
|
|
}
|
|
|
|
set required(value) {
|
|
this._required = value;
|
|
let required = this.element.querySelector('.required');
|
|
display(required, this._required);
|
|
}
|
|
|
|
get required() {
|
|
return this._required;
|
|
}
|
|
|
|
set prefix(value) {
|
|
this._prefix = value;
|
|
this.refreshFix('.prefix', value);
|
|
}
|
|
|
|
get prefix() {
|
|
return this._prefix;
|
|
}
|
|
|
|
set suffix(value) {
|
|
this._suffix = value;
|
|
this.refreshFix('.suffix', value);
|
|
}
|
|
|
|
get suffix() {
|
|
return this._suffix;
|
|
}
|
|
|
|
set hint(value) {
|
|
this._hint = value;
|
|
this.refreshHint();
|
|
}
|
|
|
|
get hint() {
|
|
return this._hint;
|
|
}
|
|
|
|
set error(value) {
|
|
if (value === this.error) return;
|
|
this._error = value;
|
|
this.refreshHint();
|
|
}
|
|
|
|
get error() {
|
|
return this._error;
|
|
}
|
|
|
|
get shownError() {
|
|
return this.error || this.inputError || null;
|
|
}
|
|
|
|
refreshHint() {
|
|
let error = this.shownError;
|
|
let hint = error || this.hint;
|
|
|
|
let hintEl = this.element.querySelector('.hint');
|
|
hintEl.innerText = hint || '';
|
|
hintEl.classList.toggle('filled', Boolean(hint));
|
|
|
|
this.classList.toggle('invalid', Boolean(error));
|
|
}
|
|
|
|
refreshFix(selector, text) {
|
|
let fix = this.element.querySelector(selector);
|
|
display(fix, text);
|
|
fix.innerText = text || '';
|
|
}
|
|
|
|
refreshTabIndex() {
|
|
this.input.tabIndex = this.disabled ? -1 : this.tabIndex;
|
|
}
|
|
|
|
onClick() {
|
|
// if (event.defaultPrevented) return;
|
|
// event.preventDefault();
|
|
|
|
if (this.input !== document.activeElement)
|
|
this.focus();
|
|
}
|
|
|
|
onMouseDown(event) {
|
|
if (event.target == this.input) return;
|
|
event.preventDefault();
|
|
this.focus();
|
|
}
|
|
|
|
onFocus(hasFocus) {
|
|
this.classList.toggle('focused', hasFocus);
|
|
}
|
|
|
|
onClear(event) {
|
|
if (event.defaultPrevented) return;
|
|
event.preventDefault();
|
|
this.field = null;
|
|
this.input.dispatchEvent(new Event('change'));
|
|
}
|
|
|
|
focus() {
|
|
this.input.focus();
|
|
}
|
|
|
|
select() {
|
|
this.input.select();
|
|
}
|
|
|
|
buildInput(type) {
|
|
let template = `<input type="${type}" ng-model="$ctrl.field"></input>`;
|
|
this.input = this.$compile(template)(this.$)[0];
|
|
}
|
|
|
|
/**
|
|
* If input value is invalid, sets the error message as hint.
|
|
*/
|
|
validateValue() {
|
|
let error = this.input.checkValidity()
|
|
? null
|
|
: this.input.validationMessage;
|
|
|
|
if (error === this.inputError) return;
|
|
this.inputError = error;
|
|
this.refreshHint();
|
|
}
|
|
}
|
|
Field.$inject = ['$element', '$scope', '$compile'];
|
|
|
|
ngModule.vnComponent('vnField', {
|
|
template: require('./index.html'),
|
|
transclude: {
|
|
prepend: '?prepend',
|
|
append: '?append'
|
|
},
|
|
controller: Field,
|
|
bindings: {
|
|
type: '@?',
|
|
placeholder: '@?',
|
|
value: '=?',
|
|
info: '@?',
|
|
required: '<?',
|
|
prefix: '@?',
|
|
suffix: '@?',
|
|
hint: '@?',
|
|
error: '<?',
|
|
rule: '@?'
|
|
}
|
|
});
|
|
|
|
function display(element, display) {
|
|
element.style.display = display ? 'initial' : 'none';
|
|
}
|