File size: 5,943 Bytes
a56688a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
---
title: "Migrate to 1.x"
groupTitle: "Introduction"
sort: 6
---
Drivers 1.x is a major release that introduces a new API and a new architecture. This page will help you migrate your code from 0.x to 1.x.
> Change in how you import the library
```diff
- import Driver from 'driver.js';
- import 'driver.js/dist/driver.min.css';
+ import { driver } from 'driver.js';
+ import "driver.js/dist/driver.css";
```
> Change in how you initialize the library
```diff
- const driverObj = new Driver(config);
- driverObj.setSteps(steps);
+ // Steps can be passed in the constructor
+ const driverObj = driver({
+ ...config,
+ steps
+ });
```
> Changes in configuration
```diff
const config = {
- overlayClickNext: false, // Option has been removed
- closeBtnText: 'Close', // Option has been removed (close button is now an icon)
- scrollIntoViewOptions: {}, // Option has been renamed
- opacity: 0.75,
+ overlayOpacity: 0.75,
- className: 'scoped-class',
+ popoverClass: 'scoped-class',
- padding: 10,
+ stagePadding: 10,
- showButtons: false,
+ showButtons: ['next', 'prev', 'close'], // pass an array of buttons to show
- keyboardControl: true,
+ allowKeyboardControl: true,
- onHighlightStarted: (Element) {},
+ onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
- onHighlighted: (Element) {},
+ onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
- onDeselected: (Element) {}, // Called when element has been deselected
+ onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
- onReset: (Element) {}, // Called when overlay is about to be cleared
+ onDestroyStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+ onDestroyed?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+ onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
- onNext: (Element) => {}, // Called when moving to next step on any step
- onPrevious: (Element) => {}, // Called when moving to next step on any step
+ // By overriding the default onNextClick and onPrevClick, you control the flow of the driver
+ // Visit for more details: https://driverjs.com/docs/configuration
+ onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+ onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+ // New options added
+ overlayColor?: string;
+ stageRadius?: number;
+ popoverOffset?: number;
+ disableButtons?: ["next", "prev", "close"];
+ showProgress?: boolean;
+ progressText?: string;
+ onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
}
```
> Changes in step and popover definition
```diff
const stepDefinition = {
popover: {
- closeBtnText: 'Close', // Removed, close button is an icon
- element: '.some-element', // Required
+ element: '.some-element', // Optional, if not provided, step will be shown as modal
- className: 'popover-class',
+ popoverClass: string;
- showButtons: false,
+ showButtons: ["next", "previous", "close"]; // Array of buttons to show
- title: ''; // Required
+ title: ''; // Optional
- description: ''; // Required
+ description: ''; // Optional
- // position can be left, left-center, left-bottom, top,
- // top-center, top-right, right, right-center, right-bottom,
- // bottom, bottom-center, bottom-right, mid-center
- position: 'left',
+ // Now you need to specify the side and align separately
+ side?: "top" | "right" | "bottom" | "left";
+ align?: "start" | "center" | "end";
+ // New options
+ showProgress?: boolean;
+ progressText?: string;
+ onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
+ onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
+ onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
+ onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
}
+ // New hook to control the flow of the driver
+ onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+ onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+ onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
};
```
> Changes in API methods.
```diff
- driverObj.preventMove(); // async support is built-in, no longer need to call this
- activeElement.getCalculatedPosition();
- activeElement.hidePopover();
- activeElement.showPopover();
- activeElement.getNode();
- const isActivated = driverObj.isActivated;
+ const isActivated = driverObj.isActive();
- driverObj.start(stepNumber = 0);
+ driverObj.drive(stepNumber = 0);
- driverObj.highlight(string|stepDefinition);
+ driverObj.highlight(stepDefinition)
- driverObj.reset();
+ driverObj.destroy();
- driverObj.hasHighlightedElement();
+ typeof driverObj.getActiveElement() !== 'undefined';
- driverObj.getHighlightedElement();
+ driverObj.getActiveElement();
- driverObj.getLastHighlightedElement();
+ driverObj.getPreviousElement();
+ // New options added
+ driverObj.moveTo(stepIndex)
+ driverObj.getActiveStep(); // returns the configured step definition
+ driverObj.getPreviousStep(); // returns the previous step definition
+ driverObj.isLastStep();
+ driverObj.isFirstStep();
+ driverObj.getState();
+ driverObj.getConfig();
+ driverObj.setConfig(config);
+ driverObj.refresh();
```
Please make sure to visit the [documentation](https://driverjs.com/docs/configuration) for more details. |