path: root/vid-webpack-master/src/app/shared/components/customTooltip/tooltip.directive.ts

import {Directive, ElementRef, HostListener, Input, OnInit, Renderer, TemplateRef} from "@angular/core";
import {CreateDynamicComponentService} from "../customModal/services/create-dynamic-component.service";
import {TooltipTemplateComponent} from "./custom-tooltip.component";

const pixel = 'px';
const leftStyle = 'left';
const topStyle = 'top';
const showSuffix = 'show';
const rightBottomSuffix = 'right__bottom';
const centerMiddleSuffix = 'center__middle';

@Directive({
  selector: '[custom-tooltip]'
})
export class TooltipDirective implements OnInit {
  @Input('tooltip-text') public text;
  @Input('tooltip-placement') public placement: TooltipPlacement = TooltipPlacement.Top;
  @Input('tooltip-css-class') public customCssClass: string;
  @Input('tooltip-template') public template: TemplateRef<any>;
  @Input('tooltip-arrow-offset') public arrowOffset: number = 10;
  @Input('tooltip-arrow-placement') public arrowPlacement: ArrowPlacement = ArrowPlacement.LeftTop;
  @Input('tooltip-offset') public tooltipOffset: number = 3;

  private cssClass: string = 'sdc-tooltip'; // default css class
  private tooltip: any; // tooltip html element
  private elemPosition: any;
  private tooltipTemplateContainer: any;

  private scrollEventHandler = () => {};

  constructor(
    private elementRef: ElementRef,
    private service: CreateDynamicComponentService,
    private renderer: Renderer) {

    this.elementRef.nativeElement.title = "";
  }

  @HostListener('mouseenter')
  public onMouseEnter() {
    this.show();
    this.activateScrollEvent();
  }

  @HostListener('mouseleave')
  public onMouseLeave() {
    this.hide();
    this.deactivateScrollEvent();
  }

  ngOnInit(): void {
    this.initScrollEvent();
  }

  private get ScreenWidth() {
    return document.documentElement.clientWidth;
  }

  private get ScreenHeight() {
    return document.documentElement.clientHeight;
  }

  private create() {
    this.tooltipTemplateContainer = this.service.createComponentDynamically(TooltipTemplateComponent, document.body);

    /**
     * Creating a view (injecting our template) from template in our component.
     */
    this.tooltip = this.tooltipTemplateContainer.location.nativeElement.querySelector(
      '.sdc-tooltip-template-container');

    if (this.template) {
      this.tooltipTemplateContainer.instance.container.createEmbeddedView(this.template);
    } else if(this.text) {
      this.tooltip.textContent = this.text;
    } else {
      this.tooltip = undefined;
    }

    this.setCssClass(true);
  }

  private destroy() {
    this.tooltipTemplateContainer.destroy();
    this.tooltip = null;
  }

  private show() {
    this.create();

    /**
     *  View is ready (AfterViewInit event in template component)
     */
    this.tooltipTemplateContainer.instance.viewReady.subscribe((isReady) => {
      if (isReady) {
        this.setPosition();
        this.toggleShowCssClass(true); // add css class
      }
    });
  }

  private hide() {
    this.toggleShowCssClass(false); // remove css class

    this.destroy();
  }

  private toggleShowCssClass(isAdd: boolean) {
    if (this.tooltip) {
      this.setCssClass(isAdd, '-' + showSuffix);
    }
  }

  /**
   * Adds placement css class and sets tooltip position in style
   */
  private setPosition() {
    const tooltipPos: IPlacementData = this.getPlacementData();

    const placementSuffix: string = TooltipPlacement[tooltipPos.placement].toLowerCase();

    this.setCssClass(true, '-' + placementSuffix);

    this.setAdditionalCssClass(placementSuffix);

    this.renderer.setElementStyle(this.tooltip, topStyle, tooltipPos.top + pixel);
    this.renderer.setElementStyle(this.tooltip, leftStyle, tooltipPos.left + pixel);
  }

  private setAdditionalCssClass(placementSuffix: string) {
    if (this.arrowPlacement === ArrowPlacement.RightBottom) {
      this.setCssClass(true, '-' + placementSuffix + '-' + rightBottomSuffix);
    } else if (this.arrowPlacement === ArrowPlacement.CenterMiddle) {
      this.setCssClass(true, '-' + placementSuffix + '-' + centerMiddleSuffix);
    }
  }

  private setCssClass(isAdd: boolean, suffix: string = '') {
    this.renderer.setElementClass(this.tooltip, this.cssClass + suffix, isAdd);

    if (this.customCssClass) {
      this.renderer.setElementClass(this.tooltip, this.customCssClass + suffix, isAdd);
    }
  }

  /**
   * Checks the specified placement (first element in array), if it is not valid - checks other placements
   * @returns {IPlacementData}
   */
  private getPlacementData(): IPlacementData {
    const placement: TooltipPlacement = this.placement;
    let tooltipPos: IPlacementData;

    const tooltipPosWithPlacement = this.getPlacement.bind(this, placement);

    // TODO add comments - done
    switch (placement) {
      case TooltipPlacement.Left:
        tooltipPos = tooltipPosWithPlacement(
          TooltipPlacement.Right,
          TooltipPlacement.Top,
          TooltipPlacement.Bottom);
        break;

      case TooltipPlacement.Right:
        tooltipPos = tooltipPosWithPlacement(
          TooltipPlacement.Left,
          TooltipPlacement.Top,
          TooltipPlacement.Bottom);
        break;

      case TooltipPlacement.Top:
        tooltipPos = tooltipPosWithPlacement(
          TooltipPlacement.Bottom,
          TooltipPlacement.Left,
          TooltipPlacement.Right);
        break;

      case TooltipPlacement.Bottom:
        tooltipPos = tooltipPosWithPlacement(
          TooltipPlacement.Top,
          TooltipPlacement.Left,
          TooltipPlacement.Right);
        break;
    }

    return tooltipPos;
  }

  /**
   * Returns valid tooltip position data
   * @param {TooltipPlacement} placement
   * @param {TooltipPlacement} additionalPlacements
   * @returns {IPlacementData}
   */
  private getPlacement(placement: TooltipPlacement,
                       ...additionalPlacements: TooltipPlacement[]
  ): IPlacementData {
    const placements: TooltipPlacement[] = [placement, ...additionalPlacements];
    const filterPlacements = placements
      .map((pl) => this.getPosition(pl))
      .filter((item) => this.validatePosition(item));
    return filterPlacements.length > 0 ? filterPlacements[0] : this.getPosition(placement);
  }

  /**
   * Returns input data for getPosition method
   * @returns {ITooltipPositionParams}
   */
  private getPlacementInputParams(): ITooltipPositionParams {
    this.elemPosition = this.elementRef.nativeElement.getBoundingClientRect();

    return {
      elemHeight: this.elementRef.nativeElement.offsetHeight,
      elemLeft: this.elemPosition.left,
      elemTop: this.elemPosition.top,
      elemWidth: this.elementRef.nativeElement.offsetWidth,
      pageYOffset: window.pageYOffset,
      tooltipHeight: this.tooltip.offsetHeight, // .clientHeight,
      tooltipOffset: this.tooltipOffset,
      tooltipWidth: this.tooltip.offsetWidth,
      arrowOffset: this.arrowOffset
    };
  }

  /**
   * Returns tooltip position data
   * @param {TooltipPlacement} placement (left, top, right, bottom)
   * @returns {IPlacementData}
   */
  private getPosition(placement: TooltipPlacement): IPlacementData {
    switch(this.arrowPlacement) {
      case ArrowPlacement.LeftTop:
        return this.getLeftTopPosition(placement);

      case ArrowPlacement.RightBottom:
        return this.getRightBottomPosition(placement);
    }

    return this.getCenterMiddlePosition(placement);
  }

  /**
   * Returns tooltip position data (center / middle arrow)
   * @param {TooltipPlacement} placement (left, top, right, bottom)
   * @returns {IPlacementData}
   */
  private getCenterMiddlePosition(placement: TooltipPlacement): IPlacementData {
    let left = 0;
    let top = 0;

    const inputPos: ITooltipPositionParams = this.getPlacementInputParams();
    switch (placement) {
      case TooltipPlacement.Left:
        left = inputPos.elemLeft - inputPos.tooltipWidth - inputPos.tooltipOffset;
        top = inputPos.elemTop + inputPos.pageYOffset + inputPos.elemHeight / 2 - inputPos.tooltipHeight / 2;
        break;

      case TooltipPlacement.Right:
        left = inputPos.elemLeft + inputPos.elemWidth + inputPos.tooltipOffset;
        top = inputPos.elemTop + inputPos.pageYOffset + inputPos.elemHeight / 2 - inputPos.tooltipHeight / 2;
        break;

      case TooltipPlacement.Top:
        left = inputPos.elemLeft + inputPos.elemWidth / 2 - inputPos.tooltipWidth / 2;
        top = inputPos.elemTop + inputPos.pageYOffset - inputPos.tooltipHeight - inputPos.tooltipOffset;
        break;

      case TooltipPlacement.Bottom:
        left = inputPos.elemLeft + inputPos.elemWidth / 2 - inputPos.tooltipWidth / 2;
        top = inputPos.elemTop + inputPos.pageYOffset + inputPos.elemHeight + inputPos.tooltipOffset;
        break;
    }

    return {
      height: inputPos.tooltipHeight,
      left,
      placement,
      top,
      width: inputPos.tooltipWidth,
      pageYOffset: inputPos.pageYOffset
    } as IPlacementData;
  }

  /**
   * Returns tooltip position data (left / top arrow)
   * @param {TooltipPlacement} placement (left, top, right, bottom)
   * @returns {IPlacementData}
   */
  private getLeftTopPosition(placement: TooltipPlacement): IPlacementData {
    let left = 0;
    let top = 0;

    const inputPos: ITooltipPositionParams = this.getPlacementInputParams();
    switch (placement) {
      case TooltipPlacement.Left:
        left = inputPos.elemLeft - inputPos.tooltipWidth - inputPos.tooltipOffset;
        top = inputPos.elemTop + inputPos.pageYOffset + inputPos.elemHeight / 2 - inputPos.arrowOffset;
        break;

      case TooltipPlacement.Right:
        left = inputPos.elemLeft + inputPos.elemWidth + inputPos.tooltipOffset;
        top = inputPos.elemTop + inputPos.pageYOffset + inputPos.elemHeight / 2 - inputPos.arrowOffset;
        break;

      case TooltipPlacement.Top:
        left = inputPos.elemLeft + inputPos.elemWidth / 2 - inputPos.arrowOffset;
        top = inputPos.elemTop + inputPos.pageYOffset - inputPos.tooltipHeight - inputPos.tooltipOffset;
        break;

      case TooltipPlacement.Bottom:
        left = inputPos.elemLeft + inputPos.elemWidth / 2 - inputPos.arrowOffset;
        top = inputPos.elemTop + inputPos.pageYOffset + inputPos.elemHeight + inputPos.tooltipOffset;
        break;
    }

    return {
      height: inputPos.tooltipHeight,
      left,
      placement,
      top,
      width: inputPos.tooltipWidth,
      pageYOffset: inputPos.pageYOffset
    } as IPlacementData;
  }

  /**
   * Returns tooltip position data (right / bottom arrow)
   * @param {TooltipPlacement} placement (left, top, right, bottom)
   * @returns {IPlacementData}
   */
  private getRightBottomPosition(placement: TooltipPlacement): IPlacementData {
    let left = 0;
    let top = 0;

    const inputPos: ITooltipPositionParams = this.getPlacementInputParams();
    switch (placement) {
      case TooltipPlacement.Left:
        left = inputPos.elemLeft - inputPos.tooltipWidth - inputPos.tooltipOffset;
        top = inputPos.elemTop + inputPos.pageYOffset + inputPos.elemHeight / 2 - inputPos.tooltipHeight + inputPos.arrowOffset;
        break;

      case TooltipPlacement.Right:
        left = inputPos.elemLeft + inputPos.elemWidth + inputPos.tooltipOffset;
        top = inputPos.elemTop + inputPos.pageYOffset + inputPos.elemHeight / 2 - inputPos.tooltipHeight + inputPos.arrowOffset;
        break;

      case TooltipPlacement.Top:
        left = inputPos.elemLeft + inputPos.elemWidth / 2 - inputPos.tooltipWidth + inputPos.arrowOffset;
        top = inputPos.elemTop + inputPos.pageYOffset - inputPos.tooltipHeight - inputPos.tooltipOffset;
        break;

      case TooltipPlacement.Bottom:
        left = inputPos.elemLeft + inputPos.elemWidth / 2 - inputPos.tooltipWidth + inputPos.arrowOffset;
        top = inputPos.elemTop + inputPos.pageYOffset + inputPos.elemHeight + inputPos.tooltipOffset;
        break;
    }

    return {
      height: inputPos.tooltipHeight,
      left,
      placement,
      top,
      width: inputPos.tooltipWidth,
      pageYOffset: inputPos.pageYOffset
    } as IPlacementData;
  }

  /**
   * Checks if tooltip position is valid
   * @param {IPlacementData} pos
   * @returns {boolean}
   */
  private validatePosition(pos: IPlacementData): boolean {
    if (pos.left < 0 || pos.left + pos.width - 1 > this.ScreenWidth) {
      return false;
    }

    if (pos.top - pos.pageYOffset < 0 || pos.top - pos.pageYOffset + pos.height - 1 > this.ScreenHeight) {
      return false;
    }

    return true;
  }

  /**
   * Scrolling
   */

  private debounce(func: Function, wait: number, immediate?: boolean) {
    let timeout;
    return function() {
      const context = this;
      const args = arguments;
      const later = () => {
        timeout = null;
        if (!immediate) {
          func.apply(context, args);
        }
      };
      const callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) {
        func.apply(context, args);
      }
    };
  }

  private initScrollEvent() {
    this.scrollEventHandler = this.debounce(() => {
      try {
        this.setPosition();
      } catch (e) {

      }
    }, 10);
  }

  private activateScrollEvent() {
    window.addEventListener('scroll', this.scrollEventHandler , true);
  }

  private deactivateScrollEvent() {
    window.removeEventListener('scroll', this.scrollEventHandler , true);
  }
}

export enum TooltipPlacement {
  Left,
  Right,
  Top,
  Bottom
}

export enum ArrowPlacement {
  CenterMiddle,
  LeftTop,
  RightBottom
}

interface ITooltipPositionParams {
  elemLeft: number;
  elemTop: number;
  elemWidth: number;
  elemHeight: number;
  tooltipWidth: number;
  tooltipHeight: number;
  tooltipOffset: number;
  pageYOffset: number;
  arrowOffset: number;
}

interface IPlacementData {
  left: number;
  top: number;
  width: number;
  height: number;
  pageYOffset: number;
  placement?: TooltipPlacement;
}