Add a way to configure steps
Browse files- docs/src/content/guides/api.mdx +2 -0
- index.html +26 -0
- package.json +1 -1
- src/driver.ts +26 -13
docs/src/content/guides/api.mdx
CHANGED
@@ -51,6 +51,8 @@ driverObj.refresh();
|
|
51 |
driverObj.getConfig();
|
52 |
driverObj.setConfig({ /* ... */ });
|
53 |
|
|
|
|
|
54 |
// Look at the state section of configuration for format of the state
|
55 |
// https://driverjs.com/docs/configuration#state
|
56 |
driverObj.getState();
|
|
|
51 |
driverObj.getConfig();
|
52 |
driverObj.setConfig({ /* ... */ });
|
53 |
|
54 |
+
driverObj.setSteps([ /* ... */ ]); // Set the steps
|
55 |
+
|
56 |
// Look at the state section of configuration for format of the state
|
57 |
// https://driverjs.com/docs/configuration#state
|
58 |
driverObj.getState();
|
index.html
CHANGED
@@ -209,6 +209,7 @@
|
|
209 |
<button id="progress-tour">Progress Text</button>
|
210 |
<button id="progress-tour-template">Progress Text Template</button>
|
211 |
<button id="api-test">API Test</button>
|
|
|
212 |
</div>
|
213 |
|
214 |
<ul>
|
@@ -461,6 +462,31 @@ npm install driver.js</pre
|
|
461 |
driverObj.drive();
|
462 |
});
|
463 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
464 |
document.getElementById("async-tour").addEventListener("click", () => {
|
465 |
const driverObj = driver({
|
466 |
animate: true,
|
|
|
209 |
<button id="progress-tour">Progress Text</button>
|
210 |
<button id="progress-tour-template">Progress Text Template</button>
|
211 |
<button id="api-test">API Test</button>
|
212 |
+
<button id="reconfigure-steps">Re Configuring Steps</button>
|
213 |
</div>
|
214 |
|
215 |
<ul>
|
|
|
462 |
driverObj.drive();
|
463 |
});
|
464 |
|
465 |
+
document.getElementById("reconfigure-steps").addEventListener("click", () => {
|
466 |
+
const driverObj = driver({
|
467 |
+
animate: true,
|
468 |
+
steps: basicTourSteps,
|
469 |
+
showProgress: true,
|
470 |
+
});
|
471 |
+
|
472 |
+
driverObj.setSteps([
|
473 |
+
{
|
474 |
+
element: "h1",
|
475 |
+
popover: {
|
476 |
+
description: "This is a new description"
|
477 |
+
}
|
478 |
+
},
|
479 |
+
{
|
480 |
+
element: "p",
|
481 |
+
popover: {
|
482 |
+
description: "This is another new description"
|
483 |
+
}
|
484 |
+
}
|
485 |
+
])
|
486 |
+
|
487 |
+
driverObj.drive();
|
488 |
+
});
|
489 |
+
|
490 |
document.getElementById("async-tour").addEventListener("click", () => {
|
491 |
const driverObj = driver({
|
492 |
animate: true,
|
package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1 |
{
|
2 |
"name": "driver.js",
|
3 |
"private": false,
|
4 |
-
"version": "1.0.
|
5 |
"main": "./dist/driver.js.cjs",
|
6 |
"module": "./dist/driver.js.mjs",
|
7 |
"types": "./dist/driver.js.d.ts",
|
|
|
1 |
{
|
2 |
"name": "driver.js",
|
3 |
"private": false,
|
4 |
+
"version": "1.0.4",
|
5 |
"main": "./dist/driver.js.cjs",
|
6 |
"module": "./dist/driver.js.mjs",
|
7 |
"types": "./dist/driver.js.d.ts",
|
src/driver.ts
CHANGED
@@ -187,19 +187,25 @@ export function driver(options: Config = {}) {
|
|
187 |
disableButtons: [...(!hasPreviousStep ? ["previous" as AllowedButtons] : [])],
|
188 |
showProgress: showProgress,
|
189 |
progressText: progressTextReplaced,
|
190 |
-
onNextClick: onNextClick
|
191 |
-
|
192 |
-
|
193 |
-
|
194 |
-
|
195 |
-
|
196 |
-
|
197 |
-
|
198 |
-
|
199 |
-
|
200 |
-
|
201 |
-
|
202 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
203 |
...(currentStep?.popover || {}),
|
204 |
},
|
205 |
});
|
@@ -261,6 +267,13 @@ export function driver(options: Config = {}) {
|
|
261 |
drive(stepIndex);
|
262 |
},
|
263 |
setConfig: configure,
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
264 |
getConfig,
|
265 |
getState,
|
266 |
getActiveIndex: () => getState("activeIndex"),
|
|
|
187 |
disableButtons: [...(!hasPreviousStep ? ["previous" as AllowedButtons] : [])],
|
188 |
showProgress: showProgress,
|
189 |
progressText: progressTextReplaced,
|
190 |
+
onNextClick: onNextClick
|
191 |
+
? onNextClick
|
192 |
+
: () => {
|
193 |
+
if (!hasNextStep) {
|
194 |
+
destroy();
|
195 |
+
} else {
|
196 |
+
drive(stepIndex + 1);
|
197 |
+
}
|
198 |
+
},
|
199 |
+
onPrevClick: onPrevClick
|
200 |
+
? onPrevClick
|
201 |
+
: () => {
|
202 |
+
drive(stepIndex - 1);
|
203 |
+
},
|
204 |
+
onCloseClick: onCloseClick
|
205 |
+
? onCloseClick
|
206 |
+
: () => {
|
207 |
+
destroy();
|
208 |
+
},
|
209 |
...(currentStep?.popover || {}),
|
210 |
},
|
211 |
});
|
|
|
267 |
drive(stepIndex);
|
268 |
},
|
269 |
setConfig: configure,
|
270 |
+
setSteps: (steps: DriveStep[]) => {
|
271 |
+
resetState();
|
272 |
+
configure({
|
273 |
+
...getConfig(),
|
274 |
+
steps,
|
275 |
+
});
|
276 |
+
},
|
277 |
getConfig,
|
278 |
getState,
|
279 |
getActiveIndex: () => getState("activeIndex"),
|