overload the _transition method in Dojo
-
25-06-2021 - |
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!
Solution
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