F7-push-backwards breaking links

Questions
1

In the kitchen sink using (core) code, I have added an onclick handler to a button and when I run the following code

app.views.main.router.navigate('/', {transition: 'router-transition-f7-push-backward'});

It works… once!

And then all links become dead. This seems to be the case in Chrome and iOS. I’m pretty certain this is something I’m doing wrong but IDK what.

Lastly, how do you set the duration on this to 300ms (or some other value?) as the one time it does run, it pops!

Update: When I remove the transition from the app.views.main.router.navigate() and add it into the routes using options:transition like this:

  // Index page
  {
    path: '/',
    // url: './index.html',
    name: 'home',
    on: {
      pageBeforeIn: () => {console.log("home page init"); }
    },
    options: {
      transition: 'f7-push-backward'
    },
    async(routeTo, routeFrom, resolve, reject) {
      console.log("rerouting");
      if (bFirstTime == true)
      {
        resolve({ url: './pages/onboard.html' })
      }
      else if(bLoggedIn == false)
      {
        resolve({ url: './pages/welcome.html' })
      }
      else
      {
        resolve({ url: './index.html'});
      }
    }    
  },

it breaks the links as well.

2

There is no f7-push-backward transition in Framework7. There is only f7-push
exists https://framework7.io/docs/view.html#custom-page-transitions

3

So then what’s the transition for backwards?

4

I’ve tried this:

    options: {
      transition: 'router-transition-f7-push-backward'
    },

and this:

app.views.main.router.navigate('/', {transition: 'router-transition-f7-push-backward'});

The docs say there is an f7-push transition and shows to use it as

    options: {
      transition: 'f7-push'
    },

And later it suggests using the “router-transition-[name]-backward” so we’re assuming that since f7-push is a built-in transition then “router-transition-f7-push-backward” would work.

Since f7-push seems to be the default and that is actually preferred for this app when navigating away from ‘/’ to any other page but when navigating from any other page back to ‘/’ home we want the transition to be backward.

But I’m not getting the page transition to go backwards. What’s the trick to this?

5

Where does it suggest to use that name? :slight_smile:

In addition to built-in transition, we can create custom ones. It is possible to do with CSS animations.

When we specify custom page transition, router adds following classes to its element ( <div class="view"> ):

  • router-transition-[name]-forward - when navigating to new page
  • router-transition-[name]-backward - when navigation to previous page (going back)

And it waits for animationend event on page-next when navigating forward, and on page-current when going back.

6

To go backwards in history you need to use router.back() method and it will happen with backward transition, why do you try to find some workarounds?

7

That’s not my experience with router.back(’/’);

app.views.main.router.back('/', {force: 'true'});

Uses the same push forward transition when going from any page back to the following home page

<div id="homePage" class="page page-home" data-name="home">
  <div class="page-content">
    <div class="block-title block-title-medium searchbar-found">Pages</div>
    <p>blah blah</p>
  </div>
</div>

Routes (no transition defined):

{
  path: '/',
  name: 'home',
  async(routeTo, routeFrom, resolve, reject) {
    const router = this;
    if (bFirstTime == false)
    {
      reject();
      router.navigate('/onboarding/');
    }
    else if(bLoggedIn == false)
    {
      reject();
      router.navigate('/welcome/');
    }
    else
    {
      reject();
      router.navigate('/home/');
    }
  }        
},

NOTE: This is on iOS 12.4.3 and 11.4.1. Apparently Android (8.0.0) uses a different transition method so the backwards isn’t so obvious.

8

Do we have a solution to this or in

router.navigate('/page/', {transition: 'something-backwards'});
1 Like
9

Hi @PPetree,

I think the issue is how you’re using router.navigate within an “async” route method… That does not look normal to me. The async route is designed to either call “resolve” or “reject” to handle what happens to the already requested route…

You use “reject” but then you FORWARD navigate to welcome, home or on boarding… You should be using the “resolve” method and then put in your your componentURL or your URL in that as a parameter.

You can see examples of the async method here: https://framework7.io/docs/routes.html#async-route

Can you try changing your code to something like:

{
  path: '/',
  name: 'home',
  async(routeTo, routeFrom, resolve, reject) {
    const router = this;
    if (bFirstTime == false)
    {
      // reject();
      // router.navigate('/onboarding/');
     resolve({ url: 'onboarding.html' });
    }
    else if(bLoggedIn == false)
    {
      // reject();
      // router.navigate('/welcome/');
      resolve({ url: 'welcome.html' });
    }
    else
    {
      // reject();
      // router.navigate('/home/');
      resolve({ url: 'home.html' });
    }
  }        
}

Notice that on all of your if statements you are not stopping them (ie: rejecting) so you should not use the “reject” function if I am reading your intent properly. Also… I am guessing on the “url” part of the resolve function. You didn’t post your whole routes file so I can’t tell if you are using plain html files or components to use “componentUrl: ‘home.html’” for example.

In my apps the reject is only ever used to stop someone from navigating (back or forward) to a specific page unless they have the right password or clearance to do so.

Try using the resolve function and let us know if it solved the issue you were having!

  • Matt
10

Hey Matt, thanks for that. Worked like a charm.

My “issue” is that it’s REALLY bad coding practice to define the same data in more than one place so I was trying to use the /path/ associated with ‘home’ and let the router do the lookups so that way if the page associated with /home/ ever gets changed, it only has to be changed in one place. Now /home/, /onboarding/ and /welcome/ all have two places. I think async needs a ‘path’ in addition to all the other methods.

11

I am glad to hear that worked!

I hear you on the issue of bad coding practices but I think there are many solutions to that statement that are up to the programmer, not the framework/library/tool/etc… For example I use webpack on v5 and import my component pages so I have a variable at the top of my routes file that links to the filename. If you did that then the filename would only be written in one spot. I am not saying that is the solution for you just something you can do.

In the way you want to do it… Have you looked at the “redirect” function? It looks like it would allow you to do what you wanted by passing in the route url instead of the filename for each…

https://framework7.io/docs/routes.html#redirect-alias

Your code would then be:

{
  path: '/',
  name: 'home',
  redirect: function (route, resolve, reject) {
    //const router = this;
    if (bFirstTime == false)
    {
      // reject();
      // router.navigate('/onboarding/');
     resolve('/onboarding/');
    }
    else if(bLoggedIn == false)
    {
      // reject();
      // router.navigate('/welcome/');
      resolve('/welcome/');
    }
    else
    {
      // reject();
      // router.navigate('/home/');
      resolve('/home/');
    }
  }
  • Matt
12

I hadn’t found redirect. When I first posted the question about rerouting the home page to a login/welcome-back/onboarding page I was given two options. @nolimits4web suggested one that worked well on app init but I couldn’t figure out how to get it to work for situations like when a user was logged out. Then @pvtallulah gave me his solution using async() but I struggled to get that to work. Before I added the reject(), after you had navigated back to the home page from welcome or onboarding then F7 stopped redrawing the new page and reject fixed that.

After 7 years of JQuery Mobile, right now, I’m still experimenting with kitchen-sink (core) and figuring out how many ways I can break it before I get what I need to work. LOL Some things have been surprisingly easy to do while other things are like pulling teeth. Some of its new architecture blues, some are me trying to do it the way I’m used to and some are just plain hard to do. The good news is that lots of people like you have figured out cool ways to do most things and are quite helpful…

Now let me try redirect: for the rest of the day and then tomorrow I’ll post about the problem I’m having with icons in the menu. Again, thanks for your help!

NOTE: The redirect worked perfectly as well. Even better actually as I could use the component mapping.

13

If anyone else is wanting to push in reverse here is a custom transition called push-reverse that I use. Enjoy!

.router-transition-push-reverse-forward .page-current	{ animation: push-reverse-current-to-prev 400ms; }
.router-transition-push-reverse-forward .page-next		{ animation: push-reverse-next-to-current 400ms; }
@keyframes push-reverse-current-to-prev 				{ from{transform:translateX(0%)} to {transform:translateX(100%)} }
@keyframes push-reverse-next-to-current 				{ from{transform:translateX(-100%)} to {transform:translateX(0%)} }
2 Likes
14

Excellent! I had it on my to-do to write a custom reverse. Thanks for sharing!

15

It is working but I am not able to understand and back animation for f7-parallax. Can you please explan and give detail example.

Thank you