overload the _transition method in Dojo

Question

I am going insane on this one. All I want to do is inherit from StackContainer and add a simple effect. PLEASE NOTE: I know there are overcomplicated, experimental widgets out there that do do transitions. However, their code is a total overkill. What I am after, is the simplest, working way for a stack container to do transitions.

This is a NON-working example:

declare('app.StackFade', [ StackContainer], {

  _transition:function(newWidget, oldWidget){

   // this.inherited(arguments); // This breaks things, obviously

    console.log("Transition called");
    html.style(oldWidget.domNode, "opacity", 1);// Random attempt
    baseFx.fadeOut({
      node:oldWidget.domNode,
      duration: 500,
      onEnd: function(){
        console.log("First animation finished");
        baseFx.fadeIn({
          node:newWidget.domNode,
          duration:500,
          onEnd: function(){
            html.style(newWidget.domNode, "opacity", 0);
            lang.hitch(this,"inherited", arguments, arguments); // this doesn't work
            console.log("Second animation finished");
          },
       }).play();
      }
    }).play();

  }
}

How do I turn this non-working example into a working one? Again, I am after something very simple, plain, a few lines of code to change _transition and that's it!

Answer 1

My favourite activity, answering my own question... There seem to be problems with Dojo, lang.hitch and this.inherited(arguments).

The solution is to get this into that, and also arguments into a (where a and that are variable local to the function).

I ended up creating a mixin which can be mixed in to any stack container (also works with tab containers) giving it a "fade" effect...

Enjoy.

define([
  "dojo/_base/declare",
  "dojo/_base/html",
  "dojo/_base/fx",
  "dojo/_base/lang",
  "app/defaults",
  "app/globals",

   ], function(
     declare
     , html
     , baseFx
     , lang
     , BusyButton
     , defaults
     , g
 ){

return declare('app._StackFadingMixin', null, {

  fadeInInProgress: null,
  fadeOutInProgress: null,

  _transition:function(newWidget, oldWidget){

    // console.log("Transition called");

    // Needed later for calling this.inherited(arguments);
    that = this;
    var a = arguments;

    /*
    console.log("Values:");
    console.log("FadeInInProgress :" + this.fadeInInProgress);
    console.log("FadeOutInProgress :" + this.fadeOutInProgress);
    */

    // An animation was stopped: don't do the whole animation thing, reset everything,
    // called this.inherited(arguments) as if nothing happened
    if( this.fadeInInProgress || this.fadeOutInProgress ){

       // Stop animations
       if( this.fadeInInProgress ){ this.fadeInInProgress.stop(); }
       if( this.fadeOutInProgress ){ this.fadeOutInProgress.stop(); }

       // Reset opacity for everything
       html.style(newWidget.domNode, "opacity", 1);
       html.style(oldWidget.domNode, "opacity", 1);

       // call inherited(arguments) as if nothing happened
       this.inherited(arguments);
       return;
     }

    // ////////////////////////////////////////
    // // FADEOUT
    // ////////////////////////////////////////
    // console.log("Fade out starting");
    that.fadeOutInProgress = baseFx.fadeOut({
      node:oldWidget.domNode,
      duration: 150,
      onStop: function(){
        that.fadeOutInProgress = null;
        // console.log("Fadeout stopped");
      },

      // ////////////////////////////////////////
      // // FADEIN
      // ////////////////////////////////////////
      onEnd: function(){

        that.fadeOutInProgress = null;

        // Make the widget transparent, and then call inherited -- which will do the actual switch.
        html.style(newWidget.domNode, "opacity", 0);
        that.inherited(a);
        // console.log("Fadeout ended");

        // At this point the widget is visible, selected but transparent.
        // Let's fix that...
        // console.log("Fade in starting");
        that.fadeInInProgress = baseFx.fadeIn({
          node:newWidget.domNode,
          duration: 150,
          onStop: function(){
            that.fadeInInProgress = null;
            // console.log("Fadein stopped");
          },
          onEnd: function(){
            // console.log("Fadein ended");
            that.fadeInInProgress = null;
          },
       }).play();
      }
    }).play();
  }
}); // Declare

}); // Define