analytics/webcontent/common/framework/ui/CModal.js

/*
 *+------------------------------------------------------------------------+
 *| Licensed Materials - Property of IBM
 *| IBM Cognos Products: Viewer
 *| (C) Copyright IBM Corp. 2001, 2011
 *|
 *| US Government Users Restricted Rights - Use, duplication or
 *| disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 *|
 *+------------------------------------------------------------------------+
 */
/**
	Class: CModal
	Description:

	@param title	String to show in the header. [Mandatory]
	@param sCloseToolTip String to use as tooltip for close button. [Madatory]
	@param parent	The container of this dialog. [Optional]
	@param t	Top coordinate. [Optional] By Default the dialog is centered.
	@param l	Left coordinate. [Optional] By Default the dialog is centered.
	@param h	Height of the dialog. [Optional] By Default the dialog is centered.
	@param w	Width of the dialog. [Optional] By Default the dialog is centered.
*/


function CModal(title, sCloseToolTip, parent, t, l, h, w)
{
	this.m_title = title;
	this.m_sCloseToolTip = sCloseToolTip;
	if (parent) {
		this.m_parent = parent;
	}
	else {
		this.m_parent = (document.all ? document.body : document.documentElement);
	}

	var oBL = document.getElementById(CMODAL_BACKGROUND_LAYER_ID);
	if (!oBL) {
		oBL = document.createElement('div');
		oBL.id = CMODAL_BACKGROUND_LAYER_ID;
		oBL.style.display = 'none';
		oBL.style.position = 'absolute';
		oBL.style.top = '0px';
		oBL.style.left = '0px';
		oBL.style.zIndex = (CMODAL_ZINDEX - 2);
		oBL.style.width = '100%';
		oBL.style.height = '100%';
		oBL.innerHTML = '<table width="100%" height="100%"><tr><td onmousemove="CModalEvent_mousemoving(event)" onmouseup="CModalEvent_disableDrag(event)"></td></tr></table>';
		this.m_parent.appendChild(oBL);
	}
	this.m_backLayer = oBL;

	this.m_top = (t == null ? 0 : t);
	this.m_left = (l == null ? 0 : l);
	this.m_height = (h == null ? 0 : h);
	this.m_width = (w == null ? 0 : w);

	var f = document.getElementById(CMODAL_ID);
	if (!f) {
		f = document.createElement('span');
		f.id = CMODAL_ID;
		f.CModal = this;
		f.className = 'CModal_frame';
		f.style.zIndex = CMODAL_ZINDEX;
		this.m_parent.appendChild(f);
	}

	this.m_back_iframe = document.getElementById(CMODAL_BACK_IFRAME_ID);
	if (!this.m_back_iframe) {
		this.m_back_iframe = document.createElement('iframe');
		this.m_back_iframe.id = CMODAL_BACK_IFRAME_ID;
		this.m_back_iframe.frameBorder = 0;
		this.m_back_iframe.src = "../common/blank.html";
		this.m_back_iframe.style.position = 'absolute';
		this.m_back_iframe.style.zIndex = CMODAL_ZINDEX - 1;
		this.m_parent.appendChild(this.m_back_iframe);
	}
	// render framework of the modal dialog
	f.innerHTML = this.renderDialogFrame();
	this.m_frame = f;
}

function CModal_hide() {
	this.m_top = parseInt(this.m_frame.offsetTop,10);
	this.m_left = parseInt(this.m_frame.offsetLeft,10);
	this.m_height = parseInt(this.m_frame.offsetHeight,10);
	this.m_width = parseInt(this.m_frame.offsetWidth,10);

	this.m_backLayer.style.display = 'none';
	this.m_frame.style.display = 'none';
	if (this.m_back_iframe) {
		this.m_back_iframe.style.display = 'none';
	}
}

function CModal_reCenter() {
	this.m_left = (this.m_backLayer.offsetWidth - this.m_width)/2;
	this.m_top = (this.m_backLayer.offsetHeight - this.m_height)/2;
}

function CModal_renderDialogFrame() {
	var sTableAttrs = 'summary="" cellpadding="0" cellspacing="0" border="0"';
	var out =
		'<table width="100%" height="100%" ' + sTableAttrs + ' onmouseup="CModalEvent_disableDrag(event)" onmousemove="CModalEvent_mousemoving(event)"><tr>' +
			'<td onmousedown="CModalEvent_enableDrag(event);">' +
				'<table class="dialogHeader" width="100%" ' + sTableAttrs + '><tr>' +
					'<td id="' + CMODAL_HEADER + '" valign="top" class="dialogHeaderTitle" width="100%" nowrap="nowrap">' +
						getConfigFrame().htmlencode(this.m_title) +
					'</td><td align="right" valign="middle">' +
						'<a onclick="hideCModal()" style="cursor:pointer;">' +
							'<img height="16" width="16" vspace="2" border="0" class="dialogClose" onmouseover="this.className = \'dialogCloseOver\'" onmouseout="this.className = \'dialogClose\'" onmouseup="this.className = \'dialogClose\'" src="' + p_sSkinFolder + '/portal/images/close.gif" title="' + getConfigFrame().htmlencode(this.m_sCloseToolTip) + '">' +
						'</a>' +
				'</td></tr></table>' +
			'</td></tr><tr><td width="100%" height="100%" class="body_dialog_modal" style="border-left:1px solid #CECFCE;border-right:1px solid #CECFCE;" onmousemove="CModalEvent_mousemoving(event)" onmouseup="CModalEvent_disableDrag(event)">' +
				'<iframe id="' + CMODAL_CONTENT_ID + '" name="' + CMODAL_CONTENT_ID + '" class="body_dialog_modal" src="../' + qs_dir + '/blankNewWin.html" style="padding:0px;margin:0px;width:100%;height:100%;" frameborder="0">no iframe support?</iframe>' +
			'</td></tr><tr><td>' +
				'<table ' + sTableAttrs + ' class="dialogButtonBar" style="padding:0px">' +
					'<tr>' +
						'<td width="2" valign="middle"><img width="2" alt="" src="../ps/images/space.gif"></td>' +
						'<td valign="middle"><table border="0" cellpadding="1" cellspacing="0">' +
							'<tr>' +
								'<td><img height="1" width="8" alt="" src="../ps/images/space.gif"></td>' +
								'<td>' + CModal_renderButton(msgQS['OK'], 'okCModal()') + '</td>' +
								'<td><img height="1" width="8" alt="" src="../ps/images/space.gif"></td>' +
								'<td>' + CModal_renderButton(msgQS['CANCEL'], 'cancelCModal()') + '</td>' +
								'<td><img height="1" width="8" alt="" src="../ps/images/space.gif"></td>' +
							'</tr></table>' +
						'</td><td width="100%">&nbsp;</td>' +
						'<td style="padding:3px;" valign="bottom" class="CModal_sideSE" onmousedown="CModalEvent_enableResize(event)">' +
							'<img class="CModal_sideSE" style="cursor:se-resize;" alt="" height="12" width="12" border="0" src="../common/images/dialog_resize.gif" onmousedown="CModalEvent_enableResize(event);return false;" onmouseup="CModalEvent_disableDrag(event);return false;" onmousemove="CModalEvent_mousemoving(event);return false;">' +
						'</td>' +
					'</tr></table></td></tr></table>';
	return out;
}

function CModal_renderButton(label, jsFct) {
	var out = '<table cellpadding="0" cellspacing="0" style="padding: 2px 10px 3px;" class="commandButton" onmouseover="this.className=\'commandButtonOver\'"' +
		' onmouseout="this.className = \'commandButton\'" onmousedown="this.className=\'commandButtonDown\'">' +
		'<tr>' +
			'<td style="cursor:pointer;" valign="middle" align="center" nowrap id="btnAnchor"><img height="1" width="60" alt="" src="../ps/images/space.gif"><br>' +
				'<a onclick="' + jsFct + '" onmouseover="window.status=\'\';return true;" onmouseout="window.status=\'\';return true;">' + label + '</a></td></tr></table>';
	return out;
}

function CModal_show() {
	this.m_backLayer.style.display = 'block';
	this.reCenter();

	this.m_frame.style.top = this.m_top;
	this.m_frame.style.left = this.m_left;
	this.m_frame.style.height = this.m_height;
	this.m_frame.style.width = this.m_width;
	this.m_frame.style.display = 'inline';

	if (this.m_back_iframe) {
		this.m_back_iframe.style.top = this.m_frame.offsetTop;
		this.m_back_iframe.style.left = this.m_frame.offsetLeft;
		this.m_back_iframe.style.height = this.m_frame.offsetHeight;
		this.m_back_iframe.style.width = this.m_frame.offsetWidth;
		this.m_back_iframe.style.display = "block";
	}
}

CModal.prototype.hide = CModal_hide;
CModal.prototype.reCenter = CModal_reCenter;
CModal.prototype.renderDialogFrame = CModal_renderDialogFrame;
CModal.prototype.show = CModal_show;

/* Constants */
var CMODAL_ID = 'CMODAL_FRAME';
var CMODAL_CONTENT_ID = 'CMODAL_CONTENT';
var CMODAL_HEADER = 'CMODAL_HEADER';
var CMODAL_BACKGROUND_LAYER_ID = 'CMODAL_BK';
var CMODAL_BACK_IFRAME_ID = 'CMODAL_BK_IFRAME';
var CMODAL_ZINDEX = 111;

/* Global variables */
var CMODAL_dragEnabled = false;
var CMODAL_resizeDirection = null;
var CMODAL_startLeft = null;
var CMODAL_startTop = null;
var CMODAL_startWidth = null;
var CMODAL_startHeight = null;
var CMODAL_deltaX = null;
var CMODAL_deltaY = null;

/* Event handlers for CModal (global functions) */
function hideCModal() {
	var cdlg = document.getElementById(CMODAL_ID);
	if (cdlg && cdlg.CModal) {
		cdlg.CModal.hide();
	}
}

function cancelCModal() {
	var iframe = document.getElementById(CMODAL_CONTENT_ID);
	if (iframe && iframe.contentWindow && typeof iframe.contentWindow.cancelDialog == 'function') {
		iframe.contentWindow.cancelDialog();
	}
	else {
		hideCModal();
	}
}

function okCModal() {
	var iframe = document.getElementById(CMODAL_CONTENT_ID);
	if (iframe && iframe.contentWindow && typeof iframe.contentWindow.execute == 'function') {
		iframe.contentWindow.execute();
	}
	else {
		hideCModal();
	}
}

function CModalEvent_mousemoving(e) {
	var oDlg = null;
	var oIFrame = null;
	if (CMODAL_dragEnabled) {
		if (e == null && (typeof event == 'object') && event.clientX != null) {
			e = event;
		}

		oDlg = document.getElementById(CMODAL_ID);
		if (CMODAL_startLeft == null) {
			CMODAL_startLeft = parseInt(oDlg.style.left,10) - e.clientX;
			CMODAL_startTop = parseInt(oDlg.style.top,10) - e.clientY;
		}
		oDlg.style.left = CMODAL_startLeft + e.clientX;
		oDlg.style.top = CMODAL_startTop + e.clientY;

		oIFrame = document.getElementById(CMODAL_BACK_IFRAME_ID);
		if (oIFrame) {
			oIFrame.style.left = oDlg.style.left;
			oIFrame.style.top = oDlg.style.top;
		}
	}
	if (CMODAL_resizeDirection) {
		if (e == null && (typeof event == 'object') && event.clientX != null) {
			e = event;
		}

		oDlg = document.getElementById(CMODAL_ID);
		if (CMODAL_startLeft == null) {
			CMODAL_startLeft = parseInt(oDlg.style.left,10);
			CMODAL_startTop = parseInt(oDlg.style.top,10);
			CMODAL_startHeight = parseInt(oDlg.style.height,10);
			CMODAL_startWidth = parseInt(oDlg.style.width,10);
		}

		var h = 0, w = 0;
		switch (CMODAL_resizeDirection) {
			case 'NE':
			case 'E':
			case 'SE':
				w = (e.clientX - CMODAL_startLeft + CMODAL_deltaX);
				if (w < 100) {
					w = 100;
				}
				oDlg.style.width = w + "px";
		}
		switch (CMODAL_resizeDirection) {
			case 'SW':
			case 'S':
			case 'SE':
				h = (e.clientY - CMODAL_startTop + CMODAL_deltaY);
				if (h < 100) {
					h = 100;
				}
				oDlg.style.height = h + "px";
		}
		switch (CMODAL_resizeDirection) {
			case 'NW':
			case 'N':
			case 'NE':
				oDlg.style.top = e.clientY;
				h = (CMODAL_startHeight + (CMODAL_startTop - e.clientY) + CMODAL_deltaY);
				if (h < 100) {
					h = 100;
				}
				oDlg.style.height = h + "px";
		}
		switch (CMODAL_resizeDirection) {
			case 'NW':
			case 'W':
			case 'SW':
				oDlg.style.left = e.clientX;
				w = (CMODAL_startWidth + (CMODAL_startLeft - e.clientX) + CMODAL_deltaX);
				if (w < 100) {
					w = 100;
				}
				oDlg.style.width = w + "px";
		}
		oIFrame = document.getElementById(CMODAL_BACK_IFRAME_ID);
		if (oIFrame) {
			oIFrame.style.left = oDlg.offsetLeft;
			oIFrame.style.top = oDlg.offsetTop;
			oIFrame.style.height = oDlg.offsetHeight;
			oIFrame.style.width = oDlg.offsetWidth;
		}
	}

	if (e.returnValue) { e.returnValue = false; }
	else if (e.preventDefault) { e.preventDefault(); }
	else { return false; }
}

function CModalEvent_disableDrag(e) {
	CMODAL_dragEnabled = false;
	CMODAL_resizeDirection = null;
	CMODAL_startLeft = null;
	CMODAL_startTop = null;
	CMODAL_deltaX = 0;
	CMODAL_deltaY = 0;

	// remove dragging style
	var cn = document.getElementById(CMODAL_ID).className;
	document.getElementById(CMODAL_HEADER).style.cursor = 'default';
	document.getElementById(CMODAL_ID).className = cn.replace(/\s*\bCModal_dragging\b/g, '');
	// show content frame
	document.getElementById(CMODAL_CONTENT_ID).style.visibility = "visible";

	if (typeof document.getElementById(CMODAL_CONTENT_ID).contentWindow.refreshContent == "function") {
		document.getElementById(CMODAL_CONTENT_ID).contentWindow.refreshContent();
	}

	if (e.returnValue) { e.returnValue = false; }
	else if (e.preventDefault) { e.preventDefault(); }
	else { return false; }
}

function CModalEvent_enableDrag(e) {
	CMODAL_dragEnabled = true;
	CMODAL_startLeft = null;
	CMODAL_startTop = null;

	if (e == null && (typeof event == 'object') && event.clientX != null) {
		e = event;
	}

	// apply dragging style to frame
	document.getElementById(CMODAL_ID).className += " CModal_dragging";
	document.getElementById(CMODAL_HEADER).style.cursor = 'move';
	// hide content frame
	document.getElementById(CMODAL_CONTENT_ID).style.visibility = "hidden";

	if (e.returnValue) { e.returnValue = false; }
	else if (e.preventDefault) { e.preventDefault(); }
	else { return false; }
}

function CModalEvent_enableResize(e) {
	CMODAL_startLeft = null;
	CMODAL_startTop = null;
	CMODAL_startWidth = null;
	CMODAL_startHeight = null;
	CMODAL_deltaX = 0;
	CMODAL_deltaY = 0;

	if (e == null && (typeof event == 'object') && event.clientX != null) {
		e = event;
	}

	var oDlg = document.getElementById(CMODAL_ID);
	CMODAL_startLeft = parseInt(oDlg.style.left,10);
	CMODAL_startTop = parseInt(oDlg.style.top,10);
	CMODAL_startHeight = parseInt(oDlg.style.height,10);
	CMODAL_startWidth = parseInt(oDlg.style.width,10);
	CMODAL_deltaX = (CMODAL_startLeft + CMODAL_startWidth - e.clientX);
	CMODAL_deltaY = (CMODAL_startTop + CMODAL_startHeight - e.clientY);

	var src = (e.srcElement ? e.srcElement : e.target);
	if ( (/\bCModal_side(\w+)\b/).test(src.className) ) {
		// set resize direction using className
		CMODAL_resizeDirection = RegExp.$1;
		// apply dragging style to frame
		document.getElementById(CMODAL_ID).className += " CModal_dragging";
		// hide content frame
		document.getElementById(CMODAL_CONTENT_ID).style.visibility = "hidden";
	}

	if (e.returnValue) { e.returnValue = false; }
	else if (e.preventDefault) { e.preventDefault(); }
	else { return false; }
}