@videojs/html 0.1.0-preview.4 → 0.1.0-preview.6
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.d.ts +1 -1
- package/dist/define/index.js +6 -6
- package/dist/define/media-popover.js +2 -2
- package/dist/define/media-tooltip.js +2 -2
- package/dist/define/video-provider.d.ts +1 -0
- package/dist/define/video-provider.js +3 -0
- package/dist/index.d.ts +5 -32
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -5
- 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-skin-mHWwUPg3.js → media-skin-CxnuHwhu.js} +1 -1
- package/dist/{media-skin-mHWwUPg3.js.map → media-skin-CxnuHwhu.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 +1 -1
- package/dist/skins/frosted.d.ts.map +1 -1
- package/dist/skins/frosted.js +61 -60
- package/dist/skins/frosted.js.map +1 -1
- package/dist/skins/minimal.d.ts +1 -1
- package/dist/skins/minimal.d.ts.map +1 -1
- package/dist/skins/minimal.js +60 -59
- package/dist/skins/minimal.js.map +1 -1
- package/dist/tooltip-CJpujx2f.js +219 -0
- package/dist/tooltip-CJpujx2f.js.map +1 -0
- package/dist/video-provider-BCGedOLm.js +8 -0
- package/dist/video-provider-BCGedOLm.js.map +1 -0
- package/dist/{media-provider-CyoL0bCx.js → video-provider-BKDqoKFf.js} +4 -4
- package/dist/{media-provider-CyoL0bCx.js.map → video-provider-BKDqoKFf.js.map} +1 -1
- package/package.json +4 -4
- package/dist/define/media-provider.d.ts +0 -1
- package/dist/define/media-provider.js +0 -3
- package/dist/media-provider-D_GL2_DN.js +0 -8
- package/dist/media-provider-D_GL2_DN.js.map +0 -1
- 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/{media-provider-D7P2TLXG.d.ts → video-provider-BcBuWpx6.d.ts} +0 -0
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import { t as MediaProviderElement } from "./media-provider-CyoL0bCx.js";
|
|
2
|
-
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
3
|
-
|
|
4
|
-
//#region src/define/media-provider.ts
|
|
5
|
-
defineCustomElement("media-provider", MediaProviderElement);
|
|
6
|
-
|
|
7
|
-
//#endregion
|
|
8
|
-
//# sourceMappingURL=media-provider-D_GL2_DN.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"media-provider-D_GL2_DN.js","names":[],"sources":["../src/define/media-provider.ts"],"sourcesContent":["import { MediaProviderElement } from '@/media/media-provider';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-provider', MediaProviderElement);\n"],"mappings":";;;;AAGA,oBAAoB,kBAAkB,qBAAqB"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { a as TooltipPositionerElement, i as TooltipPortalElement, o as TooltipRootElement, r as TooltipPopupElement, s as TooltipTriggerElement, t as TooltipArrowElement } from "./tooltip-54fBUUpb.js";
|
|
2
|
-
import { t as defineCustomElement } from "./custom-element-3bDlB2XO.js";
|
|
3
|
-
|
|
4
|
-
//#region src/define/media-tooltip.ts
|
|
5
|
-
defineCustomElement("media-tooltip", TooltipRootElement);
|
|
6
|
-
defineCustomElement("media-tooltip-trigger", TooltipTriggerElement);
|
|
7
|
-
defineCustomElement("media-tooltip-portal", TooltipPortalElement);
|
|
8
|
-
defineCustomElement("media-tooltip-positioner", TooltipPositionerElement);
|
|
9
|
-
defineCustomElement("media-tooltip-portal", TooltipPortalElement);
|
|
10
|
-
defineCustomElement("media-tooltip-popup", TooltipPopupElement);
|
|
11
|
-
defineCustomElement("media-tooltip-arrow", TooltipArrowElement);
|
|
12
|
-
|
|
13
|
-
//#endregion
|
|
14
|
-
//# sourceMappingURL=media-tooltip-ClcVafMb.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"media-tooltip-ClcVafMb.js","names":[],"sources":["../src/define/media-tooltip.ts"],"sourcesContent":["import { TooltipArrowElement, TooltipPopupElement, TooltipPortalElement, TooltipPositionerElement, TooltipRootElement, TooltipTriggerElement } from '@/elements/tooltip';\nimport { defineCustomElement } from '@/utils/custom-element';\n\ndefineCustomElement('media-tooltip', TooltipRootElement);\ndefineCustomElement('media-tooltip-trigger', TooltipTriggerElement);\ndefineCustomElement('media-tooltip-portal', TooltipPortalElement);\ndefineCustomElement('media-tooltip-positioner', TooltipPositionerElement);\ndefineCustomElement('media-tooltip-portal', TooltipPortalElement);\ndefineCustomElement('media-tooltip-popup', TooltipPopupElement);\ndefineCustomElement('media-tooltip-arrow', TooltipArrowElement);\n"],"mappings":";;;;AAGA,oBAAoB,iBAAiB,mBAAmB;AACxD,oBAAoB,yBAAyB,sBAAsB;AACnE,oBAAoB,wBAAwB,qBAAqB;AACjE,oBAAoB,4BAA4B,yBAAyB;AACzE,oBAAoB,wBAAwB,qBAAqB;AACjE,oBAAoB,uBAAuB,oBAAoB;AAC/D,oBAAoB,uBAAuB,oBAAoB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"popover-Dc0hyhwB.js","names":["#abortController","#triggerElement","#clearHoverTimeout","#cleanup","#handlePointerEnter","#handlePointerLeave","#handlePointerMove","#handleFocusIn","#handleFocusOut","#open","#setupFloating","#transitionStatus","#updateVisibility","#floatingContext","#hoverTimeout","#addPointerMoveListener","#setOpen"],"sources":["../src/elements/popover.ts"],"sourcesContent":["import type { ComputePositionReturn } from '@floating-ui/core';\nimport type { Placement } from '@floating-ui/dom';\nimport { autoUpdate, computePosition, flip, offset, shift } from '@floating-ui/dom';\nimport { contains, getDocument, getDocumentOrShadowRoot, safePolygon } from '@videojs/utils/dom';\n\ntype Prettify<T> = {\n [K in keyof T]: T[K];\n};\n\ntype FloatingContext = Prettify<ComputePositionReturn> & {\n elements: {\n domReference: HTMLElement;\n floating: HTMLElement;\n };\n};\n\nexport class PopoverElement extends HTMLElement {\n #open = false;\n #transitionStatus: 'initial' | 'open' | 'close' | 'unmounted' = 'initial';\n #hoverTimeout: ReturnType<typeof setTimeout> | null = null;\n #cleanup: (() => void) | null = null;\n #abortController: AbortController | null = null;\n #floatingContext: FloatingContext | null = null;\n\n connectedCallback(): void {\n this.#abortController ??= new AbortController();\n const { signal } = this.#abortController;\n\n const trigger = this.#triggerElement as HTMLElement;\n if (trigger) {\n if (globalThis.matchMedia?.('(hover: hover)')?.matches) {\n trigger.addEventListener('pointerenter', this, { signal });\n trigger.addEventListener('pointerleave', this, { signal });\n }\n\n trigger.addEventListener('focusin', this, { signal });\n trigger.addEventListener('focusout', this, { signal });\n }\n\n this.addEventListener('pointerenter', this, { signal });\n this.addEventListener('focusout', this, { signal });\n }\n\n disconnectedCallback(): void {\n this.#clearHoverTimeout();\n this.#cleanup?.();\n\n this.#abortController?.abort();\n this.#abortController = null;\n }\n\n handleEvent(event: Event): void {\n switch (event.type) {\n case 'pointerenter':\n this.#handlePointerEnter(event as PointerEvent);\n break;\n case 'pointerleave':\n this.#handlePointerLeave(event as PointerEvent);\n break;\n case 'pointermove':\n this.#handlePointerMove(event as PointerEvent);\n break;\n case 'focusin':\n this.#handleFocusIn(event as FocusEvent);\n break;\n case 'focusout':\n this.#handleFocusOut(event as FocusEvent);\n break;\n default:\n break;\n }\n }\n\n static get observedAttributes(): string[] {\n return ['open-on-hover', 'delay', 'close-delay', 'side', 'side-offset'];\n }\n\n get openOnHover(): boolean {\n return this.hasAttribute('open-on-hover');\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 side(): Placement {\n return this.getAttribute('side') as Placement;\n }\n\n get sideOffset(): number {\n return Number.parseInt(this.getAttribute('side-offset') ?? '0', 10);\n }\n\n get #triggerElement(): HTMLElement | null {\n return getDocumentOrShadowRoot(this)?.querySelector(`[popovertarget=\"${this.id}\"]`) as HTMLElement | 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.#setupFloating();\n\n this.#transitionStatus = 'initial';\n this.#updateVisibility();\n\n this.showPopover();\n\n requestAnimationFrame(() => {\n this.#transitionStatus = 'open';\n this.#updateVisibility();\n });\n } else {\n this.#transitionStatus = 'close';\n this.#updateVisibility();\n\n const transitions = this.getAnimations().filter(anim => anim instanceof CSSTransition);\n if (transitions.length > 0) {\n Promise.all(transitions.map(t => t.finished))\n .then(() => this.hidePopover())\n .catch(() => this.hidePopover());\n } else {\n this.hidePopover();\n }\n }\n }\n\n #updateVisibility(): void {\n this.toggleAttribute('data-starting-style', this.#transitionStatus === 'initial');\n this.toggleAttribute('data-open', this.#transitionStatus === 'initial' || this.#transitionStatus === 'open');\n this.toggleAttribute('data-ending-style', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n this.toggleAttribute('data-closed', this.#transitionStatus === 'close' || this.#transitionStatus === 'unmounted');\n }\n\n #setupFloating(): void {\n const trigger = this.#triggerElement as HTMLElement;\n if (!trigger) return;\n\n const placement = this.side ?? 'top';\n const sideOffset = this.sideOffset;\n\n const updatePosition = () => {\n computePosition(trigger, this, {\n placement,\n middleware: [offset(sideOffset), flip(), shift()],\n strategy: 'fixed',\n }).then((data: ComputePositionReturn) => {\n this.#floatingContext = {\n ...data,\n elements: {\n domReference: trigger,\n floating: this,\n },\n };\n\n Object.assign(this.style, {\n left: `${data.x}px`,\n top: `${data.y}px`,\n });\n });\n };\n\n updatePosition();\n this.#cleanup = autoUpdate(trigger, this, updatePosition);\n }\n\n #clearHoverTimeout(): void {\n if (this.#hoverTimeout) {\n globalThis.clearTimeout(this.#hoverTimeout);\n this.#hoverTimeout = null;\n }\n }\n\n #handlePointerEnter(event: PointerEvent): void {\n if (!this.openOnHover) return;\n\n this.#clearHoverTimeout();\n\n if (event.currentTarget === this) {\n this.#addPointerMoveListener();\n }\n\n if (this.#open) {\n return;\n }\n\n this.#hoverTimeout = globalThis.setTimeout(() => {\n this.#setOpen(true);\n }, this.delay);\n }\n\n #handlePointerLeave(_event: PointerEvent): void {\n this.#addPointerMoveListener();\n }\n\n #addPointerMoveListener(): void {\n if (!globalThis.matchMedia?.('(hover: hover)')?.matches) return;\n\n const { signal } = this.#abortController as AbortController;\n getDocument(this).documentElement.addEventListener('pointermove', this, { signal });\n }\n\n #handlePointerMove(event: PointerEvent): void {\n if (!this.openOnHover || !this.#floatingContext) return;\n\n const close = safePolygon({ blockPointerEvents: true })({\n ...this.#floatingContext,\n x: event.clientX,\n y: event.clientY,\n onClose: () => {\n getDocument(this).documentElement.removeEventListener('pointermove', this);\n\n this.#clearHoverTimeout();\n this.#hoverTimeout = globalThis.setTimeout(() => {\n this.#setOpen(false);\n }, this.closeDelay);\n },\n });\n close(event);\n }\n\n #handleFocusIn(_event: FocusEvent): void {\n this.#setOpen(true);\n }\n\n #handleFocusOut(event: FocusEvent): void {\n const relatedTarget = event.relatedTarget as HTMLElement;\n if (relatedTarget && contains(this, relatedTarget)) return;\n\n this.#setOpen(false);\n };\n}\n"],"mappings":"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"}
|
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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"}
|
|
File without changes
|