corrección para popover anidados

This commit is contained in:
Dani Herrero 2017-07-05 09:47:24 +02:00
parent c47c88dd10
commit ffe21e6947
3 changed files with 100 additions and 33 deletions

View File

@ -13,6 +13,7 @@ export default class Autocomplete extends Component {
this.$timeout = $timeout;
// this.data = null;
this.popover = null;
this.popoverId = null;
this.displayData = null;
this.timeoutId = null;
this.lastSearch = null;
@ -206,14 +207,14 @@ export default class Autocomplete extends Component {
e => this.onPopoverMousedown(e));
popover.className = 'vn-autocomplete';
popover.appendChild(fragment);
this.vnPopover.show(popover, this.input);
this.popoverId = this.vnPopover.show(popover, this.input);
this.popover = popover;
}
}
hidePopover() {
if (!this.popover) return;
this.activeOption = -1;
this.vnPopover.hide();
this.vnPopover.hide(this.popoverId);
this.destroyScopes();
this.popover = null;
}
@ -246,10 +247,6 @@ export default class Autocomplete extends Component {
event.preventDefault();
}
onClear() {
// this.value = null;
// this.putItem(null);
// this.field = null;
// this.item = null;
this.setValue(null);
this.$timeout(
() => {
@ -404,7 +401,7 @@ export default class Autocomplete extends Component {
this.value = value;
if (this.onChange)
this.onChange({item: this.value});
this.onChange({item: item});
}
showItem(item) {
this.input.value = item ? item[this.showField] : '';

View File

@ -21,10 +21,18 @@ export class Popover {
this.$compile = $compile;
this.$timeout = $timeout;
this.removeScope = false;
this.popOpens = 0;
}
show(childElement, parent) {
show(childElement, parent, popoverId) {
this.childElement = childElement;
let popover = this.document.createElement('div');
this.popOpens++;
if (!popoverId) {
popoverId = 'popover-' + this.popOpens;
popover.id = popoverId;
}
popover.className = 'vn-popover';
popover.addEventListener('mousedown',
e => this.onPopoverMouseDown(e));
@ -74,44 +82,106 @@ export class Popover {
this.document.body.appendChild(popover);
this.docMouseDownHandler = e => this.onDocMouseDown(e);
this.document.addEventListener('mousedown', this.docMouseDownHandler);
if (this.popOpens === 1) {
this.docMouseDownHandler = e => this.onDocMouseDown(e);
this.document.addEventListener('mousedown', this.docMouseDownHandler);
this.docKeyDownHandler = e => this.onDocKeyDown(e);
this.document.addEventListener('keydown', this.docKeyDownHandler);
this.docKeyDownHandler = e => this.onDocKeyDown(e);
this.document.addEventListener('keydown', this.docKeyDownHandler);
}
return popoverId;
}
showComponent(childComponent, $scope, parent) {
let childElement = this.document.createElement(childComponent);
let id = 'popover-' + this.popOpens;
childElement.id = id;
this.removeScope = true;
this.$compile(childElement)($scope.$new());
this.show(childElement, parent);
this.show(childElement, parent, id);
return childElement;
}
hide() {
if (!this.popover) return;
this.document.removeEventListener('mousedown', this.docMouseDownHandler);
this.document.removeEventListener('keydown', this.docKeyDownHandler);
this.document.body.removeChild(this.popover);
this.popover = null;
this.lastEvent = null;
this.docMouseDownHandler = null;
this.docKeyDownHandler = null;
if (this.removeScope && angular.element(this.childElement).scope()) {
angular.element(this.childElement).scope().$destroy();
angular.element(this.childElement).remove();
this.removeScope = false;
_checkOpens() {
this.popOpens = this.document.querySelectorAll('*[id^="popover-"]').length;
if (this.popOpens === 0) {
this.document.removeEventListener('mousedown', this.docMouseDownHandler);
this.document.removeEventListener('keydown', this.docKeyDownHandler);
this.docMouseDownHandler = null;
this.docKeyDownHandler = null;
}
}
_removeElement(val) {
if (!val) return;
let element = angular.element(val);
let parent = val.parentNode;
if (element.scope() && element.scope().$id > 1) {
element.scope().$destroy();
}
element.remove();
if (parent.className.indexOf('vn-popover') !== -1)
this._removeElement(parent);
}
hide(id) {
let popover = this.document.querySelector(`#${id}`);
if (popover) {
this._removeElement(popover);
this.popOpens--;
}
this._checkOpens();
}
hideOthers(id) {
let popovers = this.document.querySelectorAll('*[id^="popover-"]');
popovers.forEach(
val => {
if (angular.element(val).attr('id') != id) {
this._removeElement(val);
this.popOpens--;
}
}
);
this._checkOpens();
}
hideAll() {
let popovers = this.document.querySelectorAll('*[id^="popover-"]');
popovers.forEach(
val => {
this._removeElement(val);
this.popOpens--;
}
);
this._checkOpens();
}
_findParent(node) {
while (node != null) {
if ((node.className && node.className.indexOf('vn-popover') !== -1) ||
(node.id && node.id.indexOf('popover-') !== -1)) {
return angular.element(node).attr('id');
}
node = node.parentNode;
}
return null;
}
onDocMouseDown(event) {
if (event != this.lastEvent)
this.hide();
let targetId = this._findParent(event.target);
if (targetId) {
this.hideOthers(targetId);
} else {
this.hideAll();
}
}
onDocKeyDown(event) {
if (event.keyCode === 27)
this.hide();
if (event.keyCode === 27) {
let targetId = this._findParent(this.latTarget);
if (targetId) {
this.hideOthers(targetId);
} else {
this.hideAll();
}
this.latTarget = null;
}
}
onPopoverMouseDown(event) {
this.lastEvent = event;
this.latTarget = event.target;
}
}
Popover.$inject = ['$document', '$compile', '$timeout'];

View File

@ -95,8 +95,8 @@ export default class ProductionIndex {
this.searchTickets();
}
onChangeWareHouse(item) {
if (item && item != this.filter.warehouseFk) {
this.filter.warehouseFk = item;
if (item && item.id && item.id != this.filter.warehouseFk) {
this.filter.warehouseFk = item.id;
this.searchTickets();
}
}