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

Query element by selector later if it's not exists during configuration

Open gooddaytoday opened this issue 2 years ago • 4 comments

I'm sorry I didn't wait for approval #1674 :racing_car: . Just need to buy commercial license with this feature :slightly_smiling_face: .

Processing possible absence of an element, configured with string selector: when creating list of steps, we take into account the possible absence of element.

  • If step.element is a selector for which there is no element at the configuration stage, then we replace .element specifying a getter/setter for it. In the getter we return the element via document.querySelector
  • Since that moment we assume that .element should return HTMLElement by selector and if there is still no element - throwing Error. Thus to check raw field below we need use also ._element.

The behavior has changed: earlier if there wasn't element by selector, IntroJS silently created floating tooltip at that step.

Also:

  • Fixed one test cause of changed behaviour
  • Added some unit tests
  • And Cypress: button to create div, test and updated snapshots

Closes #1674.

gooddaytoday avatar May 26 '22 15:05 gooddaytoday

And it's not finished yet. If element is added with delay (for example, after async request to server), an error will occur

gooddaytoday avatar May 27 '22 08:05 gooddaytoday

And it's not finished yet. If element is added with delay (for example, after async request to server), an error will occur

Finished that feature:

  • Added function to wait until element appears in DOM https://github.com/usablica/intro.js/pull/1679/commits/79dea703cc1a605ba956cebbfb4cda828dac434f
  • waitforElement function applied in nextStep https://github.com/usablica/intro.js/pull/1679/commits/b6e885a579cfdc809b6f92159b4f814fe70d72fd

gooddaytoday avatar May 30 '22 09:05 gooddaytoday

  • waitforElement function applied in nextStep b6e885a

Fixed commit https://github.com/usablica/intro.js/pull/1679/commits/b61ffab232720e0ada79c204ed84fd05467b5e78 and added test https://github.com/gooddaytoday/intro.js/commit/8716a1a038324fad58af5f9ba3d7cd9da6f65ac5 for that error

gooddaytoday avatar May 30 '22 14:05 gooddaytoday

Rebased and edited branch in order to:

  • Reduce amount of changes: added new create_div_btn.html instead of editing index.html, so there is no differences in old screenshots.
  • Clean history to make it more clear

gooddaytoday avatar Jul 07 '22 15:07 gooddaytoday