108 lines
2.9 KiB
JavaScript
108 lines
2.9 KiB
JavaScript
import ngModule from '../../module';
|
|
import Component from '../../lib/component';
|
|
import Input from '../../lib/input';
|
|
import './style.scss';
|
|
|
|
export default class Controller extends Component {
|
|
constructor($element, $scope, $transclude, $timeout) {
|
|
super($element, $scope);
|
|
this.$timeout = $timeout;
|
|
this.element.tabIndex = 0;
|
|
|
|
this.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]);
|
|
this.element.tabIndex = -1;
|
|
}, null, 'field');
|
|
this.element.classList.add('selected');
|
|
});
|
|
|
|
this.element.addEventListener('focusout', event => this.hideField(event));
|
|
|
|
this.element.addEventListener('keyup', event => {
|
|
if (event.key === 'Enter')
|
|
this.hideField(event);
|
|
});
|
|
|
|
this.element.addEventListener('click', event => {
|
|
if (this.disabled) return;
|
|
|
|
let target = event.target;
|
|
while (target) {
|
|
if (target == this.field[0]) return;
|
|
target = target.parentNode;
|
|
}
|
|
|
|
let inputCtrl = this.field[0].firstElementChild.$ctrl;
|
|
if (inputCtrl instanceof Input) {
|
|
let evt = new MouseEvent('click', {
|
|
bubbles: true,
|
|
cancelable: true,
|
|
view: window
|
|
});
|
|
inputCtrl.input.dispatchEvent(evt);
|
|
}
|
|
});
|
|
}
|
|
|
|
hideField(event) {
|
|
if (!this.field || !this.tScope) return;
|
|
|
|
this.lastEvent = event;
|
|
let target = event.relatedTarget;
|
|
while (target && target != this.element)
|
|
target = target.parentNode;
|
|
|
|
if (!target) {
|
|
this.tScope.$destroy();
|
|
this.tScope = null;
|
|
this.field.remove();
|
|
this.field = null;
|
|
this.element.classList.remove('selected');
|
|
this.element.tabIndex = 0;
|
|
}
|
|
}
|
|
|
|
destroyTimer() {
|
|
if (this.timer) {
|
|
this.$timeout.cancel(this.timer);
|
|
this.timer = null;
|
|
}
|
|
}
|
|
|
|
$onDestroy() {
|
|
this.destroyTimer();
|
|
}
|
|
|
|
get disabled() {
|
|
return this._disabled;
|
|
}
|
|
|
|
set disabled(value) {
|
|
this._disabled = value;
|
|
|
|
const classList = this.element.classList;
|
|
|
|
if (value)
|
|
classList.add('disabled');
|
|
else
|
|
classList.remove('disabled');
|
|
}
|
|
}
|
|
Controller.$inject = ['$element', '$scope', '$transclude', '$timeout'];
|
|
|
|
ngModule.component('vnTdEditable', {
|
|
template: require('./index.html'),
|
|
controller: Controller,
|
|
bindings: {
|
|
disabled: '<?'
|
|
},
|
|
transclude: {
|
|
text: 'text',
|
|
field: '?field'
|
|
}
|
|
});
|