scroller.js

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

    // calling this function will result in the maximizing event being fired
    // if the pane is maximized it will asume the event want to minimize
    this.doMaximize = function() {
        if (!maximizing && !minimizing && !maximized) {
            infoPaneLoop = INFOPANE_DEFAULT_HEIGHT;
            maximizing = true;
            minimizing = false;
        } else if (!maximizing && !minimizing) {
            minimizing = true;
            maximizing = false;
        }
        setTimeout(changeInfoPane, 0);
    }
    
    // will handle either minimizing or maximing but not both
    // this method is called recursively until the maximinging 
    // or minimizing is done.
    function changeInfoPane() {
        if (maximizing) {
            maxmizeInfoPane();
        } else if (minimizing) {
            minimizeInfoPane();
        }
    }
    
    function maxmizeInfoPane() {
        if (infoPaneLoop < INFOPANE_EXPAND_HEIGHT) {
            infoPaneLoop = infoPaneLoop + INFOPANE_INCREMENT;
            var clipMe = 'rect(' + '0px,' + VIEWPORT_WIDTH +  'px,'+  infoPaneLoop +'px,' +  0 + 'px)';
            infoPane.style.clip = clipMe;
            infoPane.style.height = infoPaneLoop;
            infoPane.style.top = (tileY + (PADDING *2) + INFOPANE_DEFAULT_HEIGHT + IMAGEPANE_HEIGHT) - infoPaneLoop;
            setTimeout(changeInfoPane, 5);
        } else {
            minimizeImage.src= MINIMIZE_IMG_URI;
            minimizeLink.title = MINIMIZE_IMG_TOOLTIP;
            maximized = true;
            maximizing = false;
            minimizing = false;
        }
    }
    
    function minimizeInfoPane() {
       if (infoPaneLoop > INFOPANE_DEFAULT_HEIGHT) {
            infoPaneLoop = infoPaneLoop - INFOPANE_INCREMENT;
            var clipMe = 'rect(' + '0px,' + VIEWPORT_WIDTH +  'px,'+  infoPaneLoop +'px,' +  0 + 'px)';
            infoPane.style.clip = clipMe;
            infoPane.style.height = infoPaneLoop;
            infoPane.style.top = (tileY + (PADDING *2) + INFOPANE_DEFAULT_HEIGHT + IMAGEPANE_HEIGHT) - infoPaneLoop;
            if (debug) {
                status2Div.innerHTML = "minimize infoPaneLoop =" + infoPaneLoop +  " infopane.top=" + infoPane.style.top;
            }
            setTimeout(changeInfoPane, 5);
        } else {
            minimizeImage.src= MAXIMIZE_IMG_URI;
            minimizeLink.title = MAXIMIZE_IMG_TOOLTIP;
            maximizing = false;
            minimizing = false;
            maximized = false;
        }
    }
    
    function scrollRight() {
        isScrollingRight = true;
        if ( (index + 4) >= tiles.length) {
            // hide the rightButton
            rightButton.style.visibility="hidden";
            return;
        } else {
            leftButton.style.visibility="visible";
        }
        offset = offset - SCROLL_INCREMENT;
        drawTiles();
        setTimeout(scroll, timeout);
    }
    
    function getNext() {
        isScrollingRight = true;
        setTimeout(scroll, timeout);
    }
    

    function getPrevious () {
        isScrollingLeft = true;
        setTimeout(scroll, timeout);
    }
    
    function scrollLeft() {
        if (offset >= 0) {
            leftButton.style.visibility="hidden";
            return;
        } else {
            leftButton.style.visibility="visible";
        }
        offset = offset + SCROLL_INCREMENT;
        drawTiles();
        setTimeout(scroll, timeout);
    }
    
    function drawTiles() {
        // draw the first one if its off the screen
        // check if the far right image is out view
        var overHang;
        var temp = offset;
        index = Math.floor((offset)/THUMB_WIDTH); 
        overHang =  offset % THUMB_WIDTH;
        if (overHang < 0) {
            overHang = overHang * -1;
        }
        if (index < 0) {
            index = index * -1;
        }
        // check for next set of images
        prefetch();
        var startIndex = index;
        if (overHang > 0 && index >0) {
            startIndex = index -1;
        }
        var stopIndex = index + Math.round(VIEWPORT_WIDTH / THUMB_WIDTH);    
        if (stopIndex > tiles.length) {
            stopIndex = tiles.length;
        }
        var displayX = 0;
        for (var tl=startIndex; tl < stopIndex; tl++) {
            if (debug) {
             statusDiv.innerHTML = "overhang=" + overHang +  " startIndex=" + startIndex + " stopIndex="  + stopIndex + " offset=" + offset + " displayX=" + displayX;
            }
            if (overHang  > 0 && tl == startIndex) {
                rightButton.style.visibility="visible";
                // clip: rect(top right bottom left) - borders of the clipped area
                // clip the left
                var clipMe = 'rect(' + '0px,' + THUMB_WIDTH +  'px,'+  THUMB_HEIGHT +'px,' +  overHang + 'px)';
                tiles[tl].style.clip = clipMe;
                tiles[tl].style.left = (tileX  - overHang) + "px";
                displayX = displayX + (THUMB_WIDTH - overHang);
            } else if (tl == stopIndex -1) {
                var underHang = VIEWPORT_WIDTH - displayX ;
                if (underHang > 0 && underHang) {
                    var clipMe = 'rect(' + '0px,' + (underHang) + "px," + THUMB_HEIGHT +'px,' +  0 + 'px)';
                    tiles[tl].style.clip = clipMe;
                    tiles[tl].style.left =  tileX + (offset + (tl * THUMB_WIDTH)) + 'px';
                    tiles[tl].style.visibility = "visible";
                    // resize the previous one to its real length
                } else if (underHang < 0 && tl > 0) {
                    var clipMe = 'rect(' + '0px,' + (THUMB_WIDTH + underHang) + "px," + THUMB_HEIGHT +'px,' +  0 + 'px)';
                    tiles[tl-1].style.clip = clipMe;
                    tiles[tl-1].style.visibility = "visible";
                    tiles[tl-1].style.left = tileX + (offset + ((tl -1) * THUMB_WIDTH)) + 'px';
                } else { 
                    tiles[tl].style.left = '0px';
                    tiles[tl].style.visibility = "hidden";
                }
            } else {
                displayX = displayX + THUMB_WIDTH;
                tiles[tl].style.left = tileX + (offset + (tl * THUMB_WIDTH)) + 'px';
                tiles[tl].style.visibility = "visible";
            }	    	
        }
        if (stopIndex < tiles.length) {
            tiles[stopIndex].style.visibility = "hidden";
            tiles[stopIndex].style.left = "0px";
        }
    }

    
    this.load = function () {
        map = new Map();
        dojo.event.connect(window, "onresize", layout);
	    var loadImage;
	    
        var targetRow = document.getElementById("targetRow");
        injectionPoint = document.getElementById("injection_point");
        
        // for status output
        statusDiv = document.getElementById("status");
        status2Div = document.getElementById("status_2");

        initLayout();
        initialized = true;
    }
    
    function initLayout() {
        containerDiv = document.getElementById("CatalogBrowser");
        rightButton = document.getElementById("right_button");
        leftButton = document.getElementById("left_button");
        layout();
        leftButton.style.visibility="hidden";
        if (typeof rightButton.attachEvent != 'undefined') {
                rightButton.attachEvent('onmouseover',function(e){scrollDone();getNext();});
                rightButton.attachEvent('onmouseout',function(e){scrollDone();});
                leftButton.attachEvent('onmouseover',function(e){scrollDone();getPrevious();});
                leftButton.attachEvent('onmouseout',function(e){scrollDone();});
            } else if (typeof rightButton.addEventListener != 'undefined') {
                rightButton.addEventListener('mouseover',function(e){scrollDone();getNext();}, false);
                rightButton.addEventListener('mouseout',function(e){scrollDone();}, false);
                leftButton.addEventListener('mouseover',function(e){scrollDone();getPrevious();}, false);
                leftButton.addEventListener('mouseout',function(e){scrollDone();}, false);
            }
        createInfoPane();
    }
    
    function layout() {
        var ua = navigator.userAgent.toLowerCase();

        // this will need to be made generic depending on the thumb height
        tileY = findY(containerDiv);
        tileX = findX(containerDiv) + 4;
        var rightX = tileX + VIEWPORT_WIDTH - 20;
        rightButton.style.left = rightX  +  "px";
        var  buttonY = tileY + IMAGEPANE_HEIGHT + INFOPANE_DEFAULT_HEIGHT + 12;
        rightButton.style.top = buttonY + "px";
        leftButton.style.top = buttonY + "px";
       
        if (ua.indexOf('ie') != -1) {
            isIE = true;
        } else if (ua.indexOf('safari') != -1) {
            tileX = tileX + 8;
            timeout = 20;
        }
         drawTiles();
         if (infoPane) {
            infoPane.style.left = tileX + "px";
            if (maximized) {
            
                infoPane.style.top = (tileY + IMAGEPANE_HEIGHT  + (PADDING*2) - infoPane.style.height) + "px";
            } else {
                infoPane.style.top = (tileY + IMAGEPANE_HEIGHT  + (PADDING*2)) + "px";
            }
            if (maximized) {
                infoPaneLoop = infoPane.style.height;
            } else {
                infoPaneLoop = INFOPANE_DEFAULT_HEIGHT;
            }
         }
         if (typeof imageLoadingPane != 'undefined') {           
             imageLoadingPane.style.left = tileX;
             imageLoadingPane.style.top = tileY;
         }
    }
    
    function createInfoPane() {
	    infoPane = document.getElementById("infopane");
        infoPane.style.width = VIEWPORT_WIDTH + "px";
        // give room for 4 pixels above and below
        infoPane.style.height = (INFOPANE_DEFAULT_HEIGHT) + "px";
        // give 3px padding for a border
        infoPane.style.top = (tileY + IMAGEPANE_HEIGHT + (PADDING*2)) + "px";
        infoPane.style.left = tileX + "px";
        infoTableMinimize = document.getElementById("infopaneDetailsIcon");                 
        indicatorCell = document.getElementById("infopaneIndicator");
        indicatorCell.style.width = (10) + "px";
        indicatorImage = document.createElement("img");
        indicatorImage.className = "infopaneIndicator";
        indicatorImage.src = INDICATOR_IMG_URI;
        indicatorImage.style.visibility = "hidden";
        indicatorCell.appendChild(indicatorImage);
        minimizeLink = document.createElement("a");
        minimizeLink.className = "infopaneLink";
        minimizeLink.title = MAXIMIZE_IMG_TOOLTIP;
        minimizeImage = document.createElement("img");
        minimizeImage.src= MAXIMIZE_IMG_URI;
        minimizeLink.appendChild(minimizeImage);
        infoTableMinimize.appendChild(minimizeLink);
        
        if (typeof minimizeLink.attachEvent != 'undefined') {
            minimizeLink.attachEvent("onclick",function(e){_this.doMaximize();});
        } else {
            minimizeLink.addEventListener("click",function(e){_this.doMaximize();}, true);
        }
        var clipMe = 'rect(' + '0px,' + VIEWPORT_WIDTH +  'px,'+  INFOPANE_DEFAULT_HEIGHT +'px,' +  0 + 'px)';
        infoPane.style.clip = clipMe;
	}

    function createTile(i) {
        var div = document.createElement("div");
        div.className = "tile";
        div.id = i.id;
        var link = document.createElement("a");
        var img = document.createElement("img");
        img.title = i.name;
        img.src = i.thumbnail;
        img.className = "tileImage";
        link.appendChild(img);
        link.setAttribute("id", i.id);
        if (typeof div.attachEvent != 'undefined') {
            div.attachEvent('onclick',function(e){this.id = div.id; _this.showImage(this.id, false);});
        } else {
            link.addEventListener('click',function(e){this.id = div.id; _this.showImage(this.id, false);}, true);
        }
        div.appendChild(link);
        injectionPoint.appendChild(div);
        div.style.top = tileY + INFOPANE_DEFAULT_HEIGHT + IMAGEPANE_HEIGHT + (PADDING * 3) + "px";
        tiles.push(div);
    }
    
       
    function findY(element) {
        var t = 0;
        if (element.offsetParent) {
            while (element.offsetParent) {
                t += element.offsetTop
                element = element.offsetParent;
            }
        } else if (element.y) {
            t += element.y;
        }
        return t;
    }
    
    function findX(element) {
        var l = 0;
        if (element.offsetParent) {
            while (element.offsetParent) {
                l += element.offsetLeft
                element = element.offsetParent;
            }
        } else if (element.x)
            l += element.x;
        return l;
    }
}