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

Add Hash/History helper to handle offcanvas functionality #36648

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

GeoSot
Copy link
Member

@GeoSot GeoSot commented Jun 29, 2022

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 step
  • if User change the hash on his/her address bar, and the hash 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 the hash existence. Cases:
    • when user goes back & forward,
    • if user adds/removes a hash
    • if User enters a link on his/her browser address bar and contains a hash

Preview:

https://deploy-preview-36648--twbs-bootstrap.netlify.app/docs/5.2/components/offcanvas/#bs-offcanvas-staticBackdrop

Needs:

  • Feedback (programmatic & functional scope)
  • tests (test new functionality, check existing)

closes #36647

Future applications:

@GeoSot GeoSot force-pushed the gs/add-history-helper branch from 29caf19 to f3833b2 Compare July 16, 2022 22:17
@damderhar
Copy link

Awesome! I've been hoping for this feature to be added for a while! Thanks so much for investing your time in this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Needs review
Development

Successfully merging this pull request may close these issues.

Offcanvas functionality should be combined with browser history (UX feature)
3 participants