Comments (1)
Here is my workaround until (hopefully) such events would be natively supported. The trick is to repurpose the onPrevClick
, onNextClick
, onCloseClick
and onDestroyed
events.
const driver = window.driver.js.driver;
const driverObj = driver({
onPrevClick: function(element, step, options) {
let callback = function() { if (driverObj.hasPreviousStep() !== undefined) driverObj.movePrevious(); else driverObj.destroy(); }; // workaround for bug https://github.com/kamranahmedse/driver.js/issues/492
if (typeof onStepDeactivating !== 'undefined') {
onStepDeactivating(driverObj.getActiveIndex(), function () {
if (typeof onStepActivating !== 'undefined' && !driverObj.isFirstStep()) {
onStepActivating(driverObj.getActiveIndex() - 1, callback);
}
else {
callback();
}
});
}
else if (typeof onStepActivating !== 'undefined' && !driverObj.isFirstStep()) {
onStepActivating(driverObj.getActiveIndex() - 1, callback);
}
else {
callback();
}
},
onNextClick: function(element, step, options) {
let callback = function() { if (driverObj.hasNextStep() !== undefined) driverObj.moveNext(); else driverObj.destroy(); }; // workaround for bug https://github.com/kamranahmedse/driver.js/issues/492
if (typeof onStepDeactivating !== 'undefined') {
onStepDeactivating(driverObj.getActiveIndex(), function () {
if (typeof onStepActivating !== 'undefined' && !driverObj.isLastStep()) {
onStepActivating(driverObj.getActiveIndex() + 1, callback);
}
else {
callback();
}
});
}
else if (typeof onStepActivating !== 'undefined' && !driverObj.isLastStep()) {
onStepActivating(driverObj.getActiveIndex() + 1, callback);
}
else {
callback();
}
},
onCloseClick: function (element, step, options) {
let callback = function() { driverObj.destroy(); };
if (typeof onStepDeactivating !== 'undefined') {
onStepDeactivating(driverObj.getActiveIndex(), callback);
}
else {
callback();
}
},
onDestroyed: function(element, step, options) {
if (typeof onTourStopped !== 'undefined') {
onTourStopped();
}
},
});
let callbackTourStarting = function() { driverObj.drive(); };
if (typeof onTourStarting !== 'undefined') {
onTourStarting(callbackTourStarting);
}
else {
callbackTourStarting();
}
I use the CDN scripts on a server-rendered site, so I use the workaround like so:
<script>
function onTourStarting(callback) {
callback();
}
function onStepActivating(activeIndex, callback) {
if (activeIndex === 3) {
loadSomething();
callback();
}
else if (activeIndex === 7) {
doAsyncFoo(function() {
callback();
});
}
else {
callback();
}
}
function onStepDeactivating(activeIndex, callback) {
if (activeIndex === 3) {
reset();
}
callback();
}
function onTourStopped() {
cleanup();
}
</script>
That works really well, and as you can see in the second code block it exposes a very friendly API for callers.
But it would be nice if such events would be exposed natively by the library.
(If someone has a neater workaround, please post it below.)
from driver.js.
Related Issues (20)
- Can ‘getConfig("animate")’ be replaced with ‘isAnimatedTour’ ?
- Can ‘getConfig("animate")’ be replaced with ‘isAnimatedTour’ ?
- Is there a way to make the overlay mask fixed to an element area instead of the entire body? HOT 1
- (Re) Support the feature to move next on click outside the element
- Can the position of a popover be fixed?
- Can this work with Canvas elements? HOT 2
- How can I make the popup display while the project can be clicked normally?
- How can I customize a popover and button using MUI?
- Step positions are erratic HOT 1
- Missing data
- [Suggestion] Add disableActiveInteraction to Drive Step Configuration.
- Skip step for missing element HOT 2
- [Feature Request] Expose step index in DOM HOT 1
- Hide "previous" button on step 1 HOT 1
- [Bug] Methods hasNextStep and hasPreviousStep do not return boolean HOT 1
- aria-controls attribute removed during runtime. HOT 3
- Highlight element in parent window from iframe HOT 1
- Missing close button in Popover example & personal project
- onDone callback HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from driver.js.