diff options
author | 2018-03-27 17:33:22 +0800 | |
---|---|---|
committer | 2018-03-27 17:33:22 +0800 | |
commit | 8261a4ea8091c27b61ac581a852e2e18283b3cdd (patch) | |
tree | a2ca109f7600e9e0cbe73eb9139ffe6284be1159 /sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-window.ts | |
parent | 573f32b362f4639928485d66feb1c0721109716b (diff) |
Include paletx components
Include paletx components to WF Designer UI.
Issue-ID: SDC-1130,SDC-1131
Change-Id: Iad06b2dde8fc98d03a0e3633e829b686d75cafd0
Signed-off-by: YuanHu <yuan.hu1@zte.com.cn>
Diffstat (limited to 'sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-window.ts')
-rw-r--r-- | sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-window.ts | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-window.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-window.ts new file mode 100644 index 00000000..eda5b39f --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/plx-modal/modal-window.ts @@ -0,0 +1,82 @@ +import { + Component, + Output, + EventEmitter, + Input, + ElementRef, + Renderer, + OnInit, + AfterViewInit, + OnDestroy, ViewEncapsulation +} from '@angular/core'; + +import {ModalDismissReasons} from './modal-dismiss-reasons'; + +@Component({ + selector: 'plx-modal-window', + host: { + '[class]': '"modal plx-modal fade show" + (windowClass ? " " + windowClass : "")', + 'role': 'dialog', + 'tabindex': '-1', + 'style': 'display: block;', + '(keyup.esc)': 'escKey($event)', + '(click)': 'backdropClick($event)' + }, + template: ` + <div [class]="'modal-dialog' + (size ? ' modal-' + size : '')" role="document"> + <div class="modal-content"><ng-content></ng-content></div> + </div> + `, + styleUrls: ['modal.less'], + encapsulation: ViewEncapsulation.None +}) +export class PlxModalWindow implements OnInit, AfterViewInit, OnDestroy { + private _elWithFocus: Element; // element that is focused prior to modal opening + + @Input() public backdrop: boolean | string = true; + @Input() public keyboard = true; + @Input() public size: string; + @Input() public windowClass: string; + + @Output('dismiss') public dismissEvent = new EventEmitter(); + + constructor(private _elRef: ElementRef, private _renderer: Renderer) { + } + + public backdropClick($event): void { + if (this.backdrop === true && this._elRef.nativeElement === $event.target) { + this.dismiss(ModalDismissReasons.BACKDROP_CLICK); + } + } + + public escKey($event): void { + if (this.keyboard && !$event.defaultPrevented) { + this.dismiss(ModalDismissReasons.ESC); + } + } + + public dismiss(reason): void { + this.dismissEvent.emit(reason); + } + + public ngOnInit() { + this._elWithFocus = document.activeElement; + this._renderer.setElementClass(document.body, 'modal-open', true); + } + + public ngAfterViewInit() { + if (!this._elRef.nativeElement.contains(document.activeElement)) { + this._renderer.invokeElementMethod(this._elRef.nativeElement, 'focus', []); + } + } + + public ngOnDestroy() { + if (this._elWithFocus && document.body.contains(this._elWithFocus)) { + this._renderer.invokeElementMethod(this._elWithFocus, 'focus', []); + } else { + this._renderer.invokeElementMethod(document.body, 'focus', []); + } + this._elWithFocus = null; + this._renderer.setElementClass(document.body, 'modal-open', false); + } +} |