Create event spies for dojox/app 1.9 transitions.

This problem demanded a solution. We needed a way to act after the app.transitionToView transition defined on line 343 of /lib/dojox/app/main.js ...which reaches into /lib/dojox/app/controllers/Transition.js for a lot of its mechanics where the following is on line 29:

require([this.app.transit || "dojox/css3/transit"], function(t){
   transit = t;
});

 
 

As you can see /lib/dojox/css3/transit.js is ultimately deferred to facilitate the transition, well assuming that the app does not have a transit property, but what if we bolted one on in config.json in the root of our application?

"transit": "foo/transit", ...gets spliced into the file somewhere.

 
 

The "foo" folder holds the application's custom code, including app.js. Rather than write our own way of facilitating transitions, our old module will just be deferred to by our new module. We only introduce a new module in the name of extending the old module. We do not want to alter the code in the dojox stuff directly as that would make it hard to upgrade when version 2.0 rolls out, so instead we have a need to introduce a middleman at /foo/transit.js:

define(["dojox/css3/transit", "dojo/when", "dojo/_base/connect"],
   function(transit, when, connect) {
      return function(from, to, options) {
         var promise = transit(from, to, options);
         when(promise, function() {
            connect.publish("/foo/domTransitionFinished", from);
         });
         return promise;
      };
});

 
 

Above an event will be fired whenever a transition finishes. I can't tell if an asynchronous promise comes back from /lib/dojox/css3/transit.js or if code runs synchronously and locks up the application until the transition is complete, but either way, the /foo/domTransitionFinished event is fired upon completion and then may be consumed in /foo/app.js like so:

connect.subscribe("/foo/domTransitionFinished", doDomCleanup);
function doDomCleanup(domNode) {
   alert('whatever');
}

 
 

For this to work connect has to be added to the app.js AMD module at its top. Clearly, you will moreover want doDomCleanup to do more than fire an alert.

Addendum 6/14/2013: The stuff of the dojo/when when function above should indeed be returning its contents as a promise.

Another Addendum 6/14/2013: domNode.id will give you the id of the div wrapping the view you just left. Think:

function doDomCleanup(domNode) {
   alert(domNode.id);
}