@janvarljen wrote:
I would like to create a modal dialog (route) that can be accessed from anywhere in the app, and not deactivate the current route.
This is the user flow:
- The user is on any random route in the application
- The user receives an in-app notification something happened on a resource (let's say a post).
- The notifications has a link to that resource (/posts/10) and I want it to be rendered in a modal dialog overlaying the current content
- When the user finishes with the post/modal dialog, he should be able to close the modal and continue with whatever he was doing.
My idea is to change the route from /whatever-it-was to /posts/10 but prevent deactivating the whatever-it-was route so the content remains on the screen. I'd render the "posts" route content to a special outlet called "modal".
Now when I close the modal I can deactivate the post route (close modal) but I don't have to reactivate the /whatever-it-was route bacause I have it already present. This way I don't reload all the data and I don't lose the scroll/focus on the /whatever-it-was route.
Few reasons I want to do a transition (change the url):
- to be able to use the route independently (bookmark the route)
- to be able to use ember routing inside the modal dialog (I could have /posts/10/edit, /posts/10/something-else)
A working behaviour of this is Twitter:
- when you browse your twitter feed and click on a tweet, it "opens" in a quasi-modal fashion, and the browser URL changes to the URL of the tweet
- you can close it and return to browsing the feed
- also, if you reload, you land on the tweet itself rendered in a modal window, and in the background is the profile page of the person who wrote the tweet
Stripe also has a similar behaviour:
- let's say you are on /customers route
- now you open account setting (url changes -> /account) which gets rendered in a modal overlaying your current (customers) page
- you can continue navigating inside the modal (e.g. /account/team)
- closing the modal takes you back to /customers but nothing is rerendered (only the modal is closed)
Does anyone have an idea how this could be achieved in Ember and could it work?
Posts: 1
Participants: 1