import {CommonModule} from '@angular/common';
import {AfterViewInit, Component, ElementRef, EventEmitter, Input, NgModule, OnDestroy, OnInit, Output, Renderer} from '@angular/core';
import {DomHandler} from '../domhandler';
@Component({
selector: 'plx-overlay-panel',
template: `
`,
providers: [DomHandler]
})
export class PlxOverlayPanelComponent implements OnInit, AfterViewInit,
OnDestroy {
@Input() dismissable: boolean = true;
@Input() showCloseIcon: boolean;
@Input() style: any;
@Input() styleClass: string;
@Input() appendTo: any;
@Output() onBeforeShow: EventEmitter = new EventEmitter();
@Output() onAfterShow: EventEmitter = new EventEmitter();
@Output() onBeforeHide: EventEmitter = new EventEmitter();
@Output() onAfterHide: EventEmitter = new EventEmitter();
container: any;
visible: boolean = false;
documentClickListener: any;
selfClick: boolean;
targetEvent: boolean;
target: any;
constructor(
public el: ElementRef, public domHandler: DomHandler,
public renderer: Renderer) {}
ngOnInit() {
if (this.dismissable) {
this.documentClickListener =
this.renderer.listenGlobal('body', 'click', () => {
if (!this.selfClick && !this.targetEvent) {
this.hide();
}
this.selfClick = false;
this.targetEvent = false;
});
}
}
ngAfterViewInit() {
this.container = this.el.nativeElement.children[0];
if (this.appendTo) {
if (this.appendTo === 'body') {
document.body.appendChild(this.container);
} else {
this.domHandler.appendChild(this.container, this.appendTo);
}
}
}
toggle(event: any, target?: any) {
let currentTarget = (target || event.currentTarget || event.target);
if (!this.target || this.target === currentTarget) {
if (this.visible) {
this.hide();
} else {
this.show(event, target);
}
} else {
this.show(event, target);
}
if (this.dismissable) {
this.targetEvent = true;
}
this.target = currentTarget;
}
show(event: any, target?: any) {
if (this.dismissable) {
this.targetEvent = true;
}
this.onBeforeShow.emit(null);
let elementTarget = target || event.currentTarget || event.target;
this.container.style.zIndex = ++DomHandler.zindex;
if (this.visible) {
this.domHandler.absolutePosition(this.container, elementTarget);
} else {
this.visible = true;
this.domHandler.absolutePosition(this.container, elementTarget);
this.domHandler.fadeIn(this.container, 250);
}
this.onAfterShow.emit(null);
}
hide() {
if (this.visible) {
this.onBeforeHide.emit(null);
this.visible = false;
this.onAfterHide.emit(null);
}
}
onPanelClick() {
if (this.dismissable) {
this.selfClick = true;
}
}
onCloseClick(event: any) {
this.hide();
if (this.dismissable) {
this.selfClick = true;
}
event.preventDefault();
}
ngOnDestroy() {
if (this.documentClickListener) {
this.documentClickListener();
}
if (this.appendTo) {
this.el.nativeElement.appendChild(this.container);
}
this.target = null;
}
}
@NgModule({
imports: [CommonModule],
exports: [PlxOverlayPanelComponent],
declarations: [PlxOverlayPanelComponent]
})
export class PlxOverlayPanelModule {
}