driver.js icon indicating copy to clipboard operation
driver.js copied to clipboard

Add new overlay and popup configuration options, allow to pass function which returns Element in element step config

Open enp-kbeda opened this issue 1 year ago • 3 comments

Hello, I'd like to propose these new features:

  • add new overlayEnable config option, enabled by default. This property allows library consumers to disable highlight overlay if they wish. (https://github.com/kamranahmedse/driver.js/commit/741f521a1548b294cab3c4ac0470ad26ecaf43de) To keep the functionality of closing highlight when user clicks away I needed to add new window click listener when overlayEnable is set to false (https://github.com/kamranahmedse/driver.js/commit/ffbe5050f9579b8996e40d75164775927e483b4e)
  • add new popoverStickToViewport config option, enabled by default. This property allows library consumers to disable popover viewport sticking. When it's set to false popover always stays next to the step.element (https://github.com/kamranahmedse/driver.js/commit/7fd1726411501ac38b431bf99d58d93757b6d3c6)
  • allow to pass function which returns Element as step element config to allow better integration with frameworks like Vue.js which use element reference instead of document.querySelector (https://github.com/kamranahmedse/driver.js/commit/5d1ec417a9de44c18bc595872c6a406541e08b56)
  • add new allowScroll config option, enabled by default. This property allows library consumers to disable body scrolling when driver is active (https://github.com/kamranahmedse/driver.js/pull/508/commits/2d48c134db3efc2fc303fd289dedc96c8fd8f4aa)
  • add new animateBetweenSameElements config option, enabled by default. This property allows library consumers to disable popup animation when multiple steps are assigned to the same html element (https://github.com/kamranahmedse/driver.js/pull/508/commits/be29918ef80e982595898fd0b74b733b2b9dfd62)
  • fixed wrong active element on requireRefresh calls which resulted in broken layout (video of the issue - https://drive.google.com/file/d/1JjQZuctRSwiBExAQDDFbALvIrsjdqHKK/view?usp=sharing) (https://github.com/kamranahmedse/driver.js/pull/508/commits/b11d4e22c811cd464ed51937a0a298e6acfa31cc)
  • do not scroll to popover as we already scroll to step.element - this fixes the issue where user could make it so element is not visible at all on the page - https://drive.google.com/file/d/1FDr8yNEsNc6onkIVNBBykxwFU5uCDEdD/view?usp=sharing (https://github.com/kamranahmedse/driver.js/pull/508/commits/c86bf598f432cbc482752ad3296f2661f436103b)

I've added interactive examples of config options in index.html

enp-kbeda avatar Jul 15 '24 09:07 enp-kbeda

These are quite good feature.

D-Raj-Grg avatar Sep 03 '24 02:09 D-Raj-Grg

I have more but no time to update yet

enp-kbeda avatar Sep 03 '24 11:09 enp-kbeda

someone should take a look at this cc @kamranahmedse

renatobenks avatar Jul 23 '25 19:07 renatobenks