• Choose a category
• All
• Classic-Fiction

By Root 4010 0

after having paused it. The nextSlide method is equally uncomplicated. It just calls our next() method as long as there is another slide available. If we’re at the last slide, loadRSSFeed(0,true) is called to wrap back to the beginning. It then just sets a timer to repeat the process. Piece of cake!

We mentioned that we can pause the slideshow via the pause button, but we haven’t implemented that method yet. Let’s do that now. This is shown in listing 13.35. Listing 13.35 The pause method

pause: function() {

if ( this.paused )

this.startSlideShow(true);

else

clearTimeout( this.transitionTimer );

this.paused = !this.paused;

},

The pause method toggles the paused state of the slideshow. This is tracked by the boolean attribute this.paused. If the slideshow is already paused, the pause method calls startSlideShow, passing true as the resume property; otherwise it clears the transitionTimer attribute, which suspends all slide transitions until the pause button is clicked again.

The final piece related to our slideshow functionality is to allow the slideshow to be augmented with additional RSS feeds via a select box and add button. We saw in the applyButtonBehaviors() function that the add button calls the addFeed method. Let’s implement that to round out our slideshow functionality (see listing 13.36). Licensed to jonathan zheng

554

CHAPTER 13

Building stand-alone applications with Ajax

Listing 13.36 The addFeed method

addFeed: function() {

var selectBox = $(this.id + '_newFeeds');

var feedToAdd = selectBox.options[

selectBox.selectedIndex ].value;

this.options.rssFeeds.push(feedToAdd);

},

This method also relies on an implicit contract with the HTML markup in terms of a naming convention for the select box of additional RSS feeds. The ID of the select box should be the ID of the reader with the suffix _newsFeeds. The method simply takes the selected RSS feed in the select box and appends it to the end of the this.options.rssFeeds array. Nothing more required! Don’t you love it when adding functionality can happen in just a few lines of code?

This rounds out all of the slideshow-related methods. Let’s now briefly look at the methods supporting our transition effects.

Transition effects

There are a few methods that we’ve already referenced that support our fade transitions between slides. Let’s take a moment to decipher transitions. First, we defined a fadeIn() and fadeOut() method pair, as shown in listing 13.37. Listing 13.37 The fadeIn()/fadeOut() method pair

fadeIn: function( layer, onComplete ) {

this.fadeTo( 0.9999, layer, onComplete );

},

fadeOut: function( layer, onComplete ) {

this.fadeTo( 0.0001, layer, onComplete );

},

These two methods both delegate to the fadeTo() method (shown next). They pass to the fadeTo() method an opacity value between 0 and 1—0 indicating the layer is invisible, 1 indicating the layer is completely visible. A value that is mathematically very close to 1 without actually being 1 seemed to cause less flicker in some browsers, which is why we used 0.9999 instead of 1. The layer number (0 or 1) is passed to indicate which layer to fade, and finally a function is passed in that provides a completion callback hook once the fade has completed. The fadeTo() method is implemented as shown in listing 13.38.

Licensed to jonathan zheng

Refactoring

555

Listing 13.38 The fadeTo() method

fadeTo: function( n, layer, onComplete ) {

new Effect.FadeTo( this.getLayer(layer),

n,

this.options.fadeDuration,

12,

{complete: onComplete} );

},

In a bout of utter laziness, or perhaps as a methodical well-thought-out strategy, we decided not to reinvent a fade effect. Instead, we use the Effect.FadeTo provided by the Rico library to perform the fancy fading magic for us. The Effect.FadeTo parameters are illustrated in table 3.5.

Table 13.5 The Effect.FadeTo parameters

Parameter

Description

this.getLayer(layer)

The DOM element to fade

n

An opacity value between 0 and 1

this.options.fadeDuration

How long it should take the fade