jitk_taskwindow.js

esri的ArcGIS Server超级学习模板程序（for java）

/**
 * Super class for all JitkWindows
 */
function JitkWindows() {
	this.animationSpeed = "fast";		// "slow", "normal", "fast" or the number of milliseconds to run the animation (e.g. 1000)
	
	this.collapsable = true;			// show/hide toggle button for expand/collapse
	this.closable = true;				// show/hide close button
	this.movable = true;				// can drag the floating panel?
	this.resizable = false;				// can resize the window?
	this.fittable = true;				// whether to allow fitting of content within window
	this.isFloatingWindow = true;		// whether or not it is a floating window (vs. fixed without titlebar, e.g. accordion)
	this.zIndex = 100;					// stacking order of the panel
	
	this.lastPosX = -1;
	this.lastPosY = -1;
	
	zIndexAll = 500;					// top-most stacking order of all panels
	lastPosXAll = 300;
	lastPosYAll = 100;
}

// attach the superclass to the individual window 
JitkWindow.prototype = new JitkWindows;
JitkWindow.prototype.constructor = JitkWindow;

// event args (that can be exposed) 
function JitkWindowEventArgs(id) {
	this.id = id;
}

/**
 * jitk window class (inherits from JitkWindows)
 */
function JitkWindow(id, title, pageElement) {
	this.inheritsFrom(new EsriPageElement(id));
	this.pageElement = pageElement;
	//this.id = id;
	this.divId = "WindowDiv_" + id;
	//this.windowMgr = null;
	
	// PUBLIC members
	this.title = (title == undefined) ? "No Title" : title;
	this.name = id;
	this.objName = "#"+this.name;
	this.divObject = this.pageElement.divObject;
	this.status = null;
	
	this.element = null;
	this.element_body = null;
	this.element_body_wrapper = null;
	this.element_message = null;
	this.element_titlebar = null;
	this.element_toggle = null;
	this.element_close = null;
	this.tabsElement = null;

	this.updateListeners = [];
	this.updateListenerNames = [];	
	this.origContainer = null;
	this.closed = true;
	this.collapsed = false;
	this.width = -1;
	this.hasError = false;
	this.isRendered = false;				// set this to true if the task is rendered on load versus delayed loading then false
	
	/**
	 * SHOW sets the display property of the taskwindow to 'block' and calculates its (new) position
	 */
	this.show = function() {
		this.closed = false;			// set the closed flag to false
		this.center();					// move to front and relative offset to last opened window (could be sth. different)
		this.element.show(); 			// using jquery to set display: block;
	}
	
	/**
	 * HIDE sets the display property of the taskwindow to 'none'
	 */
	this.hide = function() {
		this.hideMessage();				// hide all previously created error messages
		this.closed = true;				// set the closed flag to true
		this.element.hide(); 			// using jquery to set display: none;
	}
	
	/**
	 * TOFRONT sets the current z-index of the taskwindow to the fore-most (highest) value
	 */
	this.toFront = function(zIndex) {
		// disregard the zIndex parameter and use internal zIndex instead
		this.zIndex = zIndexAll + 1;
		this.element.css("z-index",this.zIndex);
		zIndexAll = this.zIndex;
	}
	
	/**
	 * TOBACK sets the current z-index of the taskwindow to zero
	 */
	this.toBack = function() {
		// dummy; only moves the window to the 0 position
		this.element.css("z-index",0);
	}
	
	/**
	 * MOVETO will adjust the left (x) and top (y) position of the taskwindow
	 */
	this.moveTo = function(x,y) {
		if (this.movable) {
			this.element.css("left",x+"px");
			this.element.css("top",y+"px");
		}
	}
	
	/**
	 * RESIZE adjusts the width and height of the taskwindow
	 */
	this.resize = function(width,height) {
		// resize anyway (whether or not the resizable flag is true or false
		//if (this.resizable) {
			var body_wrapper_height = height - parseInt(this.element_titlebar.css("height"));
			this.element_body_wrapper.css("width",width+"px");
			this.element_body_wrapper.css("height",body_wrapper_height+"px");
			this.element_body.css("width",width+"px");
			this.element_body.css("height",body_wrapper_height+"px");
			this.element.css("width",width+"px");
			this.element.css("height",height+"px");
		//}
	}
	
	/**
	 * UPDATE is called after callback has created new content (of the existing element)
	 */
	this.update = function() {
		// ok, this is a terrible hack; 
		// a fake image appears before the content is loaded; 
		// this is needed for the loading indicator to appear
		// once the 'fake' content is replaced we can do the real update
		if (this.isRendered || !$("#"+pageElement.divId+" img").attr("name")) {
			//this.hideMessage();
			this.initTabs();
			this.hideLoading();
		}
		/*
		if (this.resizable) {
			this.fit();
		}
		*/
	}
	
	/**
	 * FIT will adjust the size of the taskwindow to the max width of its included tables
	 */
	this.fit = function() {
		// if task window is a floating window -> adjust width (otherwise: width=100%)
		if (this.isFloatingWindow) {
			if (!this.closed && this.width < 0) {
				var maxWidth = 0;
				// loop through all the tables in the task and find the maximum width (assuming table is used to wrap the task this will find our ideal width)
				$(this.objName+" table").each(function (i) {
					if (this.clientWidth > maxWidth) {
						maxWidth = this.clientWidth;
					}
				});
				// make it 10 pixel wider than calculated
				if (maxWidth > 0) {
					maxWidth = maxWidth + 10;
					// add smooth animation
					this.element.animate({width: maxWidth+"px"}, "fast");
					this.width = maxWidth;
				}
			} 
			else {
				this.element.css("width", this.width+"px");
			} 
		} else {
			this.element.css("width", "100%");
		}
		$(this.objName).bgiframe({top:'-1px'});
	}
	
	/**
	 * CENTER has no functionality as of yet
	 */
	this.center = function() {
		if (this.isFloatingWindow) {		// only position the window when it is a floating window (otherwise it is docked somewhere)
			this.toFront(0);				// always place the window on top when showing
			if (this.lastPosX < 0 && this.lastPosY < 0) {
				lastPosXAll -= 15;			// decrease the left position for all windows 
				lastPosYAll += 15;			// increase the top position for all windows
				if (lastPosXAll < 50) {		// reset when max left position reached
					lastPosXAll = 300;
					lastPosYAll = 100;
				}
				if (lastPosYAll > 250) {	// reset when max top position reached
					lastPosYAll = 100;
				}
				this.lastPosX = lastPosXAll;
				this.lastPosY = lastPosYAll;
				this.moveTo(lastPosXAll, lastPosYAll);
			}
		}
	}
	
	/**
	 * Initialize the floating panel
	 *
	 * build the container HTML that surrounds the content
	 * initialize jquery handles required to access the various panel elements
	 * add action handlers to elements
	 */
	this.init = function(container) {
		
	    this.origContainer = (!container) ? document.body : container;
	
		//---------------------------------------------------
		// floating panel container
		var fp_window_container = document.createElement("div");
		fp_window_container.id = this.name;
		fp_window_container.className = (this.isFloatingWindow) ? "jitk-floating-panel-window-container" : "jitk-floating-panel-window-container-inside";
	
		//---------------------------------------------------
		// floating panel window
		var fp_window = document.createElement("div");
		fp_window.id = this.name+"_window";
		fp_window.className = "jitk-floating-panel-window";
		
		//---------------------------------------------------
		// titlebar container
		var fp_titlebar = document.createElement("div");
		fp_titlebar.id = this.name+"_titlebar";
		fp_titlebar.className = "jitk-floating-panel-titlebar";
		if (!this.isFloatingWindow) {
			fp_titlebar.style.display = "none";
		}
		
		//---------------------------------------------------
		// title inside the titlebar
		var fp_titlebar_text = document.createElement("div");
		fp_titlebar_text.className = "jitk-floating-panel-titlebar-text";
		fp_titlebar_text.appendChild(document.createTextNode(this.title));
		fp_titlebar.appendChild(fp_titlebar_text);
		
		//---------------------------------------------------
		// buttons
		var fp_titlebar_button;
		var fp_titlebar_button_anchor;
		// buttons div
		fp_titlebar_button = document.createElement("div");
		fp_titlebar_button.className = "jitk-floating-panel-titlebar-button";
		// collapse button
		fp_titlebar_button_anchor = document.createElement("a");
		fp_titlebar_button_anchor.className = "collapse";
		fp_titlebar_button_anchor.id = this.name+"_toggle";
		fp_titlebar_button_anchor.href = "#";
		fp_titlebar_button_anchor.appendChild(document.createTextNode("\u00a0"));
		fp_titlebar_button.appendChild(fp_titlebar_button_anchor);
		// close button		
		fp_titlebar_button_anchor = document.createElement("a");
		fp_titlebar_button_anchor.className = "close";
		fp_titlebar_button_anchor.id = this.name+"_close";
		fp_titlebar_button_anchor.href = "#";
		fp_titlebar_button_anchor.appendChild(document.createTextNode("\u00a0"));
		fp_titlebar_button.appendChild(fp_titlebar_button_anchor);
		fp_titlebar.appendChild(fp_titlebar_button);
		
		// append the titlebar container to the floating panel window
		fp_window.appendChild(fp_titlebar);
	
		//---------------------------------------------------
		// body wrapper
		var fp_body_wrapper = document.createElement("div");
		fp_body_wrapper.id = this.name+"_body_wrapper";
		fp_body_wrapper.className = "jitk-floating-panel-window-body-wrapper";
	
		//---------------------------------------------------
		// body	
		var fp_body = document.createElement("div");
		fp_body.id = this.name+"_body";
		fp_body.className = "jitk-floating-panel-window-body";
	
		//---------------------------------------------------
		// message
		var fp_message = document.createElement("div");
		fp_message.id = this.name+"_message";
		fp_message.className = "jitk-message";
		fp_body.appendChild(fp_message);

		//---------------------------------------------------
		// fake body (loading image)
		if (!this.isRendered) {
			var fp_body_content = $("#"+this.pageElement.divId);
			if (!fp_body_content) {
				fp_body_content = document.createElement("div");
				fp_body_content.id = this.pageElement.divId;
				var fp_body_content_blank = document.createElement("img");
				fp_body_content_blank.setAttribute("src", "images/blank.gif");