State transitions similar to Pinterest's overlay.

[CMCDragonkai]

What would be the best way to implement Pinterest's overlay mechanism.

If you go to Pinterest and you click on one of the items, it brings up an overlay of the item. It also does a couple other things:

1. the URL changes to the unique identifier to that item. (thus allowing the ability to share and save the url)
2. When you hit the back button or close button, it transitions back to the original home state.
3. Now if you go and just copy that URL straight into the browser and reload. It loads into a unique state that only contains that item, and it is no longer an overlay of the "homepage state".

Obviously I cannot just match the unique item URL, because that would prevent the unique item page from being loaded, only the overlay.

My ideas are currently use ui-bootstrap's dialog service along with 3 states. Home state, item child state of the home that doesn't have a URL parameter. And an item state. The item state would match the URL, so when a user accesses the URL directly it will navigate to the item's page. But whenever I want to bring up the overlay, I'll manually use transitionTo() to get the item child state. I haven't tried just yet, but I feel this may have problems regarding the back button.

[nateabele]

See the ui-bootstrap $dialog example in the FAQ. You can set the type of animation through $dialog.

[CMCDragonkai]

Hey @nateabele, I did have a look at that example. But would it work with the browser's back button? I would also like to move that logic to a controller not an custom onEnter function. There doesn't seem to be any documentation on the onEnter itself. Furthermore that example did not look into how you would differentiate between the overlay and directly accessing the item.

[nateabele]

But would it work with the browser's back button?

Yes.

I would also like to move that logic to a controller not an custom onEnter function.

Nope. Can't do that without a ui-view. At best you could put all the code in a service.

[nateabele]

Furthermore that example did not look into how you would differentiate between the overlay and directly accessing the item.

Sorry, what item?

[CMCDragonkai]

That's fine. I can handle a child ui-view on the homepage. But could you elaborate?

Regarding the item. As I said for Pinterest. There is the homepage and the items. When you click on the items, they open up an overlay for that item. But when you access the item's URL directly, it goes to a separate page which only houses the item. The URL of course is shown when the overlay is active.

It's easier to understand if you just go to Pinterest and click on one of the items.

[nateabele]

It's easier to understand if you just go to Pinterest and click on one of the items.

@CMCDragonkai I went to pinterest.com. It wants me to sign up. I am not signing up for Pinterest. Sorry.

But when you access the item's URL directly, it goes to a separate page which only houses the item.

This is up to your server implementation, and unrelated to Angular and UI-Router.

That's fine. I can handle a child ui-view on the homepage. But could you elaborate?

I guess you could put a hidden ui-view on the page that you don't use, then use the controller to launch the $dialog per normal

[braco]

Facing this same challenge.

For

Now if you go and just copy that URL straight into the browser and reload. It loads into a unique state that only contains that item, and it is no longer an overlay of the "homepage state".

I'm thinking I'll probably have to check the state of the page onEnter:... and either pop up a modal or render the entire page there.

If nothing else, there could just be two states.

1. /quick-details/foo
2. /details/foo
   and inside of quick-details, redirect:

$state.transitionTo("details")

when it shouldn't be a modal

[braco]

The main problem here is that we need two states on one url. One of the states can only be activated during a click event, the other should be the default. The template layouts may be radically different, so they need their own config tree.

Is there an obvious way to do this that I'm missing?

[nateabele]

Again, I believe this is the responsibility of your server implementation.

[braco]

Why would one state be separated from everything else? I must be missing something. I imagine that there would be exceptions where you want to link to a full details page and not the modal, in which case the logic is still up in the application and state machine, not on the server.

Is there no way to do what I described?

[nateabele]

I've seen other apps that do what you describe. You're not talking about a separate state, you're talking about a separate page-load.

[CMCDragonkai]

I just went with not using ui-router for the overlay. Seemed difficult. Instead the overlay is manually triggered on a click and the bootstrap dialog service. I then set the url to the full page state and cancel the state transition. But I think ui-router should provide a more elegant capacity for this.

[nateabele]

@CMCDragonkai If you'd like to patch ui-router to create a demo/proof-of-concept, I'd be happy to take a look.