Control Animations on Ember Views

readme.text

// The Animation package try to provide a way to: 
// -- disable user events when animations is running
// -- delay animations
// -- give the possibility to run the animations (immediately or depending of the state of the continuous animation stack)

animatable_view.js

AnimatableView = Ember.ContainerView.extend(Em.Animatable,{
   
   executeAnimation: function() {
      .......
      this.animate({duration: that.duration, stopEventHandling:true}, function() {

         # perform animations based on your JS choices

         move('#'+id)
          .x(translatePosition)
          .duration(that.duration)
          .end();

       }, function() {
          # do something on end
       });
      .......
   }
});

core.js

var get = Ember.get , set = Ember.set, setPath = Ember.setPath, getPath = Ember.getPath;


// The Animation package try to provide a way to: 
// -- disable user events when animations is running
// -- delay animations
// -- give the possibility to run the animations ( immediately or after the current continous animation stack have been ended )



Ember.EventDispatcherEnabled = true; 

Ember.EventDispatcher.reopen({

  setupHandler: function(rootElement, event, eventName) {
    var self = this;

    rootElement.delegate('.ember-view', event + '.ember', function(evt, triggeringManager) {

      if ( Ember.EventDispatcherEnabled ) {

        var view = Ember.View.views[this.id],
            result = true, manager = null;

        manager = self._findNearestEventManager(view,eventName);

        if (manager && manager !== triggeringManager) {
          result = self._dispatchEvent(manager, evt, eventName, view);
        } else if (view) {
          result = self._bubbleEvent(view,evt,eventName);
        } else {
          evt.stopPropagation();
        }

        return result;

      }
    });
  },


});


Em.Animation = Em.Object.extend({
  options: null, //{duration, delay, stopEventHandling, immediately}}  
  fn: null,
  callback: null, 

  init: function(){
    this._super();
  }

});


Em.AnimationManager = Em.Object.create({

  content: Ember.A(),
  animation: null,

  init: function(){
    this._super();
  },

  push: function(animation) {

     if ( animation.options.immediately ) {
       this.run(animation);
     } else {
       this.get('content').pushObject( animation );
       this.startNewAnimation(); 
     }

  },

  endCurrentAnimation: function() {
    this.set('animation', null);
  },

  startNewAnimation: function() {

    if (!this.get('animation') ) {

      var animation = this.get('content').popObject();

      if ( animation ) {
        this.set('animation', animation);
        this.run( animation );
      }

    } 

  },

  startEventHandling: function() {
    Ember.EventDispatcherEnabled = true;
  },

  stopEventHandling: function() {
    Ember.EventDispatcherEnabled = false;

  },

  run: function(animation) {

    if ( !animation.options.delay ) {
      animation.options.delay = 0;
    }

    var that = this;

    setTimeout(function(){

      if ( animation.options.stopEventHandling ) {
        that.stopEventHandling();
      }

      animation.fn();

      setTimeout(function(){

        if ( animation.options.stopEventHandling ) 
          that.startEventHandling();

        // OJO: testing think about, back animations can be immediately
        if ('function' == typeof animation.callback)
          animation.callback();

        if ( !animation.options.immediately ) {

          that.endCurrentAnimation();
          that.startNewAnimation();

        }

      }, animation.options.duration);

    }, animation.delay);

  }

});


Em.Animatable = Em.Mixin.create({

  animate: function(options, fn, callback) {

    var animation = Em.Animation.create({
      options: options,
      fn: fn,
      callback: callback
    });

    Em.AnimationManager.push( animation );

  }

});