Add Hash/History helper to handle offcanvas functionality #36648
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR is a first approach trying to make some UX improvements on Offcanvas plugin
It has been buzzing to my ears many times (mostly by designers), that Modals & Offcanvases in order to provide a better user experience, should react on browser history changes.
The simple requirement was : "Should close when the user goes back (swipe back / press back btn, etc)"
So as the #36604 was just another one trigger that shouted the same need
Main functionality:
offcanvasInstance.show()
=> adds a hash on our browser address bar (window.location
) & adds an entry to the browser's session history stack.offcanvasInstance.hide()
=> removes the hash from our address bar & replicates a history backward stephash
matches to a component registered pattern, we call a callback where we can decide if we are going to handle. In the specific case, we toggle the offcanvas according to thehash
existence. Cases:hash
hash
Preview:
https://deploy-preview-36648--twbs-bootstrap.netlify.app/docs/5.2/components/offcanvas/#bs-offcanvas-staticBackdrop
Needs:
closes #36647
Future applications:
smoothscroll
ref:
smoothScroll
options, is activated #36402ref:
ref: