Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit a415276

Browse files
sayriscopybara-github
sayris
authored and
copybara-github
committed
feat(tooltip): Adjust tooltip position on scroll and resize events. This ensures that the tooltip remains pinned to the anchor element despite page movement.
BREAKING_CHANGE: This change adds two additional methods into the MDCTooltipAdapter for registering and deregistering window events: - registerWindowEventHandler<K extends EventType>( evtType: K, handler: SpecificEventListener<K>): void; - deregisterWindowEventHandler<K extends EventType>( evtType: K, handler: SpecificEventListener<K>): void; These methods are necessary to add and remove event listeners for `scroll` and `resize` events. PiperOrigin-RevId: 343338436
1 parent 7ad038e commit a415276

File tree

4 files changed

+162
-5
lines changed

4 files changed

+162
-5
lines changed

‎packages/mdc-tooltip/adapter.ts‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,18 @@ export interface MDCTooltipAdapter {
105105
deregisterDocumentEventHandler<K extends EventType>(
106106
evtType: K, handler: SpecificEventListener<K>): void;
107107

108+
/**
109+
* Registers an event listener to the window.
110+
*/
111+
registerWindowEventHandler<K extends EventType>(
112+
evtType: K, handler: SpecificEventListener<K>): void;
113+
114+
/**
115+
* Deregisters an event listener to the window.
116+
*/
117+
deregisterWindowEventHandler<K extends EventType>(
118+
evtType: K, handler: SpecificEventListener<K>): void;
119+
108120
/**
109121
* Notification that the tooltip element has been fully hidden. Typically used
110122
* to wait for the hide animation to complete.

‎packages/mdc-tooltip/component.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,12 @@ export class MDCTooltip extends MDCComponent<MDCTooltipFoundation> {
141141
deregisterDocumentEventHandler: (evt, handler) => {
142142
document.body.removeEventListener(evt, handler);
143143
},
144+
registerWindowEventHandler: (evt, handler) => {
145+
window.addEventListener(evt, handler);
146+
},
147+
deregisterWindowEventHandler: (evt, handler) => {
148+
window.removeEventListener(evt, handler);
149+
},
144150
notifyHidden: () => {
145151
this.emit(events.HIDDEN, {});
146152
},

‎packages/mdc-tooltip/foundation.ts‎

Lines changed: 69 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
* THE SOFTWARE.
2222
*/
2323

24+
import {AnimationFrame} from '@material/animation/animationframe';
2425
import {MDCFoundation} from '@material/base/foundation';
2526
import {SpecificEventListener} from '@material/base/types';
2627
import {KEY, normalizeKey} from '@material/dom/keyboard';
@@ -37,6 +38,10 @@ const {
3738
MULTILINE_TOOLTIP
3839
} = CssClasses;
3940

41+
enum AnimationKeys {
42+
POLL_ANCHOR = 'poll_anchor'
43+
}
44+
4045
export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
4146
static get defaultAdapter(): MDCTooltipAdapter {
4247
return {
@@ -55,6 +60,8 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
5560
isRTL: () => false,
5661
registerDocumentEventHandler: () => undefined,
5762
deregisterDocumentEventHandler: () => undefined,
63+
registerWindowEventHandler: () => undefined,
64+
deregisterWindowEventHandler: () => undefined,
5865
notifyHidden: () => undefined,
5966
};
6067
}
@@ -69,14 +76,19 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
6976
private readonly hideDelayMs = numbers.HIDE_DELAY_MS;
7077
private readonly showDelayMs = numbers.SHOW_DELAY_MS;
7178

79+
private anchorRect: ClientRect|null = null;
7280
private frameId: number|null = null;
7381
private hideTimeout: number|null = null;
7482
private showTimeout: number|null = null;
83+
private readonly animFrame: AnimationFrame;
7584
private readonly documentClickHandler: SpecificEventListener<'click'>;
7685
private readonly documentKeydownHandler: SpecificEventListener<'keydown'>;
86+
private readonly windowScrollHandler: SpecificEventListener<'scroll'>;
87+
private readonly windowResizeHandler: SpecificEventListener<'resize'>;
7788

7889
constructor(adapter?: Partial<MDCTooltipAdapter>) {
7990
super({...MDCTooltipFoundation.defaultAdapter, ...adapter});
91+
this.animFrame = new AnimationFrame();
8092

8193
this.documentClickHandler = () => {
8294
this.handleClick();
@@ -85,6 +97,14 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
8597
this.documentKeydownHandler = (evt) => {
8698
this.handleKeydown(evt);
8799
};
100+
101+
this.windowScrollHandler = () => {
102+
this.handleWindowChangeEvent();
103+
};
104+
105+
this.windowResizeHandler = () => {
106+
this.handleWindowChangeEvent();
107+
};
88108
}
89109

90110
handleAnchorMouseEnter() {
@@ -135,6 +155,19 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
135155
}
136156
}
137157

158+
/**
159+
* On window resize or scroll, check the anchor position and size and
160+
* repostion tooltip if necessary.
161+
*/
162+
private handleWindowChangeEvent() {
163+
// Since scroll and resize events can fire at a high rate, we throttle
164+
// the potential re-positioning of tooltip component using
165+
// requestAnimationFrame.
166+
this.animFrame.request(AnimationKeys.POLL_ANCHOR, () => {
167+
this.repositionTooltipOnAnchorMove();
168+
});
169+
}
170+
138171
show() {
139172
this.clearHideTimeout();
140173
this.clearShowTimeout();
@@ -153,15 +186,17 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
153186
if (this.isTooltipMultiline()) {
154187
this.adapter.addClass(MULTILINE_TOOLTIP);
155188
}
156-
const {top, left} = this.calculateTooltipDistance();
157-
this.adapter.setStyleProperty('top', `${top}px`);
158-
this.adapter.setStyleProperty('left', `${left}px`);
189+
this.anchorRect = this.adapter.getAnchorBoundingRect();
190+
this.positionTooltip();
159191

160192
this.adapter.registerDocumentEventHandler(
161193
'click', this.documentClickHandler);
162194
this.adapter.registerDocumentEventHandler(
163195
'keydown', this.documentKeydownHandler);
164196

197+
this.adapter.registerWindowEventHandler('scroll', this.windowScrollHandler);
198+
this.adapter.registerWindowEventHandler('resize', this.windowResizeHandler);
199+
165200
this.frameId = requestAnimationFrame(() => {
166201
this.clearAllAnimationClasses();
167202
this.adapter.addClass(SHOWN);
@@ -192,6 +227,10 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
192227
'click', this.documentClickHandler);
193228
this.adapter.deregisterDocumentEventHandler(
194229
'keydown', this.documentKeydownHandler);
230+
this.adapter.deregisterWindowEventHandler(
231+
'scroll', this.windowScrollHandler);
232+
this.adapter.deregisterWindowEventHandler(
233+
'resize', this.windowResizeHandler);
195234
}
196235

197236
handleTransitionEnd() {
@@ -247,6 +286,12 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
247286
tooltipSize.width >= numbers.MAX_WIDTH;
248287
}
249288

289+
private positionTooltip() {
290+
const {top, left} = this.calculateTooltipDistance(this.anchorRect);
291+
this.adapter.setStyleProperty('top', `${top}px`);
292+
this.adapter.setStyleProperty('left', `${left}px`);
293+
}
294+
250295
/**
251296
* Calculates the position of the tooltip. A tooltip will be placed beneath
252297
* the anchor element and aligned either with the 'start'/'end' edge of the
@@ -261,8 +306,7 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
261306
* Users can specify an alignment, however, if this alignment results in the
262307
* tooltip colliding with the viewport, this specification is overwritten.
263308
*/
264-
private calculateTooltipDistance() {
265-
const anchorRect = this.adapter.getAnchorBoundingRect();
309+
private calculateTooltipDistance(anchorRect: ClientRect|null) {
266310
if (!anchorRect) {
267311
return {top: 0, left: 0};
268312
}
@@ -457,6 +501,19 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
457501
return yPos + tooltipHeight <= viewportHeight && yPos >= 0;
458502
}
459503

504+
private repositionTooltipOnAnchorMove() {
505+
const newAnchorRect = this.adapter.getAnchorBoundingRect();
506+
if (!newAnchorRect || !this.anchorRect) return;
507+
508+
if (newAnchorRect.top !== this.anchorRect.top ||
509+
newAnchorRect.left !== this.anchorRect.left ||
510+
newAnchorRect.height !== this.anchorRect.height ||
511+
newAnchorRect.width !== this.anchorRect.width) {
512+
this.anchorRect = newAnchorRect;
513+
this.positionTooltip();
514+
}
515+
}
516+
460517
private clearShowTimeout() {
461518
if (this.showTimeout) {
462519
clearTimeout(this.showTimeout);
@@ -490,6 +547,13 @@ export class MDCTooltipFoundation extends MDCFoundation<MDCTooltipAdapter> {
490547
'click', this.documentClickHandler);
491548
this.adapter.deregisterDocumentEventHandler(
492549
'keydown', this.documentKeydownHandler);
550+
551+
this.adapter.deregisterWindowEventHandler(
552+
'scroll', this.windowScrollHandler);
553+
this.adapter.deregisterWindowEventHandler(
554+
'resize', this.windowResizeHandler);
555+
556+
this.animFrame.cancelAll();
493557
}
494558
}
495559

‎packages/mdc-tooltip/test/foundation.test.ts‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
* THE SOFTWARE.
2222
*/
2323

24+
import {emitEvent} from '../../../testing/dom/events';
2425
import {verifyDefaultAdapter} from '../../../testing/helpers/foundation';
2526
import {setUpFoundationTest, setUpMdcTestEnvironment} from '../../../testing/helpers/setup';
2627
import {AnchorBoundaryType, CssClasses, numbers, XPosition, YPosition} from '../constants';
@@ -50,6 +51,8 @@ describe('MDCTooltipFoundation', () => {
5051
'isRTL',
5152
'registerDocumentEventHandler',
5253
'deregisterDocumentEventHandler',
54+
'registerWindowEventHandler',
55+
'deregisterWindowEventHandler',
5356
'notifyHidden',
5457
]);
5558
});
@@ -128,6 +131,28 @@ describe('MDCTooltipFoundation', () => {
128131
.toHaveBeenCalledWith('keydown', jasmine.any(Function));
129132
});
130133

134+
it('#show registers scroll and resize event listeners on the window', () => {
135+
const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);
136+
foundation.show();
137+
expect(mockAdapter.registerWindowEventHandler)
138+
.toHaveBeenCalledWith('scroll', jasmine.any(Function));
139+
expect(mockAdapter.registerWindowEventHandler)
140+
.toHaveBeenCalledWith('resize', jasmine.any(Function));
141+
});
142+
143+
it('#hide deregisters scroll and resize event listeners on the window',
144+
() => {
145+
const {foundation, mockAdapter} =
146+
setUpFoundationTest(MDCTooltipFoundation);
147+
foundation.show();
148+
foundation.hide();
149+
150+
expect(mockAdapter.deregisterWindowEventHandler)
151+
.toHaveBeenCalledWith('scroll', jasmine.any(Function));
152+
expect(mockAdapter.deregisterWindowEventHandler)
153+
.toHaveBeenCalledWith('resize', jasmine.any(Function));
154+
});
155+
131156
it('#hide modifies tooltip element so it is hidden', () => {
132157
const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);
133158
foundation.show();
@@ -829,5 +854,55 @@ describe('MDCTooltipFoundation', () => {
829854
.toHaveBeenCalledWith('click', jasmine.any(Function));
830855
expect(mockAdapter.deregisterDocumentEventHandler)
831856
.toHaveBeenCalledWith('keydown', jasmine.any(Function));
857+
expect(mockAdapter.deregisterWindowEventHandler)
858+
.toHaveBeenCalledWith('scroll', jasmine.any(Function));
859+
expect(mockAdapter.deregisterWindowEventHandler)
860+
.toHaveBeenCalledWith('resize', jasmine.any(Function));
832861
});
862+
863+
it('recalculates position of tooltip if anchor position changes', () => {
864+
const anchorBoundingRect =
865+
{top: 0, bottom: 35, left: 0, right: 200, width: 200, height: 35};
866+
const expectedTooltipTop =
867+
anchorBoundingRect.height + numbers.BOUNDED_ANCHOR_GAP;
868+
const expectedTooltipLeft = 80;
869+
const tooltipSize = {width: 40, height: 30};
870+
871+
const {foundation, mockAdapter} = setUpFoundationTest(MDCTooltipFoundation);
872+
mockAdapter.getViewportWidth.and.returnValue(500);
873+
mockAdapter.getViewportHeight.and.returnValue(500);
874+
mockAdapter.getAnchorBoundingRect.and.returnValue(anchorBoundingRect);
875+
mockAdapter.getTooltipSize.and.returnValue(tooltipSize);
876+
mockAdapter.registerWindowEventHandler.and.callFake(
877+
(ev: string, handler: EventListener) => {
878+
window.addEventListener(ev, handler);
879+
});
880+
881+
foundation.show();
882+
expect(mockAdapter.setStyleProperty)
883+
.toHaveBeenCalledWith('top', `${expectedTooltipTop}px`);
884+
expect(mockAdapter.setStyleProperty)
885+
.toHaveBeenCalledWith('left', `${expectedTooltipLeft}px`);
886+
887+
const yPositionDiff = 50;
888+
const xPositionDiff = 20;
889+
const newAnchorBoundingRect = {
890+
top: anchorBoundingRect.top + yPositionDiff,
891+
bottom: anchorBoundingRect.bottom + yPositionDiff,
892+
left: anchorBoundingRect.left + xPositionDiff,
893+
right: anchorBoundingRect.right + xPositionDiff,
894+
width: anchorBoundingRect.width,
895+
height: anchorBoundingRect.height,
896+
};
897+
898+
mockAdapter.getAnchorBoundingRect.and.returnValue(newAnchorBoundingRect);
899+
emitEvent(window, 'scroll');
900+
jasmine.clock().tick(1);
901+
902+
expect(mockAdapter.setStyleProperty)
903+
.toHaveBeenCalledWith('top', `${expectedTooltipTop + yPositionDiff}px`);
904+
expect(mockAdapter.setStyleProperty)
905+
.toHaveBeenCalledWith(
906+
'left', `${expectedTooltipLeft + xPositionDiff}px`);
907+
});
833908
});

0 commit comments

Comments
 (0)