salix/client/core/src/textfield/textfield.js

import { module } from '../module';
import Component from '../lib/component';
// import * as resolveFactory from '../lib/resolveDefaultComponents';
// import * as normalizerFactory from '../lib/inputAttrsNormalizer';
import './style.scss';
// import './textfield.mdl';

export default class TextfieldController extends Component {
    constructor($element, $scope, $attrs) {
        super($element);

        this.$scope = $scope;
        this.$attrs = $attrs;
        this.$element = $element[0];

        let input = this.input = $element[0].querySelector('input');

        input.addEventListener('input',
            () => this.checkValue());
        input.addEventListener('focus',
            () => this.checkValue());
        input.addEventListener('blur',
            () => this.showClear(false));

        let clearButton = this.$element.querySelector('button');
        clearButton.addEventListener('click',
            () => this.onClearClick());
        clearButton.addEventListener('mousedown',
            event => event.preventDefault());

        let div = this.$element.firstChild;
        componentHandler.upgradeElement(div);

        this._value = null;

        this.type = this.$attrs.type || 'text';
    }

    get value() {
        return this._value;
    }

    set value(value) {
        this._value = (value === undefined || value === '') ? null : value;
    }

    $onInit() {
        let mdlTextField = this.$element.firstChild.MaterialTextfield;
        mdlTextField.updateClasses_();

        this.$scope.$watch(this.$attrs.model,
            () => mdlTextField.updateClasses_());

        /* let $input = angular.element(this.input);
         $input.controller('ng-model').$parsers.push(value => value === '' ? null : value);*/
    }

    onClearClick() {
        this.input.value = null;
        this.checkValue();

        let event = this.document.createEvent('HTMLEvents');
        event.initEvent('change', false, true);
        this.input.dispatchEvent(event);
    }

    checkValue() {
        this.showClear(this.input.value);
    }

    showClear(show) {
        show = (show && document.activeElement === this.input);
        let clearButton = this.$element.querySelector('button');
        clearButton.style.visibility = show ? 'visible' : 'hidden';
    }

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

    focus() {
        this.input.focus();
    }
}
TextfieldController.$inject = ['$element', '$scope', '$attrs'];

module.component('vnTextfield', {
    template: require('./textfield.html'),
    controller: TextfieldController,
    bindings: {
        value: '=model'
    }
});