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

import {module} from '../module';

// import * as resolveFactory from '../lib/resolveDefaultComponents';
// import * as normalizerFactory from '../lib/inputAttrsNormalizer';
import './style.scss';
// import './textfield.mdl';

export default class TextfieldController {
    constructor($element, $scope, $attrs) {

        this.$scope = $scope;
        this.$attrs = $attrs;
        let input = this.input = this.$element.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);

        Object.assign(this, $attrs);
    }

    $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';
    }
    /**
     * Selects the textfield.
     */
    select() {
        this.input.select();
    }
    /**
     * Puts the focus on the textfield.
     */
    focus() {
        this.input.focus();
    }
}
TextfieldController.$inject = ['$element', '$scope', '$attrs'];

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