• Choose a category
• All
• Classic-Fiction

By Root 3928 0

here, a load is required if we’re currently on the first item of a feed. The previous RSS feed will have to be loaded in order to be displayed. The fade-out method, which we’ll examine in the “Transition effects” section on page 554, fades out the visible layer. What the method does next depends on whether or not it needs to load some content before it can display it. If we have to load content, then we initiate the load of that content via the loadRSSFeed() method. The first parameter is the index of the feed to be loaded, and the second parameter is a boolean value indicating a forward direction (false in this case). But if the content is already loaded, we call previousPartTwo() after a delay of one fourth of the overall fadeDuration. The “part two” of the method simply updates the itemIndex property and then calls updateView(), which fades in the appropriate slide.

Confused? Well, what’s going on is that if the content that needs to be displayed isn’t loaded, then the load is initiated immediately, which causes an update of the UI as soon as the response comes back. The time it takes for the response to come back provides a natural delay for the fade-in! On the other hand, if the content is already loaded (that is, we’re looking at a different article in the same RSS feed that’s loaded), then we intentionally delay by a quarter of the fade duration before we fade-in the next slide. Pretty slick, huh?

The next() method, shown in listing 13.33, is an inverse of the algorithm described previously.

Listing 13.33 The next() method

next: function() {

if ( !this.hasNext() ) return;

var requiresLoad =

this.itemIndex == (this.currentFeed.items.length - 1);

this.fadeOut( this.visibleLayer, Prototype.emptyFunction );

this.visibleLayer = (this.visibleLayer + 1 ) % 2;

if ( requiresLoad )

this.loadRSSFeed( this.feedIndex + 1, true );

Licensed to jonathan zheng

552

CHAPTER 13

Building stand-alone applications with Ajax

else

setTimeout( this.nextPartTwo.bind(this),

parseInt(this.options.fadeDuration/4) );

},

nextPartTwo: function() {

this.itemIndex++; this.updateView();

},

Look familiar? The next() method reverses the logic in terms of indexing but otherwise is identical to the algorithm shown previously. Note that the previous()/next() method pairs toggle the visible layer with each transition from one slide to the next with the expression

this.visibleLayer = (this.visibleLayer + 1) % 2;

This just tells the code that ultimately updates the UI as a result of the content load or the explicit call to updateView() into which layer to put the result. Recall that the content area of the reader has HTML markup that looks something like the following:

The visibleLayer is just an integer property that keeps track of into which div to put content. An index of 0 tells the UI update to put the content into Layer 0. A value of 1 indicates to put the content into Layer 1.

Now that we have the methods in place to provide forward and backward functionality, we can use these to create our slideshow methods. Let’s dissect those now. The startSlideShow method, which you will recall was invoked from our start() method, and its companion nextSlide() are shown in listing 13.34. Listing 13.34 The slideshow navigation methods

startSlideShow: function(resume) {

var delay = resume ? 1 : this.options.slideTransitionDelay;

this.transitionTimer = setTimeout(

this.nextSlide.bind(this),

delay );

},

nextSlide: function() {

if ( this.hasNext() )

this.next();

Licensed to jonathan zheng

Refactoring

553

else

this.loadRSSFeed(0, true);

this.transitionTimer = setTimeout(

this.nextSlide.bind(this),

this.options.slideTransitionDelay );

},

Our startSlideShow method just calls nextSlide on a delay. The delay is either the slideTransitionDelay or a single millisecond (effectively immediate), based on whether or not we’re resuming the slideshow