Example 3.45. appmonitor2.js (excerpt)
this.doProc = function() {
var self = Status;
if (self.currOpacity == 0) {
if (self.proc == 'proc') {
self.currOpacity = 100;
}
else {
clearInterval(self.procInterval);
if (self.proc == 'done') {
self.startDone();
}
return false;
}
}
self.currOpacity = self.currOpacity - 10;
self.displayOpacity();
};
This method is dead simple -- its main purpose is simply to reduce the opacity of the pollingMessage div by 10% every time it's called.
The first if statement looks to see if the div has completely faded out. If it has, and the animation is still supposed to be running, it resets the opacity to 100 (fully opaque). Executing this code every 90 milliseconds produces a smooth effect in which the pollingMessage div fades out, reappears, and fades out again -- the familiar pulsing effect that shows that the application is busy doing something.
If the animation is not supposed to continue running, we stop the animation by calling clearInterval, then, if the proc property is done, we trigger the "Done" animation with a call to startDone.
Starting the "Done" Animation with startDone
The startDone method serves the same purpose for the "Done" animation that the startProc method serves for the "Processing ..." animation. It looks remarkably similar to startProc, too:
Example 3.46. appmonitor2.js (excerpt)
this.startDone = function() {
var self = Status;
if (self.setDisplay(true)) {
self.currOpacity = 100;
self.displayOpacity();
self.procInterval = setInterval(self.doDone, 90);
}
};
This time, we pass true to setDisplay, which will change the text to "Done" and the color to green.
We then set up calls to doDone with setInterval, which actually performs the fadeout.
The Final Fade
The code for doDone is significantly simpler than the code for doProc. It doesn't have to process continuously until told to stop, like doProc does. It just keeps on reducing the opacity of the pollingMessage div by 10% until it reaches zero, then stops itself. Pretty simple stuff:
Share and Enjoy:
