From 153ac58b79c7445d5351e93f4c75cc8085e401c7 Mon Sep 17 00:00:00 2001 From: binrysearch Date: Tue, 18 Jun 2024 21:55:38 +0100 Subject: [PATCH] setPositionRelativeTo --- src/core/setHelperLayerPosition.ts | 46 ------------------- src/packages/tour/position.ts | 20 +++++++++ src/packages/tour/refresh.ts | 49 +++++++++++---------- src/packages/tour/removeShowElement.ts | 2 +- src/packages/tour/setHelperLayerPosition.ts | 47 -------------------- src/packages/tour/showElement.ts | 39 +++++++++++++--- src/util/setPositionRelativeTo.ts | 38 ++++++++++++++++ 7 files changed, 117 insertions(+), 124 deletions(-) delete mode 100644 src/core/setHelperLayerPosition.ts create mode 100644 src/packages/tour/position.ts delete mode 100644 src/packages/tour/setHelperLayerPosition.ts create mode 100644 src/util/setPositionRelativeTo.ts diff --git a/src/core/setHelperLayerPosition.ts b/src/core/setHelperLayerPosition.ts deleted file mode 100644 index 58951fe81..000000000 --- a/src/core/setHelperLayerPosition.ts +++ /dev/null @@ -1,46 +0,0 @@ -import getOffset from "../util/getOffset"; -import isFixed from "../util/isFixed"; -import { addClass } from "../util/className"; -import removeClass from "../util/removeClass"; -import setStyle from "../util/setStyle"; -import { TooltipPosition } from "./placeTooltip"; - -/** - * Update the position of the helper layer on the screen - * - * @api private - */ -export default function setHelperLayerPosition( - targetElement: HTMLElement, - helperLayer: HTMLElement, - stepElement: HTMLElement, - stepPosition: TooltipPosition, - helperElementPadding: number -) { - if (!helperLayer || !targetElement || !stepElement) { - return; - } - - const elementPosition = getOffset(stepElement as HTMLElement, targetElement); - - // If the target element is fixed, the tooltip should be fixed as well. - // Otherwise, remove a fixed class that may be left over from the previous - // step. - if (stepElement instanceof Element && isFixed(stepElement)) { - addClass(helperLayer, "introjs-fixedTooltip"); - } else { - removeClass(helperLayer, "introjs-fixedTooltip"); - } - - if (stepPosition === "floating") { - helperElementPadding = 0; - } - - //set new position to helper layer - setStyle(helperLayer, { - width: `${elementPosition.width + helperElementPadding}px`, - height: `${elementPosition.height + helperElementPadding}px`, - top: `${elementPosition.top - helperElementPadding / 2}px`, - left: `${elementPosition.left - helperElementPadding / 2}px`, - }); -} diff --git a/src/packages/tour/position.ts b/src/packages/tour/position.ts new file mode 100644 index 000000000..2c1aba139 --- /dev/null +++ b/src/packages/tour/position.ts @@ -0,0 +1,20 @@ +import { setPositionRelativeTo } from "../../util/setPositionRelativeTo"; +import { TourStep } from "./steps"; + +/** + * Sets the position of the element relative to the TourStep + * @api private + */ +export const setPositionRelativeToStep = ( + relativeElement: HTMLElement, + element: HTMLElement, + step: TourStep, + padding: number +) => { + setPositionRelativeTo( + relativeElement, + element, + step.element as HTMLElement, + step.position === "floating" ? 0 : padding + ); +}; diff --git a/src/packages/tour/refresh.ts b/src/packages/tour/refresh.ts index a1c62e5f6..05c495b61 100644 --- a/src/packages/tour/refresh.ts +++ b/src/packages/tour/refresh.ts @@ -1,11 +1,14 @@ -import { reAlignHints } from "../../core/hint"; -import setHelperLayerPosition from "../../core/setHelperLayerPosition"; import placeTooltip from "../../core/placeTooltip"; -import fetchIntroSteps from "./fetchSteps"; import { _recreateBullets, _updateProgressBar } from "./showElement"; import { Tour } from "./tour"; import { getElementByClassName } from "src/util/queryElement"; -import { disableInteractionClassName, helperLayerClassName, tooltipReferenceLayerClassName } from "./classNames"; +import { + disableInteractionClassName, + helperLayerClassName, + tooltipReferenceLayerClassName, +} from "./classNames"; +import { setPositionRelativeToStep } from "./position"; +import { fetchSteps } from "./steps"; /** * Update placement of the intro objects on the screen @@ -28,33 +31,30 @@ export default function refresh(tour: Tour, refreshSteps?: boolean) { // re-align intros const targetElement = tour.getTargetElement(); - const helperLayerPadding = tour.getOption('helperElementPadding'); - setHelperLayerPosition( + const helperLayerPadding = tour.getOption("helperElementPadding"); + setPositionRelativeToStep( targetElement, helperLayer, - step.element as HTMLElement, - step.position, + step, helperLayerPadding ); - setHelperLayerPosition( + setPositionRelativeToStep( targetElement, referenceLayer, - step.element as HTMLElement, - step.position, + step, helperLayerPadding ); - setHelperLayerPosition( + setPositionRelativeToStep( targetElement, disableInteractionLayer, - step.element as HTMLElement, - step.position, + step, helperLayerPadding ); if (refreshSteps) { - intro._introItems = fetchIntroSteps(intro, intro._targetElement); - _recreateBullets(intro, step); - _updateProgressBar(referenceLayer, currentStep, intro._introItems.length); + tour.setSteps(fetchSteps(tour)); + _recreateBullets(tour, step); + _updateProgressBar(referenceLayer, currentStep, tour.getSteps().length); } // re-align tooltip @@ -64,15 +64,16 @@ export default function refresh(tour: Tour, refreshSteps?: boolean) { if (oldTooltipContainer && oldArrowLayer) { placeTooltip( - intro, - intro._introItems[currentStep], oldTooltipContainer, - oldArrowLayer + oldArrowLayer, + step.element as HTMLElement, + step.position, + tour.getOption("positionPrecedence"), + tour.getOption("showStepNumbers"), + tour.getOption("autoPosition"), + step.tooltipClass ?? tour.getOption("tooltipClass") ); } - //re-align hints - reAlignHints(intro); - - return intro; + return tour; } diff --git a/src/packages/tour/removeShowElement.ts b/src/packages/tour/removeShowElement.ts index 17c60fd36..0a9259ef8 100644 --- a/src/packages/tour/removeShowElement.ts +++ b/src/packages/tour/removeShowElement.ts @@ -1,5 +1,5 @@ import { queryElementsByClassName } from "src/util/queryElement"; -import removeClass from "../../util/removeClass"; +import { removeClass } from "../../util/className"; import { showElementClassName } from "./classNames"; /** diff --git a/src/packages/tour/setHelperLayerPosition.ts b/src/packages/tour/setHelperLayerPosition.ts deleted file mode 100644 index 27779ea18..000000000 --- a/src/packages/tour/setHelperLayerPosition.ts +++ /dev/null @@ -1,47 +0,0 @@ -import getOffset from "../../util/getOffset"; -import isFixed from "../../util/isFixed"; -import { addClass, removeClass } from "../../util/className"; -import setStyle from "../../util/setStyle"; -import { TourStep } from "./steps"; -import { Tour } from "./tour"; -import { fixedTooltipClassName } from "./classNames"; - -/** - * Update the position of the helper layer on the screen - * - * @api private - */ -export default function setHelperLayerPosition( - tour: Tour, - step: TourStep, - helperLayer: HTMLElement -) { - if (!helperLayer || !step) return; - - const elementPosition = getOffset( - step.element as HTMLElement, - tour.getTargetElement() - ); - let widthHeightPadding = tour.getOption("helperElementPadding"); - - // If the target element is fixed, the tooltip should be fixed as well. - // Otherwise, remove a fixed class that may be left over from the previous - // step. - if (step.element instanceof Element && isFixed(step.element)) { - addClass(helperLayer, fixedTooltipClassName); - } else { - removeClass(helperLayer, fixedTooltipClassName); - } - - if (step.position === "floating") { - widthHeightPadding = 0; - } - - //set new position to helper layer - setStyle(helperLayer, { - width: `${elementPosition.width + widthHeightPadding}px`, - height: `${elementPosition.height + widthHeightPadding}px`, - top: `${elementPosition.top - widthHeightPadding / 2}px`, - left: `${elementPosition.left - widthHeightPadding / 2}px`, - }); -} diff --git a/src/packages/tour/showElement.ts b/src/packages/tour/showElement.ts index a47953514..74897fb84 100644 --- a/src/packages/tour/showElement.ts +++ b/src/packages/tour/showElement.ts @@ -5,7 +5,6 @@ import exitIntro from "./exitIntro"; import { addClass, setClass } from "../../util/className"; import setAnchorAsButton from "../../util/setAnchorAsButton"; import { TourStep, nextStep, previousStep } from "./steps"; -import setHelperLayerPosition from "./setHelperLayerPosition"; import placeTooltip from "../../core/placeTooltip"; import removeShowElement from "./removeShowElement"; import createElement from "../../util/createElement"; @@ -42,6 +41,7 @@ import { queryElement, queryElementByClassName, } from "../../util/queryElement"; +import { setPositionRelativeToStep } from "./position"; /** * Gets the current progress percentage @@ -72,7 +72,12 @@ export const _disableInteraction = (tour: Tour, step: TourStep) => { tour.getTargetElement().appendChild(disableInteractionLayer); } - setHelperLayerPosition(tour, step, disableInteractionLayer); + setPositionRelativeToStep( + tour.getTargetElement(), + disableInteractionLayer, + step, + tour.getOption("helperElementPadding") + ); }; /** @@ -304,8 +309,19 @@ export default async function _showElement(tour: Tour, step: TourStep) { ); // set new position to helper layer - setHelperLayerPosition(tour, step, oldHelperLayer); - setHelperLayerPosition(tour, step, oldReferenceLayer); + const helperLayerPadding = tour.getOption("helperElementPadding"); + setPositionRelativeToStep( + tour.getTargetElement(), + oldHelperLayer, + step, + helperLayerPadding + ); + setPositionRelativeToStep( + tour.getTargetElement(), + oldReferenceLayer, + step, + helperLayerPadding + ); //remove old classes if the element still exist removeShowElement(); @@ -415,8 +431,19 @@ export default async function _showElement(tour: Tour, step: TourStep) { ); //set new position to helper layer - setHelperLayerPosition(tour, step, helperLayer); - setHelperLayerPosition(tour, step, referenceLayer); + const helperLayerPadding = tour.getOption("helperElementPadding"); + setPositionRelativeToStep( + tour.getTargetElement(), + helperLayer, + step, + helperLayerPadding + ); + setPositionRelativeToStep( + tour.getTargetElement(), + referenceLayer, + step, + helperLayerPadding + ); //add helper layer to target element appendChild(tour.getTargetElement(), helperLayer, true); diff --git a/src/util/setPositionRelativeTo.ts b/src/util/setPositionRelativeTo.ts new file mode 100644 index 000000000..2db5bda06 --- /dev/null +++ b/src/util/setPositionRelativeTo.ts @@ -0,0 +1,38 @@ +import getOffset from "./getOffset"; +import isFixed from "./isFixed"; +import { removeClass, addClass } from "./className"; +import setStyle from "./setStyle"; + +/** + * Sets the position of the element relative to the target element + * @api private + */ +export const setPositionRelativeTo = ( + relativeElement: HTMLElement, + element: HTMLElement, + targetElement: HTMLElement, + padding: number +) => { + if (!element || !relativeElement || !targetElement) { + return; + } + + // If the target element is fixed, the tooltip should be fixed as well. + // Otherwise, remove a fixed class that may be left over from the previous + // step. + if (targetElement instanceof Element && isFixed(targetElement)) { + addClass(element, "introjs-fixedTooltip"); + } else { + removeClass(element, "introjs-fixedTooltip"); + } + + const position = getOffset(targetElement, relativeElement); + + //set new position to helper layer + setStyle(element, { + width: `${position.width + padding}px`, + height: `${position.height + padding}px`, + top: `${position.top - padding / 2}px`, + left: `${position.left - padding / 2}px`, + }); +};