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

Show/hide modals when navigating with back/forward buttons #229

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

soundasleep
Copy link

Using pushState and popState event handlers, we can understand when the
modal needs to be closed (and prevents the browser from navigating
away), and when the modal needs to be reopened (using the new modal:reopen
event).

By default this is turned off, but can be enabled in the modal options
with updateHistory: true.

Note that as this stands, this doesn't work very well with Turbolinks:
I'm not sure yet if this is a bug on the Turbolinks side or not, but in
the meantime, this behaviour works for non-Turbolinks sites.

May resolve #197

Using pushState and popState event handlers, we can understand when the
modal needs to be closed (and prevents the browser from navigating
away), and when the modal needs to be reopened (using the new modal:reopen
event).

By default this is turned off, but can be enabled in the modal options
with `updateHistory: true`.

Note that as this stands, this doesn't work very well with Turbolinks:
I'm not sure yet if this is a bug on the Turbolinks side or not, but in
the meantime, this behaviour works for non-Turbolinks sites.
@soundasleep
Copy link
Author

(This PR doesn't update the minified versions, not sure how you do those)

There doesn't seem to be any way to prevent Turbolinks from reloading
and replacing the entire browser window when a user clicks Back (since
turbolinks:before-visit is not triggered for _when navigating by
history_),

So, rather than hiding the displayed modal when clicking Back (and
then having to reload the page), we keep the Modal displayed while
Turbolinks does its stuff in the background (including progress bar).

See turbolinks/turbolinks#264 for a related
issue (suggested `turbolinks:before-history-change` event).
@soundasleep
Copy link
Author

Update: I don't think there's any way to handle Turbolinks + back button correctly, see turbolinks/turbolinks#264

@kylefox
Copy link
Owner

kylefox commented Aug 11, 2018

@soundasleep Looks cool, and thanks for also updating the README 🙂

Would you mind adding an example?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Handle back button on Android devices
2 participants