PetitTeton/public/js/dialog.js

//
// Requires jquery at a minimum.
//
function Dialog() {
}
Dialog.prototype.constructor = Dialog;
Dialog.prototype.currentId = null;  //Currently displayed dialog division ID.//
Dialog.prototype.currentReset = null;  //Called after the dialog is closed to reset the dialog for the next opening.//
Dialog.prototype.postCloseHandler = null;  //Called after the dialog is closed to perform any post close operation.//
Dialog.prototype.topOffset = 40;  //Number of pixels of padding between the dialog top and the window top.//

//
// Shows the dialog with the given dialogId (the ID of the hidden div containing the dialog content).
// @param dialogId The identifier of the dialog.
// @param reset The optional function called when the dialog is closed (for cleanup).
//
Dialog.prototype.open = function(dialogId, reset) {
	//Ensure the dialog isn't already open.  Note: We are not currently counting the calls to open it as this is not expected to be a needed feature.  This is more of a precaution.//
	if(this.currentId != dialogId && dialogId) {
		//If a dialog is already showing then hide it without altering the dialog background, otherwise create the dialog background.//
		if(this.currentId) {
			try {
				var oldDialog = $('#' + this.currentId);
				
				oldDialog.parent().children('.dialogClose').remove();
				oldDialog.unwrap();
				oldDialog.hide();
			
				//Call the reset if available.//
				if(this.currentReset) {
					this.currentReset();
				}
			}
			catch(err) {
				alert(err);
			}
		}
		else {
			//Create the background div and display it.//
			$('body').prepend("<div id='dialogBackground' class='dialogBackground'/>");
		}
		
		//Create wrapper divs around the dialog div to display a close box and provide some padding and give it a background.//
		var dialog = $('#' + dialogId);
		dialog.wrap("<div class='dialogWindow'/>");
		dialog.parent().prepend("<div class='dialogShadowTopRight'/>");
		dialog.parent().prepend("<div class='dialogShadowRight'/>");
		dialog.parent().prepend("<div class='dialogShadowBottomRight'/>");
		dialog.parent().prepend("<div class='dialogShadowBottom'/>");
		dialog.parent().prepend("<div class='dialogShadowBottomLeft'/>");
		dialog.wrap("<div class='dialogPanel'/>");  // style='background: " + dialog.css('background') + ";'  //This would take the background from the parent, but this works differently on different browsers (firefox returns nothing if nothing is set, chrome returns a clear background - which overrides the default css settings in dialog.css).
		dialog.parent().prepend("<div class='dialogClose' onClick='javascript: dialog.close();'/>");
		//Show the dialog.//
		dialog.show();
		//Store a reference to the currently displayed dialog & reset function for later use.//
		this.currentId = dialogId;
		this.currentReset = reset;
		//Initialize the resize handler and call it.//
		$(window).resize(this.resize).resize();
	}
};

//
// Closes the currently open dialog.
//
Dialog.prototype.close = function() {
	//Ensure a dialog is open.//
	if(this.currentId) {
		try {
			var dialog = $('#' + this.currentId);
			
			//Remove the wrappering divs from the dialog.//
			dialog.parent().children('.dialogClose').remove();
			dialog.unwrap();
			dialog.parent().children('.dialogShadowTopRight').remove();
			dialog.parent().children('.dialogShadowRight').remove();
			dialog.parent().children('.dialogShadowBottomRight').remove();
			dialog.parent().children('.dialogShadowBottom').remove();
			dialog.parent().children('.dialogShadowBottomLeft').remove();
			dialog.unwrap();
			//Hide the dialog.//
			dialog.hide();
			//Delete the background div.//
			$('#dialogBackground').remove();
			//Remove the resize handler.//
			$(window).unbind('resize', this.resize);
			
			//Call the reset if available.//
			if(this.currentReset) {
				try {
					this.currentReset();
				}
				catch(err) {
					alert(err);
				}
				
				this.currentReset = null;
			}
			
			//Call the post close handler if available.//
			if(this.postCloseHandler) {
				try {
					this.postCloseHandler();
				}
				catch(err) {
					alert(err);
				}
				
				this.postCloseHandler = null;
			}
			
			//Cleanup the dialog references.//
			this.currentId = null;
			this.currentReset = null;
		}
		catch(err) {
			alert(err);
		}
	}
};

//
// Closes the currently open dialog.
//
Dialog.prototype.resize = function() {
	if(dialog.currentId) {
		var windowHeight = 0;
		var windowWidth = 0;
		var dialogContent = $('#' + dialog.currentId);
		var dialogWindow = dialogContent.parent().parent();
		var background = $('#dialogBackground');
		
		if(navigator.appName.indexOf("Microsoft") != -1) {
			var htmlHeight = document.body.parentNode.clientHeight;
			
			windowHeight = htmlHeight < window.screen.height ? htmlHeight : window.screen.height;
			windowWidth = document.body.offsetWidth;
		}
		else {
			windowHeight = window.innerHeight;
			windowWidth = window.innerWidth;
		}
		
		var dialogHeight = dialogContent.height() + 62;  //10 for the shadow, 20 for the insets, 1 for the border (x2).//
		var dialogWidth = dialogContent.width() + 62;
		background.css({'top': 0, 'left': 0, 'bottom': windowHeight, 'right': windowWidth, 'height': windowHeight, 'width': windowWidth});

		dialogWindow.css(
			{
			'top': 
				(dialogHeight > windowHeight ? "0px" : dialogHeight + (dialog.topOffset * 2) < windowHeight ? dialog.topOffset + 'px' : Math.round((windowHeight - dialogHeight) / 2) + "px"), 
			'left': 
				(dialogWidth > windowWidth ? "0px" : Math.round((windowWidth - dialogWidth) / 2) + "px"),
			'height': dialogHeight + 'px', 'width': dialogWidth + 'px'
			}
		);
	}
};

var dialog = new Dialog();