From 836a5b82935d4a34d01640b9f2d0c577e4b93325 Mon Sep 17 00:00:00 2001 From: Timo Bejan Date: Wed, 25 Nov 2020 10:55:36 +0200 Subject: [PATCH] tooltips from other project --- .tmp/ar-tooltip/ar-tooltip.directive.ts | 127 ++++++++++++++++++ .tmp/ar-tooltip/ar-tooltip.module.ts | 24 ++++ .tmp/ar-tooltip/index.ts | 3 + .tmp/ar-tooltip/tooltip-content/index.ts | 2 + .../tooltip-content.component.html | 10 ++ .../tooltip-content.component.scss | 22 +++ .../tooltip-content.component.ts | 19 +++ .../tooltip-content/tooltip.model.ts | 4 + 8 files changed, 211 insertions(+) create mode 100644 .tmp/ar-tooltip/ar-tooltip.directive.ts create mode 100644 .tmp/ar-tooltip/ar-tooltip.module.ts create mode 100644 .tmp/ar-tooltip/index.ts create mode 100644 .tmp/ar-tooltip/tooltip-content/index.ts create mode 100644 .tmp/ar-tooltip/tooltip-content/tooltip-content.component.html create mode 100644 .tmp/ar-tooltip/tooltip-content/tooltip-content.component.scss create mode 100644 .tmp/ar-tooltip/tooltip-content/tooltip-content.component.ts create mode 100644 .tmp/ar-tooltip/tooltip-content/tooltip.model.ts diff --git a/.tmp/ar-tooltip/ar-tooltip.directive.ts b/.tmp/ar-tooltip/ar-tooltip.directive.ts new file mode 100644 index 000000000..8023191e9 --- /dev/null +++ b/.tmp/ar-tooltip/ar-tooltip.directive.ts @@ -0,0 +1,127 @@ +import { + ComponentRef, + Directive, + ElementRef, + HostListener, + Input, + OnChanges, + OnDestroy, + OnInit, + SimpleChanges +} from '@angular/core'; +import {Overlay, OverlayPositionBuilder, OverlayRef} from '@angular/cdk/overlay'; +import {ComponentPortal} from '@angular/cdk/portal'; +import {TooltipContentComponent} from './tooltip-content/tooltip-content.component'; +import {TooltipModel} from './tooltip-content/tooltip.model'; +import {ArOverlayPosition, Placement} from '../../common/model/ar-overlay-position'; +import {NavigationStart, Router} from '@angular/router'; + +@Directive({ + selector: '[upExtTooltip]', + exportAs: 'upExtTooltip' +}) +export class ArTooltipDirective implements OnInit, OnChanges, OnDestroy { + + @Input() upExtTooltip: string | TooltipModel; + + @Input() placement: Placement = 'top'; + + private overlayRef: OverlayRef; + private tooltipRef: ComponentRef; + + private _enable = true; + protected test:string; + + constructor(protected overlayPositionBuilder: OverlayPositionBuilder, + protected router: Router, + protected elementRef: ElementRef, + protected overlay: Overlay) { + } + + ngOnInit(): void { + this.router.events.subscribe(event => { + if (event instanceof NavigationStart) { + this.destroyOverlay(); + } + }); + } + + ngOnChanges(changes: SimpleChanges): void { + if (this.tooltipRef && this.upExtTooltip) { + this.tooltipRef.instance.tooltip = this.upExtTooltip instanceof TooltipModel ? this.upExtTooltip : new TooltipModel(null, this.upExtTooltip); + } + } + + ngOnDestroy(): void { + this.destroyOverlay(); + } + + @HostListener('mouseover', ['$event']) + show($event) { + if (this._enable) { + $event.stopPropagation(); + $event.preventDefault(); + this.open(); + } + } + + open(model?: TooltipModel) { + if (!this.overlayRef) { + this.createOverlay(); + } + + if (model) { + this.upExtTooltip = model; + } + if (this.upExtTooltip) { + this.overlayRef.detach(); + const tooltipPortal = new ComponentPortal(TooltipContentComponent); + this.tooltipRef = this.overlayRef.attach(tooltipPortal); + this.tooltipRef.instance.tooltip = this.upExtTooltip instanceof TooltipModel ? this.upExtTooltip : new TooltipModel(null, this.upExtTooltip); + } + } + + close() { + this.destroyOverlay(); + } + + @HostListener('mouseout') + hideFromMouseOut() { + this.detachOverlay(); + } + + @HostListener('mousedown') + hideFromClick() { + this._enable = false; + this.destroyOverlay(); + } + + @HostListener('mouseup') + _enableTooltip() { + this._enable = true; + } + + private createOverlay() { + const positionStrategy = this.overlayPositionBuilder + .flexibleConnectedTo(this.elementRef) + .withPositions(ArOverlayPosition.getConnectedPosition(this.placement)); + this.overlayRef = this.overlay.create({ + positionStrategy, + scrollStrategy: this.overlay.scrollStrategies.close() + }); + } + + private destroyOverlay() { + if (this.overlayRef) { + this.overlayRef.dispose(); + this.overlayRef = null; + } + } + + private detachOverlay() { + if (this.overlayRef && this.overlayRef.hasAttached()) { + this.overlayRef.detach(); + } + } + +} diff --git a/.tmp/ar-tooltip/ar-tooltip.module.ts b/.tmp/ar-tooltip/ar-tooltip.module.ts new file mode 100644 index 000000000..ad8f97236 --- /dev/null +++ b/.tmp/ar-tooltip/ar-tooltip.module.ts @@ -0,0 +1,24 @@ +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {OverlayModule} from '@angular/cdk/overlay'; +import {ArTooltipDirective} from './ar-tooltip.directive'; +import {TooltipContentComponent} from './tooltip-content/tooltip-content.component'; + +@NgModule({ + imports: [ + CommonModule, + OverlayModule, + ], + declarations: [ + ArTooltipDirective, + TooltipContentComponent, + ], + exports: [ + ArTooltipDirective, + ], + entryComponents: [ + TooltipContentComponent, + ] +}) +export class ArTooltipModule { +} diff --git a/.tmp/ar-tooltip/index.ts b/.tmp/ar-tooltip/index.ts new file mode 100644 index 000000000..891dee5a3 --- /dev/null +++ b/.tmp/ar-tooltip/index.ts @@ -0,0 +1,3 @@ +export * from './ar-tooltip.directive'; +export * from './ar-tooltip.module'; +export * from './tooltip-content/index'; diff --git a/.tmp/ar-tooltip/tooltip-content/index.ts b/.tmp/ar-tooltip/tooltip-content/index.ts new file mode 100644 index 000000000..897456b22 --- /dev/null +++ b/.tmp/ar-tooltip/tooltip-content/index.ts @@ -0,0 +1,2 @@ +export * from './tooltip-content.component'; +export * from './tooltip.model'; diff --git a/.tmp/ar-tooltip/tooltip-content/tooltip-content.component.html b/.tmp/ar-tooltip/tooltip-content/tooltip-content.component.html new file mode 100644 index 000000000..0580c0afb --- /dev/null +++ b/.tmp/ar-tooltip/tooltip-content/tooltip-content.component.html @@ -0,0 +1,10 @@ +
+
+
{{tooltip.title}}
+
{{tooltip.body}}
+
+ +
{{tooltip.title}}
+
{{tooltip.body}}
+ +
diff --git a/.tmp/ar-tooltip/tooltip-content/tooltip-content.component.scss b/.tmp/ar-tooltip/tooltip-content/tooltip-content.component.scss new file mode 100644 index 000000000..11aaad4b8 --- /dev/null +++ b/.tmp/ar-tooltip/tooltip-content/tooltip-content.component.scss @@ -0,0 +1,22 @@ +@import "../../../../../../../assets/styles/ar-typography"; + +.tooltip-wrapper { + background-color: $aci-white; + box-shadow: 2px 3px 20px 0 rgba(0, 0, 0, 0.1); + padding: 12px 16px; + max-width: 300px; + font-size: 13px; + opacity: 0.95; + + .tooltip-title { + @extend .aci-font-style-f8, .aci-grey-1; + padding-bottom: 4px; + } + + .tooltip-body { + @extend .aci-font-style-f9, .aci-grey-1; + } + +} + + diff --git a/.tmp/ar-tooltip/tooltip-content/tooltip-content.component.ts b/.tmp/ar-tooltip/tooltip-content/tooltip-content.component.ts new file mode 100644 index 000000000..c89660bee --- /dev/null +++ b/.tmp/ar-tooltip/tooltip-content/tooltip-content.component.ts @@ -0,0 +1,19 @@ +import {Component, Input, OnInit} from '@angular/core'; +import {TooltipModel} from './tooltip.model'; + +@Component({ + selector: 'up-ext-tooltip-content', + templateUrl: './tooltip-content.component.html', + styleUrls: ['./tooltip-content.component.scss'] +}) +export class TooltipContentComponent implements OnInit { + + @Input() tooltip: TooltipModel; + + constructor() { + } + + ngOnInit() { + } + +} diff --git a/.tmp/ar-tooltip/tooltip-content/tooltip.model.ts b/.tmp/ar-tooltip/tooltip-content/tooltip.model.ts new file mode 100644 index 000000000..818aa7742 --- /dev/null +++ b/.tmp/ar-tooltip/tooltip-content/tooltip.model.ts @@ -0,0 +1,4 @@ +export class TooltipModel { + constructor(public title: string, public body: string) { + } +}