salix/front/core/components/td-editable/index.js

64 lines
1.8 KiB
JavaScript

import ngModule from '../../module';
import Component from '../../lib/component';
import './style.scss';
export default class Controller extends Component {
constructor($element, $scope, $transclude, $timeout) {
super($element, $scope);
this.$timeout = $timeout;
let element = $element[0];
element.tabIndex = 0;
element.addEventListener('focus', () => {
if (this.field || this.disabled) return;
$transclude((tClone, tScope) => {
this.field = tClone;
this.tScope = tScope;
this.element.querySelector('.field').appendChild(this.field[0]);
element.tabIndex = -1;
}, null, 'field');
element.classList.add('selected');
});
element.addEventListener('focusout', event => {
if (!this.field || this.disabled) return;
// this.destroyTimer();
this.lastEvent = event;
let target = event.relatedTarget;
while (target && target != element)
target = target.parentNode;
if (!target) {
this.tScope.$destroy();
this.field.remove();
this.field = null;
element.classList.remove('selected');
element.tabIndex = 0;
}
});
}
destroyTimer() {
if (this.timer) {
this.$timeout.cancel(this.timer);
this.timer = null;
}
}
$onDestroy() {
this.destroyTimer();
}
}
Controller.$inject = ['$element', '$scope', '$transclude', '$timeout'];
ngModule.component('vnTdEditable', {
template: require('./index.html'),
controller: Controller,
bindings: {
disabled: '<?'
},
transclude: {
text: 'text',
field: '?field'
}
});