zhky/web/js/2k3MenuSelect.htc

<PUBLIC:COMPONENT
    lightWeight = true
>

<PUBLIC:DEFAULTS
    contentEditable = false
    tabStop = true
/>

<PUBLIC:attach event="ondocumentready" onevent="initElement()" />
<PUBLIC:attach event="onmouseover" onevent="elementOnMouseOver()" />
<PUBLIC:attach event="onmouseout" onevent="elementOnMouseOut()" />
<PUBLIC:attach event="onmousedown" onevent="elementOnMouseDown()" />
<PUBLIC:attach event="onmouseup" onevent="elementOnMouseUp()" />
<PUBLIC:attach event="onpropertychange" onevent="elementPropertyChange()" />
<PUBLIC:attach event="onselectstart" onevent="elementOnSelect()" />
<PUBLIC:attach event="oncontextmenu" onevent="elementOnContextMenu()" />
<PUBLIC:attach event="ondetach" onevent="cleanupElement()" />

<PUBLIC:property name="enabled" value=true />
<PUBLIC:property name="options" value="" />
<PUBLIC:property name="dropDownState" value=false />
<PUBLIC:property name="size" value=-1 />
<PUBLIC:property name="value" id="propValue" value="" get="returnValue" />
<PUBLIC:property name="text" id="propText" value="" get="returnText" />
<PUBLIC:property name="selectedIndex" value=-1 />

<PUBLIC:method	 name="itemCount" />
<PUBLIC:method	 name="addItem" />
<PUBLIC:method	 name="removeItem" />
<PUBLIC:method	 name="clear" />
<PUBLIC:method	 name="getItemIndex" />
<PUBLIC:method	 name="getItemIndexFromValue" />
<PUBLIC:method   name="setSelectedItem" />
<PUBLIC:method	 name="getItemText" />
<PUBLIC:method	 name="getItemValue" />
<PUBLIC:method	 name="getItemTag" />

<PUBLIC:event	 name="onchange" id="onchange" />

<script language="jscript">

// ----------------------------------------------------
// 2k3Widgets: 2k3MenuSelect
// 
// Copyright ©2002-2004 Stedy Software and Systems     
// Please see http://www.stedy.com for terms of use.   
// ----------------------------------------------------

var imageCell = 0 ;
var captionCell = 1 ;
var valueCell = 2 ;
var tagCell = 3 ;

var elementDropdown = null ;
var optionsElement = null ;
var elementCaption = null ;

var menuShadowArray = new Array(null, null, null, null) ;

var normalWidth = 0 ;

var settingValueInternally = false ;


// ----------------------------------------------------
// initialize/terminate functions   
// ----------------------------------------------------

function initElement() {
	settingValueInternally = true ;
	element.enabled = makeBooleanOfAttribute("enabled") ;
	element.dropDownState = makeBooleanOfAttribute("dropDownState") ;
	if (!element.enabled) {
		element.className = "2k3MenuSelectDisabled" ; ;
	}
	settingValueInternally = false ;
	elementCaption = document.createElement("<span class='2k3MenuSelectCaption'>") ;
	element.insertAdjacentElement("afterBegin", elementCaption) ;
	elementDropdown = window.document.getElementById(element.options) ;
	optionsElement = elementDropdown.children[0] ;
	with (optionsElement) {
		for (var i = 0; i < rows.length; i++) {
			var row = rows[i] ;
			if (element.selectedIndex == -1) {
				if (row.outerHTML.indexOf("selected") != -1) {
					with (element) {
						selectedIndex = row.rowIndex ;
						text = row.children[captionCell].innerText ;
						value = row.children[valueCell].innerText ;
						elementCaption.innerText = row.children[captionCell].innerText ;
					}
				}
			}
			with (row.children[imageCell]) {
				if (children.length == 0) {
					var imgElement = document.createElement("IMG") ;
					imgElement.src = element.currentStyle.noImageUrl ;
					insertAdjacentElement("beforeEnd", imgElement) ;
				}
				children[0].hideFocus = true ;
			}
		}
	}
	with (elementDropdown) {
		with (style) {
			zIndex = 5000 ;
			if (element.size != -1) {
				height = getDropdownHeight(element.size) ;
			}
			width = element.offsetWidth + 2 ;
		}
	}
}

function cleanupElement() {
	elementCaption.removeNode(true) ;
}


// ----------------------------------------------------
// element functions   
// ----------------------------------------------------

function elementOnMouseOver() {
	if (!element.enabled) { return ; }
	if (normalWidth == 0) {
		normalWidth = element.offsetWidth ;
	}
	var fromElement = window.event.fromElement ;
	if (fromElement != null) {
		if (getRealItem(fromElement) == element) { return ; }
	}
	if (!element.dropDownState) {
		if (element.parentElement.parentElement.parentElement.parentElement.activeChild == null) {
			showOver(element) ;
		}
	}
}

function elementOnMouseOut() {
	if (!element.enabled) { return ; }
	var toElement = window.event.toElement ;
	if (toElement != null) {
		if (getRealItem(toElement) == element) { return ; }
	}
	if (!element.dropDownState) {
		if (element.parentElement.parentElement.parentElement.parentElement.activeChild == null) {
			showNormal(element) ;
		}
	}
}

function elementOnMouseDown() {
	if (!element.enabled) { return ; }
	if (!element.dropDownState) {
		if (element.parentElement.parentElement.parentElement.parentElement.activeChild == null) {
			showActive(element) ;
		}
	}
}

function elementOnMouseUp() {
	if (!element.enabled) { return ; }
	if (element.dropDownState) {
		hideDropdown() ;
		showOver(element) ;
		element.dropDownState = false ;
	}
	else {
		if (element.parentElement.parentElement.parentElement.parentElement.activeChild == null) {
			showDropdown() ;
			element.dropDownState = true ;
		}
	}
}

function elementPropertyChange() {
	if (settingValueInternally) { return ; }
	if (window.event.propertyName == "enabled") {
		if (element.enabled) {
			showEnabled(element) ;
		}
		else {
			showDisabled(element) ;
		}
	}
}

function elementOnSelect() {
	with (window.event) {
		cancelBubble = true ;
		returnValue = false ;
	}
	return false ;
}

function elementOnContextMenu() {
	with (window.event) {
		cancelBubble = true ;
		returnValue = false ;
	}
	return false ;
}


// ----------------------------------------------------
// public element methods   
// ----------------------------------------------------

function itemCount() {
	return optionsElement.rows.length ;
}

function addItem(itmType, text, value, itemIndex, exData, tagData) {
	var strSaveText = element.text ;
	if (element.selectedIndex != -1) {
		optionsElement.rows[element.selectedIndex].className = "2k3MenuSelectItem" ;
	}
	element.selectedIndex = -1 ;
	var row = optionsElement.insertRow(itemIndex) ;
	with (row) {
		className = "2k3MenuSelectItem" ;
		for (var c = 0; c <= 3; c++) { insertCell(c) ; }
		with (children[imageCell]) {
			className = "itemImage" ;
			switch ((itmType).toLowerCase()) {
				case "n":
					innerHTML = "<img src='" + element.currentStyle.noImageUrl + "'>" ;
					break ;
				case "i":
					if (exData == "") {
						exData = element.currentStyle.noImageUrl ;
					}
					innerHTML = "<img src='" + exData + "'>" ;
					break ;
			}
		}
		with (children[captionCell]) {
			className = "itemCaption" ;
			innerHTML = text ;
		}
		with (children[valueCell]) {
			className = "itemValue" ;
			innerText = value ;
		}
		with (children[tagCell]) {
			className = "itemTag" ;
			innerText = tagData ;
		}
	}
	if (element.size != -1) {
		elementDropdown.style.height = getDropdownHeight(element.size) ;
	}
	setSelectedItem(getItemIndex(strSaveText)) ;
}

function removeItem(itemIndex) {
	var strSaveText = element.text ;
	if (itemIndex > (element.itemCount() - 1) || element.itemCount() == 0) {
		return ;
	}
	if (element.selectedIndex != -1) {
		optionsElement.rows[element.selectedIndex].className = "2k3MenuSelectItem" ;
	}
	element.selectedIndex = -1 ;
	optionsElement.deleteRow(itemIndex) ;
	if (element.size != -1) {
		elementDropdown.style.height = getDropdownHeight(element.size) ;
	}
	setSelectedItem(getItemIndex(strSaveText)) ;
}

function clear() {
	for (var i = 0; i < element.itemCount(); i++) {
		optionsElement.deleteRow(-1) ;
	}
	element.selectedIndex = -1 ;
}

function getItemIndex(itemText) {
	with (optionsElement) {
		for (var i = 0; i < element.itemCount(); i++) {
			with (rows[i].children[captionCell]) {
				if (innerText == itemText) {
					return rows[i].rowIndex ;
				}
			}
		}
	}
	return -1 ;
}

function getItemIndexFromValue(itemValueText) {
	with (optionsElement) {
		for (var i = 0; i < element.itemCount(); i++) {
			with (rows[i].children[valueCell]) {
				if (innerText == itemValueText) {
					return rows[i].rowIndex ;
				}
			}
		}
	}
}

function getItemText(itemIndex) {
	if (itemIndex > (element.itemCount() - 1) || element.itemCount() == 0) {
		return ;
	}
	return optionsElement.rows[itemIndex].children[captionCell].innerText ;
}

function getItemValue(itemIndex) {
	if (itemIndex > (element.itemCount() - 1) || element.itemCount() == 0) {
		return ;
	}
	return optionsElement.rows[itemIndex].children[valueCell].innerText ;
}

function getItemTag(itemIndex) {
	if (itemIndex > (element.itemCount() - 1) || element.itemCount() == 0) {
		return ;
	}
	return optionsElement.rows[itemIndex].children[tagCell].innerText ;
}

function setSelectedItem(itemIndex) {
	var currentText = element.text ;
	if (itemIndex == -1) {
		if (element.selectedIndex != -1) {
			if (element.selectedIndex > (element.itemCount() - 1)) {
				with (element) {
					selectedIndex = -1 ;
					text = "" ;
					value = "" ;
					if (ctlStyle == 1) {
						elementCaption.value = "" ;
					}
					else {
						elementCaption.innerText = "" ;
					}
				}
				return
			}
			optionsElement.rows[element.selectedIndex].className = "2k3MenuSelectItem" ;
			with (element) {
				selectedIndex = -1 ;
				text = "" ;
				value = "" ;
				if (ctlStyle == 1) {
					elementCaption.value = "" ;
				}
				else {
					elementCaption.innerText = "" ;
				}
			}
			onchange.fire() ;
		}
		else {
			with (element) {
				selectedIndex = -1 ;
				text = "" ;
				value = "" ;
				if (ctlStyle == 1) {
					elementCaption.value = "" ;
				}
				else {
					elementCaption.innerText = "" ;
				}
			}
		}
	}
	else {
		if (itemIndex > (element.itemCount() - 1)) {
			with (element) {
				selectedIndex = -1 ;
				text = "" ;
				value = "" ;
				if (ctlStyle == 1) {
					elementCaption.value = "" ;
				}
				else {
					elementCaption.innerText = "" ;
				}
			}
			return ;
		}
		if (element.selectedIndex != -1) {
			optionsElement.rows[element.selectedIndex].className = "jsSelectItem" ;
		}
		with (optionsElement.rows(itemIndex)) {
			className = "jsSelectItemSelected" ;
			element.selectedIndex = rowIndex ;
			element.text = children[captionCell].innerText ;
			element.value = children[valueCell].innerText ;
			if (element.ctlStyle == 1) {
				elementCaption.value = children[captionCell].innerText ;
			}
			else {
				elementCaption.innerText = children[captionCell].innerText ;
			}
			scrollIntoView(false) ;
		}
		if (itemIndex > element.size - 1) {
			elementDropdown.scrollTop = elementDropdown.scrollTop + 1 ;
		}
		if (currentText != element.text) {
			onchange.fire() ;
		}
	}
}



// ----------------------------------------------------
// element dropdown functions   
// ----------------------------------------------------

function dropdownOnMouseOver() { 
	var el = getRealItem(window.event.srcElement) ;
	if (el.className == "2k3MenuSelectItem" || el.className == "2k3MenuSelectItemSelected") {
		el.className = "2k3MenuSelectItemOver" ;
	}
}

function dropdownOnMouseOut() { 
	var el = getRealItem(window.event.srcElement) ;
	if (el.className == "2k3MenuSelectItemOver") {
		if (parseInt(element.selectedIndex) == parseInt(el.rowIndex)) {
			el.className = "2k3MenuSelectItemSelected" ;
		}
		else {
			el.className = "2k3MenuSelectItem" ;
		}
	}
}

function dropdownOnClick() {
	var el = getRealItem(window.event.srcElement) ;
	if (el.className == "2k3MenuSelectItemOver") {
		window.event.cancelBubble = true ;
		window.event.returnValue = false ;
		if (element.selectedIndex != -1) {
			optionsElement.rows[element.selectedIndex].className = "2k3MenuSelectItem" ;
		}
		el.className = "2k3MenuSelectItemSelected" ;
		with (element) {
			selectedIndex = el.rowIndex ;
			text = el.children[captionCell].innerText ;
			value = el.children[valueCell].innerText ;
			elementCaption.innerText = el.children[captionCell].innerText ;
		}
		element.dropDownState = false ;
		showNormal(element) ;
		hideDropdown() ;
		onchange.fire() ;
	}
}


// ----------------------------------------------------
// show dropdown functions   
// ----------------------------------------------------

function showDropdown() {
	var dropDownTop = 0 ;
	var absoluteX = getRealLeft(element) ;
	var absoluteY = getRealTop(element) ;
	if (parseInt(element.selectedIndex) != -1) {
		with (optionsElement.rows[selectedIndex]) {
			className = "2k3MenuSelectItemSelected" ;
			scrollIntoView(false) ;
		}
		with (elementDropdown) {
			if (parseInt(element.selectedIndex) > parseInt(element.size - 1)) {
				scrollTop += 1 ;
			}
		}
	}
	window.document.attachEvent("onmousedown", hideDropdownEx) ;
	with (elementDropdown) {
		if (parseInt(window.document.body.clientHeight - absoluteY - element.offsetHeight - 4) < parseInt(offsetHeight)) {
			dropDownTop = (absoluteY - offsetHeight) ;
		}
		else {
			dropDownTop = (absoluteY + element.offsetHeight) ;
		}
		with (style) {
			top = dropDownTop ;
			left = absoluteX ;
			visibility = "visible" ;
		}
	}
	showMenuShadow(elementDropdown) ;
	with (elementDropdown) {
		attachEvent("onmouseover", dropdownOnMouseOver) ;
		attachEvent("onmouseout", dropdownOnMouseOut) ;
		attachEvent("onclick", dropdownOnClick) ;
	}
	element.parentElement.parentElement.parentElement.parentElement.activeChild = element ;
}

function hideDropdown() {
	window.document.detachEvent("onmousedown", hideDropdownEx) ;
	with (elementDropdown) {
		detachEvent("onmouseover", dropdownOnMouseOver) ;
		detachEvent("onmouseout", dropdownOnMouseOut) ;
		detachEvent("onclick", dropdownOnClick) ;
		hideMenuShadow() ;
		style.visibility = "hidden" ;
	}
	element.parentElement.parentElement.parentElement.parentElement.activeChild = null ;
}

function hideDropdownEx() {
	if (!isElement(window.event.srcElement, element) &&
		!isElement(window.event.srcElement, elementDropdown)) {
		hideDropdown() ;
		showNormal(element) ;
		element.dropDownState = false ;
	}
}


// ----------------------------------------------------
// internal functions   
// ----------------------------------------------------

function showMenuShadow(el) {
	for (var i = 3; i >= 0; i--) {
		if (menuShadowArray[i] == null) {
			menuShadowArray[i] = window.document.createElement("SPAN") ;
			menuShadowArray[i].className = "2k3ShadowElement" ;
			window.document.body.insertAdjacentElement("afterBegin", menuShadowArray[i]) ;
		}
		with (menuShadowArray[i].style) {
			left = el.offsetLeft + (4 + i) ;
			top = el.offsetTop + (4 + i) ;
			width =  el.offsetWidth - (i * 2) ;
			height = el.offsetHeight - (i * 2) ;
			zIndex = el.style.zIndex - 1 ;
			visibility = "visible" ;
		}
	}
}

function hideMenuShadow() {
	for (var i = 0; i <= 3; i++) {
		if (menuShadowArray[i] != null) {
			menuShadowArray[i].style.visibility = "hidden" ;
			menuShadowArray[i].removeNode(true) ;
			menuShadowArray[i] = null ;
		}
	}
}

function showNormal(el) {
	with (el) {
		className = "2k3MenuSelect" ;
		style.width = normalWidth ;
	}
}

function showOver(el) {
	with (el) {
		className = "2k3MenuSelectOver" ;
		style.width = normalWidth + 2 ;
	}
}

function showActive(el) {
	with (el) {
		className = "2k3MenuSelectActive" ;
		style.width = normalWidth + 2 ;
	}
}

function showDisabled(el) {
	with (el) {
		className = "2k3MenuSelectDisabled" ;
		style.width = normalWidth ;
	}
}

function showEnabled(el) {
	with (el) {
		className = "2k3MenuSelect" ;
		style.width = normalWidth ;
	}
}

function returnText() {
	if (element.selectedIndex == -1) {
		return "" ;
	}
	else {
		return optionsElement.rows[element.selectedIndex].children[captionCell].innerText ;
	}
}

function returnValue() {
	if (element.selectedIndex == -1) {
		return "" ;
	}
	else {
		return optionsElement.rows[element.selectedIndex].children[valueCell].innerText ;
	}
}

function makeBooleanOfAttribute(attName) {
	a = element.getAttribute(attName) ;
	if (typeof(a) == "boolean") {
		return a ;
	}
	else if (a == null) {
		a = false ;
	}
	else if (typeof(a) == "string") {
		a = a.toLowerCase() ;
		a = (a == "true" || a == "1" || a == "yes") ;
	}
	else {
		a = new Boolean(a) ;
	}
	return a ;
}

function isElement(el, parentElement) {
	var tElement = el ;
	while (tElement != null) {
		if (tElement == parentElement) {
			return true ;
		}
		tElement = tElement.parentElement ;
	}
	return false ;
}

function getDropdownHeight(intSize) {
	var intHeight = 0 ;
	for (var i = 0; i < intSize; i++) {
		if (i > element.itemCount() - 1) {
			break ;
		}
		intHeight += optionsElement.rows[i].offsetHeight ;
	}
	return intHeight + 2 ;
}

function getRealTop(el) {
	var t = 0 ;
	var tElement = el ;
	while (tElement != null) {
		t += tElement.offsetTop ;
		tElement = tElement.offsetParent ;
	}
	return t ;
}

function getRealLeft(el) {
	var l = 0 ;
	var tElement = el ;
	while (tElement != null) {
		l += tElement.offsetLeft ;
		tElement = tElement.offsetParent ;
	}
	return l ;
}

function getRealItem(el) {
	var tmpElement = el ;
	if (tmpElement == null) { return tmpElement ; }
	if (tmpElement.tagName.toLowerCase() == "img") {
		tmpElement = tmpElement.parentElement ;
	}
	if (tmpElement.tagName.toLowerCase() == "span") {
		tmpElement = tmpElement.parentElement ;
	}
	if (tmpElement.tagName.toLowerCase() == "td") {
		tmpElement = tmpElement.parentElement ;
	}
	return tmpElement ;
}

</script>

</PUBLIC:COMPONENT>