stretchimg.js

javascript 很酷的类库

/*
 * Isomorphic SmartClient
 * Version 6.5 (2008-04-30)
 * Copyright(c) 1998-2007 Isomorphic Software, Inc. All rights reserved.
 * "SmartClient" is a trademark of Isomorphic Software, Inc.
 *
 * [e-mail]
 *
 * http://smartclient.com/license
 */

 





//>	@class	StretchImg
//
//  The StretchImg widget class implements a widget type that displays a list of multiple images
//  that make up a single image.
//
//  @treeLocation Client Reference/Foundation
//  @visibility external
//<

// abstract class for Stretchable images
isc.ClassFactory.defineClass("StretchImg", "StatefulCanvas");

// add properties to the class
isc.StretchImg.addProperties({

    //>	@attr	stretchImg.vertical		(boolean : true : [IRW])
    // Indicates whether the list of images is drawn vertically from top to bottom (true),
    // or horizontally from left to right (false).
    //      @visibility external
    //      @group  appearance
    //<
	vertical:true,

    //>	@attr	stretchImg.capSize		(number : 2 : [IRW])
    //          If the default items are used, capSize is the size in pixels of the first and last
    //          images in this stretchImg.
    //      @visibility external
    //      @group  appearance
    //<
	capSize:2,
    
    //>	@attr	stretchImg.src		(SCImgURL : null : [IRW])
    // The base URL for the image. 
    // <P>
    // As with +link{Img.src}, the +link{state} of the component is added to this URL.  Then,
    // the image segment name as specified by +link{stretchImg.items} is added.
    // <P>
    // For example, for a stretchImg in "Over" state with a <code>src</code> of "button.png"
    // and a segment name of "stretch", the resulting URL would be "button_Over_stretch.png".
    // 
    // @see stretchImg.hSrc
    // @see stretchImg.vSrc
    // @group appearance
    // @visibility external
    //<
    
    //>	@attr	stretchImg.hSrc		(SCImgURL : null : [IRW])
    // Base URL for the image if +link{stretchImg.vertical} is false and 
    // +link{attr:stretchImg.src} is unset.
    //
    // @see stretchImg.src
    // @see stretchImg.vSrc
    // @group appearance
    // @visibility external
    //<
    
    //>	@attr	stretchImg.vSrc		(SCImgURL : null : [IRW])
    // Base URL for the image if +link{stretchImg.vertical} is true and 
    // +link{attr:stretchImg.src} is unset.
    //
    // @see stretchImg.src
    // @see stretchImg.vSrc    
    // @group appearance
    // @visibility external
    //<

    // a StretchImg draws within the specified area and should never overflow
    overflow:isc.Canvas.HIDDEN,
	
    //>	@attr	stretchImg.imageType	(ImageStyle : Img.STRETCH : [IRW])
    //          Indicates whether the image should be tiled/cropped, stretched, or centered when the
    //          size of this widget does not match the size of the image. See ImageStyle for
    //          details.
    //      @visibility external
    //      @group  appearance
    //<
	imageType : isc.Img.STRETCH,	

    //>	@attr	stretchImg.items		(Array of Object : see below : [IRW])
    // The list of images to display as an array of objects specifying the image names and
    // sizes.
    // <P>
    // The "name" is appended as a suffix to the +link{src} URL in order to fetch separate
    // media files for each image.
    // <P>
    // The height and width can be set to a number, "*" (remaining space, divided amongst all
    // images that specify "*") or to the name of a property on the StretchImg component, such
    // as +link{capSize}.  
    // <P>
    // Height or width is only used on the axis on which images are stacked.  For example, if
    // +link{vertical} is true, images stack vertically and heights are used to size images on
    // the vertical axis, but all images will have width matching the overall component size.
    // <P>
    // For example, the default setting for <code>items</code>, which is used to produce
    // stretchable buttons and headers with fixed-size endcaps, is as follows:
    // <pre>
    //   items:[
    //        {height:"capSize", name:"start", width:"capSize"},
    //        {height:"*", name:"stretch", width:"*"},
    //        {height:"capSize", name:"end", width:"capSize"}
    //   ]
    // </pre>
    //      @visibility external
    //      @group  appearance
    //<
    // NOTE: can specify "src" for a custom src property, and "state" for a custom state.
	items : [
    	{name:"start", width:"capSize", height:"capSize"},
		{name:"stretch", width:"*", height:"*"},
		{name:"end", width:"capSize", height:"capSize"}
	],

    //>	@attr	stretchImg.autoCalculateSizes		(attrtype : true : IRWA)
	// If true, we calculate the image sizes automatically
	//		@group	drawing
	//<
	autoCalculateSizes:true,			
    //>	@attr	stretchImg.cacheImageSizes		(attrtype : true : IRWA)
	//	If true, we cache image sizes automatically, if not we calculatge it every time we draw
	//		@group	appearance
	//<
	cacheImageSizes:true,

    // do set styling on the widget's handle
    suppressClassName:false,
    
    
    mozOutlineOffset: "0px",
    
    //> @attr stretchImg.showGrip   (boolean : null : IRA)
    // Should we show a "grip" image floating above the center of this widget?
    // @group grip
    //<
    
    //> @attr   stretchImg.gripImgSuffix (string : "grip" : IRA)
    // part name for the 'grip' image if +link{stretchImg.showGrip} is true
    // @group grip
    //<
    gripImgSuffix:"grip",
    
    //> @attr   stretchImg.showDownGrip   (boolean : null : IRA)
    // If +link{stretchImg.showGrip} is true, this property determines whether to show the
    // 'Down' state on the grip image when the user mousedown's on this widget. 
    // Has no effect if +link{statefulCanvas.showDown} is false
    // @visibility internal
    // @group grip
    //<

    //> @attr   stretchImg.showRollOverGrip   (boolean : null : IRA)
    // If +link{stretchImg.showGrip} is true, this property determines whether to show the
    // 'Over' state on the grip image when the user rolls over on this widget. 
    // Has no effect if +link{statefulCanvas.showRollOver} is false
    // @visibility internal
    // @group grip
    //<
    
   
    //> @attr stretchImg.showTitle (boolean : false : [IRWA])
    // @include StatefulCanvas.showTitle
    // @visibility external
    //<
    showTitle:false        
    
});

// add methods to the class
isc.StretchImg.addMethods({

initWidget : function () {

    // NOTE: our superclass would do this, but we have to set up this URL and set
    // this.showGrip/this.icon before calling Super to get the label constructed which shows
    // the grip
    if (this.src == null) this.src = this.vertical ? this.vSrc : this.hSrc;

    if (this.showGrip) {
        // use the icon functionality of the label to show an image floated over center (this
        // is mutex with using the icon / label functionality, but most such uses don't make
        // much sense)
        this.labelVPad = 0;
        this.labelHPad = 0;
        this.iconSpacing = 0;
        this.align = isc.Canvas.CENTER;
        // get the URL for a piece named "grip".  NOTE: resolve to a fully qualified URL now,
        // in the same imgDir context as the rest of the pieces, as opposed to the labels
        this.icon = this.getImgURL(this.getURL(this.gripImgSuffix));

        // NOTE: grip* sizing is intentionally null by default, so we get the image's natural
        // size, overriding the icon defaults.
        this.iconSize = this.gripSize;
        this.iconWidth = this.vertical ? this.gripBreadth : this.gripLength;
        this.iconHeight = this.vertical ? this.gripLength : this.gripBreadth;
        
        this.showRollOverIcon = this.showRollOverGrip;
        this.showDownIcon  = this.showDownGrip;
    }

    // HACK: call Super the direct way   
    isc.StatefulCanvas._instancePrototype.initWidget.call(this);
    //this.Super(this._$initWidget);
    
    this.redrawOnResize = (this.imageType != isc.Img.STRETCH) 
},

// 'grip' is displayed in our label canvas
shouldShowLabel : function () {
    if (this.showGrip) return true;
    return this.Super("shouldShowLabel", arguments);
},


//>	@method	stretchImg.getURL()	(A)
//		@group	appearance
//			steal the getURL method from Img
//
//		@param	[pieceName]	(string : "") 			name for part of the image
//		@param	[state]		(string : this.state)	state of the image ("up", "off", etc.)
//
//		@return	(SCImgURL)	URL for the image
//<
getURL : isc.Img.getInstanceProperty("getURL"),


//>	@method	stretchImg.getPart()
//		@group	appearance
//			return a logical image "part"
//
//		@param	partName		(string)	name of the image part you're looking for
//
//		@return	(object)	member of this.items array
//<
getPart : function (partName) {
	for (var i = 0, length = this.items.length, it; i < length; i++) {
		it = this.items[i];
		if (it.name == partName) return it;
	}
	return null;
},


//>	@method	stretchImg.getPartNum()
//		@group	appearance
//			return the number of a logical image "part"
//
//		@param	partName		(string)	name of the image part you're looking for
//
//		@return	(number)	index of the part in this.items array
//<
getPartNum : function (partName) {
	for (var i = 0, length = this.items.length, it; i < length; i++) {
		it = this.items[i];
		if (it.name == partName) return i;
	}
	return null;
},


//>	@method	stretchImg.getSize()	(A)
//		@group	appearance
//			return the size of a particular image
//
//		@param	partNum		(number)	number of the image you're looking for
//		@return	(number)	size of the image
//<
getSize : function (partNum) {
	if (!this._imgSizes || this._resized) this.resizeImages();
	return this._imgSizes[partNum];
},

// When the label's size changes due to adjustOverflow, we want to update our images to ensure
// they still fit. Do this by calling explicitly calling handleResized() on label adjustOverflow
_labelAdjustOverflow : function (a, b, c, d) {
    if (this.overflow == isc.Canvas.VISIBLE) this._handleResized(null, null, true);
    this.invokeSuper(isc.StretchImg, "_labelAdjustOverflow", a, b, c, d);
},

// Similarly if the overflow moves from visible to hidden we'll need to resize our images
setOverflow : function (newOverflow, a, b, c) {
    var handleResized = false;
    if (this.overflow == isc.Canvas.VISIBLE && 
        ((this.getScrollWidth() > this.getWidth()) || 
            (this.getScrollHeight() > this.getHeight())) )
    {
        handleResized = true;
    }
    this.invokeSuper(isc.StretchImg, "setOverflow", newOverflow, a, b, c);
    if (handleResized) this._handleResized(null, null, true);
},


// Note the forceResize parameter - if passed assume a resize occurred in both directions,
// even if dX and dY are null
_handleResized : function (deltaX, deltaY, forceResize) {

    if (this.redrawOnResize != false || !this.isDrawn()) {
        // set a flag for this._imgSizes to be recalculated next redraw
        this._resized = true;
        return;
    }