diff options
author | YuanHu <yuan.hu1@zte.com.cn> | 2018-03-27 17:33:22 +0800 |
---|---|---|
committer | YuanHu <yuan.hu1@zte.com.cn> | 2018-03-27 17:33:22 +0800 |
commit | 8261a4ea8091c27b61ac581a852e2e18283b3cdd (patch) | |
tree | a2ca109f7600e9e0cbe73eb9139ffe6284be1159 /sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover.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-datepicker/popover.ts')
-rw-r--r-- | sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover.ts | 175 |
1 files changed, 175 insertions, 0 deletions
diff --git a/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover.ts b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover.ts new file mode 100644 index 00000000..3d054120 --- /dev/null +++ b/sdc-workflow-designer-ui/src/app/paletx/plx-datepicker/popover.ts @@ -0,0 +1,175 @@ +import { + Component, + Directive, + Input, + Output, + EventEmitter, + ChangeDetectionStrategy, + OnInit, + OnDestroy, + Injector, + Renderer, + ComponentRef, + ElementRef, + TemplateRef, + ViewContainerRef, + ComponentFactoryResolver, + NgZone +} from '@angular/core'; + +import { listenToTriggers } from './util/triggers'; +import { positionElements } from './util/positioning'; +import { PopupService } from './util/popup'; +import { OesDaterangePopoverConfig } from './popover-config'; + +let nextId = 0; + +@Component({ + selector: 'ngb-popover-window', + changeDetection: ChangeDetectionStrategy.OnPush, + host: { '[class]': '"popover show popover-" + placement', 'role': 'tooltip', '[id]': 'id' }, + styles: [` + + .popover-title,.popover-content{ + background-color: #fff; + } + .popover-custom{ + padding:9px 5px !important; + } + + + `], + template: ` + <h3 class="popover-title">{{title}}</h3><div class="popover-content popover-custom"><ng-content></ng-content></div> + ` +}) +export class OesDaterangePopoverWindow { + @Input() public placement: 'top' | 'bottom' | 'left' | 'right' = 'top'; + @Input() public title: string; + @Input() public id: string; +} + +/** + * A lightweight, extensible directive for fancy oes-popover creation. + */ +@Directive({ selector: '[oesDaterangePopover]', exportAs: 'oesDaterangePopover' }) +export class OesDaterangePopover implements OnInit, OnDestroy { + /** + * Content to be displayed as oes-popover. + */ + @Input() public oesDaterangePopover: string | TemplateRef<any>; + /** + * Title of a oes-popover. + */ + @Input() public popoverTitle: string; + /** + * Placement of a oes-popover. Accepts: "top", "bottom", "left", "right" + */ + @Input() public placement: 'top' | 'bottom' | 'left' | 'right'; + /** + * Specifies events that should trigger. Supports a space separated list of event names. + */ + @Input() public triggers: string; + /** + * A selector specifying the element the oes-popover should be appended to. + * Currently only supports "body". + */ + @Input() public container: string; + /** + * Emits an event when the oes-popover is shown + */ + @Output() public shown = new EventEmitter(); + /** + * Emits an event when the oes-popover is hidden + */ + @Output() public hidden = new EventEmitter(); + + private _OesDaterangePopoverWindowId = `ngb-popover-${nextId++}`; + private _popupService: PopupService<OesDaterangePopoverWindow>; + private _windowRef: ComponentRef<OesDaterangePopoverWindow>; + private _unregisterListenersFn; + private _zoneSubscription: any; + + constructor( + private _elementRef: ElementRef, private _renderer: Renderer, injector: Injector, + componentFactoryResolver: ComponentFactoryResolver, viewContainerRef: ViewContainerRef, config: OesDaterangePopoverConfig, + ngZone: NgZone) { + this.placement = config.placement; + this.triggers = config.triggers; + this.container = config.container; + this._popupService = new PopupService<OesDaterangePopoverWindow>( + OesDaterangePopoverWindow, injector, viewContainerRef, _renderer, componentFactoryResolver); + + this._zoneSubscription = ngZone.onStable.subscribe(() => { + if (this._windowRef) { + positionElements( + this._elementRef.nativeElement, this._windowRef.location.nativeElement, this.placement, + this.container === 'body'); + } + }); + } + + /** + * Opens an element’s oes-popover. This is considered a “manual” triggering of the oes-popover. + * The context is an optional value to be injected into the oes-popover template when it is created. + */ + public open(context?: any) { + if (!this._windowRef) { + this._windowRef = this._popupService.open(this.oesDaterangePopover, context); + this._windowRef.instance.placement = this.placement; + this._windowRef.instance.title = this.popoverTitle; + this._windowRef.instance.id = this._OesDaterangePopoverWindowId; + + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', this._OesDaterangePopoverWindowId); + + if (this.container === 'body') { + window.document.querySelector(this.container).appendChild(this._windowRef.location.nativeElement); + } + + // we need to manually invoke change detection since events registered via + // Renderer::listen() are not picked up by change detection with the OnPush strategy + this._windowRef.changeDetectorRef.markForCheck(); + this.shown.emit(); + } + } + + /** + * Closes an element’s oes-popover. This is considered a “manual” triggering of the oes-popover. + */ + public close(): void { + if (this._windowRef) { + this._renderer.setElementAttribute(this._elementRef.nativeElement, 'aria-describedby', null); + this._popupService.close(); + this._windowRef = null; + this.hidden.emit(); + } + } + + /** + * Toggles an element’s oes-popover. This is considered a “manual” triggering of the oes-popover. + */ + public toggle(): void { + if (this._windowRef) { + this.close(); + } else { + this.open(); + } + } + + /** + * Returns whether or not the oes-popover is currently being shown + */ + public isOpen(): boolean { return this._windowRef !== null; } + + public ngOnInit() { + this._unregisterListenersFn = listenToTriggers( + this._renderer, this._elementRef.nativeElement, this.triggers, this.open.bind(this), this.close.bind(this), + this.toggle.bind(this)); + } + + public ngOnDestroy() { + this.close(); + this._unregisterListenersFn(); + this._zoneSubscription.unsubscribe(); + } +} |