modal.js

Wicket一个开发Java Web应用程序框架。它使得开发web应用程序变得容易而轻松。 Wicket利用一个POJO data beans组件使得它可以与任何持久层技术相结合。

		
		w.style.width = this.width + "px";
		w.style.left = this.left + "px";
		f.style.height = this.height  + "px";
		w.style.top = this.top + "px";
		
		this.resizing();
									
		return this.res;
	},	

	onResizeTopRight: function(object, deltaX, deltaY) {
		var w = this.window;
		var f = this.content;
		
		this.width = parseInt(w.style.width, 10) + deltaX;
		this.height = parseInt(f.style.height, 10) - deltaY;
		this.top = parseInt(w.style.top, 10) + deltaY;
		
		this.clipSize(false, true);
		
		w.style.width = this.width + "px";
		f.style.height = this.height  + "px";
		w.style.top = this.top + "px";
		
		this.resizing();
						
		return this.res;
	},	
	
	onResizeTop: function(object, deltaX, deltaY) {
		var f = this.content;
		var w = this.window;
		
		this.height = parseInt(f.style.height, 10) - deltaY;
		this.top = parseInt(w.style.top, 10) + deltaY;
		
		this.clipSize(false, true);
		
		f.style.height = this.height  + "px";
		w.style.top = this.top + "px";
		
		this.resizing();
						
		return this.res;
	}
}

/**
 * Counter for generating unique component ids.
 */
Wicket.Window.idCounter = 0;

/**
 * Returns the modal window markup with specified element identifiers.
 */
Wicket.Window.getMarkup = function(idWindow, idClassElement, idCaption, idContent, idTop, idTopLeft, idTopRight, idLeft, idRight, idBottomLeft, idBottomRight, idBottom, idCaptionText, isFrame) {
	var s =
			"<div class=\"wicket-modal\" id=\""+idWindow+"\" style=\"top: 10px; left: 10px; width: 100px;\">"+
			"<div id=\""+idClassElement+"\">"+
				
				"<div class=\"w_top_1\">"+

				"<div class=\"w_topLeft\" id=\""+idTopLeft+"\">"+
				"</div>"+				

				"<div class=\"w_topRight\" id=\""+idTopRight+"\">"+
				"</div>"+

				"<div class=\"w_top\" id='"+idTop+"'>"+									
				"</div>"+

				"</div>"+
								
				"<div class=\"w_left\" id='"+idLeft+"'>"+
					"<div class=\"w_right_1\">"+
						"<div class=\"w_right\" id='"+idRight+"'>"+
							"<div class=\"w_content_1\" onmousedown=\"if (Wicket.Browser.isSafari()) { event.ignore = true; }  else { Wicket.stopEvent(event); } \">"+																			
								"<div class=\"w_caption\"  id=\""+idCaption+"\">"+
									"<a class=\"w_close\" href=\"#\"></a>"+									
									"<span id=\""+idCaptionText+"\" class=\"w_captionText\"></span>"+
								"</div>"+
							
								"<div class=\"w_content_2\">"+
								"<div class=\"w_content_3\">"+
		 							"<div class=\"w_content\">";
				if (isFrame) {
					s+=								
										"<iframe src='\/\/:' frameborder=\"0\" id='"+idContent+"' allowtransparency=\"false\" style=\"height: 200px\">"+
										"</iframe>";
				} else {
					s+=
										"<div id='"+idContent+"'></div>";
				}
					s+= 						
									"</div>"+
								"</div>"+
								"</div>"+
							"</div>"+
						"</div>"+
					"</div>"+
				"</div>"+


				"<div class=\"w_bottom_1\" id=\""+idBottom+"\">"+					
					
					"<div class=\"w_bottomRight\"  id=\""+idBottomRight+"\">"+
					"</div>"+
					
					"<div class=\"w_bottomLeft\" id=\""+idBottomLeft+"\">"+
					"</div>"+

					"<div class=\"w_bottom\" id=\""+idBottom+"\">"+				
					"</div>"+				


				"</div>"+				


			"</div>"+
		"</div>";
		
		return s;
}
	

/**
 * Transparent or semi-transparent masks that prevents user from interacting
 * with the portion of page behind a window.  
 */
Wicket.Window.Mask = Wicket.Class.create();

Wicket.Window.Mask.zIndex = 20000;

Wicket.Window.Mask.prototype = {
			
	/**
	 * Creates the mask.
	 * Created mask is not visible immediately. You have to call <code>show()</code> to
	 * make it visible.
	 * @param {boolean} transparent - whether the mask should be transparent (true) or 
	 *                                semi-transparent (false).
	 */
	initialize: function(transparent) {
		this.transparent = transparent;		
	},
	
	/**
	 * Shows the mask.
	 */
	show: function() {
		
		// if the mask is not alrady shown...
		if (typeof(Wicket.Window.Mask.element) == "undefined" ||
			Wicket.Window.Mask.element == null) {		
		
			// crate the mask element and add  it to document
			var e = document.createElement("div");
			document.body.appendChild(e);							
			
			// set the proper css class name 
			if (this.transparent) {
				e.className = "wicket-mask-transparent";
			} else {
				e.className = "wicket-mask-dark";
			}					
		
			e.style.zIndex = Wicket.Window.Mask.zIndex;

			// HACK - KHTML doesn't support colors with alpha transparency
			// if the mask is not transparent we have to either
			// make the background image visible (setting color to transparent) - for KHTML
			// or make the background-image invisible (setting it to null) - for other browsers												
			if (this.transparent == false) {
				if (Wicket.Browser.isKHTML() == false) {			
					e.style.backgroundImage = "none";
				} else {
					e.style.backgroundColor = "transparent";
				}
			}

			// HACK - it really sucks that we have to set this to absolute even for gecko.
			// however background with position:fixed makes the text cursor in textfieds
			// in modal window disappear
			if (Wicket.Browser.isIE() || Wicket.Browser.isGecko()) {
				e.style.position = "absolute";
			}

			// set the element							 							
			this.element = e;
					
			// preserver old handlers
			this.old_onscroll = window.onscroll;
			this.old_onresize = window.onresize;
			
			// set new handlers
			window.onscroll = this.onScrollResize.bind(this);
			window.onresize = this.onScrollResize.bind(this);
			
			// fix the mask position
			this.onScrollResize(true);
						
			// set a static reference to mask
			Wicket.Window.Mask.element = e;			
		} else {
			// mask is already shown - don't hide it
			this.dontHide = true; 			
		}
		
		var doc = document;
		var old = Wicket.Window.current.oldWindow;
		if (typeof(old) != "undefined" && old != null) {
			doc = old.getContentDocument();
		}
		
		this.document = doc;
		
		// disable user interaction
		this.hideSelectBoxes();						
		this.disableTabs();
		this.disableFocus();		

	},
	
	/**
	 * Hides the mask.
	 */
	hide: function() {			
	
		// if the mask is visible and we can hide it
		if (typeof(Wicket.Window.Mask.element) != "undefined" && typeof(this.dontHide) == "undefined") {
	
			// remove element from document	
			document.body.removeChild(this.element);
			this.element = null;						
			
			// restore old handlers
			window.onscroll = this.old_onscroll;
			window.onresize = this.old_onresize;
						
			Wicket.Window.Mask.element = null;			
		}	
		
		// show old select boxes (ie only)
		this.showSelectBoxes();
		
		// restore tab order
		this.restoreTabs();
		
		// revert onfocus handlers
		this.enableFocus();
		
		this.document = null;

	},
	
	/**
	 * Used to update the position (ie) and size (ie, opera) of the mask.
	 */
	onScrollResize: function(dontChangePosition) {							
		// if the iframe is not position:fixed fix it's position
		if (this.element.style.position == "absolute") {
		
			var w = Wicket.Window.getViewportWidth();
			var h = Wicket.Window.getViewportHeight();
	
			var scTop = 0;
			var scLeft = 0;	 	
	 
 			scLeft = Wicket.Window.getScrollX();
			scTop = Wicket.Window.getScrollY();
	 		
			this.element.style.top = scTop + "px";
			this.element.style.left = scLeft + "px";
	
			if (document.all) { // opera or explorer
				this.element.style.width = w;
			}	
			this.element.style.height = h;		
		} 		
	},

	/**
	 * Returns true if 'element' is a child (anywhere in hierarchy) of 'parent'
	 */ 
	isParent: function(element, parent) {		
		if (element.parentNode == parent)
			return true;
		if (typeof(element.parentNode) == "undefined" ||
			element.parentNode == document.body)
			return false;
		return this.isParent(element.parentNode, parent);			
	},


	/**
	 * For internet explorer hides the select boxes (because they
	 * have always bigger z-order than any other elements).
	 */
	hideSelectBoxes : function() {				
		if (Wicket.Browser.isIE() && Wicket.Browser.isIE7() == false) {
			var win = Wicket.Window.current;					
			
			this.boxes = new Array();
			var selects = this.document.getElementsByTagName("select");
			for (var i = 0; i < selects.length; i++) {				
				var element = selects[i];
				
				// if this is not an iframe window and the select is child of window content,
				// don't hide it					
				if (win.isIframe() == false && this.isParent(element, win.content)) {
					continue;
				}				
				
				if (element.style.visibility != "hidden") {
					element.style.visibility = "hidden";
					this.boxes.push(element);
				}				
			}
		}
	},
	
	/**
	 * Shows the select boxes if they were hidden. 
	 */
	showSelectBoxes: function() {
		if (typeof (this.boxes) != "undefined") {
			for (var i = 0; i < this.boxes.length; ++i) {
				var element = this.boxes[i];
				element.style.visibility="visible";
			}
			this.boxes = null;
		}		
	},
	
	/**
	 * Disable focus on element and all it's children.	 
	 */
	disableFocusElement: function(element, revertList) {
				
		if (typeof(Wicket.Window.current) != "undefined" &&
			Wicket.Window.current != null &&
			Wicket.Window.current.window != element) {								
				
			revertList.push([element, element.onfocus]);
			element.onfocus = function() { element.blur(); }			
			
			for (var i = 0; i < element.childNodes.length; ++i) {
				this.disableFocusElement(element.childNodes[i], revertList);
			}
		}
	},
	
	/**
	 * Disable focus on all elements in document
	 */
	disableFocus: function() {
		// explorer doesn't need this, because for IE disableTabs() is called.
		// plus in IE this causes problems because it scrolls document		);
		if (Wicket.Browser.isIE() == false) {			
			this.focusRevertList = new Array();			
			var body = this.document.getElementsByTagName("body")[0];			
			for (var i = 0; i < body.childNodes.length; ++i) {		
				this.disableFocusElement(body.childNodes[i], this.focusRevertList);
			}
		}
	},
	
	/**
	 * Enables focus on all elements where the focus has been disabled.
	 */
	enableFocus: function() {
		if (typeof(this.focusRevertList) != "undefined") {						
			for (var i = 0; i < this.focusRevertList.length; ++i) {
				var item = this.focusRevertList[i];
				item[0].onfocus = item[1];
			}
		}
		this.focusRevertList = null;
	},	
	
	
	/**
	 * Disable tab indexes (ie).
	 */
	disableTabs: function () {		
		this.tabbableTags = new Array("A","BUTTON","TEXTAREA","INPUT","IFRAME");
		if (Wicket.Browser.isIE()) {
			var win = Wicket.Window.current;			
			var i = 0;			
			this.tabIndexes = new Array();
			for (var j = 0; j < this.tabbableTags.length; j++) {
				var tagElements = this.document.getElementsByTagName(this.tabbableTags[j]);
				for (var k = 0 ; k < tagElements.length; k++) {
					
					// if this is not an iframe window and the element is child of window content,
					// don't disable tab on it
					if (win.isIframe() == true || this.isParent(tagElements[k], win.content) == false) {				
						this.tabIndexes[i] = tagElements[k].tabIndex;
						tagElements[k].tabIndex="-1";
					}
					i++;
				}
			}
		}
	},
	
	/**
	 * Restore tab indexes if they were disabled.
	 */
	restoreTabs: function() {
		if (typeof(this.tabIndexes) != 'undefined') {
			var i = 0;
			for (var j = 0; j < this.tabbableTags.length; j++) {
				var tagElements = this.document.getElementsByTagName(this.tabbableTags[j]);
				for (var k = 0 ; k < tagElements.length; k++) {
					tagElements[k].tabIndex = this.tabIndexes[i];
					tagElements[k].tabEnabled = true;
					i++;
				}
			}
			this.tabIndexes = null;
		}
	}

}

/**
 * Returns the height of visible area.
 */
Wicket.Window.getViewportHeight = function() {
	if (window.innerHeight != window.undefined) 
		return window.innerHeight;
	
	if (document.compatMode == 'CSS1Compat') 
		return document.documentElement.clientHeight;
		
	if (document.body) 
		return document.body.clientHeight;
		 
	return window.undefined; 
}

/**
 * Returns the width of visible area.
 */
Wicket.Window.getViewportWidth =  function() {
	if (window.innerWidth != window.undefined) 
		return window.innerWidth;
		 
	if (document.compatMode == 'CSS1Compat') 
		return document.documentElement.clientWidth; 
		
	if (document.body) 
		return document.body.clientWidth;
		 
	return window.undefined;
}

/**
 * Returns the horizontal scroll offset
 */
Wicket.Window.getScrollX = function() {
	var iebody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body	
	return document.all? iebody.scrollLeft : pageXOffset
}

/**
 * Returns the vertical scroll offset
 */
Wicket.Window.getScrollY = function() {
	var iebody = (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body	
	return document.all? iebody.scrollTop : pageYOffset
}

/**
 * Convenience methods for getting and setting cookie values.
 */
Wicket.Cookie = {	

	/**
	 * Returns the value for cookie of given name.
	 * @param {String} name - name of cookie
	 */
	get: function(name) {
		if (document.cookie.length > 0) {
			start = document.cookie.indexOf (name + "=");
  			if (start != -1) { 
				start = start + name.length + 1;
				end = document.cookie.indexOf(";", start);
				if (end == -1) { 
					end = document.cookie.length;
				}
				return unescape(document.cookie.substring(start,end))
    		}
  		} else {
			return null
		}
	},

	/**
	 * Sets the value for cookie of given name.
	 * @param {Object} name - name of cookie
	 * @param {Object} value - new value
	 * @param {Object} expiredays - how long will the cookie be persisted
	 */
	set: function(name, value, expiredays) {
		var exdate = new Date();
		exdate.setDate(exdate.getDate() + expiredays);
		document.cookie = name + "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate);
	}
};