modal.js

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

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
 
/**
 * Javascript modal window
 * Licensed under the Apache License, Version 2.0
 * @author Matej Knopp
 */

/**
 * In case wicket-ajax.js is not yet loaded, create 
 * Wicket namespace and Wicket.Class.create. 
 */  
if (typeof(Wicket) == "undefined") {
	Wicket = { };
}


if (Wicket.Class == null) {
	Wicket.Class = {
		create: function() {
			return function() {
				this.initialize.apply(this, arguments);
			}
		}
	};
}

if (Wicket.Object == null) {
	Wicket.Object = { };
}

if (Wicket.Object.extend == null) {
	Wicket.Object.extend = function(destination, source) {
		for (property in source) {
			destination[property] = source[property];
		}
		return destination;
	}
}

/**
 * Supporting code for getting mouse move and mouse up events from iframes.
 * The problem when dragging a div with an iframe is that when the mouse cursor
 * gets over an iframe, all mouse events are received by the iframe's document. (IE and FF)
 * 
 * This code can recursively traverse all iframes in document and temporatily forward
 * events from their documents to parent document. 
 */ 
Wicket.Iframe = { 
	
	/**
	 * Returns the horizontal position of given element (in pixels).
	 */
	findPosX: function(e) { 
		if (e.offsetParent) {
			var c = 0;
			while (e.offsetParent) {
				c += e.offsetLeft
				e = e.offsetParent;
			}
			return c;
		} else if (e.x) {
			return e.x;
		} else {
			return 0;
		}	
	},

	/**
	 * Returns the vertical position of given element (in pixels).
	 */	
	findPosY: function(e) {
		if (e.offsetParent) {
			var c = 0;
			while (e.offsetParent) {
				c += e.offsetTop
				e = e.offsetParent;
			}
			return c;
		} else if (e.y) {
			return e.y;
		} else {
			return 0;
		}				
	},

	/**
	 * Forwards the events from iframe to the parent document (works recursively).
	 * @param {Document} doc - document to which the events will be forwardeded   
	 * @param {HTMLElement} iframe - source iframe 
	 * @param {Array} revertList - list to which altered iframes will be added 
	 */
	forwardEvents: function(doc, iframe, revertList) {
		try {
			var idoc = iframe.contentWindow.document;
			idoc.old_onmousemove = idoc.onmousemove;
			idoc.onmousemove = function(evt) {
				if (evt == null)
					evt = iframe.contentWindow.event;
				var e = new Object();						
				
				var dx = 0;
				var dy = 0;				
				if (Wicket.Browser.isIE() || Wicket.Browser.isGecko) {
					dx = Wicket.Window.getScrollX();
					dy = Wicket.Window.getScrollY();
				}
										
				e.clientX = evt.clientX + Wicket.Iframe.findPosX(iframe) - dx;
				e.clientY = evt.clientY + Wicket.Iframe.findPosY(iframe) - dy;		
				doc.onmousemove(e);			
			}	
			idoc.old_onmouseup = idoc.old_onmousemove;
			idoc.onmouseup = function(evt) {
				if (evt == null)
					evt = iframe.contentWindow.event;
				var e = new Object();

				var dx = 0;
				var dy = 0;				
				if (Wicket.Browser.isIE() || Wicket.Browser.isGecko()) {
					dx = Wicket.Window.getScrollX();
					dy = Wicket.Window.getScrollY();
				}
				
				e.clientX = evt.clientX + Wicket.Iframe.findPosX(iframe) - dx;
				e.clientY = evt.clientY + Wicket.Iframe.findPosY(iframe) - dy;			
				doc.onmouseup(e);	
			}	
			revertList.push(iframe);
			Wicket.Iframe.documentFix(idoc, revertList);
		} catch (ignore) {
		}		
	},

	/**
	 * Reverts the changes made to the given iframe.
	 * @param {HTMLElement} iframe
	 */
	revertForward: function(iframe) {
		var idoc = iframe.contentWindow.document;
		idoc.onmousemove = idoc.old_onmousemove;
		idoc.onmouseup = idoc.old_onmouseup;
		idoc.old_onmousemove = null;
		idoc.old_onmouseup = null;
	},

	/**
	 * Forward events from all iframes of the given document (recursive)
	 * @param {Document} doc - document to be fixed
	 * @param {Array} revertList - all affected iframes will be stored here
	 */
	documentFix: function(doc, revertList) {
		var iframes = doc.getElementsByTagName("iframe");	
		for (var i = 0; i < iframes.length; ++i) {
			var iframe = iframes[i];		
			if (iframe.tagName != null)					
				Wicket.Iframe.forwardEvents(doc, iframe, revertList);		
		}
	},

	/**
	 * Reverts the changes made to each iframe in the given array.
	 * @param {Array} revertList
	 */
	documentRevert: function(revertList) {
		for (var i = 0; i < revertList.length; ++i) {
			var iframe = revertList[i];
			Wicket.Iframe.revertForward(iframe);
		}
	}	
}

/**
 * Draggable (and optionally resizable) window that can either hold a div
 * or an iframe. 
 */
Wicket.Window = Wicket.Class.create();

/**
 * Display confirmation dialog if the user is about to leave a page (IE and FF).
 */
Wicket.Window.unloadConfirmation = true;

/**
 * Creates a wicket window instance. The advantage of using this is
 * that in case an iframe modal window is opened in an already displayed 
 * iframe modal window, the new window is created as a top-level window.
 * 
 */
Wicket.Window.create = function(settings) {
	var win;
	
	// if it is an iframe window...
	if (typeof(settings.src) != "undefined" && Wicket.Browser.isKHTML() == false) {
		// attempt to get class crom parent
		try {		
			win = window.parent.Wicket.Window;			
		} catch (ignore) {		
		}
	}
	
	// no parent...
	if (typeof(win) == "undefined") {
		win = Wicket.Window;
	}
	
	// create and return instance
	return new win(settings);
}

/**
 * Returns the current top level window (null if none).
 */
Wicket.Window.get = function() {
	var win = null;
	
	if (typeof(Wicket.Window.current) != "undefined") {
		win = Wicket.Window.current;
	} else 
	{
		try {
			win = window.parent.Wicket.Window.current;
		} catch (ignore) {
		}
	}
	return win;
} 

/**
 * Closes the current wicket open window. This method is supposed to 
 * be called from inside the window (therefore it checks window.parent).
 */
Wicket.Window.close = function() {
	var win;
	try {		
		win = window.parent.Wicket.Window;
	} catch (ignore) {		
	}
	
	if (typeof(win) != "undefined" && typeof(win.current) != "undefined") {
		// we can't call close directly, because it will delete our window,
		// so we will schedule it as timeout for parent's window
		window.parent.setTimeout(function() {
			win.current.close();			
		}, 0);
	}
}

Wicket.Window.prototype = { 

	/**
	 * Creates a new window instance.
	 * Note:
	 *   Width refers to the width of entire window (including frame).
	 *   Height refers to the height of user content. 
	 * 
	 * @param {Object} settings - map that contains window settings. the default
	 *                            values are below - together with description
	 */
	initialize: function(settings) {
				
		// override default settings with user settings
		this.settings = Wicket.Object.extend({
			
			minWidth: 200,  /* valid only if resizable */
			minHeight: 150, /* valid only if resizable */
			
			className: "w_blue", /* w_silver */
			
			width: 600,  /* initial width */
			height: 300, /* may be null for non-iframe, non-resizable window (automatic height) */
			
			resizable: true,
			
			widthUnit: "px", /* valid only if not resizable */
			heightUnit: "px", /* valid only if not resizable */
		
			src: null,     /* iframe src - this takes precedence over the "element" property */
			element: null, /* content element (for non-iframe window) */
			
			iframeName: null, /* name of the iframe */				
		
			cookieId: null, /* id of position (and size if resizable) cookie */
		
			title: null, /* window title. if null and window content is iframe, title of iframe document will be used. */
		
			onCloseButton: function() {
				/* On firefox on Linux, at least, we need to blur() textfields, etc.
				 * to get it to update its DOM model. Otherwise you'll lose any changes
				 * made to the current form component you're editing.
				 */ 
				this.caption.getElementsByTagName("a")[0].focus();
				this.caption.getElementsByTagName("a")[0].blur();
				this.close();
				return false;
			}.bind(this), /* called when close button is clicked */
			
			onClose: function() { }, /* called when window is closed */
		
			mask: "semi-transparent" /* or "transparent" */
			
		}, settings || { });
		
	},
		
	
	/**
	 * Returns true if the window is iframe-based.
	 */
	isIframe: function() {
		return this.settings.src != null;
	},
	
	/**
	 * Creates the DOM elements of the window.
	 */
	createDOM: function() {
		var idWindow = this.newId();
		var idClassElement = this.newId();
		var idCaption = this.newId();
		var idFrame = this.newId();
		var idTop = this.newId();
		var idTopLeft = this.newId();
		var idTopRight = this.newId();
		var idLeft = this.newId();
		var idRight = this.newId();
		var idBottomLeft = this.newId();
		var idBottomRight = this.newId();
		var idBottom = this.newId();
		var idCaptionText = this.newId();
		
		var markup = Wicket.Window.getMarkup(idWindow, idClassElement, idCaption, idFrame, 
		             idTop, idTopLeft, idTopRight, idLeft, idRight, idBottomLeft, idBottomRight, 
					 idBottom, idCaptionText, this.isIframe());								
		
		var element = document.createElement("div");
		document.body.appendChild(element);
		Wicket.replaceOuterHtml(element, markup);
				
		var _ = function(name) { return document.getElementById(name); }
		
		this.window = _(idWindow);
		this.classElement = _(idClassElement);			
		this.caption = _(idCaption);
		this.content = _(idFrame);
		this.top = _(idTop);
		this.topLeft = _(idTopLeft);
		this.topRight = _(idTopRight);
		this.left = _(idLeft);
		this.right = _(idRight);
		this.bottomLeft = _(idBottomLeft);
		this.bottomRight = _(idBottomRight);	
		this.bottom = _(idBottom);
		this.captionText = _(idCaptionText);
				
		if (Wicket.Browser.isIE()) {
			// IE stupid 3px bug - not fixed even in IE7 quirks!
			if (Wicket.Browser.isIE7() == false || Wicket.Browser.isIEQuirks()) {
				this.topLeft.style.marginRight = "-3px";
				this.topRight.style.marginLeft = "-3px";
				this.bottomLeft.style.marginRight = "-3px";
				this.bottomRight.style.marginLeft = "-3px";
			}								
		} 			
		
		// HACK - IE doesn't support position:fixed. Gecko does, however for a reason
		// we need to have background position: absolute, which makes the movement of 
		// the window really jerky if the window stays position: fixed
		if (Wicket.Browser.isIE() || Wicket.Browser.isGecko()) {
			this.window.style.position = "absolute";
		}
		
		// fix the cursors
		if (this.settings.resizable == false) {
			this.top.style.cursor =  this.topLeft.style.cursor = this.topRight.style.cursor =
			this.bottom.style.cursor = this.bottomLeft.style.cursor = this.bottomRight.style.cursor = 
			this.left.style.cursor = this.right.style.cursor = "default";
		}				
	},

	/**
	 * Creates the new uniqe id for window element.
	 */ 
	newId: function() {
		return "_wicket_window_" + Wicket.Window.idCounter++;
	},
	
	
	/**
	 * Binds the handler to the drag event on given element.
	 */
	bind: function(element, handler) {
		Wicket.Drag.init(element, this.onBegin.bind(this), this.onEnd.bind(this), handler.bind(this)); 
	},

	/**
	 * Unbinds the handler from a drag event on given element.
	 */	
	unbind: function(element) {
		Wicket.Drag.clean(element);
	},
	
	/**
	 * Binds the event handlers to the elements.
	 */
	bindInit: function() {
		this.bind(this.caption, this.onMove);
		
		if (this.settings.resizable) {		
			this.bind(this.bottomRight, this.onResizeBottomRight);
			this.bind(this.bottomLeft, this.onResizeBottomLeft);
			this.bind(this.bottom, this.onResizeBottom);
			this.bind(this.left, this.onResizeLeft);
			this.bind(this.right, this.onResizeRight);
			this.bind(this.topLeft, this.onResizeTopLeft);		
			this.bind(this.topRight, this.onResizeTopRight);
			this.bind(this.top, this.onResizeTop);
		} else {
			this.bind(this.bottomRight, this.onMove);
			this.bind(this.bottomLeft, this.onMove);
			this.bind(this.bottom, this.onMove);
			this.bind(this.left, this.onMove);
			this.bind(this.right, this.onMove);
			this.bind(this.topLeft, this.onMove);		
			this.bind(this.topRight, this.onMove);
			this.bind(this.top, this.onMove);
		}	
		
		this.caption.getElementsByTagName("a")[0].onclick = this.settings.onCloseButton.bind(this);
	},

	/**
	 * Unbinds the event handlers.
	 */
	bindClean: function() {				
		this.unbind(this.caption);
		this.unbind(this.bottomRight);
		this.unbind(this.bottomLeft);
		this.unbind(this.bottom);
		this.unbind(this.left);
		this.unbind(this.right);
		this.unbind(this.topLeft);		
		this.unbind(this.topRight);
		this.unbind(this.top);
		
		this.caption.getElementsByTagName("a")[0].onclick = null;
	},
	
	/**
	 * Returns the content document
	 */
	getContentDocument: function() {
		if (this.isIframe() == true) {
			return this.content.contentWindow.document;
		} else {
			return document;
		}
	},

	/**
	 * Places the window to the center of the viewport.
	 */	
	center: function() {
		var scTop = 0;
		var scLeft = 0;

		if (Wicket.Browser.isIE() || Wicket.Browser.isGecko()) 	{
			scLeft = Wicket.Window.getScrollX();
			scTop = Wicket.Window.getScrollY();
		}
		
		var width = Wicket.Window.getViewportWidth();
		var height = Wicket.Window.getViewportHeight();
		
		var modalWidth = this.window.offsetWidth;
		var modalHeight = this.window.offsetHeight;
		
		var left = (width / 2) - (modalWidth / 2) + scLeft;
		var top = (height / 2) - (modalHeight / 2) + scTop;
		
		this.window.style.left = left + "px";
		this.window.style.top = top + "px";
	},
	
	cookieKey: "wicket-modal-window-positions",
	cookieExp: 31,
	
	findPositionString: function(remove) {
		var cookie = Wicket.Cookie.get(this.cookieKey);
	
		var entries = cookie != null ? cookie.split("|") : new Array();
		
		for (var i = 0; i < entries.length; ++i) {
			if (entries[i].indexOf(this.settings.cookieId + "::") == 0) {
				var string = entries[i];
				if (remove) {
					entries.splice(i, 1);					
					Wicket.Cookie.set(this.cookieKey, entries.join("|"), this.cookieExp);