Remaining to do after the jQuery removal

[XhmikosR]

• Update plugin pages
  • Carousel - still has a few references to $() (Remove jquery from our docs #28768)
  • Collapse - still has a few references to $() (Remove jquery from our docs #28768)
  • Dropdown (Remove jquery from our docs #28768)
  • List group
  • Modal (Remove jquery from our docs #28768)
  • Navs (improve docs about jQuery removal #29181)
  • Popover (Remove jquery from our docs #28768)
  • ScrollSpy (improve docs about jQuery removal #29181)
  • Toasts (continuing to remove jquery references to our doc #28779)
  • Tooltip (continuing to remove jquery references to our doc #28779)
• Other doc pages
  • getting-started/browsers-devices.md (continuing to remove jquery references to our doc #28779)
  • getting-started/javascript.md (Remove jquery from our docs #28768)
• Various
  • Add a section explaining that it's possible to use this version with and without jQuery
  • Search docs for jquery (not case sensitive) and $(
  • Replace https://codepen.io/Johann-S/pen/djJYPb or add a codepen with vanilla JS (docs: update selector CodePen example #32163)
  • Maybe explain when an element is considered visible in the scrollspy callout
  • See if we really need DOMContentLoaded anymore in tests and docs. Remove DOMContentLoaded. #28337
  • Remove If you’re building our JavaScript from source, it requires util.js. not needed anymore (continuing to remove jquery references to our doc #28779)
  • Remove https://twbs-bootstrap.netlify.com/docs/4.3/getting-started/browsers-devices/#android-stock-browser after [WIP] Bump supported browsers for v5 #28317 or in that branch (continuing to remove jquery references to our doc #28779)

[midzer]

I am trying to help and port "Replace https://codepen.io/Johann-S/pen/djJYPb or add a codepen with vanilla JS" item

This is what i got until now:
https://paste.headstrong.de/view/08ba7d0b

Too bad I can't test properly, because bootstrap object is not found (I've included https://github.com/twbs/bootstrap/blob/master-xmr-v5/dist/js/bootstrap.bundle.js)

[Johann-S]

Hi @midzer, thank you for trying to tackle that, but you should wait for our first alpha release

[alpadev]

Since the alpha has been released - some updated codepen without the jQuery dependency: https://codepen.io/-alpa-/pen/PoZWzNM

I used querySelectorAll in that case, to keep the logic from the corresponding jQuery example - although I'm not sure if that's adding some confusion. Also to keep things DRY I used a wrapper function for document.querySelector that is named $ - that is what Chrome is doing by default in case $ is undefined - but might be a bit confusing too.

Anyways I guess it'd be better if you add this to your codepen, to keep things streamlined. Feel free to change things as you see fit.

[XhmikosR]

@Johann-S what's the status of this? Only 2 TODO are left :)

[Johann-S]

@alpadev can you submit a PR with your CodePen link?

[alpadev]

Sure, if you agree with the updates.

[alpadev]

To get this list done. What would be the required information for the "Maybe explain when an element is considered visible in the scrollspy callout" todo?

Like an element is considered visible if scrollTop >= offset or that an element is considered visible if the target element has a valid getBoundingClientRect with either width or height not being 0?

[XhmikosR]

@alpadev it's been a while but IIRC the issue was about https://getbootstrap.com/docs/4.5/components/scrollspy/#non-visible-target-elements-ignored:

Non-:visible target elements ignored

Target elements that are not :visible according to jQuery will be ignored and their corresponding nav items will never be highlighted.

[alpadev]

Oh I see. I had a look into the code and in theory one could hide it with visibility: hidden; (and maybe height: 0; while keeping its width) and it would still work, though being barely visible :)

The logic in the code checks for both height > 0 or width > 0.

So there's nothing I can help here with I guess?

[XhmikosR]

I don't recall TBH, I know I removed the docs part so that we move forward back then, but I don't know if the statement applies to v5 (it probably does, though).

[XhmikosR]

So, only the scrollspy callout is left 🙂

Now, I'm not sure how to proceed with this, but if we can put it back quickly explaining when an element might not be visible and that scrollspy will ignore it, I think that would be the best solution.

PRs welcome!

[alpadev]

@XhmikosR uhm there is some info about the visibility: https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/components/scrollspy.md#non-visible-target-elements-ignored
It could be extended though, if you see a benefit from it.

[XhmikosR]

Oh, true. I guess we can finally close this issue.

Thanks everyone for the help!