verdnatura/salix
verdnatura
/
salix
3
5
Fork 0
Code Issues Pull Requests 49 Releases Wiki Activity

texfield refactor

This commit is contained in:
Carlos 2017-09-12 11:44:56 +02:00
parent b288692b6c
commit 22f2d3e7f3
2 changed files with 41 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/core/src/textfield/textfield.html Normal file
View File

@ -0,0 +1,18 @@
<div class="mdl-textfield mdl-js-textfield {{$ctrl.className}}">
<input
class="mdl-textfield__input"
type="{{$ctrl.type}}"
name="{{$ctrl.name}}"
ng-model="{{$ctrl.model}}"
vn-validation="{{$ctrl.rule}}"
ng-disabled="{{$ctrl.disable}}"/>
<button
type="button"
class="mdl-chip__action"
tabindex="-1"
translate-attr="{title: 'Clear'}"
style="visibility: hidden">
<i class="material-icons">clear</i>
</button>
<label class="mdl-textfield__label" translate="{{$ctrl.label}}"></label>
</div>

53
client/core/src/textfield/textfield.js
View File

@ -1,15 +1,16 @@
import {module} from '../module'; import {module} from '../module';
import Component from '../lib/component';
import * as resolveFactory from '../lib/resolveDefaultComponents'; // import * as resolveFactory from '../lib/resolveDefaultComponents';
import * as normalizerFactory from '../lib/inputAttrsNormalizer'; // import * as normalizerFactory from '../lib/inputAttrsNormalizer';
import './style.scss'; import './style.scss';
import './textfield.mdl'; // import './textfield.mdl';
export default class Textfield extends Component { export default class TextfieldController {
constructor($element, $scope, $attrs) { constructor($element, $scope, $attrs) {
super($element);
let input = this.input = this.element.querySelector('input'); this.$scope = $scope;
this.$attrs = $attrs;
let input = this.input = this.$element.querySelector('input');
input.addEventListener('input', input.addEventListener('input',
() => this.checkValue()); () => this.checkValue());
input.addEventListener('focus', input.addEventListener('focus',
@ -17,24 +18,26 @@ export default class Textfield extends Component {
input.addEventListener('blur', input.addEventListener('blur',
() => this.showClear(false)); () => this.showClear(false));
let clearButton = this.element.querySelector('button'); let clearButton = this.$element.querySelector('button');
clearButton.addEventListener('click', clearButton.addEventListener('click',
() => this.onClearClick()); () => this.onClearClick());
clearButton.addEventListener('mousedown', clearButton.addEventListener('mousedown',
event => event.preventDefault()); event => event.preventDefault());
let div = this.element.firstChild; let div = this.$element.firstChild;
componentHandler.upgradeElement(div); componentHandler.upgradeElement(div);
Object.assign(this, $attrs);
} }
link($scope, $attrs) {
let mdlTextField = this.element.firstChild.MaterialTextfield; $onInit() {
let mdlTextField = this.$element.firstChild.MaterialTextfield;
mdlTextField.updateClasses_(); mdlTextField.updateClasses_();
$scope.$watch($attrs.model, this.$scope.$watch(this.$attrs.model,
() => mdlTextField.updateClasses_()); () => mdlTextField.updateClasses_());
let $input = angular.element( this.input); let $input = angular.$element(this.input);
$input.controller('ng-model').$parsers.push(value => value === '' ? null : value); $input.controller('ng-model').$parsers.push(value => value === '' ? null : value);
} }
onClearClick() { onClearClick() {
@ -50,7 +53,7 @@ export default class Textfield extends Component {
} }
showClear(show) { showClear(show) {
show = show && document.activeElement === this.input; show = show && document.activeElement === this.input;
let clearButton = this.element.querySelector('button'); let clearButton = this.$element.querySelector('button');
clearButton.style.visibility = show ? 'visible' : 'hidden'; clearButton.style.visibility = show ? 'visible' : 'hidden';
} }
/** /**
@ -66,21 +69,9 @@ export default class Textfield extends Component {
this.input.focus(); this.input.focus();
} }
} }
Textfield.$inject = ['$element', '$scope', '$attrs']; TextfieldController.$inject = ['$element', '$scope', '$attrs'];
directive.$inject = [resolveFactory.NAME, normalizerFactory.NAME]; module.component('vnTextfield', {
export function directive(resolve, normalizer) { template: require('./textfield.html'),
return { controller: TextfieldController
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);