Can I get {{link-to}} to specify which animation to use with ember fire? - ember.js

Question

I have left/right arrows on a page and I want to pick the animation without having to define a relationship between all the routes. Is it possible to set it on the {{link-to}}? Right now it's pretty brittle.

Answer 1

I have been looking, and I don't think it's possible to know what link was clicked from the transition it caused. However, I can think of two different ways to tackle your use case.
Solution 1: metaprogramming
Make a list of your routes and generate transitions dynamically from it. Something like this:
// app/transitions.js
export default function() {
const orderedRoutes = [
'left-route',
'center-route',
'right-route',
];
// See https://github.com/coleww/each-cons
// where I pinched this from
function eachCons(a, n) {
var r = []
for (var i = 0; i < a.length - n + 1; i++) {
r.push(range(a, i, n))
}
return r
}
function range (a, i, n) {
var r = []
for (var j = 0; j < n; j++) {
r.push(a[i + j])
}
return r
}
eachCons(orderedRoutes, 2).forEach(pair => {
// `pair` will be each pair of consecutive routes
// on our `orderedRoutes` list
const left = pair[0];
const right = pair[1];
// For each pair, define a transition
this.transition(
this.fromRoute(left),
this.toRoute(right),
this.use('toLeft'),
this.reverse('toRight')
);
});
}
Note that I only define transitions for adjacent routes. If you want to define a transition between left-route and center-route, you'll need to alter the algorithm to define new combinations.
Solution 2: callback to fromRoute
The function fromRoute can not only take a string, but also a function. This function receives two parameters: the names of the initial and the final routes of a transition. In this function you can return true if the transition should apply, and false otherwise. See here:
http://ember-animation.github.io/liquid-fire/#/transition-map/route-constraints
You can use this function to decide whether you should be going left or right (as per your use case). See this:
// app/transitions.js
export default function() {
// Names of the routes in the left-right succession
const orderedRoutes = [
'left-route',
'center-route',
'right-route',
];
function isLeft(initial, destination) {
const i0 = orderedRoutes.indexOf(initial);
const i1 = orderedRoutes.indexOf(destination);
if (i0 === -1 || i1 === -1) {
// This is not one of the transitions
// in the left-right succession
return false;
}
if (i0 === i1) {
// They are the same route
return false;
}
// This will be `true` if the initial route
// is "to the left" of the destination route
return i0 < i1;
}
this.transition(
this.fromRoute(isLeft),
this.use('toLeft')
this.reverse('toRight')
);
}
In this example, for each transition we check the initial and the destination route. We see if they belong to the left-right succession, and whether the transition corresponds to a "left" or a "right". If it's a "left" we return true in the "toLeft" case. If it's a "right", we return true in the "toRight" case.