Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] Expose step index in DOM #490

Open
lonix1 opened this issue May 2, 2024 · 1 comment
Open

[Feature Request] Expose step index in DOM #490

lonix1 opened this issue May 2, 2024 · 1 comment

Comments

@lonix1
Copy link

lonix1 commented May 2, 2024

The widget's current step is exposed via JS callbacks; those can be used to apply custom styling.

However it would be simpler and neater to control that via css directly. For example:

<div class="driver-popover" data-step-index="3" data-step-first="true" data-step-last="false">
  ...
</div>

Notice the [data-step-index], [data-step-first] and [data-step-last] attributes. I could easily target those in css.

@lonix1
Copy link
Author

lonix1 commented May 4, 2024

A workaround for now:

const driver = window.driver.js.driver;
const driverObj = driver({
  onPopoverRender: function(popover, options) {
    popover.wrapper.setAttribute('data-step-index', driverObj.getActiveIndex());
    popover.wrapper.setAttribute('data-step-first', driverObj.isFirstStep());
    popover.wrapper.setAttribute('data-step-last', driverObj.isLastStep());
  },
});

But this is not ideal as it's messy and runs repeatedly. Best to be in the library itself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant