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

import ngModule from '../../module';
import Input from '../../lib/input';
import './style.scss';

export default class InputTime extends Input {
    constructor($element, $scope) {
        super($element, $scope);

        this.registerEvents();
    }

    /**
     * Registers all event emitters
     */
    registerEvents() {
        this.input.addEventListener('change', event => {
            this.emit('change', {event});
        });

        this.input.addEventListener('focus', event => {
            this.emit('focus', {event});
        });
    }

    /**
     * Gets current value
     */
    get value() {
        return this._value;
    }

    /**
     * Sets input value
     *
     * @param {Number} value - Value
     */
    set value(value) {
        if (this._value === undefined && value || typeof value === 'string')
            value = this.formatTime(value);

        this._value = value;
        this.hasValue = !(value === null || value === undefined);

        if (this.hasValue)
            this.element.classList.add('not-empty');
        else
            this.element.classList.remove('not-empty');

        this.validateValue();
    }

    /**
     * Gets max value
     */
    get max() {
        return this.input.max;
    }

    /**
     * Sets max allowed value
     *
     * @param {Number} value - Value
     */
    set max(value) {
        if (value) this.input.max = value;
    }

    /**
     * Gets min value
     */
    get min() {
        return this.input.min;
    }

    /**
     * Sets min allowed value
     *
     * @param {Number} value - Value
     */
    set min(value) {
        if (value) this.input.min = value;
    }

    /**
     * Gets min step value
     */
    get step() {
        return parseInt(this.input.step);
    }

    /**
     * Sets min step value
     *
     * @param {Number} value - Value
     */
    set step(value) {
        if (value) this.input.step = value;
    }

    /**
     * Returns a formatted hour
     * @param {Date} date -a
     * @return {String} Formatted hour
     */
    formatTime(date) {
        if (typeof date === 'string') {
            date = new Date(date);
            date.setTime(date.getTime() + (date.getTimezoneOffset() * 60000));
        }

        date.setSeconds(null);
        date.setMilliseconds(null);

        return date;
    }

    /**
     * Returns native validation message
     */
    get validationError() {
        return this.input.validationMessage;
    }

    /**
     * Validates a valid input value
     *
     * @return {Boolean} - True if has a valid value
     */
    hasValidValue() {
        return this.input.checkValidity();
    }

    /**
     * Changes the input element
     * if has a validation error
     */
    validateValue() {
        if (!this.hasValidValue()) {
            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');
    }
}

InputTime.$inject = ['$element', '$scope', '$attrs', 'vnTemplate', '$transclude'];

ngModule.component('vnInputTime', {
    template: require('./index.html'),
    controller: InputTime,
    transclude: {
        leftIcons: '?tLeftIcons',
        rightIcons: '?tRightIcons'
    },
    bindings: {
        label: '@?',
        disabled: '<?',
        readonly: '<?',
        step: '<?',
        min: '<?',
        max: '<?',
        rule: '@?',
        value: '=model',
        vnTabIndex: '@?',
        onChange: '&',
        onClear: '&'
    }
});