feat: add concurrency ability (#54)

resolves #21 BREAKING CHANGE: you need to import `TooltipsModule.forRoot()` in your apps main module
zyra · Sep 25, 2018 · 215d1dc · 215d1dc
1 parent 5bcda98
commit 215d1dc
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -68,7 +68,7 @@ import { TooltipsModule } from 'ionic-tooltips';
    ...
    imports: [
       ...
-      TooltipsModule
+      TooltipsModule.forRoot()
    ]
 })
 export class MyModule { ... }
@@ -135,14 +135,16 @@ Note: This only works when the `event` attribute is omitted.
 
 #### `topOffset`
 
-(number) add this attribute to offset the vertical position of the tooltip. Defaults to 0.
+(number) add this attribute to offset the vertical position of the tooltip. Defaults to `0`.
 
 #### `leftOffset`
 
-(number) add this attribute to offset the horizontal position of the tooltip. Defaults to 0.
-
+(number) add this attribute to offset the horizontal position of the tooltip. Defaults to `0`.
 
+#### `hideOthers`
 
+(boolean) add this attribute to set weather to hide other visible tooltips. Defaults to `false`.
+
 <br><br>
 
 ## Versioning

diff --git a/src/index.ts b/src/index.ts
@@ -1,3 +1,4 @@
 export * from './tooltip-box.component';
 export * from './tooltip.directive';
-export * from './tooltips.module';
+export * from './tooltips.module';
+export * from './tooltip.cotroller';
diff --git a/src/tooltip.cotroller.ts b/src/tooltip.cotroller.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { Tooltip } from './tooltip.directive';
+
+@Injectable()
+export class TooltipController {
+  allowMultiple: boolean = true;
+  activeTooltips: Tooltip[] = [];
+
+  addTooltip(instance: Tooltip) {
+    if(instance.hideOthers || !this.allowMultiple && this.activeTooltips.length > 0) {
+      this.hideAll();
+    }
+    this.activeTooltips.push(instance);
+  }
+
+  removeTooltip(instance: Tooltip) {
+    this.activeTooltips.splice(this.activeTooltips.indexOf(instance), 1);
+  }
+
+  hideAll() {
+    this.activeTooltips.forEach((tooltip: Tooltip) => {
+      tooltip.removeTooltip();
+    });
+  }
+}
diff --git a/src/tooltip.directive.ts b/src/tooltip.directive.ts
@@ -14,6 +14,7 @@ import {
 import { Platform } from 'ionic-angular';
 
 import { TooltipBox } from './tooltip-box.component';
+import { TooltipController } from './tooltip.cotroller';
 
 @Directive({
   selector: '[tooltip]',
@@ -37,6 +38,8 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
 
   @Input() leftOffset: number;
 
+  @Input() hideOthers: boolean;
+
   @Input()
   set navTooltip(val: boolean) {
     this._navTooltip = typeof val !== 'boolean' || val !== false;
@@ -60,7 +63,7 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
   @Input()
   set active(val: boolean) {
     this._active = typeof val !== 'boolean' || val !== false;
-    this._active ? this.canShow && this.showTooltip() : this._removeTooltip();
+    this._active ? this.canShow && this.showTooltip() : this.removeTooltip();
   }
 
   get active(): boolean {
@@ -79,6 +82,7 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
     private appRef: ApplicationRef,
     private platform: Platform,
     private _componentFactoryResolver: ComponentFactoryResolver,
+    private tooltipCtrl: TooltipController
   ) {
   }
 
@@ -160,7 +164,7 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
 
       if (!this._active) {
         this.tooltipTimeout = setTimeout(
-          this._removeTooltip.bind(this),
+          this.removeTooltip.bind(this),
           this.duration,
         );
       }
@@ -203,6 +207,7 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
       );
 
     this.tooltipElement = viewport.createComponent(componentFactory);
+    this.tooltipCtrl.addTooltip(this);
   }
 
   private _getTooltipPosition() {
@@ -268,7 +273,7 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
     };
   }
 
-  private _removeTooltip() {
+   removeTooltip() {
     if (!this.tooltipElement) {
       this.tooltipElement = undefined;
       this.tooltipTimeout = undefined;
@@ -287,6 +292,7 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
       ) {
         this.tooltipElement.destroy();
       }
+      this.tooltipCtrl.removeTooltip(this);
       this.tooltipElement = this.tooltipTimeout = undefined;
       this.canShow = true;
     }, 300);
@@ -302,6 +308,6 @@ export class Tooltip implements OnInit, AfterViewInit, OnDestroy {
   ngOnDestroy() {
     // if the timer hasn't expired or active is true when the component gets destroyed, the tooltip will remain in the DOM
     // this removes it
-    this._removeTooltip();
+    this.removeTooltip();
   }
 }
diff --git a/src/tooltips.module.ts b/src/tooltips.module.ts
@@ -1,5 +1,6 @@
-import { NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { IonicModule } from 'ionic-angular';
+import { TooltipController } from './tooltip.cotroller';
 
 import { TooltipBox } from './tooltip-box.component';
 import { Tooltip } from './tooltip.directive';
@@ -10,4 +11,11 @@ import { Tooltip } from './tooltip.directive';
   imports: [IonicModule],
   exports: [Tooltip]
 })
-export class TooltipsModule {}
+export class TooltipsModule {
+  static forRoot(): ModuleWithProviders {
+    return {
+      ngModule: TooltipsModule,
+      providers: [TooltipController]
+    }
+  }
+}