stretchimg.js

javascript 很酷的类库

    // suppress image resize means don't calculate new sizes, or attempt to apply them
    // to the content
    if (this._suppressImageResize) return;
    
    // if we're a stretch image, we can resize the images and not redraw
    
    this.resizeImages();
        
    var items = this.items,
        hasDeltaX = forceResize || (isc.isA.Number(deltaX) && deltaX != 0), 
        hasDeltaY = forceResize || (isc.isA.Number(deltaY) && deltaY != 0), 
        breadthResize = (this.vertical && hasDeltaX) || (!this.vertical && hasDeltaY),
        lengthResize = (this.vertical && hasDeltaY) || (!this.vertical && hasDeltaX);

    for (var i = 0; i < items.length; i++) {
        var image = this.getImage(items[i].name);

        // this can legitimately happen if:
        // - an image got sized to zero, which means we didn't draw it
        // - an image as been added to the items array but we have not redraw yet, eg the
        //   scrollbar corner

        if (image == null) continue;

        if (breadthResize) {
            var size = this.vertical ? this.getWidth() : this.getHeight();
            //this.logWarn("assigning: " + size + " to segment: " + items[i].name + 
            //             ", image: " + this.echoLeaf(image));
            this._assignSize(image.style, 
                             this.vertical ? this._$width : this._$height, 
                             size);
        }
        if (lengthResize) {
            var size = this._imgSizes[i];
            //this.logWarn("assigning: " + size + " to segment: " + items[i].name + 
            //             ", image: " + this.echoLeaf(image));
            this._assignSize(image.style, 
                             this.vertical ? this._$height : this._$width, 
                             size);
        }
    }
},

//>	@method	stretchImg.resizeImages()	(A)
//		@group	appearance
//			resize the various images of this stretchImg
//			the default implementation is to just call Canvas.applyStretchResizePolicy()
//<
resizeImages : function () {

    if (this._suppressImageResize) return;
	var dimension = (this.vertical ? this._$height : this._$width),
        items = this.items,
        sizes = this._imgSizes;

    // re-use a sizes array
    if (sizes == null) sizes = this._imgSizes = [];
    sizes.length = items.length;

    for (var i = 0; i < items.length; i++) {
        sizes[i] = items[i][dimension];
    }

    //this.logWarn("stretchResize with sizes: " + sizes + 
    //             ", total size: " + this.getImgLength());

    
    isc.Canvas.applyStretchResizePolicy(sizes, this.getImgLength(), true, this);

    //this.logWarn("after stretchResize with sizes: " + sizes);
},

//>	@method	stretchImg.getInnerHTML()	(A)
//		@group	drawing
//			return the HTML for this stretch image
//
//		@return	(HTML)	HTML output for this image
//<
_$noBRStart : "<NOBR>",
_$noBREnd : "</NOBR>",
_$BR : "<BR>",
_$styleDisplayBlock : " STYLE='display:block'",
_$tableStart : "<TABLE CELLPADDING=0 CELLSPACING=0 BORDER=0>", _$tableEnd : "</TABLE>",
_$rowStart : "<TR><TD>", _$rowEnd : "</TR></TD>",
_$cellStart : "<TD>", _$cellEnd : "</TD>",
getInnerHTML : function () {

	// figure out how big each image is
	var imgs = this.items,
		length = imgs.length,
        vertical = this.vertical;

	// apply the stretch resize policy to the image list
	//  to get actual sizes for things
	if (this._resized || !this._imgSizes || 
        (this.autoCalculateSizes && !this.cacheImageSizes)) this.resizeImages();
    delete this._resized;

	// get the sizes array
    // The sizes array governs the sizes of the image media along the stretching axis, so
    // the height of the images if this.vertical is true (the width otherwise)
	var sizes = this._imgSizes,
        width = (vertical ? this.getImgBreadth() : this.getImgLength()),
        height = (vertical ? this.getImgLength() : this.getImgBreadth()),
		output = isc.SB.create();

    //>DEBUG
    if (this.logIsDebugEnabled(this._$drawing)) {
        this.logDebug("drawing with imageType: '" + this.imageType + 
                      "' and sizes " + this._imgSizes, "drawing");
    }
    //<DEBUG

    var reverse = !vertical && this.isRTL();

	if (this.imageType == isc.Img.TILE) {
		// if tiling images, ouput them as a table with backgrounds set to the images
		output.append("<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 WIDTH=", width, 
                      " HEIGHT=", height, "><TBODY>", (vertical ? "" : "<TR>")
				);
		for (var j = 0; j < length; j++) {
            var i = reverse ? length - j - 1 : j;

			var size = sizes[i];
			if (size > 0) {			
				var item = imgs[i],
				    src = this.getImgURL(this._getItemURL(item));

				if (vertical) {
					output.append( "<TR><TD WIDTH=" , width , " HEIGHT=" , size , 
                                          " BACKGROUND=\"" , src , "\">"
							, isc.Canvas.spacerHTML(1,size)
							, "</TD></TR>"
						);
				} else {
					output.append( "<TD WIDTH=" , size , " HEIGHT=" , height , 
                                      " BACKGROUND=\"" , src , "\">"
							, isc.Canvas.spacerHTML(size,1)
							, "</TD>"
						);	
                }
			}
		}
		output.append((vertical ? "" : "</TR>") , "</TABLE>");
		
	} else if (this.imageType == isc.Img.CENTER) {
		// if not tiling and not stretching, output the table with the images as cell contents, not backgrounds
		output.append("<TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 WIDTH=", width, 
                      " HEIGHT=" , height , "><TBODY>",
                      (vertical ? "" : "<TR VALIGN=center>")
				);
		for (var j = 0; j < length; j++) {
            var i = reverse ? length - j - 1 : j;

			var size = sizes[i];
			if (size > 0) {			
				var item = imgs[i],
                    src = this._getItemURL(item);
				if (vertical) {
					output.append("<TR VALIGN=center><TD WIDTH=" , width , 
                                                       " HEIGHT=" , size , " ALIGN=center>"
							, this.imgHTML(src, null, null, item.name)
							, "</TD></TR>"
						);
				} else {
					output.append("<TD WIDTH=" , size , " HEIGHT=" , height , " ALIGN=center>"
							, this.imgHTML(src, null, null, item.name)
							, "</TD>"
						);
                }
			}
		}
		output.append((vertical ? "" : "</TR>") , "</TABLE>");

    } else {    //this.imageType == isc.Img.STRETCH  [default]

		// if stretching, output the images only unless we're in Moz    
        
        var useTable = isc.Browser.isMoz;
        
        if (useTable) output.append(this._$tableStart);
        else if (!vertical) output.append(this._$noBRStart);
        
		for (var j = 0; j < length; j++) {
            var i = reverse ? length - j - 1 : j;
            var start = (j == 0);
            var end = (j == length - 1);

			var size = sizes[i];
			if (size > 0) {
				var item = imgs[i],
                    src = this._getItemURL(item);
               if (!vertical) {
                    if (useTable) output.append(start ? this._$rowStart : this._$cellStart);
                    // just write a series of image tags, which will naturally stack
                    // horizontally
					output.append(this.imgHTML(src, size, height, item.name));
                    if (useTable) output.append(end ? this._$rowEnd : this._$cellEnd);
                } else {
                    if (useTable) output.append(this._$rowStart);
                    
                    output.append(this.imgHTML(src, width, size, item.name,
                                  isc.Browser.isDOM ? this._$styleDisplayBlock : null));

                    if (useTable) output.append(this._$rowEnd);
                    else if (!isc.Browser.isDOM && i < length - 1) output.append(this._$BR);
                }
			}
		}
        if (useTable) output.append(this._$tableEnd)
        else if (!vertical) output.append(this._$noBREnd);

	} 	
	return output.toString();
},

_$blank : "blank",
_getItemURL : function (item) {
    if (item.src) return item.src;
    // useful if you want the spacing for layout purposes, but no image
    if (item.name == this._$blank) return isc.Canvas._blankImgURL;
    return this.getURL(item.name, 
                       (item.state ? item.state : this.getState()),
                       (item.selected != null ? item.selected : this.selected),
                       (this.showFocused && !this.showFocusedAsOver ? 
                            (item.focused != null ? item.focused : this.focused) :
                            false)
                      );
},


//>	@method	stretchImg.setState()	([])
// Set the specified image's state to newState and update the displayed image given by
// whichPart, or set the state for all images to newState and update the displayed images
// if whichPart is not provided.
//      @visibility external
//		@group	appearance
//
//		@param	newState	(string)		name for the new state ("off", "down", etc)
//		@param	[whichPart]	(string)		name of the piece to set ("start", "stretch" or "end")
//											if not specified, sets them all
//<
setState : function (newState, whichPart) {
	// if a particular item was not set the state of the entire stretchImg
	if (whichPart == null) {
        // clear the states of all of the individual pieces, so they pick up the new state applied
        // to the widget as a whole.
		this.items.clearProperty("state");
		this.Super("setState", [newState]);
	} else {
		// just set the state of that particular part
		var it = this.getPart(whichPart);
		if (it) {
			if (it.state == newState) return;
			it.state = newState;
		}
        this.stateChanged();
	}
		
},

stateChanged : function (whichPart) {

	this.Super("stateChanged");
	// if we haven't been drawn already, no need to try to update HTML
	if (!this.isDrawn()) return;
	
	// if we're tiling images, we have to redraw the whole thing... :-(
	if (this.imageType == isc.Img.TILE || this._imgSizes == null) {
		this.markForRedraw("setState (tiled images)");
	} else {
        
        if (isc.Browser.isWin2k && isc.Browser.isIE) {
            this.markForRedraw("Win2k IE image state change");
            return;
        }
		// iterate through all images, resetting their src
        var skip = 0;
		for (var i = 0; i < this.items.length; i++) {
			if (this._imgSizes[i] > 0) {
				var item = this.items[i];
				// if a specific items was not specified or this is the specified item
                
				if ((!whichPart || item.name == whichPart) && item.name != this._$blank) {
					// set the image to the new state image
					this.setImage(item.name, this._getItemURL(item));
                 }
			} else {
				skip++;
			}
		}
	}

},

//>	@method	stretchImg.inWhichPart()	(A)
//		@group	event handling
//		Which part of the stretchImg was the last mouse event in?
//
//<
inWhichPart : function () {
	if (this.vertical) {
		var num = this.inWhichPosition(this._imgSizes, this.getOffsetY());
	} else {
		var num = this.inWhichPosition(this._imgSizes, this.getOffsetX(), this.getTextDirection());	
	}
	
	var item = this.items[num];
	return (item ? item.name : null);
}

});