Router component: dynamic usage possible?

I’m using router components a lot, and that works great. Sometimes I have a situation, where I would like to be able to use some component as regular page and as popup depending on the ‘user route’. This might be dependent on UX decisions: open a detail panel in new page, or in a popup with push:true option.

Currently, I maintain two versions of some components: one with <div class="page"> layout, and one with <div class="popup"> layout, each with a corresponding route.

I’m wondering if it is possible to setup a component without a specified page/popup/modal container, and define the way it should be openend with a router.navigate option (and matching data- attribute on a link).

1 Like

At the moment, the most can be done here is, for example, moving the page itself to a separate path. And still keeping two routes with Popup like:

<template>
  <div class="popup">
    <div class="view view-init" data-url="/some-common-page/"></div>
  </div>
</template>

So popup will reuse that page.

But yeah, it seems like it can be a good new feature for Framework7

1 Like

Thanks @nolimits4web! That is exactly the workaround I was looking for, but couldn’t get my mind around it. Having a separate route for a popup version is no problem, but at least I didn’t want to have two copies of the same page component, with the only difference being the ‘container’.

I think I’m going to create a generic “popup container component”, like this

<template>
  <div class="popup">
    <div class="view view-init" data-url="{{js "this.$route.url.substr(6)"}}"></div>
  </div>
</template>

Then create regular routes like /my-page for a page itself, and a single /popup/(.*) route which only loads the popup container and passes the full url minus the /popup part to the view.

Now I can easily modify a button to open a page in a popup by prepending /popup/ in it’s href url.

1 Like