salix/front/core/components/field/index.js

import ngModule from '../../module';
import Component from '../../lib/component';
import './style.scss';

export default class Field extends Component {
    constructor($element, $scope) {
        super($element, $scope);
        this._value = undefined;
        this.prefix = null;
        this.suffix = null;

        this.input = this.element.querySelector('input');
        this.classList = this.element.classList;
        this.classList.add('vn-field');

        this.element.addEventListener('focusin',
            () => this.onFocus(true));
        this.element.addEventListener('focusout',
            () => this.onFocus(false));
        this.element.addEventListener('click',
            () => this.onClick());
    }

    $onInit() {
        if (this.info) this.classList.add('has-icons');
    }

    set field(value) {
        this._field = value;
        this.classList.toggle('not-empty', value != null && value !== '');
    }

    get field() {
        return this._field;
    }

    set type(value) {
        this.input.type = value;
    }

    get type() {
        return this.input.type;
    }

    set disabled(value) {
        this._disabled = boolTag(value);
        this.input.disabled = this._disabled;
        this.classList.toggle('disabled', this._disabled);
    }

    get disabled() {
        return this._disabled;
    }

    set readonly(value) {
        this._readonly = boolTag(value);
        this.input.readOnly = this._readonly;
        this.classList.toggle('readonly', this._readonly);
    }

    get readonly() {
        return this._readonly;
    }

    set required(value) {
        this._required = boolTag(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) {
        this._error = value;
        this.refreshHint();
        this.classList.toggle('invalid', Boolean(value));
    }

    get error() {
        return this._error;
    }

    refreshHint() {
        let hint = this.error || this.hint || '';
        let hintEl = this.element.querySelector('.hint');
        hintEl.innerText = hint;
        hintEl.classList.toggle('filled', Boolean(hint));
    }

    refreshFix(selector, text) {
        let fix = this.element.querySelector(selector);
        display(fix, text);
        fix.innerText = text || '';
    }

    onClick() {
        if (this.input !== document.activeElement)
            this.input.focus();
    }

    onFocus(hasFocus) {
        this.classList.toggle('focused', hasFocus);
    }

    onClear() {
        this.input.value = '';
        this.input.dispatchEvent(new Event('change'));
    }

    focus() {
        this.input.focus();
    }

    select() {
        this.input.select();
    }
}
Field.$inject = ['$element', '$scope'];

ngModule.component('vnField', {
    template: require('./index.html'),
    transclude: {
        prepend: '?prepend',
        append: '?append'
    },
    controller: Field,
    bindings: {
        field: '=?',
        label: '@?',
        name: '@?',
        type: '@?',
        info: '@?',
        disabled: '@?',
        readonly: '@?',
        required: '@?',
        prefix: '@?',
        suffix: '@?',
        hint: '@?',
        error: '<?'
    }
});

function boolTag(value) {
    return Boolean(value || value === '');
}

function display(element, display) {
    element.style.display = display ? 'initial' : 'none';
}