diff --git a/index.html b/index.html index bbfe23e..353212b 100644 --- a/index.html +++ b/index.html @@ -623,6 +623,7 @@

Boarding Definition

onHighlighted: (Element) {}, // Called when element is fully highlighted onDeselected: (Element) {}, // Called when element has been deselected onReset: (Element) {}, // Called when overlay is about to be cleared + onStart: (Element) {}, // Called when `boarding.start()` was called onNext: (Element) => {}, // Called when moving to next step on any step onPrevious: (Element) => {}, // Called when moving to next step on any step strictClickHandling: "block-all", // Can also be `true` or if not wanted at all, `false`. Either block ALL pointer events, or isolate pointer-events to only allow on the highlighted element (`true`). Popover and overlay pointer-events are of course always allowed to be clicked diff --git a/readme.md b/readme.md index cd3f184..a6c87fc 100644 --- a/readme.md +++ b/readme.md @@ -275,6 +275,7 @@ const boarding = new Boarding({ onHighlighted: (HighlightElement) => {}, // Called when element is fully highlighted onDeselected: (HighlightElement) => {}, // Called when element has been deselected onReset: (HighlightElement) => {}, // Called when overlay is about to be cleared + onStart: (HighlightElement) => {}, // Called when `boarding.start()` was called onNext: (HighlightElement) => {}, // Called when moving to next step on any step onPrevious: (HighlightElement) => {}, // Called when moving to previous step on any step strictClickHandling: true, // Can also be `"block-all"` or if not wanted at all, `false`. Either block ALL pointer events, or isolate pointer-events to only allow on the highlighted element (`true`). Popover and overlay pointer-events are of course always allowed to be clicked diff --git a/src/lib/boarding-types.ts b/src/lib/boarding-types.ts index e07aced..1775e05 100644 --- a/src/lib/boarding-types.ts +++ b/src/lib/boarding-types.ts @@ -1,4 +1,6 @@ -import { HighlightElementHybridOptions } from "./core/highlight-element"; +import HighlightElement, { + HighlightElementHybridOptions, +} from "./core/highlight-element"; import { OverlayTopLevelOptions } from "./core/overlay"; import { PopoverHybridOptions, @@ -62,6 +64,10 @@ export interface BoardingOptions * className for the boarding popovers */ className?: string; + /** + * Simple event that triggers for boarding.start() + */ + onStart?: (element: HighlightElement) => void; } export interface BoardingStepDefinition extends HighlightElementHybridOptions { diff --git a/src/lib/boarding.ts b/src/lib/boarding.ts index e60b487..3ed7311 100644 --- a/src/lib/boarding.ts +++ b/src/lib/boarding.ts @@ -376,6 +376,8 @@ class Boarding { } this.currentStep = index; + + this.options.onStart?.(element); this.activateBoarding(element); }