analytics/webcontent/ps/portal/js/dynDropDown.js

//    Licensed Materials - Property of IBM
//
//    IBM Cognos Products: ps
//
//    (C) Copyright IBM Corp. 2005, 2011
//
//    US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
// Copyright (C) 2008 Cognos ULC, an IBM Company. All rights reserved.
// Cognos and the Cognos logo are trademarks of Cognos ULC, (formerly Cognos Incorporated).

//	a set of global javascript variables that get sets when the edit field takes focus or the user click on
//	the arrow to open the dropdown 
var g_dynamicDD_controlName = null;
var g_dynamicDD_array = null;
var g_dynamicDD_dropdownDiv = null;
var g_dynamicDD_editField = null;
var g_dynamicDD_callbackFunc = null;
var g_dynamicDD_openedBy = null;
var g_dynamicDD_filterList = null;
var g_dynamicDD_currentValue = null;

var regEx = new RegExp(String.fromCharCode(160),"g");

var IDX_LABEL = 0;
var IDX_VALUE = 1;

// handle all keyboard events for the drop down list 
function handleSelectKey(evt) {
	var keyCode = evt ? evt.keyCode : window.event.keyCode;
	// Enter and Esc
	if ((keyCode == 27) || (keyCode == 13)) {
		closeDropDown();
		g_dynamicDD_editField.focus();
	} 
}

// handle all keyboard events for the edit field list 
function handleEditFieldKey(evt) {

}

// handle all keyboard events for the edit field list 
function handleEditFieldKey(evt) {
	var keyCode = evt ? evt.keyCode : window.event.keyCode;

	if (keyCode == 40) {
		// if the dropdown is closed, then simply change the current value to the next in the list
		if (g_dynamicDD_dropdownDiv && g_dynamicDD_dropdownDiv.style.display == 'none')	{
			moveThroughArray(1);
		} else {
			moveThroughDropDown(1);
		}
	} else if (keyCode == 38) { // up arrow 
		// if the dropdown is closed, then simply change the current value to the next in the list 
		if (g_dynamicDD_dropdownDiv && g_dynamicDD_dropdownDiv.style.display == 'none')	{
			moveThroughArray(-1);
		} else {
			moveThroughDropDown(-1);
		}								
	} else if ((keyCode == 27) || (keyCode == 13)) { 	// Enter and Esc 
		closeDropDown();
	} else if ((keyCode == 8) || (keyCode >= 32)) { 	// all other keys 
		if (g_dynamicDD_editField.value != '') {
			// only do something if the value of the edit field has changed 
			if (g_dynamicDD_currentValue != g_dynamicDD_editField.value) {
				g_dynamicDD_currentValue = g_dynamicDD_editField.value;
				if (g_dynamicDD_dropdownDiv && g_dynamicDD_dropdownDiv.style.display == 'none' && g_dynamicDD_filterList == 'true') {
					doDropDown('typing');
				} else if (g_dynamicDD_filterList == 'true' && g_dynamicDD_openedBy == 'typing') {
					populateDropDown();
				}
			}
			if (document.getElementById('select_' + g_dynamicDD_controlName) && document.getElementById('select_' + g_dynamicDD_controlName).options.length == 0) {
				closeDropDown();
			}

			document.getElementById(g_dynamicDD_controlName).value = g_dynamicDD_editField.value;
			g_dynamicDD_currentValue = g_dynamicDD_editField.value;
		}
		else {
			closeDropDown();
		}
		
		handleEditFieldChange();
	}
}

// Change the edit and hidden field to a value in the array using a delta from the current selection
function moveThroughArray(delta) {
	var found = false;
	for (var i = 0; i < g_dynamicDD_array.length; i++) {
		if (g_dynamicDD_editField.value == g_dynamicDD_array[i][IDX_LABEL])	{
		
			found = true;
			setEditAndHiddenFromArray(i+delta);
			break;
		}
	}
	
	if (!found)	{
		setEditAndHiddenFromArray(0);
	}
	
	handleEditFieldChange();						
}

function moveThroughDropDown(delta) {

	var selectControl = document.getElementById('select_' + g_dynamicDD_controlName);
	if (!selectControl) {
		return;
	}

	var found = false;
	for (var i = 0; i < selectControl.options.length; i++)	{
		if (selectControl[i].selected) {	
			changeDropDownSelection(i, i+delta);
			found = true;
			break;
		}
	}					
	if (!found && selectControl.options.length > 0)	{
		selectControl.selectedIndex = 0;
		setEditAndHiddenFromDropDown(0);
	}

	selectControl.focus();						
}

function changeDropDownSelection(fromIndex, toIndex) {
	var selectControl = document.getElementById('select_' + g_dynamicDD_controlName);
	
	if (selectControl.options.length > toIndex && toIndex >= 0)	{
		selectControl.selectedIndex = toIndex;
		setEditAndHiddenFromDropDown(toIndex);
	}
}

//	Sets a bunch of global vars. Should be called everytime one of the controls gets focus or
//	when the user hits the open dropdown button							
function setGlobals(name, array, validateCallback, filterList) {
	if (g_dynamicDD_controlName != name) {
		if (g_dynamicDD_controlName != null) {
			closeDropDown();
		}
		g_dynamicDD_controlName = name;
		g_currentSelectedIndex = null;
		g_dynamicDD_array = array;

		g_dynamicDD_dropdownDiv = document.getElementById('div_'+name);
		g_dynamicDD_editField = document.getElementById('editField_'+name);
		g_dynamicDD_callbackFunc = validateCallback;
		g_dynamicDD_filterList = filterList;
		g_dynamicDD_editField.onkeyup = handleEditFieldKey;
		g_dynamicDD_openedBy = null;
		g_dynamicDD_currentValue = g_dynamicDD_editField.value;
	}
}


//	handles the logic for opening the drop down					
function doDropDown(calledBy) {	
	if (g_dynamicDD_dropdownDiv && g_dynamicDD_dropdownDiv.style.display == 'none')	{
		g_dynamicDD_openedBy = calledBy;

		populateDropDown();
		
		//	if this was called by typing in the edit field, 
		//	then only open the drop down if it's not empty 
		if (calledBy != 'typing' || document.getElementById('select_' + g_dynamicDD_controlName).options.length > 0) {
			openDropDown(calledBy=='downArrow');
		}
	}
	else {
		closeDropDown();
		g_dynamicDD_openedBy = null;
	}
}

// close the drop down
function closeDropDown() {
	if (g_dynamicDD_dropdownDiv)
	{
		g_dynamicDD_dropdownDiv.style.display='none';
	}
}

// open the drop down		
function openDropDown(setFocus) {
	if (g_dynamicDD_dropdownDiv)
	{
		g_dynamicDD_dropdownDiv.style.display='';
		if (setFocus) {
			document.getElementById('select_'+g_dynamicDD_controlName).focus();
		}
	}
}

// Build up the select control
function populateDropDown() {
	var currentSelectedValue = document.getElementById(g_dynamicDD_controlName).value;
	var filterList = false;
	var container = document.getElementById('div_'+g_dynamicDD_controlName);
	var eleSelect = document.getElementById("select_"+g_dynamicDD_controlName);
	
	if (eleSelect) {
		eleSelect.parentNode.removeChild(eleSelect);
	}

	//build select control (dropDown)
	eleSelect = document.createElement('select');
	container.appendChild(eleSelect);
	eleSelect.name="select_"+g_dynamicDD_controlName;
	eleSelect.id="select_"+g_dynamicDD_controlName;
	eleSelect.size = 10;
	eleSelect.multiple = false;
	eleSelect.style.width="215";
	eleSelect.onclick=function(){onClickSelectControl(this)};
	eleSelect.onchange=function(){onChangeSelectControl(this)};

	eleSelect.onkeyup = handleSelectKey;

	var selectedIdx = -1;
	// build the options
	for (var i = 0; i < g_dynamicDD_array.length; i++) {
		DD_label = g_dynamicDD_array[i][IDX_LABEL];
		DD_value = g_dynamicDD_array[i][IDX_VALUE];	
		if (g_dynamicDD_openedBy == 'downArrow' || g_dynamicDD_filterList != 'true' || DD_label.indexOf(g_dynamicDD_editField.value) == 0) {
			var eleOpt = document.createElement('option');
			eleSelect.appendChild(eleOpt);
	
			eleOpt.value = DD_value;
			eleOpt.innerHTML = htmlEncode(DD_label,true);
			// select the default
			if (DD_value == currentSelectedValue && g_dynamicDD_openedBy == 'downArrow') {
				selectedIdx=eleSelect.childNodes.length-1;
				g_dynamicDD_currentValue = DD_value;
			}
		}
	}
	eleSelect.selectedIndex=selectedIdx;
}

// Handle the onclick event of the select control
function onClickSelectControl(obj) {
	g_dynamicDD_editField.focus();
	closeDropDown();
}

// Handle the onchange event of the select control
function onChangeSelectControl(obj) {
	for (var i = 0; i < obj.options.length; i++) {
		if (obj[i].selected) {	
			setEditAndHiddenFromDropDown(i);
			g_dynamicDD_currentValue = g_dynamicDD_array[i][IDX_VALUE];
			break;
		}
	}		
}

// Updated the edit and hidden field using the selected item in the drop down
function setEditAndHiddenFromDropDown(index) {
	var selectControl = document.getElementById("select_" + g_dynamicDD_controlName);
	document.getElementById(g_dynamicDD_controlName).value = selectControl[index].value; //hidden field
	g_dynamicDD_editField.value = selectControl[index].text;
	
	handleEditFieldChange();
}

// Set the hidden and edit field using the array		
function setEditAndHiddenFromArray(index) {
	if (index < g_dynamicDD_array.length && index >=0) {
		document.getElementById(g_dynamicDD_controlName).value = g_dynamicDD_array[index][IDX_VALUE];
		g_dynamicDD_editField.value = g_dynamicDD_array[index][IDX_LABEL];
	}						
}
						
// Checks to see if the current value is in the array and returns true or false
function isValidValue() {
	for (var i = 0; i < g_dynamicDD_array.length; i++) {
		if (isEditorEqualToListElement(i)) {
			return true;
		}
	}
	return false;
}

function isEditorEqualToListElement(idx) {
	return g_dynamicDD_editField.value.replace(regEx," ") == g_dynamicDD_array[idx][IDX_LABEL];
}

function htmlEncode(string, encodeSpaces) {
	tempString = string.replace(/&/g,"&amp;");
	tempString = tempString.replace(/"/g,"&quot;");
	tempString = tempString.replace(/</g,"&lt;");
	tempString = tempString.replace(/>/g,"&gt;");
	if (encodeSpaces) {
		tempString = tempString.replace(/\&nbsp;/g,"&amp;nbsp;").replace(/\s/g,"&nbsp;");
	}
	return tempString;
}

// Whenever the value changes, call the necessary javascript function if one was provided						
function handleEditFieldChange() {
	var callBackFunc = window[g_dynamicDD_callbackFunc];
	if (callBackFunc)	{
		callBackFunc(g_dynamicDD_editField, isValidValue());
	}						
}

// When the edit field takes focus					
function handleEditFieldFocus() {
	if (g_dynamicDD_dropdownDiv && g_dynamicDD_dropdownDiv.style.display != 'none' && g_dynamicDD_openedBy != 'typing')	{
		closeDropDown();
	}
}

//Returns the value in the hidden input.
//The hidden input name is handled by g_dynamicDD_controlName
function getHiddenValue () {
	if (g_dynamicDD_controlName != null && document.getElementById(g_dynamicDD_controlName)) {
		return (document.getElementById(g_dynamicDD_controlName).value);
	} else {
		return ;
	}

}
//Update the hidden update (created by utml) that the hidden input has changed.
//The hidden changed input is handled by 'changed_' + g_dynamicDD_controlName.
function updateChanged () {
	if (g_dynamicDD_controlName != null && document.getElementById(g_dynamicDD_controlName)) {
		var changed = document.pform.elements['changed_' + g_dynamicDD_controlName];
		if (changed) {
			changed.value = 1;
		}
	}
}

//Set a value to the hidden field g_dynamicDD_controlName.
//This is usually used for empty value.
function setHiddenValue (val) {
	var valueField = null;
	
	if (g_dynamicDD_controlName != null) {
		valueField = document.getElementById(g_dynamicDD_controlName);
	}
	if (valueField) {
		valueField.value = val;
		updateChanged();
	}
}
//This function allows to update the value within the array corresponding to "Number"
//This allows to know which entry has been selected "Unlimited" or "Number".
function updateTheArray(index, value) {
	g_dynamicDD_array[index][IDX_VALUE] = value;
}