analytics/webcontent/prompting/CAlignmentPicker.js

/*
 *+------------------------------------------------------------------------+
 *| Licensed Materials - Property of IBM
 *| BI and PM: prmt
 *| (C) Copyright IBM Corp. 2002, 2016
 *|
 *| US Government Users Restricted Rights - Use, duplication or
 *| disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
 *|
 *+------------------------------------------------------------------------+
*/


/*
	CAlignmentPicker.js
	This script provides interactivity for the alignment prompt control.
*/

//	Constructor to create a new Alignment Picker prompt
//	sPromptId: The id of the prompt control (String)
//	sRef: the name of this object
//	sCallBackFunction: function to call with the new alignment value as a parameter
//	sTooltip: string to used as a tooltip for the color picker button
//	bToolbar: (Optional, Default: true). Is this button in a toolbar?

function CAlignmentPicker(sPromptId, sRef, sCallBackFunction, sToolTip, bToolbar)
{
	// set up control
	this.m_sSkin = (typeof getPromptSkin != "undefined" ? getPromptSkin() : "../skins/corporate");
	this.m_sImgPath = this.m_sSkin + "/prompting/images/";
	this.m_parentId = "selectAlignment" + sPromptId;
	this.m_oParent = document.getElementById(this.m_parentId);
	this.m_sRef = sRef;
	this.m_sDialogId = "alignmentDialog" + sPromptId;
	this.m_sToolTip = (typeof sToolTip == "undefined") ? null : sToolTip;
	this.m_bToolbar = (bToolbar != false);

	//create any needed objects
	this.init();

	// update the UI
	this.draw();
	this.m_oDialog = document.getElementById(this.m_sDialogId);

	this.m_sAlignment = null;
	this.m_sActiveButtonId = this.m_sRef+'_DF';

	this.m_sCallBackFunction = sCallBackFunction;
}

function CAlignmentPicker_init()
{
}

//draw the UI for the picker
function CAlignmentPicker_draw()
{
	var HTMLOut = (this.m_bToolbar ? '<button' : '<span' );
	if (this.m_sToolTip != null && this.m_sToolTip != "") {
		HTMLOut += ' title="'+this.m_sToolTip+'"';
	}
	if (this.m_bToolbar) {
		HTMLOut += ' class="clsCPButton" onmouseover="this.className=\'clsCPButtonOver\'" onmouseout="this.className=\'clsCPButton\'" type="button"';
	}
	HTMLOut += ' onclick="'+this.m_sRef+'.togglePicker();CAlignmentPicker_preventBubbling(event);" ><img src="'+ this.m_sImgPath  +'align.gif">';
	HTMLOut += (this.m_bToolbar ? '</button>' : '</span>' );
	HTMLOut += '<br/><div id="'+this.m_sDialogId+'" class="clsAPContainer" style="display:none;position:absolute;margin-top:1px;">';
	HTMLOut += '<table cellpadding="0" cellspacing="3" border="0">';
	HTMLOut += '<tr><td title="'+PMT_AP_ALIGN_TOP_LEFT+'" id="'+this.m_sRef+'_TL" onclick="'+this.m_sRef+'.setAlignment(\'TL\')" class="clsAPButtonNormal" onmouseover="'+this.m_sRef+'.buttonMouseHandler(this,\'over\');" onmouseout="'+this.m_sRef+'.buttonMouseHandler(this,\'out\');" onMouseDown="'+this.m_sRef+'.buttonMouseHandler(this,\'down\');"><img src="'+ this.m_sImgPath  +'align_top_left.gif"></td>';
	HTMLOut += '<td title="'+PMT_AP_ALIGN_TOP_CENTER+'" id="'+this.m_sRef+'_TC" onclick="'+this.m_sRef+'.setAlignment(\'TC\')" class="clsAPButtonNormal" onmouseover="'+this.m_sRef+'.buttonMouseHandler(this,\'over\');" onmouseout="'+this.m_sRef+'.buttonMouseHandler(this,\'out\');" onmousedown="'+this.m_sRef+'.buttonMouseHandler(this,\'down\');"><img src="'+ this.m_sImgPath  +'align_top_center.gif"></td>';
	HTMLOut += '<td title="'+PMT_AP_ALIGN_TOP_RIGHT+'" id="'+this.m_sRef+'_TR" onclick="'+this.m_sRef+'.setAlignment(\'TR\')" class="clsAPButtonNormal" onmouseover="'+this.m_sRef+'.buttonMouseHandler(this,\'over\');" onmouseout="'+this.m_sRef+'.buttonMouseHandler(this,\'out\');" onmousedown="'+this.m_sRef+'.buttonMouseHandler(this,\'down\');"><img src="'+ this.m_sImgPath  +'align_top_right.gif"></td></tr>';
	HTMLOut += '<tr><td title="'+PMT_AP_ALIGN_MIDDLE_LEFT+'" id="'+this.m_sRef+'_ML" onclick="'+this.m_sRef+'.setAlignment(\'ML\')" class="clsAPButtonNormal" onmouseover="'+this.m_sRef+'.buttonMouseHandler(this,\'over\');" onmouseout="'+this.m_sRef+'.buttonMouseHandler(this,\'out\');" onmousedown="'+this.m_sRef+'.buttonMouseHandler(this,\'down\');"><img src="'+ this.m_sImgPath  +'align_middle_left.gif"></td>';
	HTMLOut += '<td title="'+PMT_AP_ALIGN_MIDDLE_CENTER+'" id="'+this.m_sRef+'_MC" onclick="'+this.m_sRef+'.setAlignment(\'MC\')" class="clsAPButtonNormal" onmouseover="'+this.m_sRef+'.buttonMouseHandler(this,\'over\');" onmouseout="'+this.m_sRef+'.buttonMouseHandler(this,\'out\');" onmousedown="'+this.m_sRef+'.buttonMouseHandler(this,\'down\');"><img src="'+ this.m_sImgPath  +'align_middle_center.gif"></td>';
	HTMLOut += '<td title="'+PMT_AP_ALIGN_MIDDLE_RIGHT+'" id="'+this.m_sRef+'_MR" onclick="'+this.m_sRef+'.setAlignment(\'MR\')" class="clsAPButtonNormal" onmouseover="'+this.m_sRef+'.buttonMouseHandler(this,\'over\');" onmouseout="'+this.m_sRef+'.buttonMouseHandler(this,\'out\');" onmousedown="'+this.m_sRef+'.buttonMouseHandler(this,\'down\');"><img src="'+ this.m_sImgPath  +'align_middle_right.gif"></td></tr>';
	HTMLOut += '<tr><td title="'+PMT_AP_ALIGN_BOTTOM_LEFT+'" id="'+this.m_sRef+'_BL" onclick="'+this.m_sRef+'.setAlignment(\'BL\')" class="clsAPButtonNormal" onmouseover="'+this.m_sRef+'.buttonMouseHandler(this,\'over\');" onmouseout="'+this.m_sRef+'.buttonMouseHandler(this,\'out\');" onmousedown="'+this.m_sRef+'.buttonMouseHandler(this,\'down\');"><img src="'+ this.m_sImgPath  +'align_bottom_left.gif"></td>';
	HTMLOut += '<td title="'+PMT_AP_ALIGN_BOTTOM_CENTER+'" id="'+this.m_sRef+'_BC" onclick="'+this.m_sRef+'.setAlignment(\'BC\')" class="clsAPButtonNormal" onmouseover="'+this.m_sRef+'.buttonMouseHandler(this,\'over\');" onmouseout="'+this.m_sRef+'.buttonMouseHandler(this,\'out\');" onmousedown="'+this.m_sRef+'.buttonMouseHandler(this,\'down\');"><img src="'+ this.m_sImgPath  +'align_bottom_center.gif"></td>';
	HTMLOut += '<td title="'+PMT_AP_ALIGN_BOTTOM_RIGHT+'" id="'+this.m_sRef+'_BR" onclick="'+this.m_sRef+'.setAlignment(\'BR\')" class="clsAPButtonNormal" onmouseover="'+this.m_sRef+'.buttonMouseHandler(this,\'over\');" onmouseout="'+this.m_sRef+'.buttonMouseHandler(this,\'out\');" onmousedown="'+this.m_sRef+'.buttonMouseHandler(this,\'down\');"><img src="'+ this.m_sImgPath  +'align_bottom_right.gif"></td></tr>';
	HTMLOut += '<tr><td title="'+PMT_AP_ALIGN_DEFAULT+'" id="'+this.m_sRef+'_DF" style="text-align: center;" onclick="'+this.m_sRef+'.setAlignment(\'\')" class="clsAPButtonNormal" onmouseover="'+this.m_sRef+'.buttonMouseHandler(this,\'over\');" onmouseout="'+this.m_sRef+'.buttonMouseHandler(this,\'out\');" onmousedown="'+this.m_sRef+'.buttonMouseHandler(this,\'down\');"><img src="'+ this.m_sImgPath  +'default_color.gif"></td>';
	HTMLOut += '<td colspan="2"><img src="'+ this.m_sImgPath  +'spacer.gif" width="1" height="1"></td></tr>';
	HTMLOut += '</table>';
	HTMLOut += '</div>';
	this.m_oParent.innerHTML = HTMLOut;
}

//switch that will hide and show the picker dialog
function CAlignmentPicker_togglePicker(e)
{
	if (this.m_oDialog.style.display == "inline")
	{
		this.hide();
	}
	else
	{
		this.show();
	}
	this.preventBubbling(e);
}

//show the picker dialog
function CAlignmentPicker_show()
{
	//hide any other pickers that might be visible
	if (hidePickers)
	{
		hidePickers();
	}
	
	var activeButton = document.getElementById(this.m_sActiveButtonId);
	activeButton.className = 'clsAPButtonPressed';
	
	this.m_oDialog.style.display = 'inline';
	this.m_oDialog.style.zIndex = '2';
}

//hide the picker dialog
function CAlignmentPicker_hide()
{
	//clear all classes back to normal
	for (var i=0; i < apCodes.length; i++)
	{
		document.getElementById(this.m_sRef+'_'+apCodes[i]).className = 'clsAPButtonNormal';
	}

	this.m_oDialog.style.display = 'none';
	this.m_oDialog.style.zIndex = '1';
}

function CAlignmentPicker_preventBubbling(e)
{
	if (typeof e == "object")
	{
		if (window.ie)
		{
			e.returnValue = false;
			e.cancelBubble = true;
		}
		else
		{
			e.preventDefault();
			e.stopPropagation();
		}
	}
}

function CAlignmentPicker_buttonMouseHandler(button, action)
{
	if (button.id == this.m_sActiveButtonId)
	{
		if (action == "over") {
			button.className = 'clsAPButtonOverPressed';
		}
		else if (action == "out") {
			button.className = 'clsAPButtonPressed';
		}
		else if (action == "down") {
			button.className= 'clsAPButtonPressed';
		}
	}
	else
	{
		if (action == "over") {
			button.className = 'clsAPButtonOver';
		}
		else if (action == "out") {
			button.className = 'clsAPButtonNormal';
		}
		else if (action == "down") {
			button.className= 'clsAPButtonPressed';
		}
	}
}

//change the button with the pressed look
function CAlignmentPicker_setActiveAlignment(sAlignment)
{
	this.m_sAlignment = sAlignment;
	this.m_sActiveButtonId = this.m_sRef+'_'+(this.m_sAlignment == "" ? "DF" : this.m_sAlignment);
}

//change the alignment and apply it
function CAlignmentPicker_setAlignment(sAlignment)
{
	if (this.m_sAlignment != sAlignment) {
		this.m_sAlignment = sAlignment;

		if (typeof this.m_sCallBackFunction == 'string' && this.m_sCallBackFunction !== null && this.m_sCallBackFunction !== "")
		{
			var theCommand = this.m_sCallBackFunction + '("' + this.m_sAlignment + '")';
			eval (theCommand);
		}
	}
	
	//hide the picker
	this.hide();
}

//get the current alignment
function CAlignmentPicker_getAlignment()
{
	return this.m_sAlignment;
}

var apCodes = ['TL','TC','TR',
						'ML','MC','MR',
						'BL','BC','BR',
						'DF'];

CAlignmentPicker.prototype.init = CAlignmentPicker_init;
CAlignmentPicker.prototype.draw = CAlignmentPicker_draw;
CAlignmentPicker.prototype.togglePicker = CAlignmentPicker_togglePicker;
CAlignmentPicker.prototype.show = CAlignmentPicker_show;
CAlignmentPicker.prototype.hide = CAlignmentPicker_hide;
CAlignmentPicker.prototype.setActiveAlignment = CAlignmentPicker_setActiveAlignment;
CAlignmentPicker.prototype.setAlignment = CAlignmentPicker_setAlignment;
CAlignmentPicker.prototype.getAlignment = CAlignmentPicker_getAlignment;
CAlignmentPicker.prototype.preventBubbling = CAlignmentPicker_preventBubbling;
CAlignmentPicker.prototype.buttonMouseHandler = CAlignmentPicker_buttonMouseHandler;