Both the "Processing ..." and "Done" animations share the setDisplay method:
Example 3.42. appmonitor2.js (excerpt)
this.setDisplay = function(done) {
var self = Status;
var msg = '';
if (done) {
msg = 'Done';
self.div.className = 'done';
}
else {
msg = 'Processing...';
self.div.className = 'processing';
}
if (self.div.firstChild) {
self.div.removeChild(self.div.firstChild);
}
self.div.appendChild(document.createTextNode(msg));
return true;
};
Since the only differences between the "Processing ..." and "Done" states of the pollingMessage div are its color and text, it makes sense to use this common function to toggle between the two states of the pollingMessage div. The colors are controlled by assigning classes to the pollingMessage div, so we'll need to add CSS class rules for the done and processing classes to our style sheet:
Example 3.43. appmonitor2.css (excerpt)
.processing {
color: #339;
border: 1px solid #339;
}
.done {
color:#393;
border:1px solid #393;
}
Making it Stop
Stopping the animation smoothly requires some specific timing. We don't want the animation to stop abruptly right in the middle of a pulse. We want to stop it in the natural break, when the "Processing ..." image's opacity is down to zero.
So the stopProc method for stopping the animation doesn't actually stop it per se -- it just sets a flag to tell the animation process that it's time to stop when it reaches a convenient point. This is a lot like the phone calls received by many programmers at the end of the day from wives and husbands reminding them to come home when they get to a logical stopping point in their code.
Since very little action occurs here, the method is pretty short:
Example 3.44. appmonitor2.js (excerpt)
this.stopProc = function(done) {
var self = Status;
if (done) {
self.proc = 'done';
}
else {
self.proc = 'abort';
}
};
This method does have to distinguish between two types of stopping: a successfully completed request (done) and a request from the user to stop the application (abort).
The doProc method uses this flag to figure out whether to display the "Done" message, or just to stop.
Running the Animation with doProc
The doProc method, which is invoked at 90 millisecond intervals, changes the opacity of the pollingMessage div to produce the pulsing effect of the processing animation. Here's the code:
Share and Enjoy:
