Pop-up Close Action

[electroflame]

Hi there!

Background
I'm using Bubble Card in an, admittedly, non-standard way. As an example, I've got two views:

Home
Kitchen

From Home, I can launch into a pop-up in Kitchen simply by targeting "kitchen#popup" which correctly flips over to the Kitchen view and opens up the Bubble Card matching "#popup".

From Kitchen#Popup, I can then add a button to go back to Home simply by targeting the Home view, or even go back to a popup in Home by targeting "home#popupHome".

All of this works great (and it's not mentioned explicitly, so it's fantastic that it works).

The issue lies in what happens if I were to close the "kitchen#popup" -- I would end up on the Kitchen view, when I want to end up back at Home.

Feature Request
Would it be possible to add a configurable action (On Close, etc.) so I can set a navigation path when the card is closed? That way I could have a card kick me back to Home when closed, rather than setting up a bunch of extra "Back to Home" buttons.

In a nutshell, I'm looking for:

A configurable Close Action that works for all close scenarios, for example:
Hitting the close button
Tapping empty space to close a card
Swiping down, etc.

By being able to set a Navigation Path when closed, it would make it possible to essentially navigate between cards multiple-levels deep, just by keeping track of what URL path a card should kick you back to when closed. This would basically make it possible to have "child popups" that can only direct back to their parent popup.

[electroflame]

Hey, @Clooos, I saw that after (or around) the time I posted this you added the guideline to use discussions -- would you rather I close this and open a discussion instead?

[Clooos]

Done 😁

And this can be a good idea, I will work on that after the release of the v2 👌

[electroflame]

Awesome, sounds good! I think it'll really help polish things up a bit, and allow for some neat cross-view customization that's not 100% doable right now.

Plus it'd solve an organizational problem since you can split up pop-ups into sub-views, too.

[electroflame]

I just tested the newest beta and this works pretty well, thank you @Clooos!

It's now possible to navigate to other pop-ups on other views/pages and essentially nest pop-ups, which really helps organizationally.

There is an issue where since the first pop-up didn't actually "close" before navigating, its open state gets cached so it never animates open again. Maybe an option to reset the state if the action is set to Navigate, and process the reset before running the action?

[Clooos]

Can you provide more details on what you are trying to do? And also what do you mean by "the first pop-up didn't actually "close" before navigating"?

I really need more more context here 😅

But I'm maybe too tired too 🫠

[electroflame]

Sure thing, sorry about that.

So I've got a setup like this:

Home
Remotes

In this setup, Home is the main page and Remotes contain Remote cards for some TVs.

On Home, I have a Pop-up for each room, let's say I'm going to access the Den for this example.

I'm now at the URL /home#den, and in the Pop-up I have a button for the Den's TV Remote. This lives on the Remotes page, but on its own Pop-up (so /remotes#den-remote).

I can successfully jump from /home#den to /remotes#den-remote relatively seamlessly, which is amazing. Now with this latest beta, I can also seamlessly jump back from /remotes#den-remote to /home#den when the /remotes#den-remote Pop-up is closed (great!).

The issue lies in that when jumping from /remotes#den-remote to /home#den I'm actually switching to another view (and/or URL). This means that the Close animation/state isn't applied correctly to /remotes#den-remote as the page is essentially "closed" before it can process anything.

I propose an option or something to trigger a quick reset (no animation, just set the state to closed) before processing any Navigate action. Doing so should make sure that the Pop-up card is ready-to-go when it's navigated to after the first time.

Hopefully that makes sense -- it's a little complicated, but essentially it's navigating between Pop-ups on separate views/pages without the user seeing the page below the pop-up at any point (Pop-up to Pop-up navigation).

[Clooos]

So you don't want any animation on the remote pop-ups? If it's just what you want you can remove it with a custom style, like this:

.bubble-pop-up {
  transition: transform 0s !important;
}

But in your specific case I don't really understand why you would use pop-ups that are just fixed, the best would be to have a single view per remote or to have all your pop-ups on one view to avoid that kind of issue.

In the v2 the pop-ups are not using any resources when they are closed so don't be afraid to have all of them on a single view.

[electroflame]

No, the issue is that, in my example, if you go to a remote popup, and then navigate back to the Room popup, the Room popup will never animate again. It'll always start "opened", as it technically never "closed" before switching to the Remote popup.

Not animating the remote popup is a good idea, though, it'll make it look more seamless.

I'm doing this more as an organizational thing, as I have much more than the two pages I used as an example. Sticking everything in one view makes it super unusable for editing, and does actually make it take longer to initially load the dashboard on mobile devices.

Also, I still want to use popups for the remote, as it looks better on mobile devices than just using a normal page/view, so just sticking them all on one view isn't great on a mobile phone or something with a narrow screen.

[electroflame]

Actually, I've got some strange issues with pop-ups not animating correctly after being closed even when everything is on the same page, so that might be related to #636.

I would still have the issue with the state being messed up when navigating between pages/views, but the animation issue might be caused by a bug in the latest beta.