>({});
- useEffect(() => {
- if (!tooltipRefs.current) return;
-
- for (const item of Object.values(tooltipRefs.current)) {
- const otherTooltips = Object.values(tooltipRefs.current).map(val => val.el).filter(el => el !== item.el);
- setTooltipPosition(item, otherTooltips);
- item.el.style.visibility = "visible";
- }
- }, [props.tooltips]);
+ useEffect(() => {
+ if (!tooltipRefs.current) return;
- return (
- <>
- {props.tooltips.map((tooltip) => (
- {
- if (el) {
- tooltipRefs.current[tooltip.key] = {
- el,
- tooltip,
- }
- } else {
- delete tooltipRefs.current[tooltip.key];
- }
- }}
- >
- {tooltip.eventName}
-
- ))}
-
- );
+ for (const item of Object.values(tooltipRefs.current)) {
+ const otherTooltips = Object.values(tooltipRefs.current)
+ .map((val) => val.el)
+ .filter((el) => el !== item.el);
+ setTooltipPosition(item, otherTooltips);
+ item.el.style.visibility = "visible";
+ }
+ }, [props.tooltips]);
+
+ return (
+ <>
+ {props.tooltips.map((tooltip) => (
+ {
+ if (el) {
+ tooltipRefs.current[tooltip.key] = {
+ el,
+ tooltip,
+ };
+ } else {
+ delete tooltipRefs.current[tooltip.key];
+ }
+ }}
+ >
+ {tooltip.eventName}
+
+ ))}
+
+ );
}
// Find tooltip position that is in the window bounds and doesn't overlap with other tooltips.
-function setTooltipPosition(item: TooltipsRefItem, instances: HTMLDivElement[]) {
- for (let i = 0; i < 9; i++) {
- // Get base position and position the tooltip.
- const position = positionFinder(item.tooltip.eventEl.getBoundingClientRect(), item.el, i);
- item.el.style.inset = `${position.top} auto auto ${position.left}`;
-
- // Check if tooltip is in the window bounds.
- const withinBounds = !inWindowBounds(
- item.el.getBoundingClientRect().left,
- item.el.getBoundingClientRect().top + window.scrollY,
- item.el.getBoundingClientRect().right,
- item.el.getBoundingClientRect().bottom + window.scrollY,
- );
- if (!withinBounds) continue;
-
- // Check if tooltip overlaps with others.
- let valid = true;
- for (let j = 0; j < instances.length - 1; j++) {
- const neighbor = instances[j];
- if (isOverlapping(item.el, neighbor)) {
- valid = false;
- }
- }
- if (valid) break;
+function setTooltipPosition(
+ item: TooltipsRefItem,
+ instances: HTMLDivElement[]
+) {
+ for (let i = 0; i < 9; i++) {
+ // Get base position and position the tooltip.
+ const position = positionFinder(
+ item.tooltip.eventEl.getBoundingClientRect(),
+ item.el,
+ i
+ );
+ item.el.style.inset = `${position.top} auto auto ${position.left}`;
+
+ // Check if tooltip is in the window bounds.
+ const withinBounds = !inWindowBounds(
+ item.el.getBoundingClientRect().left,
+ item.el.getBoundingClientRect().top + window.scrollY,
+ item.el.getBoundingClientRect().right,
+ item.el.getBoundingClientRect().bottom + window.scrollY
+ );
+ if (!withinBounds) continue;
+
+ // Check if tooltip overlaps with others.
+ let valid = true;
+ for (let j = 0; j < instances.length - 1; j++) {
+ const neighbor = instances[j];
+ if (isOverlapping(item.el, neighbor)) {
+ valid = false;
+ }
}
+ if (valid) break;
+ }
}
// Check if two tooltips are overlapping with each other.
-function isOverlapping(tooltip: HTMLDivElement, futureNeighbor: HTMLDivElement): boolean {
- const y1 = tooltip.getBoundingClientRect().top + window.scrollY;
- const x1 = tooltip.getBoundingClientRect().left;
- const y2 = y1 + tooltip.clientHeight;
- const x2 = x1 + tooltip.clientWidth;
-
- const b1 = futureNeighbor.getBoundingClientRect().top + window.scrollY;
- const a1 = futureNeighbor.getBoundingClientRect().left;
- const b2 = b1 + futureNeighbor.clientHeight;
- const a2 = a1 + futureNeighbor.clientWidth;
-
- const check = (
- x1: number,
- y1: number,
- a1: number,
- b1: number,
- x2: number,
- y2: number,
- a2: number,
- b2: number
- ) => {
- return (a1 <= x2 && x2 <= a2 && b1 <= y2 && y2 <= b2) ||
- (a1 <= x1 && x1 <= a2 && b1 <= y1 && y1 <= b2) ||
- (a1 <= x1 && x1 <= a2 && b1 <= y2 && y2 <= b2) ||
- (a1 <= x2 && x2 <= a2 && b1 <= y1 && y1 <= b2);
- };
+function isOverlapping(
+ tooltip: HTMLDivElement,
+ futureNeighbor: HTMLDivElement
+): boolean {
+ const y1 = tooltip.getBoundingClientRect().top + window.scrollY;
+ const x1 = tooltip.getBoundingClientRect().left;
+ const y2 = y1 + tooltip.clientHeight;
+ const x2 = x1 + tooltip.clientWidth;
+
+ const b1 = futureNeighbor.getBoundingClientRect().top + window.scrollY;
+ const a1 = futureNeighbor.getBoundingClientRect().left;
+ const b2 = b1 + futureNeighbor.clientHeight;
+ const a2 = a1 + futureNeighbor.clientWidth;
+
+ const check = (
+ x1: number,
+ y1: number,
+ a1: number,
+ b1: number,
+ x2: number,
+ y2: number,
+ a2: number,
+ b2: number
+ ) => {
+ return (
+ (a1 <= x2 && x2 <= a2 && b1 <= y2 && y2 <= b2) ||
+ (a1 <= x1 && x1 <= a2 && b1 <= y1 && y1 <= b2) ||
+ (a1 <= x1 && x1 <= a2 && b1 <= y2 && y2 <= b2) ||
+ (a1 <= x2 && x2 <= a2 && b1 <= y1 && y1 <= b2)
+ );
+ };
- return check(x1, y1, a1, b1, x2, y2, a2, b2) || check(a1, b1, x1, y1, a2, b2, x2, y2);
+ return (
+ check(x1, y1, a1, b1, x2, y2, a2, b2) ||
+ check(a1, b1, x1, y1, a2, b2, x2, y2)
+ );
}
// Check if a tooltip is within the window bounds.
function inWindowBounds(x1: number, y1: number, x2: number, y2: number) {
- return (x1 < 0 || x2 > window.innerWidth) ||
- (y1 < 0 || y2 > document.documentElement.scrollHeight);
-};
+ return (
+ x1 < 0 ||
+ x2 > window.innerWidth ||
+ y1 < 0 ||
+ y2 > document.documentElement.scrollHeight
+ );
+}
// Possible positions for a given tooltip around it's target element.
-function positionFinder (rect: DOMRect, tooltip: HTMLDivElement, index: number) {
- const tooltipHeight = tooltip.clientHeight;
- const tooltipWidth = tooltip.clientWidth;
-
- let left;
- let top;
- switch (index) {
- // case 'top-left'
- case 0: {
- top = (window.scrollY + rect.top - tooltipHeight) + 'px';
- left = (rect.left - tooltipWidth) + 'px';
- break;
- }
- // case 'top-inner-left'
- case 1: {
- top = (window.scrollY + rect.top - tooltipHeight) + 'px';
- left = rect.left + 'px';
- break;
- }
- // case 'top-right'
- case 2: {
- top = (window.scrollY + rect.top - tooltipHeight) + 'px';
- left = rect.right + 'px';
- break;
- }
- // case 'top-inner-right'
- case 3: {
- top = (window.scrollY + rect.top - tooltipHeight) + 'px';
- left = (rect.right - tooltipWidth) + 'px';
- break;
- }
- // case 'bottom-left'
- case 4: {
- top = (window.scrollY + rect.bottom) + 'px';
- left = (rect.left - tooltipWidth) + 'px';
- break;
- }
- // case 'bottom-inner-left'
- case 5: {
- top = (window.scrollY + rect.bottom) + 'px';
- left = rect.left + 'px';
- break;
- }
- // case 'bottom-inner-right'
- case 6: {
- top = (window.scrollY + rect.bottom) + 'px';
- left = (rect.right - tooltipWidth) + 'px';
- break;
- }
- // case 'bottom-right'
- case 7: {
- top = (window.scrollY + rect.bottom) + 'px';
- left = rect.right + 'px';
- break;
- }
- default: {
- top = 0;
- left = 0;
- }
+function positionFinder(rect: DOMRect, tooltip: HTMLDivElement, index: number) {
+ const tooltipHeight = tooltip.clientHeight;
+ const tooltipWidth = tooltip.clientWidth;
+
+ let left;
+ let top;
+ switch (index) {
+ // case 'top-left'
+ case 0: {
+ top = window.scrollY + rect.top - tooltipHeight + "px";
+ left = rect.left - tooltipWidth + "px";
+ break;
+ }
+ // case 'top-inner-left'
+ case 1: {
+ top = window.scrollY + rect.top - tooltipHeight + "px";
+ left = rect.left + "px";
+ break;
+ }
+ // case 'top-right'
+ case 2: {
+ top = window.scrollY + rect.top - tooltipHeight + "px";
+ left = rect.right + "px";
+ break;
}
+ // case 'top-inner-right'
+ case 3: {
+ top = window.scrollY + rect.top - tooltipHeight + "px";
+ left = rect.right - tooltipWidth + "px";
+ break;
+ }
+ // case 'bottom-left'
+ case 4: {
+ top = window.scrollY + rect.bottom + "px";
+ left = rect.left - tooltipWidth + "px";
+ break;
+ }
+ // case 'bottom-inner-left'
+ case 5: {
+ top = window.scrollY + rect.bottom + "px";
+ left = rect.left + "px";
+ break;
+ }
+ // case 'bottom-inner-right'
+ case 6: {
+ top = window.scrollY + rect.bottom + "px";
+ left = rect.right - tooltipWidth + "px";
+ break;
+ }
+ // case 'bottom-right'
+ case 7: {
+ top = window.scrollY + rect.bottom + "px";
+ left = rect.right + "px";
+ break;
+ }
+ default: {
+ top = 0;
+ left = 0;
+ }
+ }
- return {
- top: top,
- left: left
- };
+ return {
+ top: top,
+ left: left,
+ };
}
diff --git a/packages/sites-components/src/components/analytics/interfaces.ts b/packages/sites-components/src/components/analytics/interfaces.ts
index 6a37e063..a2d9406f 100644
--- a/packages/sites-components/src/components/analytics/interfaces.ts
+++ b/packages/sites-components/src/components/analytics/interfaces.ts
@@ -52,8 +52,8 @@ export interface AnalyticsMethods {
enableTrackingCookie(): void;
/**
- * Use the getDebugEnabled method retrieve whether debugging is on or off.
- */
+ * Use the getDebugEnabled method retrieve whether debugging is on or off.
+ */
getDebugEnabled(): boolean;
/**
diff --git a/packages/sites-components/src/components/analytics/provider.tsx b/packages/sites-components/src/components/analytics/provider.tsx
index 40f6b122..b37daf43 100644
--- a/packages/sites-components/src/components/analytics/provider.tsx
+++ b/packages/sites-components/src/components/analytics/provider.tsx
@@ -53,10 +53,10 @@ export function AnalyticsProvider(
return (
<>
-
- {children}
-
- {(enableDebugging ?? enableDebuggingDefault) ? : null}
+
+ {children}
+
+ {enableDebugging ?? enableDebuggingDefault ? : null}
);
}
diff --git a/packages/sites-components/src/components/analytics/types.ts b/packages/sites-components/src/components/analytics/types.ts
index cc8f1b2f..1d4da9da 100644
--- a/packages/sites-components/src/components/analytics/types.ts
+++ b/packages/sites-components/src/components/analytics/types.ts
@@ -12,9 +12,9 @@ export interface TemplateProps> {
export type EventNode = {
scope: HTMLElement;
events: HTMLElement[];
-}
+};
-export type EventData = Record;
+export type EventData = Record;
export type DebuggerTabs = "Events" | "Scopes";
@@ -22,22 +22,22 @@ export type Tooltip = {
eventEl: HTMLElement;
eventName: string;
key: string;
-}
+};
export type TabProps = {
data: EventData;
setTooltips: React.Dispatch>;
-}
+};
export type TooltipHandlerProps = {
tooltips: Tooltip[];
-}
+};
export type TooltipProps = {
tooltip: Tooltip;
-}
+};
export type TooltipsRefItem = {
el: HTMLDivElement;
tooltip: Tooltip;
-}
+};