Fast hiding when a directive is destroyed

drozhzhin-n-e · Aug 20, 2018 · fae4897 · fae4897
1 parent 4857f6d
commit fae4897
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "tooltip-app",
+  "name": "ng2-tooltip-directive",
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
@@ -10,7 +10,6 @@
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
-  "private": true,
   "dependencies": {
     "@angular/animations": "^5.2.0",
     "@angular/common": "^5.2.0",

diff --git a/src/app/tooltip/tooltip.component.ts b/src/app/tooltip/tooltip.component.ts
@@ -1,4 +1,4 @@
-import {Component, ElementRef, HostListener, HostBinding, Input, OnInit, EventEmitter} from '@angular/core';
+import {Component, ElementRef, HostListener, HostBinding, Input, OnInit, EventEmitter, Renderer2} from '@angular/core';
 
 @Component({
   selector: 'tooltip',
@@ -48,7 +48,7 @@ export class TooltipComponent {
     return this.data.options.placement;
   }
 
-  get elemetn(){
+  get element(){
     return this.data.element;
   }
 
@@ -72,7 +72,7 @@ export class TooltipComponent {
     return this.options['theme'] === 'light';
   }
 
-  constructor(private elementRef: ElementRef) {
+  constructor(private elementRef: ElementRef, private renderer: Renderer2) {
   }
 
   ngOnInit() {
@@ -84,8 +84,8 @@ export class TooltipComponent {
   }
 
   setPosition():void {
-    const elemetnHeight = this.elemetn.offsetHeight;
-    const elemetnWidth = this.elemetn.offsetWidth;
+    const elementHeight = this.element.offsetHeight;
+    const elementWidth = this.element.offsetWidth;
     const tooltipHeight = this.elementRef.nativeElement.clientHeight;
     const tooltipWidth = this.elementRef.nativeElement.offsetWidth;
     const scrollY = window.pageYOffset;
@@ -96,39 +96,39 @@ export class TooltipComponent {
     }
 
     if (this.placement === 'bottom') {
-      this.hostStyleTop = (this.elementPosition.top + scrollY) + elemetnHeight + this.tooltipOffset + 'px';
+      this.hostStyleTop = (this.elementPosition.top + scrollY) + elementHeight + this.tooltipOffset + 'px';
     }
 
     if (this.placement === 'top' || this.placement === 'bottom') {
-      this.hostStyleLeft = (this.elementPosition.left + elemetnWidth / 2) - tooltipWidth / 2 + 'px';
+      this.hostStyleLeft = (this.elementPosition.left + elementWidth / 2) - tooltipWidth / 2 + 'px';
     }
 
     if (this.placement === 'left') {
       this.hostStyleLeft = this.elementPosition.left - tooltipWidth - this.tooltipOffset + 'px';
     }
 
     if (this.placement === 'right') {
-      this.hostStyleLeft = this.elementPosition.left + elemetnWidth + this.tooltipOffset + 'px';
+      this.hostStyleLeft = this.elementPosition.left + elementWidth + this.tooltipOffset + 'px';
     }
 
     if (this.placement === 'left' || this.placement === 'right') {
-      this.hostStyleTop = (this.elementPosition.top + scrollY) + elemetnHeight / 2 - tooltip.clientHeight / 2 + 'px';
+      this.hostStyleTop = (this.elementPosition.top + scrollY) + elementHeight / 2 - tooltip.clientHeight / 2 + 'px';
     }
   }
 
   setPlacementClass():void {
-    this.elementRef.nativeElement.classList.add('tooltip-'+this.placement);
+    this.renderer.addClass(this.elementRef.nativeElement,'tooltip-'+this.placement);
   }
 
   setZIndex():void {
     if (this.options['z-index'] !== 0){
       this.hostStyleZIndex = this.options['z-index'];
     }
-  }
+  } 
 
   setCustomClass(){
     if (this.options['tooltip-class']){
-      this.elementRef.nativeElement.classList.add(this.options['tooltip-class']);
+      this.renderer.addClass(this.elementRef.nativeElement,this.options['tooltip-class']);
     }
   }
 

diff --git a/src/app/tooltip/tooltip.directive.ts b/src/app/tooltip/tooltip.directive.ts
@@ -40,6 +40,7 @@ export class TooltipDirective {
   _id: any;
   _options: any = {};
   _defaultOptions: any;
+  _destroyDelay: number;
   componentSubscribe: any;
 
   /* tslint:disable:no-input-rename */
@@ -167,7 +168,14 @@ export class TooltipDirective {
   }
 
   get destroyDelay() {
-    return Number(this.hideDelay) + Number(this.options['animation-duration']);
+    if (this._destroyDelay){
+      return this._destroyDelay;
+    } else {
+      return Number(this.hideDelay) + Number(this.options['animation-duration']);
+    }
+  }
+  set destroyDelay(value:number) {
+    this._destroyDelay = value;
   }
 
   @Output() events: EventEmitter<any> = new EventEmitter<any>();
@@ -217,6 +225,8 @@ export class TooltipDirective {
     if (this.componentSubscribe){
       this.componentSubscribe.unsubscribe();
     }
+
+    this.destroyTooltip({fast: true});
   }
 
   getElementPosition():void {
@@ -236,14 +246,14 @@ export class TooltipDirective {
     }, this.showDelay);
   }
 
-  destroyTooltip():void {
+  destroyTooltip(options = {fast: false}):void {
     this.clearTimeouts();
 
     if (this.isTooltipDestroyed == false) {
 
       this.hideTimeoutId = window.setTimeout(() => {
         this.hideTooltip();
-      }, this.hideDelay);
+      }, options.fast ? 0 : this.hideDelay);
 
       this.destroyTimeoutId = window.setTimeout(() => {
         if (!this.componentRef || this.isTooltipDestroyed){
@@ -253,7 +263,7 @@ export class TooltipDirective {
         this.appRef.detachView(this.componentRef.hostView);
         this.componentRef.destroy();
         this.events.emit('hidden');
-      }, this.destroyDelay);
+      }, options.fast ? 0 : this.destroyDelay);
     }
   }