70 lines
2.2 KiB
JavaScript
70 lines
2.2 KiB
JavaScript
|
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 './index.mdl';
|
||
|
|
|
||
|
|
export default class Textfield extends Component {
|
||
|
|
constructor($element, $scope, $attrs) {
|
||
|
|
super($element);
|
||
|
|
|
||
|
|
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());
|
||
|
|
|
||
|
|
// input.value = ' ';
|
||
|
|
let div = this.element.firstChild;
|
||
|
|
componentHandler.upgradeElement(div);
|
||
|
|
}
|
||
|
|
link($scope, $attrs) {
|
||
|
|
let mdlTextField = this.element.firstChild.MaterialTextfield;
|
||
|
|
$scope.$watch($attrs.model,
|
||
|
|
() => mdlTextField.updateClasses_());
|
||
|
|
mdlTextField.updateClasses_();
|
||
|
|
}
|
||
|
|
onClearClick() {
|
||
|
|
this.input.value = '';
|
||
|
|
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) {
|
||
|
|
let clearButton = this.element.querySelector('button');
|
||
|
|
clearButton.style.visibility = show ? 'visible' : 'hidden';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
Textfield.$inject = ['$element', '$scope', '$attrs'];
|
||
|
|
|
||
|
|
directive.$inject = [resolveFactory.NAME, normalizerFactory.NAME];
|
||
|
|
export function directive(resolve, normalizer) {
|
||
|
|
return {
|
||
|
|
restrict: 'E',
|
||
|
|
template: function(_, attrs) {
|
||
|
|
normalizer.normalize(attrs);
|
||
|
|
return resolve.getTemplate('textfield', attrs);
|
||
|
|
},
|
||
|
|
link: function($scope, $element, $attrs, $ctrl) {
|
||
|
|
$ctrl.link($scope, $attrs);
|
||
|
|
},
|
||
|
|
controller: Textfield
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
module.directive('vnTextfield', directive);
|