scroller.js

仿照著名的petstore写的网上书店

/* Copyright 2006 Sun Microsystems, Inc. All rights reserved. You may not modify, use, reproduce, or distribute this software except in compliance with the terms of the License at: http://developer.sun.com/berkeley_license.html
$Id: scroller.js,v 1.32 2007/01/17 18:00:09 basler Exp $ */

/**
* ImageScroller - A multipurpose item brower
* @ Author: Greg Murray
*
*/

function getApplicationContextRoot() {
    var urlArray=window.location.toString().split("/", 4);
    return "/" + urlArray[3];
}

var applicationContextRoot=getApplicationContextRoot();


function ImageScroller() {
    var _this = this;
    var initialized = false;
    // default sizes
    
    var VIEWPORT_WIDTH = 500;
    // all sizes are realitive the the viewport width
    var IMAGEPANE_WIDTH = VIEWPORT_WIDTH;
    var IMAGEPANE_HEIGHT = Math.round(VIEWPORT_WIDTH / 1.49);
    var INFOPANE_DEFAULT_HEIGHT = Math.round(VIEWPORT_WIDTH / 6.67);
    var INFOPANE_EXPAND_HEIGHT = Math.round(VIEWPORT_WIDTH / 2.86);
    var THUMB_WIDTH = Math.round(VIEWPORT_WIDTH / 5);;
    var THUMB_HEIGHT = Math.round(VIEWPORT_WIDTH / 6.67);
    
    var CHUNK_SIZE = 7;
    var PREFETCH_THRESHHOLD = 5;
    
    var IMAGE_PANE_ID = "imagePane";
    var IMAGE_PANE_BUFFER_ID = "imageBufferPane";

    var PADDING = 3;
    
    var MINIMIZE_IMG_URI = applicationContextRoot + "/images/minimize.gif";
    var MAXIMIZE_IMG_URI = applicationContextRoot + "/images/maximize.gif";
    var INDICATOR_IMG_URI = applicationContextRoot + "/images/indicator-black.gif";
    var MAXIMIZE_IMG_TOOLTIP = "Show Details";
    var MINIMIZE_IMG_TOOLTIP = "Show Less Details";
    
    // this is an array of the tiles which are divs for each thumb
    var tiles = [];
    
    var injectionPoint;
    
    // for scrolling

    var SCROLL_INCREMENT = 5;
    var INFOPANE_INCREMENT = 3;
    var tileY;
    var tileX;
    // this is the index of the image tile on the far left
    var index = 0;
    // keeps track how for the scroll has gone 
    var offset = 0;
       
    var timeout = 30; // in ms
    var isScrollingRight = false;
    var isScrollingLeft = false;
    
    // large image pane
    var imagePane;
    var imageLoadingPane;
    var loadingPane;
    // images 
    var minimizeImage;

    var indicatorImage;
    var leftButton;
    var rightButton;
    
    // infopane
    var infoPane;
    var infoTableMinimize;
    var indicatorCell;
    var minimizeLink;
    var infoPaneLoop = 0;
    var maximizing = false;
    var minimizing = false;
    var maximized = false;

    // prefetch thresh-hold
    var prefetchThreshold = 2;
    
    // a growing list of items;
    var items = [];
    // cached chunks that are already in the items array
    var loadedChunks = [];
    
    // used for debugging when debug is true
    var debug = false;
    var statusDiv;
    var status2Div;
    
    var showingBuffer = false;
    var imageBuffer;
    var imageReloadTries = 0;
    var IMG_RELOAD_RETRY_MAX = 30;
    // used for url book marking

    
    var pid;
    var currentChunk;
     // this map contains all the items 
    var map;
    // this is the main container div
    var containerDiv;
    
    this.getItems = function() {
        return map;
    }
    
    this.getScrollerItems = function() {
        return items;
    }


    this.getGroupId = function() {
        return pid;
    }
        
    this.reset = function() {
        resetTitles()
        tiles = [];
        index = 0;
        offset = 0;
        currentChunk = 0;
        items = [];
        loadedChunks = [];
    }
    
    function resetTitles() {
        for (var l = 0; l < tiles.length; l++) {
            tiles[l].parentNode.removeChild(tiles[l]);
        }
    } 
    
    // event bound to the mouseOut event of both scroll buttons
    function scrollDone() {
        isScrollingLeft = false;
        isScrollingRight = false;
    }
    
    // looping method for time out 
    function scroll() {
        if (isScrollingRight) scrollRight();
        else if (isScrollingLeft) scrollLeft();
    }
    
    
     // do the value list pre-emptive fetching
    function prefetch() {
        //printDebug("** scoller index = " + index);
        if (isScrollingRight && (index + PREFETCH_THRESHHOLD) % CHUNK_SIZE == 0) {

            if ((Math.round(index / CHUNK_SIZE)) >= currentChunk) {
                currentChunk = Math.round(index / CHUNK_SIZE) + 1;
                // fire an event
                dojo.event.topic.publish("/catalog", {type:"getChunk", id: pid, index: index, currentChunk: currentChunk});
            }
        }
    }
    
    this.setGroupId = function(id) {
        pid = id;
    }

    this.containsChunk = function(chunkId) {
        printDebug("containsChunk = " + loadedChunks);
        ret=false;
        for(ii=0; ii < loadedChunks.length; ii++) {
            if(chunkId == loadedChunks[ii]) {
                ret=true;
                break;
            }
        }
        return ret;
    }

    this.addChunk = function(chunkId) {
        loadedChunks.push(chunkId);
    }

    this.addItems = function(inItems) {
        for (var loop=0; loop < inItems.length ; loop++) {
            items.push(inItems[loop]);
            map.put(inItems[loop].id, inItems[loop]);
            createTile(inItems[loop]);
            if (loop == 0 && !loadImage) {
                showImage(inItems[loop].id);
            }   

        }
        drawTiles();
        rightButton.style.visibility="visible";
        _this.hideProgressIndicator();
    }
    
    this.showProgressIndicator = function() {
        if (indicatorImage) {
            indicatorImage.style.visibility = "visible";
        }
    }  

    this.hideProgressIndicator = function() {
        indicatorImage.style.visibility = "hidden";
    }
    
    function postImageLoad(loadIntoBuffer) {
        if (debug) {
            status2Div.innerHTML = "Try " + imageReloadTries + " " + url + " image.complete=" + imageBuffer.complete;
        }
        // keep calling this funtion until imageReloadTries < IMG_RELOAD_RETRY_MAX
	    if (!imageBuffer.complete) {
            if (imageReloadTries < IMG_RELOAD_RETRY_MAX) {
                setTimeout(function(){this.loadIntoBuffer = loadIntoBuffer;postImageLoad(loadIntoBuffer);},500);
            } else {
                this.hideProgressIndicator();
            }
            imageReloadTries = imageReloadTries + 1;
            return;
        }
        var id;

        _this.hideProgressIndicator();
        if (loadIntoBuffer) {
            imageLoadingPane.src = imageBuffer.src;
        } else {
           imagePane.src = imageBuffer.src;

        }
        // do a cross fade as long as the images aren't the same
        if (imageLoadingPane.src != imagePane.src) {
            crossFade(0,loadIntoBuffer );
        }
    }
    

    this.showImage = function(itemId) {

        _this.showProgressIndicator();
        //setTimeout(this.showProgressIndicator,0);
        var i = map.get(itemId);
        
        if (!i) {
            return;
        }
        dojo.event.topic.publish("/catalog", {type:"showingItem", id: itemId, rating: i.rating});
        // create the image pane and append the description nodes
        // asumption is that if the imagePane is not set neigher are the info children
        if (typeof imagePane == 'undefined') {
            imagePane = document.createElement("img");
            imagePane.style.width = IMAGEPANE_WIDTH + "px";
            imagePane.style.height = IMAGEPANE_HEIGHT  + "px";
            imagePane.id = IMAGE_PANE_ID;
            
            var targetElement = document.getElementById("bodySpace");
            imageLoadingPane = document.createElement("img");
            imageLoadingPane.style.position = "absolute";
            imageLoadingPane.style.visibility = "hidden";
            imageLoadingPane.style.width = IMAGEPANE_WIDTH + "px";
            imageLoadingPane.style.height = IMAGEPANE_HEIGHT  + "px";
            imageLoadingPane.id = IMAGE_PANE_BUFFER_ID;
            targetElement.appendChild(imagePane);
            targetElement.appendChild(imageLoadingPane);
            imageLoadingPane.style.left = tileX + "px";
            
            loadImage(i.image, false);
        } else {
             imageLoadingPane.style.visibility = "visible";            
             if (showingBuffer) {
                 showingBuffer = false;
             } else {
                 showingBuffer = true;
             }
             loadImage(i.image, showingBuffer);
        }
    }
    
    function loadImage(url, loadIntoBuffer) {
        imageReloadTries = 0;
        imageBuffer = new Image();
        if (loadIntoBuffer) {
            imageBuffer.src = url;
            imageLoadingPane.onLoad = setTimeout(function(){this.url=url;this.loadIntoBuffer = loadIntoBuffer;postImageLoad(loadIntoBuffer,url);},0);
        } else {
            imageBuffer.src = url;
            imageBuffer.onLoad = setTimeout(function(){this.url = url;this.loadIntoBuffer = loadIntoBuffer;postImageLoad(loadIntoBuffer,url);},0);
        }
    }
    
    function setOpacity(opacity, id) {
        var target = document.getElementById(id);
        if (typeof target.style.filter != 'undefined') {
            target.style.filter = "alpha(opacity:" + opacity + ")"; 
        } else {
            target.style.opacity = opacity/100;
        }            
    }
      
    function crossFade(count,loadIntoBuffer) {
       var percentage = Number(count);
        if (loadIntoBuffer) {
            setOpacity(100 - percentage, IMAGE_PANE_ID);
            setOpacity(percentage, IMAGE_PANE_BUFFER_ID);
        } else {
            setOpacity(100 - percentage, IMAGE_PANE_BUFFER_ID);
            setOpacity(percentage, IMAGE_PANE_ID);

        }
       if (percentage < 100) {
            percentage = percentage + 10;
            setTimeout(function(){this.loadIntoBuffer = loadIntoBuffer;this.percentage = percentage;crossFade(percentage,loadIntoBuffer);}, 25);
        }
    }