Liquid Fire Demo #3 - Explode & FlyTo

controllers.application.js

import Ember from 'ember';


let duration = 400;

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  animationRules: animationRules

});


function animationRules() {
  this.transition(
    this.toValue(true),
    this.useAndReverse('fade', { duration })
  );
}

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('item', { path: '/:id' });
});

export default Router;

routes.application.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    let result = [];
    for (let i = 1; i<= 10; i++) {
      result.push({
        id: i,
        name: `Product #${i}`
      });
    }

    return result;
  }
});

styles.app.css

.header, .footer {
   position: fixed;
   height: 75px;
   width: 100%;
   background: orange;
   left: 0px;
 }
 .header { top: 0px; }
 .footer { bottom: 0px; }
 .application__body {
   position: fixed;
   width: 100%;
   top: 75px;
   bottom: 75px;
 }

 .item {
   border: 1px solid black;
   margin: 5px;
 }

 .index__scroll-container {
   height: 100%;
   overflow-y: scroll;
   /* Required for momentum scrolling in iOS Safari.
      also overflow-y has to be 'scroll' and not 'auto'
    */
   -webkit-overflow-scrolling: touch;
 }

.item.focused {
   border: 1px solid red;
   margin: 5px;
 }

.liquid-container, .liquid-child {
   weight: 100%;
   height: 100%;
}

templates.application.hbs

<div class='header'>
  {{#from-elsewhere name="header" as |header|}}
    {{#liquid-bind header rules=animationRules as |opts|}}
      {{opts.title}}
    {{/liquid-bind}}
  {{/from-elsewhere}}
</div>

<div class='application__body'>
  {{liquid-outlet}}
</div>

<div class='footer'>
  Footer
</div>

templates.index.hbs

<div class='index__scroll-container'>
  {{#each model as |item|}}
    {{#link-to 'item' item}}
      <div class='item' data-item-id={{item.id}}>
        {{item.name}}
      </div>
    {{/link-to}}
  {{/each}}
</div>

{{to-elsewhere named="header" send=(hash title="Product List")}}

templates.item.hbs

<div class='item focused' data-item-id={{model.id}}>
  {{model.name}} Detail
</div>

{{link-to 'Back' 'application'}}

{{to-elsewhere named="header" send=(hash title="Details")}}

transitions.js

let duration = 1000;

export default function(){
  this.transition(
    this.fromRoute('index'),
    this.toRoute('item'),
    this.useAndReverse('explode', {

      // Liquid Fire matches elements on data-item-di
      // And will animate one to the other if the value matches.
      matchBy: 'data-item-id',
      use: ['flyTo', { duration } ]
    }, {

      // Everything that doesn't match uses crossFade
      use: ['crossFade', { duration }]
    })
  );
}

twiddle.json

{
  "version": "0.10.7",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-template-compiler": "2.5.1",
    "ember-testing": "2.5.1"
  },
  "addons": {
    "liquid-fire": "0.25.0",
    "ember-elsewhere": "0.4.1"
  }
}