Comments (10)
This would be extremely useful to have!
In addition to the previous, next, close and done; would it make sense to also have one for when the user decides to prematurely terminate the driver by clicking away? Possibly return the step that it was on when the termination occurred?
from driver.js.
I'd love to see this – ideally with the ability to block even the selection of the next step, so one could (more easily) drive js client apps with async operations creating the elements for the next step.
from driver.js.
different callback for every time next is called?
from driver.js.
That would be perfect for some scenarios of mine, yes.
To illustrate with pseudocode:
driver.defineSteps([
{
element: '#first-element-introduction',
popover: {
title: 'Welcome',
description: 'we take you on a journey…',
position: 'left'
}
}, {
element: '#second-element-introduction',
pre: (next) => {
// Do some ajax calls, create nodes from results, whatever…
const n = document.createElement('div');
n.id = 'second-element-introduction';
next();
},
popover: {
title: 'Behold',
description: 'the mighty div in its natural habitat…',
position: 'right'
}
}
]);
As far as I played with the code for now, it seems that the selection of the elements is done on the defineSteps()
call, so if an element doesn't exist at this point of time, the step fails later on. For the code above it would be necessary to select the element when the functions callback is called.
My issue could also be solved with the request of @thomasthiebaud if I understand it correctly, leading to something like:
driver.defineSteps([
{
element: '#first-element-introduction',
popover: {
title: 'Welcome',
description: 'we take you on a journey…',
position: 'left'
},
onNext: (done) => {
// Do some ajax calls, create nodes from results, whatever…
const n = document.createElement('div');
n.id = 'second-element-introduction';
done();
}
}, {
element: '#second-element-introduction',
popover: {
title: 'Behold',
description: 'the mighty div in its natural habitat…',
position: 'left'
}
}
]);
from driver.js.
That would be perfect for some scenarios of mine, yes.
To illustrate with pseudocode:
driver.defineSteps([ { element: '#first-element-introduction', popover: { title: 'Welcome', description: 'we take you on a journey…', position: 'left' } }, { element: '#second-element-introduction', pre: (next) => { // Do some ajax calls, create nodes from results, whatever… const n = document.createElement('div'); n.id = 'second-element-introduction'; next(); }, popover: { title: 'Behold', description: 'the mighty div in its natural habitat…', position: 'right' } } ]);
As far as I played with the code for now, it seems that the selection of the elements is done on the
defineSteps()
call, so if an element doesn't exist at this point of time, the step fails later on. For the code above it would be necessary to select the element when the functions callback is called.My issue could also be solved with the request of @thomasthiebaud if I understand it correctly, leading to something like:
driver.defineSteps([ { element: '#first-element-introduction', popover: { title: 'Welcome', description: 'we take you on a journey…', position: 'left' }, onNext: (done) => { // Do some ajax calls, create nodes from results, whatever… const n = document.createElement('div'); n.id = 'second-element-introduction'; done(); } }, { element: '#second-element-introduction', popover: { title: 'Behold', description: 'the mighty div in its natural habitat…', position: 'left' } } ]);
Hi, Did you solve? I have same problem
from driver.js.
Have you found the solution?
from driver.js.
No, I used something else. Maybe newer versions support it
from driver.js.
@thomasthiebaud
Thanks for the response, So many attempts, I have found the solution, My issue was, I have to call one function after clicking on the Done button.
Will share the solution here soon...
from driver.js.
We just released v1.0 of driver.js which has been rewritten from the ground up. There are more simplified hooks which give you more control over the popover and the whole lifecycle. Please have a look at the docs and do let me know if you face any issues.
from driver.js.
Hi @thomasthiebaud ,
i have a same problem for that done Button. Could you please share your solution may be its helpful.
from driver.js.
Related Issues (20)
- Purely programmatic step?
- Add onOverlayClicked callback
- 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
- [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
- [Feature Request] Lifecycle events HOT 1
- aria-controls attribute removed during runtime. HOT 3
- Highlight element in parent window from iframe 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.