before and after callbacks

[teejayhh]

First of all I really like meteorhacks libs and I wanted to give flowrouter/ flowlayout a shot. So I played around with it a little bit and tried to implement transitions between route changes. As far as I can see there is no code which gets called just after a template has been added to the dom or just before it gets removed from the dom.

It is possible to use -> http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers and bind event listeners to templates. Those dom events should be bound to the regions. I am just brainstorming here and would like your opinion if this could be a good solution without touching the layout component at all. Or if it would be better to implement callbacks which delay the reset or on after insert?

Cheers Thomas

[arunoda]

I'm quite not sure about this. But we have triggers in the router: https://github.com/meteorhacks/flow-router#triggers

[teejayhh]

let me try this out tonight, but I figured you take so much care separating the concerns so that this sort of thing made sense to be with the layout rather than the router.

[teejayhh]

The situation is a little bit tricky. Lets say you would like to transition from one page to another with a content slide - left to right or right to left for instance you would need 2 templates rendered at the same time on route click. The current page/slide sits on screen and the next slide sits offscreen. Once you change the route the two templates would change places with an animation. I can only see this working if you use two or more different regions.

You also need some sort of config one each route to keep track in which state it is. You could set up a rule which says that only one region is visible at a time and always the non visible region will be used for the next content population.

Here is a quick prototype to illustrate what I would like to do.

FlowRouter.route('/', {
    name:'login'
    ,subscriptions: function(params, queryParams) {
    }
    ,action: function(params) {
        FlowLayout.render("loginLayout",{'main1':'login'});
    }
    ,triggersExit: [function(context, redirect) {
        TweenMax.fromTo($("#main1"),1,{autoAlpha:1,y:0},{autoAlpha:0,y:50});
        console.log('exit login');
    }]
    ,triggersEnter: [function(context, redirect) {
        TweenMax.fromTo($("#main1"),1,{autoAlpha:0,y:50},{delay:0.5,autoAlpha:1,y:0});
        console.log('enter login');
    }]
});

FlowRouter.route('/register', {
    name:'register'
    ,subscriptions: function(params, queryParams) {
    }
    ,action: function(params) {
        FlowLayout.render("loginLayout",{main2:'register'});
    }
    ,triggersEnter: [function(context, redirect) {
        TweenMax.fromTo($("#main2"),1,{autoAlpha:0,y:50},{delay:0.5,autoAlpha:1,y:0});
        console.log('enter register');
    }]
    ,triggersExit: [function(context, redirect) {
        TweenMax.fromTo($("#main2"),1,{autoAlpha:1,y:0},{autoAlpha:0,y:50});
        console.log('exit register');
    }]
});

This is all super static and will probably fall apart as soon as subscription come into play.

[joefru]

Could you use Template.myTemplate.onCreated and/or .onRendered to achieve this?

[ryanbuiltthat]

@teejayhh did you ever get your transitions working?

[jiku]

Maybe a callback after onCreated, onRendered, etc? For anything that needs to be done on routing after those events. For me, I sometimes add event listeners last in onRendered that I want to emit to on routing.

[danieldietrich]

I used this workaround as after-callback (in the specific case of rendering a template in the flow-router): https://github.com/arillo/meteor-flow-router-helpers/issues/23#issuecomment-140350946