Transition to the same route: loop transition

[gentunian]

Hi,

Is it possible to transition into the same route? I can't make it work.

Imagine you have a route /import/:index where in each state based on index you provide a UI for the user to manipulate imported data. You want to provide a next button to continue importing values. The template will be the same but rendered with index + 1 data.

A nice UI slide transition will apparently looks good to the user making him believe his is sliding into the next value.

This is what I've tried:

The settings:

Transitioner.setTransitions({
        'import->import': 'left-to-right',
    });

The route:

FlowRouter.route('/import/:idx', {
    action: function (params, queryParams) {
        // do nothing we are just testing if the transition applies...
        BlazeLayout.render('layout', { top: 'header', main: 'import'});
    },
    name: 'import'
});

Layout and template:

<template name="layout">
    {{#momentum plugin='flow-router'}}
            {{> Template.dynamic template=top}}
            {{> Template.dynamic template=main}}
    {{/momentum}}
</template>

<template name="contentWrapper">
        <div class="frt-fixed-content-wrapper" style="padding-top: 50px;">
            {{> UI.contentBlock}}
        </div>
</template>

<template name="import">
        {{#contentWrapper}}
                <button type="button" class="btn btn-default">Test button</button>
        {{/contentWrapper}}
</template>

And in the browser console I type: FlowRouter.go('/import/1'); and FlowRouter.go('/import/2'); ... etc.

Any ideas?

[PhilippSpo]

With how the momentum plugin works you have to have a node changing state (being added/removed) in the top level below the momentum helper. This is due to the fact that mometum is built on ui-hooks. Since in your UI nothing but the route is changing it will be hard to realize.. I'll take a look myself and see if I can figure something out ;)

[gentunian]

I see, I did that in order to test if possible. I'll came back to you with a contextual data example. Hope it'll work!

[gentunian]

I guess you were right. A temporal template it's needed. The test I've done is this:

FlowRouter.route('/importing/:idx', {
    action: function (params, queryParams) {
        var odd = params.idx % 2? 'Even' : 'Odd';
        BlazeLayout.render('layout', { top: 'header', main: 'importing' + odd});
    },
    name: 'importing'
});

<template name="importingEven">
    {{#contentWrapper}}
        <button type="button" class="btn btn-default">Le button</button>
        <div>test test test</div>
    {{/contentWrapper}}
</template>

<template name="importingOdd">
    {{#contentWrapper}}
        <button type="button" class="btn btn-default">Le button</button>
        <div>test test test</div>
    {{/contentWrapper}}
</template>

That is working, and the transition effect is the default.

So, I think that you need a temporal template to switch between the two in order to provide the effect.

[PhilippSpo]

Nice to hear that. The problem with doing this without momentum / changing templates is, that meteor does not actually switch the whole node but just the content of it (e.g.) text. I am not quite sure how one would solve this..