/*=================================================================*\ * electron_menumanager.js * * A series of function to create and manage contextual menus. * Shows or hides one element when another is clicked or hovered. * * Author: Electron (xelectronx@gmail.com) * Date: 26-07-07 * For: Eevee's Headquarters (eeveeshq.com) * Copyright: (c) 2007 Electron. All rights reserved. \*=================================================================*/ /** * Registers the parent and child elements to act as the trigger and menu. * * @param string - ID string of the parent element * @param string - ID string of the child element * @param string - Either "click" or "hover", depending on what you want * @param string - Either "below" (menu below the parent element) or "beside" * (menu to the right of the parent element) * @param string - CSS cursor style (optional) */ function RegisterControl(parent, child, showtype, position, cursor) { var elm_parent = document.getElementById(parent); var elm_child = document.getElementById(child); // store various information to be used by the other functions elm_parent["info_parent"] = elm_parent.id; elm_child["info_parent"] = elm_parent.id; elm_parent["info_child"] = elm_child.id; elm_child["info_child"] = elm_child.id; elm_parent["info_position"] = position; elm_child["info_position"] = position; // start visibility elm_child.style.position = "absolute"; elm_child.style.visibility = "hidden"; elm_child.style.zIndex = "100"; // set the cursor if it was requested if (typeof cursor != 'undefined') { elm_parent.style.cursor = cursor; } // set event managers depending on showtype switch (showtype) { case "click": { elm_parent.onclick = ClickControl; elm_parent.onmouseout = HideControl; elm_child.onmouseover = ShowControl; elm_child.onmouseout = HideControl; break; } case "hover": { elm_parent.onmouseover = ShowControl; elm_parent.onmouseout = HideControl; elm_child.onmouseover = ShowControl; elm_child.onmouseout = HideControl; break; } } } /** * Event handler to display the child element. */ function ShowControl() { var elm_parent = document.getElementById(this["info_parent"]); var elm_child = document.getElementById(this["info_child"]); ShowControlProc(elm_parent.id, elm_child.id); clearTimeout(elm_child["info_timeout"]); } /** * Actually shows the child element, in the correct place. * */ function ShowControlProc(parent, child) { var elm_parent = document.getElementById(parent); var elm_child = document.getElementById(child ); if(elm_child["info_position"] == "above") { var left = (elm_child["info_position"] == "beside") ? (elm_parent.offsetWidth + 0) : 0; elm_child.style.position = "absolute"; elm_child.style.bottom = "0px"; elm_child.style.left = left + "px"; elm_child.style.visibility = "visible"; } else { var top = (elm_child["info_position"] == "below") ? (elm_parent.offsetHeight - 0) : 0; var left = (elm_child["info_position"] == "beside") ? (elm_parent.offsetWidth + 0) : 0; for (; elm_parent; elm_parent = elm_parent.offsetParent) { top += elm_parent.offsetTop; left += elm_parent.offsetLeft; } elm_child.style.position = "absolute"; elm_child.style.top = top + "px"; elm_child.style.left = left + "px"; elm_child.style.visibility = "visible"; } } /** * Event handler to hide the child element */ function HideControl() { var elm_child = document.getElementById(this["info_child"]); elm_child["info_timeout"] = setTimeout("document.getElementById('" + elm_child.id + "').style.visibility = 'hidden'", 0); } /** * Event handler for the "onclick" event. Hides or shows the child element. * * @return bool - Always returns false */ function ClickControl() { var elm_parent = document.getElementById(this["info_parent"]); var elm_child = document.getElementById(this["info_child" ]); if (elm_child.style.visibility != "visible") { ShowControlProc(elm_parent.id, elm_child.id); } else { elm_child.style.visibility = "hidden"; } // do not open link in browser! return false; }