salix/front/core/components/td-editable/index.js

import ngModule from '../../module';
import Component from '../../lib/component';
import FormInput from '../form-input';
import './style.scss';

export default class Controller extends Component {
    constructor($element, $scope, $transclude, $timeout) {
        super($element, $scope);
        this.$timeout = $timeout;
        this.element.tabIndex = 0;

        this.element.addEventListener('focus', () => {
            if (this.field || this.disabled) return;
            $transclude((tClone, tScope) => {
                this.field = tClone;
                this.tScope = tScope;
                this.element.querySelector('.field').appendChild(this.field[0]);
                this.element.tabIndex = -1;
            }, null, 'field');
            this.element.classList.add('selected');
        });

        this.element.addEventListener('focusout', event => this.hideField(event));

        this.element.addEventListener('keyup', event => {
            if (event.key === 'Enter')
                this.hideField(event);
        });

        this.element.addEventListener('click', event => {
            if (this.disabled) return;

            let target = event.target;
            while (target) {
                if (target == this.field[0]) return;
                target = target.parentNode;
            }

            let inputCtrl = this.field[0].firstElementChild.$ctrl;
            if (inputCtrl instanceof FormInput) {
                let evt = new MouseEvent('click', {
                    bubbles: true,
                    cancelable: true,
                    view: window
                });
                inputCtrl.input.dispatchEvent(evt);
            }
        });
    }

    hideField(event) {
        if (!this.field || !this.tScope) return;

        this.lastEvent = event;
        let target = event.relatedTarget;
        while (target && target != this.element)
            target = target.parentNode;

        if (!target) {
            this.tScope.$destroy();
            this.tScope = null;
            this.field.remove();
            this.field = null;
            this.element.classList.remove('selected');
            this.element.tabIndex = 0;
        }
    }

    destroyTimer() {
        if (this.timer) {
            this.$timeout.cancel(this.timer);
            this.timer = null;
        }
    }

    $onDestroy() {
        this.destroyTimer();
    }

    get disabled() {
        return this._disabled;
    }

    set disabled(value) {
        this._disabled = value;

        const classList = this.element.classList;

        if (value)
            classList.add('disabled');
        else
            classList.remove('disabled');
    }
}
Controller.$inject = ['$element', '$scope', '$transclude', '$timeout'];

ngModule.vnComponent('vnTdEditable', {
    template: require('./index.html'),
    controller: Controller,
    bindings: {
        disabled: '<?'
    },
    transclude: {
        text: 'text',
        field: '?field'
    }
});