@videojs/html 0.1.0-preview.4 → 0.1.0-preview.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/define/index.js +4 -4
- package/dist/define/media-popover.js +2 -2
- package/dist/define/media-tooltip.js +2 -2
- package/dist/index.d.ts +2 -29
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/{media-popover-F4M4Tq4z.js → media-popover-DVCIlSBX.js} +2 -2
- package/dist/{media-popover-F4M4Tq4z.js.map → media-popover-DVCIlSBX.js.map} +1 -1
- package/dist/media-tooltip-C4jOtQ8a.js +8 -0
- package/dist/media-tooltip-C4jOtQ8a.js.map +1 -0
- package/dist/{popover-Dc0hyhwB.js → popover-ty9dFDNE.js} +4 -2
- package/dist/popover-ty9dFDNE.js.map +1 -0
- package/dist/skins/frosted.d.ts.map +1 -1
- package/dist/skins/frosted.js +55 -54
- package/dist/skins/frosted.js.map +1 -1
- package/dist/skins/minimal.d.ts.map +1 -1
- package/dist/skins/minimal.js +55 -54
- package/dist/skins/minimal.js.map +1 -1
- package/dist/tooltip-CJpujx2f.js +219 -0
- package/dist/tooltip-CJpujx2f.js.map +1 -0
- package/package.json +4 -4
- package/dist/media-tooltip-ClcVafMb.js +0 -14
- package/dist/media-tooltip-ClcVafMb.js.map +0 -1
- package/dist/popover-Dc0hyhwB.js.map +0 -1
- package/dist/tooltip-54fBUUpb.js +0 -296
- package/dist/tooltip-54fBUUpb.js.map +0 -1
package/dist/tooltip-54fBUUpb.js
DELETED
|
@@ -1,296 +0,0 @@
|
|
|
1
|
-
import { uniqueId } from "@videojs/utils";
|
|
2
|
-
import { arrow, autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
|
|
3
|
-
|
|
4
|
-
//#region src/elements/tooltip.ts
|
|
5
|
-
var TooltipRootElement = class extends HTMLElement {
|
|
6
|
-
#open = false;
|
|
7
|
-
#hoverTimeout = null;
|
|
8
|
-
#cleanup = null;
|
|
9
|
-
#arrowElement = null;
|
|
10
|
-
#pointerPosition = {
|
|
11
|
-
x: 0,
|
|
12
|
-
y: 0
|
|
13
|
-
};
|
|
14
|
-
#transitionStatus = "initial";
|
|
15
|
-
constructor() {
|
|
16
|
-
super();
|
|
17
|
-
if (globalThis.matchMedia?.("(hover: hover)")?.matches) {
|
|
18
|
-
this.addEventListener("pointerenter", this);
|
|
19
|
-
this.addEventListener("pointerleave", this);
|
|
20
|
-
this.addEventListener("pointermove", this);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
handleEvent(event) {
|
|
24
|
-
if (event.type === "pointerenter") this.#handlePointerEnter();
|
|
25
|
-
else if (event.type === "pointerleave") this.#handlePointerLeave(event);
|
|
26
|
-
else if (event.type === "pointermove") this.#handlePointerMove(event);
|
|
27
|
-
}
|
|
28
|
-
connectedCallback() {
|
|
29
|
-
this.#updateVisibility();
|
|
30
|
-
}
|
|
31
|
-
disconnectedCallback() {
|
|
32
|
-
this.#clearHoverTimeout();
|
|
33
|
-
this.#cleanup?.();
|
|
34
|
-
this.#transitionStatus = "unmounted";
|
|
35
|
-
this.#updateVisibility();
|
|
36
|
-
}
|
|
37
|
-
static get observedAttributes() {
|
|
38
|
-
return [
|
|
39
|
-
"delay",
|
|
40
|
-
"close-delay",
|
|
41
|
-
"track-cursor-axis"
|
|
42
|
-
];
|
|
43
|
-
}
|
|
44
|
-
get delay() {
|
|
45
|
-
return Number.parseInt(this.getAttribute("delay") ?? "0", 10);
|
|
46
|
-
}
|
|
47
|
-
get closeDelay() {
|
|
48
|
-
return Number.parseInt(this.getAttribute("close-delay") ?? "0", 10);
|
|
49
|
-
}
|
|
50
|
-
get trackCursorAxis() {
|
|
51
|
-
const value = this.getAttribute("track-cursor-axis");
|
|
52
|
-
return value === "x" || value === "y" || value === "both" ? value : void 0;
|
|
53
|
-
}
|
|
54
|
-
get #triggerElement() {
|
|
55
|
-
return this.querySelector("media-tooltip-trigger");
|
|
56
|
-
}
|
|
57
|
-
get #portalElement() {
|
|
58
|
-
return this.querySelector("media-tooltip-portal");
|
|
59
|
-
}
|
|
60
|
-
get #positionerElement() {
|
|
61
|
-
return this.#portalElement?.querySelector("media-tooltip-positioner");
|
|
62
|
-
}
|
|
63
|
-
get #popupElement() {
|
|
64
|
-
return this.#portalElement?.querySelector("media-tooltip-popup");
|
|
65
|
-
}
|
|
66
|
-
#setOpen(open) {
|
|
67
|
-
if (this.#open === open) return;
|
|
68
|
-
this.#open = open;
|
|
69
|
-
if (open) {
|
|
70
|
-
this.#transitionStatus = "initial";
|
|
71
|
-
requestAnimationFrame(() => {
|
|
72
|
-
this.#transitionStatus = "open";
|
|
73
|
-
this.#updateVisibility();
|
|
74
|
-
});
|
|
75
|
-
} else this.#transitionStatus = "close";
|
|
76
|
-
this.#updateVisibility();
|
|
77
|
-
if (open) this.#setupFloating();
|
|
78
|
-
else {
|
|
79
|
-
this.#cleanup?.();
|
|
80
|
-
this.#cleanup = null;
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
#updateVisibility() {
|
|
84
|
-
this.style.display = "contents";
|
|
85
|
-
if (this.#popupElement) {
|
|
86
|
-
const placement = this.#positionerElement?.side ?? "top";
|
|
87
|
-
this.#popupElement.setAttribute("data-side", placement);
|
|
88
|
-
this.#popupElement.toggleAttribute("data-starting-style", this.#transitionStatus === "initial");
|
|
89
|
-
this.#popupElement.toggleAttribute("data-open", this.#transitionStatus === "initial" || this.#transitionStatus === "open");
|
|
90
|
-
this.#popupElement.toggleAttribute("data-ending-style", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
|
|
91
|
-
this.#popupElement.toggleAttribute("data-closed", this.#transitionStatus === "close" || this.#transitionStatus === "unmounted");
|
|
92
|
-
}
|
|
93
|
-
const triggerElement = this.#triggerElement?.firstElementChild;
|
|
94
|
-
if (triggerElement) triggerElement.toggleAttribute("data-popup-open", this.#open);
|
|
95
|
-
}
|
|
96
|
-
#setupFloating() {
|
|
97
|
-
if (!this.#triggerElement || !this.#popupElement) return;
|
|
98
|
-
const trigger = this.#triggerElement.firstElementChild;
|
|
99
|
-
const popup = this.#popupElement;
|
|
100
|
-
if (!trigger || !popup) return;
|
|
101
|
-
const placement = this.#positionerElement?.side ?? "top";
|
|
102
|
-
const sideOffset = this.#positionerElement?.sideOffset ?? 0;
|
|
103
|
-
const collisionPadding = this.#positionerElement?.collisionPadding ?? 0;
|
|
104
|
-
const mediaContainer = this.closest("media-container");
|
|
105
|
-
this.#arrowElement = popup.querySelector("media-tooltip-arrow");
|
|
106
|
-
const updatePosition = () => {
|
|
107
|
-
const middleware = [
|
|
108
|
-
offset(sideOffset),
|
|
109
|
-
flip(),
|
|
110
|
-
shift({
|
|
111
|
-
boundary: mediaContainer,
|
|
112
|
-
padding: collisionPadding
|
|
113
|
-
})
|
|
114
|
-
];
|
|
115
|
-
if (this.#arrowElement) middleware.push(arrow({ element: this.#arrowElement }));
|
|
116
|
-
computePosition(this.trackCursorAxis ? { getBoundingClientRect: () => {
|
|
117
|
-
const triggerRect = trigger.getBoundingClientRect();
|
|
118
|
-
if (this.trackCursorAxis === "x") return {
|
|
119
|
-
width: 0,
|
|
120
|
-
height: 0,
|
|
121
|
-
top: triggerRect.top,
|
|
122
|
-
right: this.#pointerPosition.x,
|
|
123
|
-
bottom: triggerRect.bottom,
|
|
124
|
-
left: this.#pointerPosition.x,
|
|
125
|
-
x: this.#pointerPosition.x,
|
|
126
|
-
y: triggerRect.top
|
|
127
|
-
};
|
|
128
|
-
else if (this.trackCursorAxis === "y") return {
|
|
129
|
-
width: 0,
|
|
130
|
-
height: 0,
|
|
131
|
-
top: this.#pointerPosition.y,
|
|
132
|
-
right: triggerRect.right,
|
|
133
|
-
bottom: this.#pointerPosition.y,
|
|
134
|
-
left: triggerRect.left,
|
|
135
|
-
x: triggerRect.left,
|
|
136
|
-
y: this.#pointerPosition.y
|
|
137
|
-
};
|
|
138
|
-
else return {
|
|
139
|
-
width: 0,
|
|
140
|
-
height: 0,
|
|
141
|
-
top: this.#pointerPosition.y,
|
|
142
|
-
right: this.#pointerPosition.x,
|
|
143
|
-
bottom: this.#pointerPosition.y,
|
|
144
|
-
left: this.#pointerPosition.x,
|
|
145
|
-
x: this.#pointerPosition.x,
|
|
146
|
-
y: this.#pointerPosition.y
|
|
147
|
-
};
|
|
148
|
-
} } : trigger, popup, {
|
|
149
|
-
placement,
|
|
150
|
-
middleware
|
|
151
|
-
}).then(({ x, y, middlewareData, placement: computedPlacement }) => {
|
|
152
|
-
Object.assign(popup.style, {
|
|
153
|
-
left: `${x}px`,
|
|
154
|
-
top: `${y}px`
|
|
155
|
-
});
|
|
156
|
-
popup.setAttribute("data-side", computedPlacement);
|
|
157
|
-
if (this.#arrowElement && middlewareData.arrow) {
|
|
158
|
-
const { x: arrowX, y: arrowY } = middlewareData.arrow;
|
|
159
|
-
Object.assign(this.#arrowElement.style, {
|
|
160
|
-
left: arrowX != null ? `${arrowX}px` : void 0,
|
|
161
|
-
top: arrowY != null ? `${arrowY}px` : void 0
|
|
162
|
-
});
|
|
163
|
-
}
|
|
164
|
-
});
|
|
165
|
-
};
|
|
166
|
-
updatePosition();
|
|
167
|
-
if (!this.trackCursorAxis) this.#cleanup = autoUpdate(trigger, popup, updatePosition);
|
|
168
|
-
}
|
|
169
|
-
#updatePosition() {
|
|
170
|
-
if (this.#open && this.trackCursorAxis) this.#setupFloating();
|
|
171
|
-
}
|
|
172
|
-
#clearHoverTimeout() {
|
|
173
|
-
if (this.#hoverTimeout) {
|
|
174
|
-
clearTimeout(this.#hoverTimeout);
|
|
175
|
-
this.#hoverTimeout = null;
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
#handlePointerEnter() {
|
|
179
|
-
this.#clearHoverTimeout();
|
|
180
|
-
this.#hoverTimeout = globalThis.setTimeout(() => {
|
|
181
|
-
this.#setOpen(true);
|
|
182
|
-
}, this.delay);
|
|
183
|
-
}
|
|
184
|
-
#handlePointerLeave(_event) {
|
|
185
|
-
this.#clearHoverTimeout();
|
|
186
|
-
this.#hoverTimeout = globalThis.setTimeout(() => {
|
|
187
|
-
this.#setOpen(false);
|
|
188
|
-
}, this.closeDelay);
|
|
189
|
-
}
|
|
190
|
-
#handlePointerMove(event) {
|
|
191
|
-
if (this.trackCursorAxis) {
|
|
192
|
-
this.#pointerPosition = {
|
|
193
|
-
x: event.clientX,
|
|
194
|
-
y: event.clientY
|
|
195
|
-
};
|
|
196
|
-
if (this.#open) this.#updatePosition();
|
|
197
|
-
}
|
|
198
|
-
}
|
|
199
|
-
};
|
|
200
|
-
var TooltipTriggerElement = class extends HTMLElement {
|
|
201
|
-
connectedCallback() {
|
|
202
|
-
this.style.display = "contents";
|
|
203
|
-
const triggerElement = this.firstElementChild;
|
|
204
|
-
if (triggerElement) new MutationObserver((mutations) => {
|
|
205
|
-
mutations.forEach((mutation) => {
|
|
206
|
-
if (mutation.type === "attributes") {
|
|
207
|
-
const rootElement = this.closest("media-tooltip");
|
|
208
|
-
let popupElement = rootElement.querySelector("media-tooltip-popup");
|
|
209
|
-
if (!popupElement) {
|
|
210
|
-
const portalElement = rootElement.querySelector("media-tooltip-portal");
|
|
211
|
-
if (!portalElement) return;
|
|
212
|
-
popupElement = portalElement.querySelector("media-tooltip-popup");
|
|
213
|
-
if (!popupElement) return;
|
|
214
|
-
}
|
|
215
|
-
const attributeName = mutation.attributeName;
|
|
216
|
-
if (!attributeName || !attributeName.startsWith("data-")) return;
|
|
217
|
-
const attributeValue = triggerElement.getAttribute(attributeName);
|
|
218
|
-
if (attributeValue !== null) popupElement.setAttribute(attributeName, attributeValue);
|
|
219
|
-
else popupElement.removeAttribute(attributeName);
|
|
220
|
-
}
|
|
221
|
-
});
|
|
222
|
-
}).observe(triggerElement, { attributes: true });
|
|
223
|
-
}
|
|
224
|
-
};
|
|
225
|
-
var TooltipPortalElement = class extends HTMLElement {
|
|
226
|
-
#portal = null;
|
|
227
|
-
connectedCallback() {
|
|
228
|
-
this.style.display = "contents";
|
|
229
|
-
this.#setupPortal();
|
|
230
|
-
}
|
|
231
|
-
disconnectedCallback() {
|
|
232
|
-
this.#cleanupPortal();
|
|
233
|
-
}
|
|
234
|
-
querySelector(selector) {
|
|
235
|
-
return this.#portal?.querySelector(selector) ?? null;
|
|
236
|
-
}
|
|
237
|
-
#setupPortal() {
|
|
238
|
-
const portalId = this.getAttribute("root-id") ?? "@default_portal_id";
|
|
239
|
-
if (!portalId) return;
|
|
240
|
-
const portalContainer = this.getRootNode().getElementById(portalId) ?? this.getRootNode().querySelector("media-container")?.shadowRoot?.getElementById(portalId) ? this.getRootNode().querySelector("media-container") : void 0;
|
|
241
|
-
if (!portalContainer) return;
|
|
242
|
-
this.#portal = document.createElement("div");
|
|
243
|
-
this.#portal.slot = "portal";
|
|
244
|
-
this.#portal.id = uniqueId();
|
|
245
|
-
portalContainer.append(this.#portal);
|
|
246
|
-
this.#portal.append(...this.children);
|
|
247
|
-
}
|
|
248
|
-
#cleanupPortal() {
|
|
249
|
-
if (!this.#portal) return;
|
|
250
|
-
this.append(...this.#portal.children);
|
|
251
|
-
this.#portal.remove();
|
|
252
|
-
this.#portal = null;
|
|
253
|
-
}
|
|
254
|
-
};
|
|
255
|
-
var TooltipPositionerElement = class extends HTMLElement {
|
|
256
|
-
connectedCallback() {
|
|
257
|
-
this.style.display = "contents";
|
|
258
|
-
const popup = this.firstElementChild;
|
|
259
|
-
if (popup) Object.assign(popup.style, {
|
|
260
|
-
position: "absolute",
|
|
261
|
-
top: "0",
|
|
262
|
-
left: "0"
|
|
263
|
-
});
|
|
264
|
-
}
|
|
265
|
-
get side() {
|
|
266
|
-
return this.getAttribute("side") ?? "top";
|
|
267
|
-
}
|
|
268
|
-
get sideOffset() {
|
|
269
|
-
return Number.parseInt(this.getAttribute("side-offset") ?? "0", 10);
|
|
270
|
-
}
|
|
271
|
-
get collisionPadding() {
|
|
272
|
-
return Number.parseInt(this.getAttribute("collision-padding") ?? "0", 10);
|
|
273
|
-
}
|
|
274
|
-
};
|
|
275
|
-
var TooltipPopupElement = class extends HTMLElement {
|
|
276
|
-
connectedCallback() {
|
|
277
|
-
this.setAttribute("role", "tooltip");
|
|
278
|
-
}
|
|
279
|
-
};
|
|
280
|
-
var TooltipArrowElement = class extends HTMLElement {
|
|
281
|
-
connectedCallback() {
|
|
282
|
-
this.setAttribute("aria-hidden", "true");
|
|
283
|
-
}
|
|
284
|
-
};
|
|
285
|
-
const TooltipElement = {
|
|
286
|
-
Root: TooltipRootElement,
|
|
287
|
-
Trigger: TooltipTriggerElement,
|
|
288
|
-
Portal: TooltipPortalElement,
|
|
289
|
-
Positioner: TooltipPositionerElement,
|
|
290
|
-
Popup: TooltipPopupElement,
|
|
291
|
-
Arrow: TooltipArrowElement
|
|
292
|
-
};
|
|
293
|
-
|
|
294
|
-
//#endregion
|
|
295
|
-
export { TooltipPositionerElement as a, TooltipPortalElement as i, TooltipElement as n, TooltipRootElement as o, TooltipPopupElement as r, TooltipTriggerElement as s, TooltipArrowElement as t };
|
|
296
|
-
//# sourceMappingURL=tooltip-54fBUUpb.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-54fBUUpb.js","names":["#handlePointerEnter","#handlePointerLeave","#handlePointerMove","#updateVisibility","#clearHoverTimeout","#cleanup","#transitionStatus","#triggerElement","#portalElement","#positionerElement","#popupElement","#open","#setupFloating","#arrowElement","#pointerPosition","#hoverTimeout","#setOpen","#updatePosition","#setupPortal","#cleanupPortal","#portal","TooltipElement: {\n Root: typeof TooltipRootElement;\n Trigger: typeof TooltipTriggerElement;\n Portal: typeof TooltipPortalElement;\n Positioner: typeof TooltipPositionerElement;\n Popup: typeof TooltipPopupElement;\n Arrow: typeof TooltipArrowElement;\n}"],"sources":["../src/elements/tooltip.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom';\nimport type { MediaContainerElement } from '@/media/media-container';\n\nimport { arrow, autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { uniqueId } from '@videojs/utils';\n\nexport class TooltipRootElement extends HTMLElement {\n #open = false;\n #hoverTimeout: ReturnType<typeof setTimeout> | null = null;\n #cleanup: (() => void) | null = null;\n #arrowElement: HTMLElement | null = null;\n #pointerPosition = { x: 0, y: 0 };\n #transitionStatus: 'initial' | 'open' | 'close' | 'unmounted' = 'initial';\n\n constructor() {\n super();\n\n if (globalThis.matchMedia?.('(hover: hover)')?.matches) {\n this.addEventListener('pointerenter', this);\n this.addEventListener('pointerleave', this);\n this.addEventListener('pointermove', this);\n }\n }\n\n handleEvent(event: Event): void {\n if (event.type === 'pointerenter') {\n this.#handlePointerEnter();\n } else if (event.type === 'pointerleave') {\n this.#handlePointerLeave(event as PointerEvent);\n } else if (event.type === 'pointermove') {\n this.#handlePointerMove(event as PointerEvent);\n }\n }\n\n connectedCallback(): void {\n this.#updateVisibility();\n }\n\n disconnectedCallback(): void {\n this.#clearHoverTimeout();\n this.#cleanup?.();\n\n this.#transitionStatus = 'unmounted';\n this.#updateVisibility();\n }\n\n static get observedAttributes(): string[] {\n return ['delay', 'close-delay', 'track-cursor-axis'];\n }\n\n get delay(): number {\n return Number.parseInt(this.getAttribute('delay') ?? '0', 10);\n }\n\n get closeDelay(): number {\n return Number.parseInt(this.getAttribute('close-delay') ?? '0', 10);\n }\n\n get trackCursorAxis(): 'x' | 'y' | 'both' | undefined {\n const value = this.getAttribute('track-cursor-axis');\n return value === 'x' || value === 'y' || value === 'both' ? value : undefined;\n }\n\n get #triggerElement(): TooltipTriggerElement | null {\n return this.querySelector('media-tooltip-trigger') as TooltipTriggerElement | null;\n }\n\n get #portalElement(): TooltipPortalElement | null {\n return this.querySelector('media-tooltip-portal') as TooltipPortalElement | null;\n }\n\n get #positionerElement(): TooltipPositionerElement | null {\n return this.#portalElement?.querySelector('media-tooltip-positioner') as TooltipPositionerElement | null;\n }\n\n get #popupElement(): TooltipPopupElement | null {\n return this.#portalElement?.querySelector('media-tooltip-popup') as TooltipPopupElement | null;\n }\n\n #setOpen(open: boolean): void {\n if (this.#open === open) return;\n\n this.#open = open;\n\n if (open) {\n this.#transitionStatus = 'initial';\n requestAnimationFrame(() => {\n this.#transitionStatus = 'open';\n this.#updateVisibility();\n });\n } else {\n this.#transitionStatus = 'close';\n }\n\n this.#updateVisibility();\n\n if (open) {\n this.#setupFloating();\n } else {\n this.#cleanup?.();\n this.#cleanup = null;\n }\n }\n\n #updateVisibility(): void {\n this.style.display = 'contents';\n\n if (this.#popupElement) {\n const placement = this.#positionerElement?.side ?? 'top';\n this.#popupElement.setAttribute('data-side', placement);\n\n this.#popupElement.toggleAttribute('data-starting-style', this.#transitionStatus === 'initial');\n this.#popupElement.toggleAttribute('data-open', this.#transitionStatus === 'initial' || this.#transitionStatus === 'open');\n this.#popupElement.toggleAttribute('data-ending-style', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n this.#popupElement.toggleAttribute('data-closed', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n }\n\n const triggerElement = this.#triggerElement?.firstElementChild as HTMLElement;\n if (triggerElement) {\n triggerElement.toggleAttribute('data-popup-open', this.#open);\n }\n }\n\n #setupFloating(): void {\n if (!this.#triggerElement || !this.#popupElement) return;\n\n const trigger = this.#triggerElement.firstElementChild as HTMLElement;\n const popup = this.#popupElement;\n\n if (!trigger || !popup) return;\n\n const placement = this.#positionerElement?.side ?? 'top';\n const sideOffset = this.#positionerElement?.sideOffset ?? 0;\n const collisionPadding = this.#positionerElement?.collisionPadding ?? 0;\n const mediaContainer = this.closest('media-container') as MediaContainerElement;\n\n this.#arrowElement = popup.querySelector('media-tooltip-arrow') as HTMLElement;\n\n const updatePosition = () => {\n const middleware = [\n offset(sideOffset),\n flip(),\n shift({\n boundary: mediaContainer,\n padding: collisionPadding,\n }),\n ];\n\n if (this.#arrowElement) {\n middleware.push(arrow({ element: this.#arrowElement }));\n }\n\n const referenceElement = this.trackCursorAxis\n ? {\n getBoundingClientRect: () => {\n const triggerRect = trigger.getBoundingClientRect();\n\n if (this.trackCursorAxis === 'x') {\n return {\n width: 0,\n height: 0,\n top: triggerRect.top,\n right: this.#pointerPosition.x,\n bottom: triggerRect.bottom,\n left: this.#pointerPosition.x,\n x: this.#pointerPosition.x,\n y: triggerRect.top,\n };\n } else if (this.trackCursorAxis === 'y') {\n return {\n width: 0,\n height: 0,\n top: this.#pointerPosition.y,\n right: triggerRect.right,\n bottom: this.#pointerPosition.y,\n left: triggerRect.left,\n x: triggerRect.left,\n y: this.#pointerPosition.y,\n };\n } else {\n // Track both axes (trackCursorAxis === 'both')\n return {\n width: 0,\n height: 0,\n top: this.#pointerPosition.y,\n right: this.#pointerPosition.x,\n bottom: this.#pointerPosition.y,\n left: this.#pointerPosition.x,\n x: this.#pointerPosition.x,\n y: this.#pointerPosition.y,\n };\n }\n },\n }\n : trigger;\n\n computePosition(referenceElement, popup, {\n placement,\n middleware,\n }).then(({ x, y, middlewareData, placement: computedPlacement }: { x: number; y: number; middlewareData: any; placement: Placement }) => {\n Object.assign(popup.style, {\n left: `${x}px`,\n top: `${y}px`,\n });\n\n popup.setAttribute('data-side', computedPlacement);\n\n if (this.#arrowElement && middlewareData.arrow) {\n const { x: arrowX, y: arrowY } = middlewareData.arrow;\n Object.assign(this.#arrowElement.style, {\n left: arrowX != null ? `${arrowX}px` : undefined,\n top: arrowY != null ? `${arrowY}px` : undefined,\n });\n }\n });\n };\n\n updatePosition();\n\n if (!this.trackCursorAxis) {\n this.#cleanup = autoUpdate(trigger, popup, updatePosition);\n }\n }\n\n #updatePosition(): void {\n if (this.#open && this.trackCursorAxis) {\n this.#setupFloating();\n }\n }\n\n #clearHoverTimeout(): void {\n if (this.#hoverTimeout) {\n clearTimeout(this.#hoverTimeout);\n this.#hoverTimeout = null;\n }\n }\n\n #handlePointerEnter(): void {\n this.#clearHoverTimeout();\n this.#hoverTimeout = globalThis.setTimeout(() => {\n this.#setOpen(true);\n }, this.delay);\n }\n\n #handlePointerLeave(_event: PointerEvent): void {\n this.#clearHoverTimeout();\n this.#hoverTimeout = globalThis.setTimeout(() => {\n this.#setOpen(false);\n }, this.closeDelay);\n }\n\n #handlePointerMove(event: PointerEvent): void {\n if (this.trackCursorAxis) {\n this.#pointerPosition = { x: event.clientX, y: event.clientY };\n\n if (this.#open) {\n this.#updatePosition();\n }\n }\n }\n}\n\nexport class TooltipTriggerElement extends HTMLElement {\n connectedCallback(): void {\n this.style.display = 'contents';\n\n const triggerElement = this.firstElementChild as HTMLElement;\n if (triggerElement) {\n const mutationObserver = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (mutation.type === 'attributes') {\n const rootElement = this.closest('media-tooltip') as TooltipRootElement;\n let popupElement = rootElement.querySelector('media-tooltip-popup') as TooltipPopupElement;\n\n if (!popupElement) {\n const portalElement = rootElement.querySelector('media-tooltip-portal') as TooltipPortalElement;\n if (!portalElement) {\n return;\n }\n\n popupElement = portalElement.querySelector('media-tooltip-popup') as TooltipPopupElement;\n if (!popupElement) {\n return;\n }\n }\n\n const attributeName = mutation.attributeName;\n if (!attributeName || !attributeName.startsWith('data-')) {\n return;\n }\n\n const attributeValue = triggerElement.getAttribute(attributeName);\n if (attributeValue !== null) {\n popupElement.setAttribute(attributeName, attributeValue);\n } else {\n popupElement.removeAttribute(attributeName);\n }\n }\n });\n });\n\n mutationObserver.observe(triggerElement, {\n attributes: true,\n });\n }\n }\n}\n\nexport class TooltipPortalElement extends HTMLElement {\n #portal: HTMLElement | null = null;\n\n connectedCallback(): void {\n this.style.display = 'contents';\n this.#setupPortal();\n }\n\n disconnectedCallback(): void {\n this.#cleanupPortal();\n }\n\n querySelector(selector: string): HTMLElement | null {\n return this.#portal?.querySelector(selector) ?? null;\n }\n\n #setupPortal(): void {\n const portalId = this.getAttribute('root-id') ?? '@default_portal_id';\n if (!portalId) return;\n\n /* @TODO We need to make sure portal logic is non-brittle longer term (CJP) */\n // NOTE: Hacky solution in part to ensure styling propogates from skin to container's baked in portal (TL;DR - Shadow DOM vs. Light DOM CSS) (CJP)\n const portalContainer\n = ((this.getRootNode() as ShadowRoot | Document).getElementById(portalId)\n ?? (this.getRootNode() as ShadowRoot | Document)\n .querySelector('media-container')\n ?.shadowRoot\n ?.getElementById(portalId))\n ? (this.getRootNode() as ShadowRoot | Document).querySelector('media-container')\n : undefined;\n if (!portalContainer) return;\n\n this.#portal = document.createElement('div');\n this.#portal.slot = 'portal';\n this.#portal.id = uniqueId();\n portalContainer.append(this.#portal);\n\n this.#portal.append(...this.children);\n }\n\n #cleanupPortal(): void {\n if (!this.#portal) return;\n\n // Move children back to the portal element\n this.append(...this.#portal.children);\n this.#portal.remove();\n this.#portal = null;\n }\n}\n\nexport class TooltipPositionerElement extends HTMLElement {\n connectedCallback(): void {\n this.style.display = 'contents';\n\n const popup = this.firstElementChild as HTMLElement;\n if (popup) {\n Object.assign(popup.style, {\n position: 'absolute',\n top: '0',\n left: '0',\n });\n }\n }\n\n get side(): Placement {\n return (this.getAttribute('side') as Placement) ?? 'top';\n }\n\n get sideOffset(): number {\n return Number.parseInt(this.getAttribute('side-offset') ?? '0', 10);\n }\n\n get collisionPadding(): number {\n return Number.parseInt(this.getAttribute('collision-padding') ?? '0', 10);\n }\n}\n\nexport class TooltipPopupElement extends HTMLElement {\n connectedCallback(): void {\n this.setAttribute('role', 'tooltip');\n }\n}\n\nexport class TooltipArrowElement extends HTMLElement {\n connectedCallback(): void {\n this.setAttribute('aria-hidden', 'true');\n }\n}\n\nexport const TooltipElement: {\n Root: typeof TooltipRootElement;\n Trigger: typeof TooltipTriggerElement;\n Portal: typeof TooltipPortalElement;\n Positioner: typeof TooltipPositionerElement;\n Popup: typeof TooltipPopupElement;\n Arrow: typeof TooltipArrowElement;\n} = {\n Root: TooltipRootElement,\n Trigger: TooltipTriggerElement,\n Portal: TooltipPortalElement,\n Positioner: TooltipPositionerElement,\n Popup: TooltipPopupElement,\n Arrow: TooltipArrowElement,\n};\n"],"mappings":"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"}
|