74 lines
1.7 KiB
JavaScript
74 lines
1.7 KiB
JavaScript
|
import {Decorator, NgElement, Ancestor} from 'core/core';
|
||
|
import {DOM} from 'facade/src/dom';
|
||
|
import {isPresent} from 'facade/src/lang';
|
||
|
import {ListWrapper} from 'facade/src/collection';
|
||
|
import {ControlGroup, Control} from './model';
|
||
|
|
||
|
@Decorator({
|
||
|
selector: '[control-name]',
|
||
|
bind: {
|
||
|
'control-name' : 'controlName'
|
||
|
}
|
||
|
})
|
||
|
export class ControlDecorator {
|
||
|
_groupDecorator:ControlGroupDecorator;
|
||
|
_el:NgElement;
|
||
|
_controlName:String;
|
||
|
|
||
|
constructor(@Ancestor() groupDecorator:ControlGroupDecorator, el:NgElement) {
|
||
|
this._groupDecorator = groupDecorator;
|
||
|
groupDecorator.addControlDecorator(this);
|
||
|
|
||
|
this._el = el;
|
||
|
DOM.on(el.domElement, "change", (_) => this._updateControl());
|
||
|
}
|
||
|
|
||
|
set controlName(name:string) {
|
||
|
this._controlName = name;
|
||
|
this._updateDOM();
|
||
|
}
|
||
|
|
||
|
_updateDOM() {
|
||
|
// remove it once all DOM write go throuh a queue
|
||
|
if (isPresent(this._controlName)) {
|
||
|
this._el.domElement.value = this._control().value;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
_updateControl() {
|
||
|
this._control().value = this._el.domElement.value;
|
||
|
}
|
||
|
|
||
|
_control() {
|
||
|
return this._groupDecorator.findControl(this._controlName);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
@Decorator({
|
||
|
selector: '[control-group]',
|
||
|
bind: {
|
||
|
'control-group' : 'controlGroup'
|
||
|
}
|
||
|
})
|
||
|
export class ControlGroupDecorator {
|
||
|
_controlGroup:ControlGroup;
|
||
|
_controlDecorators:List<ControlDecorator>;
|
||
|
|
||
|
constructor() {
|
||
|
this._controlDecorators = ListWrapper.create();
|
||
|
}
|
||
|
|
||
|
set controlGroup(controlGroup:ControlGroup) {
|
||
|
this._controlGroup = controlGroup;
|
||
|
ListWrapper.forEach(this._controlDecorators, (cd) => cd._updateDOM());
|
||
|
}
|
||
|
|
||
|
addControlDecorator(c:ControlDecorator) {
|
||
|
ListWrapper.push(this._controlDecorators, c);
|
||
|
}
|
||
|
|
||
|
findControl(name:string):Control {
|
||
|
return this._controlGroup.controls[name];
|
||
|
}
|
||
|
}
|