Container classes can be subclassed to create all kinds of rich custom controls. The PhotoBox, which we will build in this tutorial, is an example of how Panel can be subclassed and styled to create a basic popup photo viewer with back and forward navigational controls.
The first step to subclassing the Panel is writing the constructor for the new subclass (PhotoBox, in this case) and specifying its inheritance from the Panel class using YAHOO.extend:
Next, we will define a few constants for use by the PhotoBox class: "CSS_PHOTOBOX", which defines the CSS class to apply to the Panel, and "NAV_FOOTER_HTML", the HTML that will be used for the footer navigation.
Next, the initialization method for the PhotoBox is defined. The first step the initialization must perform is to call the superclass's init method so that the superclasses can initialize first. Then, we fire the beforeInitEvent and add the CSS class to the Panel, and apply the user's configuration properties. The rest of the method configures the footer navigation and fires the initEvent to indicate that the initialization is complete. The full init code is below:
The PhotoBox has a custom property called photos that accepts an array of object literals containing photo URLs and captions to use. The call to addProperty defines the handler that will be executed when the "photos" property is changed. In this case, that handler is the configPhotos method, which is discussed below. Also of note is the "suppressEvent" property, which prevents configPhotos from being fired until a value is set.
The configPhotos handler, which is fired when the "photos" property is changed, iterates through the list of photo object literals and preloads the image for each photo. At the end of this process, the PhotoBox is automatically set to display the first image in the set, through a call to setImage(0).
The setImage function uses an index to grab an image from the "images" array, and places it into the body of the PhotoBox. In addition, it sets the photo's caption, and determines whether the next and back navigation buttons should be displayed, based on the current image index. For instance, image 0 would not display a "back" button, and the last image in the set would not display the "next" button.
The next and back methods are used to navigate back and forth through the photos featured in the PhotoBox. They function by evaluating the index of the currently displayed image and adding or subtracting one to that number. Then, a call to setImage actually changes the photo.
The final step in subclassing Panel is to override the "modal" property to allow for the modality mask that overlays the document to fade in and out in an animated fashion. The customizations employed here detect the opacity of the mask and allow for showMask and hideMask to fade the mask in until it reaches that initial opacity, and out until it's completely transparent.
The last part of the tutorial involves instantiating the PhotoBox once the class has been defined. As you will see in the code below, many of the properties being used are familiar from the Panel API, with the addition of the new "photos" property that allows the photo set to be specified: