summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/tooltip
diff options
context:
space:
mode:
authorTal Gitelman <tg851x@intl.att.com>2017-12-10 18:55:03 +0200
committerTal Gitelman <tg851x@intl.att.com>2017-12-10 19:33:38 +0200
commit51d50f0ef642e0f996a1c8b8d2ef4838bdfec892 (patch)
tree3ac236a864d74d19b0f5c9020891a7a7e5c31b44 /catalog-ui/src/app/ng2/components/tooltip
parentb5cc2e0695f195716d6ccdc65e73807a6632ec70 (diff)
Final commit to master merge from
Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507 Issue-ID: SDC-714 Signed-off-by: Tal Gitelman <tg851x@intl.att.com>
Diffstat (limited to 'catalog-ui/src/app/ng2/components/tooltip')
-rw-r--r--catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html12
-rw-r--r--catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less11
-rw-r--r--catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts215
-rw-r--r--catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts109
-rw-r--r--catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts45
5 files changed, 0 insertions, 392 deletions
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html
deleted file mode 100644
index 1fbf45e39f..0000000000
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div class="tooltip {{ placement }}"
- [style.top]="top + 'px'"
- [style.left]="left + 'px'"
- [class.in]="isIn"
- [class.fade]="isFade"
- role="tooltip">
- <div class="tooltip-arrow"></div>
- <div class="tooltip-inner">
- <ng-content></ng-content>
- {{ content }}
- </div>
-</div>
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less
deleted file mode 100644
index 1ff496f840..0000000000
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.less
+++ /dev/null
@@ -1,11 +0,0 @@
-.tooltip-inner {
- word-wrap: break-word;
- max-width: 300px;
-}
-
-.tooltip.bottom .tooltip-arrow {
- border-bottom-color: #000 !important;
-}
-
-
-
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts
deleted file mode 100644
index 4dcb64c499..0000000000
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip-content.component.ts
+++ /dev/null
@@ -1,215 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import {Component, AfterViewInit, Input, ElementRef, ChangeDetectorRef} from "@angular/core";
-
-@Component
-({
- selector: "tooltip-content",
- templateUrl: "./tooltip-content.component.html",
- styleUrls: ["./tooltip-content.component.less"]
-})
-
-export class TooltipContentComponent implements AfterViewInit {
-
- // -------------------------------------------------------------------------
- // Inputs / Outputs
- // -------------------------------------------------------------------------
-
- @Input() hostElement: HTMLElement;
- @Input() content: string;
- @Input() placement: "top"|"bottom"|"left"|"right" = "bottom";
- @Input() animation: boolean = true;
-
- // -------------------------------------------------------------------------
- // Properties
- // -------------------------------------------------------------------------
-
- top: number = -100000;
- left: number = -100000;
- isIn: boolean = false;
- isFade: boolean = false;
-
- // -------------------------------------------------------------------------
- // Constructor
- // -------------------------------------------------------------------------
-
- constructor(private element: ElementRef,
- private cdr: ChangeDetectorRef) {
- }
-
- // -------------------------------------------------------------------------
- // Lifecycle callbacks
- // -------------------------------------------------------------------------
-
- ngAfterViewInit(): void {
- this.show();
- this.cdr.detectChanges();
- }
-
- // -------------------------------------------------------------------------
- // Public Methods
- // -------------------------------------------------------------------------
-
- show(): void {
- if(!this.hostElement) {
- return;
- }
-
- const position = this.positionElement(this.hostElement, this.element.nativeElement.children[0], this.placement);
- this.top = position.top;
- this.left = position.left;
- this.isIn = true;
- if (this.animation) {
- this.isFade = true;
- }
- }
-
- hide(): void {
- this.top = -100000;
- this.left = -100000;
- this.isIn = true;
- if(this.animation) {
- this.isFade = false;
- }
- }
-
- // -------------------------------------------------------------------------
- // Private Methods
- // -------------------------------------------------------------------------
-
- private positionElement(hostElem: HTMLElement, targetElem: HTMLElement, positionStr: string, appendToBody: boolean = false): {top: number, left: number} {
- let positionStrParts = positionStr.split("-");
- let pos0 = positionStrParts[0];
- let pos1 = positionStrParts[1] || "center";
- let hostElemPosition = appendToBody ? this.offset(hostElem) : this.position(hostElem);
- let targetElemWidth = targetElem.offsetWidth;
- let targetElemHeight = targetElem.offsetHeight;
- let shiftWidth: any = {
- center(): number {
- return hostElemPosition.left + hostElemPosition.width / 2 - targetElemWidth / 2;
- },
- left(): number {
- return hostElemPosition.left;
- },
- right(): number {
- return hostElemPosition.left + hostElemPosition.width;
- }
- };
-
- let shiftHeight: any = {
- center: function (): number {
- return hostElemPosition.top + hostElemPosition.height / 2 - targetElemHeight / 2;
- },
- top: function (): number {
- return hostElemPosition.top;
- },
- bottom: function (): number {
- return hostElemPosition.top + hostElemPosition.height;
- }
- }
-
- let targetElemPosition: {top: number, left: number};
-
- switch (pos0) {
- case "right":
- targetElemPosition = {
- top: shiftHeight[pos1](),
- left: shiftWidth[pos0]()
- };
- break;
-
- case "left":
- targetElemPosition = {
- top: shiftHeight[pos1](),
- left: hostElemPosition.left - targetElemWidth
- };
- break;
-
- case "bottom":
- targetElemPosition = {
- top: shiftHeight[pos0](),
- left: shiftWidth[pos1]()
- };
- break;
-
- default:
- targetElemPosition = {
- top: hostElemPosition.top - targetElemHeight,
- left: shiftWidth[pos1]()
- };
- break;
- }
-
- return targetElemPosition;
- }
-
-
- private position(nativeElem: HTMLElement): {width: number, height: number, top: number, left: number} {
- let offsetParentCBR = {top: 0, left: 0};
- const elemBCR = this.offset(nativeElem);
- const offsetParentElem = this.parentOffsetElem(nativeElem);
- if(offsetParentElem !== window.document) {
- offsetParentCBR = this.offset(offsetParentElem);
- offsetParentCBR.top += offsetParentElem.clientTop - offsetParentElem.scrollTop;
- offsetParentCBR.left += offsetParentElem.clientLeft - offsetParentElem.scrollTop;
- }
-
- const boundingClientRect = nativeElem.getBoundingClientRect();
-
- return {
- width: boundingClientRect.width || nativeElem.offsetWidth,
- height: boundingClientRect.height || nativeElem.offsetHeight,
- top: elemBCR.top - offsetParentCBR.top,
- left: elemBCR.left - offsetParentCBR.left
- };
- }
-
- private offset(nativeElem:any): {width: number, height: number, top: number, left: number} {
- const boundingClientRect = nativeElem.getBoundingClientRect();
- return {
- width: boundingClientRect.width || nativeElem.offsetWidth,
- height: boundingClientRect.height || nativeElem.offsetHeight,
- top: boundingClientRect.top + (window.pageYOffset || window.document.documentElement.scrollTop),
- left: boundingClientRect.left + (window.pageXOffset || window.document.documentElement.scrollLeft)
- };
- }
-
- private getStyle(nativeElem: HTMLElement, cssProperty: string): string {
- if(window.getComputedStyle) {
- return (window.getComputedStyle(nativeElem) as any)[cssProperty];
- }
-
- return (nativeElem.style as any)[cssProperty];
- }
-
- private isStaticPositioned(nativeElem: HTMLElement): boolean {
- return (this.getStyle(nativeElem, "position") || "static") === "static";
- }
-
- private parentOffsetElem(nativeElem: HTMLElement): any {
- let offsetParent: any = nativeElem.offsetParent || window.document;
- while (offsetParent && offsetParent !== window.document && this.isStaticPositioned(offsetParent)) {
- offsetParent = offsetParent.offsetParent;
- }
-
- return offsetParent || window.document;
- }
-}
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts
deleted file mode 100644
index 79d35c6e0e..0000000000
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.component.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import {
- Directive, ComponentRef, ViewContainerRef, ComponentFactoryResolver, Input, HostListener
-} from "@angular/core";
-import {TooltipContentComponent} from "./tooltip-content.component";
-
-@Directive ({
- selector: "[tooltip]"
-})
-export class TooltipComponent {
-
- // -------------------------------------------------------------------------
- // Properties
- // -------------------------------------------------------------------------
-
- private tooltip: ComponentRef<TooltipContentComponent>;
- private visible: boolean;
- private delayInProgress: boolean = false;
-
- // -------------------------------------------------------------------------
- // Constructor
- // -------------------------------------------------------------------------
-
- constructor(private viewContainerRef: ViewContainerRef,
- private resolver: ComponentFactoryResolver) {
- }
-
- // -------------------------------------------------------------------------
- // Inputs / Outputs
- // -------------------------------------------------------------------------
-
- @Input("tooltip") content: string|TooltipContentComponent;
- @Input() tooltipDisabled: boolean;
- @Input() tooltipAnimation: boolean = true;
- @Input() tooltipPlacement: "top"|"bottom"|"left"|"right" = "bottom";
- @Input() tooltipDelay: number = 1500;
-
- // -------------------------------------------------------------------------
- // Public Methods
- // -------------------------------------------------------------------------
-
- @HostListener("mouseenter")
- show(): void {
- if(this.tooltipDisabled || this.visible || this.content === "") {
- return;
- }
- if (this.tooltipDelay && !this.delayInProgress) {
- this.delayInProgress = true;
- setTimeout(() => { this.delayInProgress && this.show() }, this.tooltipDelay);
- return;
- }
-
- this.visible = true;
- if (typeof this.content === "string") {
- const factory = this.resolver.resolveComponentFactory(TooltipContentComponent);
- if (!this.visible) {
- return;
- }
-
- this.tooltip = this.viewContainerRef.createComponent(factory);
- this.tooltip.instance.hostElement = this.viewContainerRef.element.nativeElement;
- this.tooltip.instance.content = this.content as string;
- this.tooltip.instance.placement = this.tooltipPlacement;
- this.tooltip.instance.animation = this.tooltipAnimation;
- } else {
- const tooltip = this.content as TooltipContentComponent;
- tooltip.hostElement = this.viewContainerRef.element.nativeElement;
- tooltip.placement = this.tooltipPlacement;
- tooltip.animation = this.tooltipAnimation;
- tooltip.show();
- }
- }
-
- @HostListener("mouseleave")
- hide(): void {
- this.delayInProgress = false;
- if (!this.visible) {
- return;
- }
-
- this.visible = false;
- if (this.tooltip) {
- this.tooltip.destroy();
- }
- if (this.content instanceof TooltipContentComponent) {
- (this.content as TooltipContentComponent).hide();
- }
- }
-}
-
diff --git a/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts b/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts
deleted file mode 100644
index 84a3987081..0000000000
--- a/catalog-ui/src/app/ng2/components/tooltip/tooltip.module.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * SDC
- * ================================================================================
- * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
- * ================================================================================
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ============LICENSE_END=========================================================
- */
-
-import {NgModule} from "@angular/core";
-import {TooltipContentComponent} from "./tooltip-content.component";
-import {TooltipComponent} from "./tooltip.component";
-import {CommonModule} from "@angular/common";
-
-@NgModule({
- declarations: [
- TooltipComponent,
- TooltipContentComponent,
- ],
- imports: [
- CommonModule
- ],
- exports: [
- TooltipComponent,
- TooltipContentComponent,
- ],
- entryComponents: [
- TooltipContentComponent
- ],
- providers: []
-})
-export class TooltipModule {
-
-}