`didAnimateIn` hook for Liquid Fire

cross-fade.js

import { animate, stop, Promise } from "liquid-fire";
import didAnimateIn from './helpers/did-animate-in';

/**
 * Liquid Fire's cross fade animation with the `didAnimateIn` hook added.
 */
export default function crossFade(opts={}) {
  stop(this.oldElement);
  let promise = Promise.all([
    animate(this.oldElement, {opacity: 0}, opts),
    animate(this.newElement, {opacity: [(opts.maxOpacity || 1), 0]}, opts)
  ]);

  promise.then(() => {
    didAnimateIn(this.newView);
  });

  return promise;
}

did-animate-in.js

/**
 * Fire the `didAnimateIn` hook.
 * @param  {Ember.View} newView The liquid fire `newView`
 */
export default function(newView) {
  if (newView) {
    let view = findLiquidComponent(newView);
    if (view) { view.trigger('didAnimateIn'); }
  }
}

const MAX_DEPTH = 6;

/**
 * Recursively find the correct Ember View that corresponds to the liquid
 * component.
 * Related: https://github.com/ef4/liquid-fire/issues/280
 * Related: https://github.com/ef4/liquid-fire/issues/16
 *
 * @param  {Ember.View} newView The liquid fire newView
 * @param  {Integer} depth      The current depth
 * @return {Ember.View}         The component view
 */
var findLiquidComponent = function(newView, depth=1) {
  var view = newView.get('childViews.0');

  if (view.get('IS_LIQUID_COMPONENT') || depth >= MAX_DEPTH) {
    return view;
  } else {
    return findLiquidComponent(view, depth + 1);
  }
}

example-modal.js

import Ember from 'ember';

export default Ember.Component.extend({
  /**
   * A public constant for checking to see that this is a liquid component
   */
  IS_LIQUID_COMPONENT: true,

  afterAnimation: Ember.on('didAnimateIn', function() {
    this.$('input:first').focus();
  }),
});