From 42aa4bee6ad4b14f2b4d9a420c09db2284289e32 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Wed, 5 Jul 2023 14:20:06 +0100 Subject: [PATCH] Rename onPopoverRendered to onPopoverRender --- docs/src/content/guides/buttons.mdx | 6 +++--- docs/src/content/guides/configuration.mdx | 4 ++-- docs/src/content/guides/styling-popover.mdx | 6 +++--- docs/src/content/guides/theming.mdx | 4 ++-- index.html | 11 +++++------ package.json | 2 +- src/config.ts | 2 +- src/popover.ts | 14 +++++++------- 8 files changed, 24 insertions(+), 25 deletions(-) diff --git a/docs/src/content/guides/buttons.mdx b/docs/src/content/guides/buttons.mdx index c45c377..73164aa 100644 --- a/docs/src/content/guides/buttons.mdx +++ b/docs/src/content/guides/buttons.mdx @@ -235,7 +235,7 @@ You can use the `onNextClick`, `onPreviousClick` and `onCloseClick` callbacks to ## Custom Buttons -You can add custom buttons using `onPopoverRendered` callback. This callback is called every time a popover is rendered. In the following example, we are adding a custom button that takes the user to the first step. +You can add custom buttons using `onPopoverRender` callback. This callback is called before the popover is rendered. In the following example, we are adding a custom button that takes the user to the first step. { + onPopoverRender: (popover, { config, state }) => { const firstButton = document.createElement("button"); firstButton.innerText = "Go to First"; popover.footerButtons.appendChild(firstButton); diff --git a/docs/src/content/guides/configuration.mdx b/docs/src/content/guides/configuration.mdx index f4eb794..60df9a2 100644 --- a/docs/src/content/guides/configuration.mdx +++ b/docs/src/content/guides/configuration.mdx @@ -69,7 +69,7 @@ type Config = { // PopoverDOM is an object with references to // the popover DOM elements such as buttons // title, descriptions, body, container etc. - onPopoverRendered?: (popover: PopoverDOM, options: { config: Config; state: State }) => void; + onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void; // Hooks to run before and after highlighting // each step. Each hook receives the following @@ -163,7 +163,7 @@ type Popover = { // Parameter is an object with references to // the popover DOM elements such as buttons // title, descriptions, body, etc. - onPopoverRendered?: (popover: PopoverDOM, options: { config: Config; state: State }) => void; + onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void; // Callbacks for button clicks. You can use // these to add custom behavior to the buttons. diff --git a/docs/src/content/guides/styling-popover.mdx b/docs/src/content/guides/styling-popover.mdx index acb6a85..f675fc5 100644 --- a/docs/src/content/guides/styling-popover.mdx +++ b/docs/src/content/guides/styling-popover.mdx @@ -8,7 +8,7 @@ import { CodeSample } from "../../components/CodeSample.tsx"; You can either use the default class names and override the styles or you can pass a custom class name to the `popoverClass` option either globally or per step. -Alternatively, if want to modify the Popover DOM, you can use the `onPopoverRendered` callback to get the popover DOM element and do whatever you want with it. +Alternatively, if want to modify the Popover DOM, you can use the `onPopoverRender` callback to get the popover DOM element and do whatever you want with it before popover is rendered. We have added a few examples below but have a look at the [theming section](/docs/theming#styling-popover) for detailed guide including class names to target etc. @@ -155,7 +155,7 @@ Here is the CSS used for the above example: align: 'start', side: 'left', title: 'More Control with Hooks', - description: 'You can use onPopoverRendered hook to modify the popover DOM. Here we are adding a custom button to the popover which takes the user to the first step.' + description: 'You can use onPopoverRender hook to modify the popover DOM. Here we are adding a custom button to the popover which takes the user to the first step.' } }, { @@ -188,7 +188,7 @@ Here is the CSS used for the above example: // Get full control over the popover rendering. // Here we are adding a custom button that takes // the user to the first step. - onPopoverRendered: (popover, { config, state }) => { + onPopoverRender: (popover, { config, state }) => { const firstButton = document.createElement("button"); firstButton.innerText = "Go to First"; popover.footerButtons.appendChild(firstButton); diff --git a/docs/src/content/guides/theming.mdx b/docs/src/content/guides/theming.mdx index 6409fa5..0f3f3a5 100644 --- a/docs/src/content/guides/theming.mdx +++ b/docs/src/content/guides/theming.mdx @@ -57,7 +57,7 @@ Visit the [example page](/docs/styling-popover) for an example that modifies the ## Modifying Popover DOM -Alternatively, you can also use the `onPopoverRendered` hook to modify the popover DOM before it is displayed. The hook is called with the popover DOM as the first argument. +Alternatively, you can also use the `onPopoverRender` hook to modify the popover DOM before it is displayed. The hook is called with the popover DOM as the first argument. ```typescript type PopoverDOM = { @@ -73,7 +73,7 @@ type PopoverDOM = { footerButtons: HTMLElement; }; -onPopoverRendered?: (popover: PopoverDOM) => void; +onPopoverRender?: (popover: PopoverDOM) => void; ``` ## Styling Page diff --git a/index.html b/index.html index 9002adb..f232510 100644 --- a/index.html +++ b/index.html @@ -452,10 +452,9 @@ npm install driver.js { + onPopoverRender: (popover) => { popover.title.innerHTML = `${driverObj.getActiveIndex()} ${driverObj.hasNextStep() ? 'Yes' : 'No'} ${driverObj.hasPreviousStep() ? 'Yes' : 'No'}` popover.description.innerHTML = `${driverObj.isFirstStep() ? 'Yes' : 'No'} ${driverObj.isLastStep() ? 'Yes' : 'No'}` - driverObj.refresh(); } }); @@ -662,7 +661,7 @@ npm install driver.js { const driverObj = driver({ - onPopoverRendered: popover => { + onPopoverRender: popover => { popover.title.innerText = "Modified Parent"; }, }); @@ -673,7 +672,7 @@ npm install driver.js { + onPopoverRender: popover => { popover.title.innerText = "Modified"; }, }, @@ -694,7 +693,7 @@ npm install driver.js { + onPopoverRender: popover => { popover.title.innerText = "Modified"; }, }, @@ -777,7 +776,7 @@ npm install driver.js { const driverObj = driver({ - onPopoverRendered: popover => { + onPopoverRender: popover => { const firstButton = document.createElement("button"); firstButton.innerText = "First"; popover.footerButtons.appendChild(firstButton); diff --git a/package.json b/package.json index a0a3fbf..1247413 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "driver.js", "private": false, - "version": "1.0.2", + "version": "1.0.3", "main": "./dist/driver.js.cjs", "module": "./dist/driver.js.mjs", "types": "./dist/driver.js.d.ts", diff --git a/src/config.ts b/src/config.ts index ffe0819..b10b25b 100644 --- a/src/config.ts +++ b/src/config.ts @@ -31,7 +31,7 @@ export type Config = { doneBtnText?: string; // Called after the popover is rendered - onPopoverRendered?: (popover: PopoverDOM) => void; + onPopoverRender?: (popover: PopoverDOM) => void; // State based callbacks, called upon state changes onHighlightStarted?: DriverHook; diff --git a/src/popover.ts b/src/popover.ts index 87f6508..50fa0f8 100644 --- a/src/popover.ts +++ b/src/popover.ts @@ -28,7 +28,7 @@ export type Popover = { prevBtnText?: string; // Called after the popover is rendered - onPopoverRendered?: (popover: PopoverDOM, opts: { config: Config; state: State }) => void; + onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State }) => void; // Button callbacks onNextClick?: DriverHook; @@ -203,16 +203,16 @@ export function renderPopover(element: Element, step: DriveStep) { setState("popover", popover); - repositionPopover(element, step); - bringInView(popoverWrapper); - - const onPopoverRendered = step.popover?.onPopoverRendered || getConfig("onPopoverRendered"); - if (onPopoverRendered) { - onPopoverRendered(popover, { + const onPopoverRender = step.popover?.onPopoverRender || getConfig("onPopoverRender"); + if (onPopoverRender) { + onPopoverRender(popover, { config: getConfig(), state: getState(), }); } + + repositionPopover(element, step); + bringInView(popoverWrapper); } type PopoverDimensions = {