import {
AfterContentInit,
Component,
ContentChildren,
ElementRef,
Input,
OnDestroy,
OnInit,
QueryList,
ViewChild,
} from '@angular/core';
import { MdButton } from '@angular/material';
import { NguiOverlayManager } from '@ngui/overlay';
import { Observable, Subscription } from 'rxjs';
import { NgxMaterialStateComponent } from './state.component';
import { NgxMaterialWindowService } from './window.service';
@Component({
selector: 'ngx-md-window',
template: `
<div class="ngx-md-window" #card>
<md-card>
<div class="spinner-wrap" #spinnerWrap>
<div [id]="overlayId" ngui-overlay-position="top center">
<md-spinner class="spinner"></md-spinner>
</div>
</div>
<md-card-header fxLayout="row" fxLayoutAlign="space-between" class="ngx-md-window-header">
<md-card-title style="margin-bottom: 0;">
<h4 class="ngx-md-window-header-title">{{ title }}</h4>
</md-card-title>
<div fxLayout="row">
<button md-icon-button (click)="showOverlay($event)" #reloadBtn>
<md-icon>replay</md-icon>
</button>
<div *ngIf="stateComponents.length > 0">
<button
md-icon-button
[mdMenuTriggerFor]="menu">
<md-icon>more_vert</md-icon>
</button>
<md-menu #menu="mdMenu">
<button md-menu-item *ngFor="let cmp of stateComponents" (click)="setActiveState(cmp.state.name)">
<md-icon *ngIf="cmp.state.icon">{{ cmp.state.icon }}</md-icon>
<span>{{ cmp.state.linkName }}</span>
</button>
</md-menu>
</div>
</div>
</md-card-header>
<md-card-content style="padding: 8px">
<ng-content></ng-content>
</md-card-content>
</md-card>
</div>
`,
styles: []
})
export class NgxMaterialWindowComponent implements OnInit, OnDestroy, AfterContentInit {
@Input() title: string;
@ContentChildren(NgxMaterialStateComponent) stateComponents: QueryList<NgxMaterialStateComponent>;
@ViewChild('card') card: ElementRef;
@ViewChild('spinnerWrap') spinnerWrap: ElementRef;
@ViewChild('reloadBtn') reloadBtn: MdButton;
overlayId: string;
overlaySubject: Subscription;
constructor(private overlayManager: NguiOverlayManager, private windowService: NgxMaterialWindowService) {}
ngOnInit() {
this.overlayId = Math.random().toString();
this.windowService.setOverlayFunction(this.showOverlay.bind(this));
}
ngAfterContentInit() {
const click$ = Observable.fromEvent(this.reloadBtn._getHostElement(), 'click');
const subject$ = this.windowService.getOverlaySubject();
click$.subscribe(subject$);
this.overlaySubject = subject$.subscribe(this.showOverlay.bind(this));
this.stateComponents.forEach(
(cmp: NgxMaterialStateComponent, index: number) => (cmp.state.isActive = index === 0 ? true : false)
);
}
ngOnDestroy() {
this.overlaySubject.unsubscribe();
}
setActiveState(stateName: string) {
this.stateComponents.forEach(
(cmp: NgxMaterialStateComponent) => (cmp.state.isActive = cmp.state.name === stateName ? true : false)
);
}
showOverlay(event?: Event) {
this.spinnerWrap.nativeElement.style.height = `${this.card.nativeElement.offsetHeight}px`;
this.overlayManager.open(this.overlayId, event);
}
}
|