| 10 | title: "Lifecycle Hooks", |
| 11 | description: "Log every lifecycle hook to the console as elements are highlighted.", |
| 12 | run() { |
| 13 | const describe = (element?: Element) => element?.textContent?.slice(0, 10) || " - N/A -"; |
| 14 | |
| 15 | const driverObj = driver({ |
| 16 | animate: true, |
| 17 | onDeselected: (element, step) => console.log(`Deselected: ${describe(element)}\n${JSON.stringify(step)}`), |
| 18 | onHighlightStarted: (element, step) => |
| 19 | console.log(`Highlight Started: ${describe(element)}\n${JSON.stringify(step)}`), |
| 20 | onHighlighted: (element, step) => console.log(`Highlighted: ${describe(element)}\n${JSON.stringify(step)}`), |
| 21 | onDestroyed: (element, step) => console.log(`Destroyed: ${describe(element)}\n${JSON.stringify(step)}`), |
| 22 | }); |
| 23 | |
| 24 | driverObj.highlight({ |
| 25 | element: "#hooks-list", |
| 26 | popover: { title: "Hooks", description: "Open the console to follow each hook as it fires." }, |
| 27 | }); |
| 28 | |
| 29 | window.setTimeout(() => { |
| 30 | driverObj.highlight({ |
| 31 | popover: { title: "Popup Hook", description: "There is no element below this popover." }, |
| 32 | }); |
| 33 | }, 1000); |
| 34 | |
| 35 | window.setTimeout(() => { |
| 36 | driverObj.highlight({ |
| 37 | element: "ul.feature-list", |
| 38 | popover: { description: "Back to an element again." }, |
| 39 | }); |
| 40 | }, 2000); |
| 41 | }, |
| 42 | }, |
| 43 | { |
| 44 | id: "api-test", |