feat(tooltip): allow tooltip to be auto positioned

BREAKING CHANGE: all tooltips now default to auto positioning, you can use the tooltipPlacement input on all components to override this behaviour though Closes #617
mattlewis92 · Jun 25, 2018 · d6d61c4 · d6d61c4
1 parent 6ada99e
commit d6d61c4
Show file tree

Hide file tree

Showing 11 changed files with 27 additions and 24 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -165,7 +165,7 @@
     "angular-draggable-droppable": "^4.0.0-beta.7",
     "angular-resizable-element": "^3.1.0",
     "calendar-utils": "^0.2.0-alpha.12",
-    "positioning": "^1.3.1"
+    "positioning": "^1.4.0"
   },
   "sideEffects": [
     "*.css",

diff --git a/src/modules/common/calendar-tooltip.directive.ts b/src/modules/common/calendar-tooltip.directive.ts
@@ -15,7 +15,7 @@ import {
   TemplateRef
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
-import { Positioning } from 'positioning';
+import { PlacementArray, positionElements } from 'positioning';
 import { CalendarEvent } from 'calendar-utils';
 
 @Component({
@@ -57,7 +57,7 @@ export class CalendarTooltipWindowComponent {
 export class CalendarTooltipDirective implements OnDestroy {
   @Input('mwlCalendarTooltip') contents: string; // tslint:disable-line no-input-rename
 
-  @Input('tooltipPlacement') placement: string = 'top'; // tslint:disable-line no-input-rename
+  @Input('tooltipPlacement') placement: PlacementArray = 'auto'; // tslint:disable-line no-input-rename
 
   @Input('tooltipTemplate') customTemplate: TemplateRef<any>; // tslint:disable-line no-input-rename
 
@@ -67,7 +67,6 @@ export class CalendarTooltipDirective implements OnDestroy {
 
   private tooltipFactory: ComponentFactory<CalendarTooltipWindowComponent>;
   private tooltipRef: ComponentRef<CalendarTooltipWindowComponent>;
-  private positioning: Positioning = new Positioning();
 
   constructor(
     private elementRef: ElementRef,
@@ -105,7 +104,6 @@ export class CalendarTooltipDirective implements OnDestroy {
         []
       );
       this.tooltipRef.instance.contents = this.contents;
-      this.tooltipRef.instance.placement = this.placement;
       this.tooltipRef.instance.customTemplate = this.customTemplate;
       this.tooltipRef.instance.event = this.event;
       if (this.appendToBody) {
@@ -126,20 +124,19 @@ export class CalendarTooltipDirective implements OnDestroy {
     }
   }
 
-  private positionTooltip(): void {
+  private positionTooltip(previousPosition?: string): void {
     if (this.tooltipRef) {
-      const targetPosition: ClientRect = this.positioning.positionElements(
+      this.tooltipRef.changeDetectorRef.detectChanges();
+      this.tooltipRef.instance.placement = positionElements(
         this.elementRef.nativeElement,
         this.tooltipRef.location.nativeElement.children[0],
         this.placement,
         this.appendToBody
       );
-
-      const elm: HTMLElement = this.tooltipRef.location.nativeElement
-        .children[0];
-
-      this.renderer.setStyle(elm, 'top', `${targetPosition.top}px`);
-      this.renderer.setStyle(elm, 'left', `${targetPosition.left}px`);
+      // keep re-positioning the tooltip until the arrow position doesn't make a difference
+      if (previousPosition !== this.tooltipRef.instance.placement) {
+        this.positionTooltip(this.tooltipRef.instance.placement);
+      }
     }
   }
 }
diff --git a/src/modules/day/calendar-day-view-event.component.ts b/src/modules/day/calendar-day-view-event.component.ts
@@ -6,6 +6,7 @@ import {
   TemplateRef
 } from '@angular/core';
 import { DayViewEvent } from 'calendar-utils';
+import { PlacementArray } from 'positioning';
 
 @Component({
   selector: 'mwl-calendar-day-view-event',
@@ -51,7 +52,7 @@ import { DayViewEvent } from 'calendar-utils';
 export class CalendarDayViewEventComponent {
   @Input() dayEvent: DayViewEvent;
 
-  @Input() tooltipPlacement: string;
+  @Input() tooltipPlacement: PlacementArray;
 
   @Input() tooltipAppendToBody: boolean;
 

diff --git a/src/modules/day/calendar-day-view.component.ts b/src/modules/day/calendar-day-view.component.ts
@@ -28,6 +28,7 @@ import { CalendarUtils } from '../common/calendar-utils.provider';
 import { validateEvents, trackByEventId, roundToNearest } from '../common/util';
 import { DateAdapter } from '../../date-adapters/date-adapter';
 import { DragEnd } from 'angular-draggable-droppable/draggable.directive';
+import { PlacementArray } from 'positioning';
 
 export interface CalendarDayViewBeforeRenderEvent {
   body: {
@@ -200,7 +201,7 @@ export class CalendarDayViewComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * The placement of the event tooltip
    */
-  @Input() tooltipPlacement: string = 'top';
+  @Input() tooltipPlacement: PlacementArray = 'auto';
 
   /**
    * A custom template to use for the event tooltips

diff --git a/src/modules/month/calendar-month-cell.component.ts b/src/modules/month/calendar-month-cell.component.ts
@@ -7,6 +7,7 @@ import {
 } from '@angular/core';
 import { MonthViewDay, CalendarEvent } from 'calendar-utils';
 import { trackByEventId } from '../common/util';
+import { PlacementArray } from 'positioning';
 
 @Component({
   selector: 'mwl-calendar-month-cell',
@@ -83,7 +84,7 @@ export class CalendarMonthCellComponent {
 
   @Input() locale: string;
 
-  @Input() tooltipPlacement: string;
+  @Input() tooltipPlacement: PlacementArray;
 
   @Input() tooltipAppendToBody: boolean;
 

diff --git a/src/modules/month/calendar-month-view.component.ts b/src/modules/month/calendar-month-view.component.ts
@@ -23,6 +23,7 @@ import { CalendarEventTimesChangedEvent } from '../common/calendar-event-times-c
 import { CalendarUtils } from '../common/calendar-utils.provider';
 import { validateEvents, trackByIndex } from '../common/util';
 import { DateAdapter } from '../../date-adapters/date-adapter';
+import { PlacementArray } from 'positioning';
 
 export interface CalendarMonthViewBeforeRenderEvent {
   header: WeekDay[];
@@ -129,7 +130,7 @@ export class CalendarMonthViewComponent
   /**
    * The placement of the event tooltip
    */
-  @Input() tooltipPlacement: string = 'top';
+  @Input() tooltipPlacement: PlacementArray = 'auto';
 
   /**
    * A custom template to use for the event tooltips

diff --git a/src/modules/week/calendar-week-view-event.component.ts b/src/modules/week/calendar-week-view-event.component.ts
@@ -6,6 +6,7 @@ import {
   TemplateRef
 } from '@angular/core';
 import { WeekViewEvent } from 'calendar-utils';
+import { PlacementArray } from 'positioning';
 
 @Component({
   selector: 'mwl-calendar-week-view-event',
@@ -51,7 +52,7 @@ import { WeekViewEvent } from 'calendar-utils';
 export class CalendarWeekViewEventComponent {
   @Input() weekEvent: WeekViewEvent;
 
-  @Input() tooltipPlacement: string;
+  @Input() tooltipPlacement: PlacementArray;
 
   @Input() tooltipAppendToBody: boolean;
 

diff --git a/src/modules/week/calendar-week-view.component.ts b/src/modules/week/calendar-week-view.component.ts
@@ -27,6 +27,7 @@ import { CalendarUtils } from '../common/calendar-utils.provider';
 import { validateEvents, trackByIndex, roundToNearest } from '../common/util';
 import { DateAdapter } from '../../date-adapters/date-adapter';
 import { DragEnd } from 'angular-draggable-droppable/draggable.directive';
+import { PlacementArray } from 'positioning';
 
 export interface WeekViewEventResize {
   originalOffset: number;
@@ -135,7 +136,7 @@ export class CalendarWeekViewComponent implements OnChanges, OnInit, OnDestroy {
   /**
    * The placement of the event tooltip
    */
-  @Input() tooltipPlacement: string = 'bottom';
+  @Input() tooltipPlacement: PlacementArray = 'auto';
 
   /**
    * A custom template to use for the event tooltips

diff --git a/test/calendar-day-view.component.spec.ts b/test/calendar-day-view.component.spec.ts
@@ -705,7 +705,7 @@ describe('CalendarDayViewComponent component', () => {
       expect(tooltip.querySelector('.cal-tooltip-inner').innerHTML).to.equal(
         'title: foo <b>bar</b>'
       );
-      expect(tooltip.classList.contains('cal-tooltip-top')).to.equal(true);
+      expect(tooltip.classList.contains('cal-tooltip-left-top')).to.equal(true);
       expect(!!tooltip.style.top).to.equal(true);
       expect(!!tooltip.style.left).to.equal(true);
       triggerDomEvent('mouseleave', event);

diff --git a/test/calendar-week-view.component.spec.ts b/test/calendar-week-view.component.spec.ts
@@ -299,7 +299,7 @@ describe('calendarWeekView component', () => {
       expect(tooltip.querySelector('.cal-tooltip-inner').innerHTML).to.equal(
         'title: foo <b>bar</b>'
       );
-      expect(tooltip.classList.contains('cal-tooltip-bottom')).to.equal(true);
+      expect(tooltip.classList.contains('cal-tooltip-top')).to.equal(true);
       expect(!!tooltip.style.top).to.equal(true);
       expect(!!tooltip.style.left).to.equal(true);
       triggerDomEvent('mouseleave', event);