kamrify commited on
Commit
de33858
·
1 Parent(s): ec0311d

Add a way to configure steps

Browse files
Files changed (4) hide show
  1. docs/src/content/guides/api.mdx +2 -0
  2. index.html +26 -0
  3. package.json +1 -1
  4. 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.3",
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 ? onNextClick : () => {
191
- if (!hasNextStep) {
192
- destroy();
193
- } else {
194
- drive(stepIndex + 1);
195
- }
196
- },
197
- onPrevClick: onPrevClick ? onPrevClick : () => {
198
- drive(stepIndex - 1);
199
- },
200
- onCloseClick: onCloseClick ? onCloseClick : () => {
201
- destroy();
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"),