3 * This script was created by Erik Arvidsson (erik@eae.net)
4 * for WebFX (http://webfx.eae.net)
7 * For usage see license at http://webfx.eae.net/license.html
10 * Updates: 2001-11-20 Added hover mode support and removed Opera focus hacks
11 * 2001-12-20 Added auto positioning and some properties to support this
12 * 2002-08-13 toString used ' for attributes. Changed to " to allow in args
16 var ua = navigator.userAgent;
17 var opera = window.opera || /opera [56789]|opera\/[56789]/i.test(ua);
18 var ie = !opera && /MSIE/.test(ua);
19 var ie50 = ie && /MSIE 5\.[01234]/.test(ua);
20 var ie6 = ie && /MSIE [6789]/.test(ua);
21 var ieBox = ie && (document.compatMode == null || document.compatMode != "CSS1Compat");
22 var moz = !opera && /gecko/i.test(ua);
23 var nn6 = !opera && /netscape.*6\./i.test(ua);
24 var khtml = /KHTML/i.test(ua);
26 // define the default values
28 webfxMenuDefaultWidth = 154;
30 webfxMenuDefaultBorderLeft = 1;
31 webfxMenuDefaultBorderRight = 1;
32 webfxMenuDefaultBorderTop = 1;
33 webfxMenuDefaultBorderBottom = 1;
35 webfxMenuDefaultPaddingLeft = 1;
36 webfxMenuDefaultPaddingRight = 1;
37 webfxMenuDefaultPaddingTop = 1;
38 webfxMenuDefaultPaddingBottom = 1;
40 webfxMenuDefaultShadowLeft = 0;
41 webfxMenuDefaultShadowRight = ie && !ie50 && /win32/i.test(navigator.platform) ? 4 :0;
42 webfxMenuDefaultShadowTop = 0;
43 webfxMenuDefaultShadowBottom = ie && !ie50 && /win32/i.test(navigator.platform) ? 4 : 0;
46 webfxMenuItemDefaultHeight = 18;
47 webfxMenuItemDefaultText = "Untitled";
48 webfxMenuItemDefaultHref = "javascript:void(0)";
50 webfxMenuSeparatorDefaultHeight = 6;
52 webfxMenuDefaultEmptyText = "Empty";
54 webfxMenuDefaultUseAutoPosition = nn6 ? false : true;
58 // other global constants
60 webfxMenuImagePath = "";
62 webfxMenuUseHover = opera ? true : false;
63 webfxMenuHideTime = 500;
64 webfxMenuShowTime = 200;
68 var webFXMenuHandler = {
70 idPrefix : "webfx-menu-object-",
72 getId : function () { return this.idPrefix + this.idCounter++; },
73 overMenuItem : function (oItem) {
74 if (this.showTimeout != null)
75 window.clearTimeout(this.showTimeout);
76 if (this.hideTimeout != null)
77 window.clearTimeout(this.hideTimeout);
78 var jsItem = this.all[oItem.id];
79 if (webfxMenuShowTime <= 0)
82 //this.showTimeout = window.setTimeout(function () { webFXMenuHandler._over(jsItem) ; }, webfxMenuShowTime);
83 // I hate IE5.0 because the piece of shit crashes when using setTimeout with a function object
84 this.showTimeout = window.setTimeout("webFXMenuHandler._over(webFXMenuHandler.all['" + jsItem.id + "'])", webfxMenuShowTime);
86 outMenuItem : function (oItem) {
87 if (this.showTimeout != null)
88 window.clearTimeout(this.showTimeout);
89 if (this.hideTimeout != null)
90 window.clearTimeout(this.hideTimeout);
91 var jsItem = this.all[oItem.id];
92 if (webfxMenuHideTime <= 0)
95 //this.hideTimeout = window.setTimeout(function () { webFXMenuHandler._out(jsItem) ; }, webfxMenuHideTime);
96 this.hideTimeout = window.setTimeout("webFXMenuHandler._out(webFXMenuHandler.all['" + jsItem.id + "'])", webfxMenuHideTime);
98 blurMenu : function (oMenuItem) {
99 window.setTimeout("webFXMenuHandler.all[\"" + oMenuItem.id + "\"].subMenu.hide();", webfxMenuHideTime);
101 _over : function (jsItem) {
102 if (jsItem.subMenu) {
103 jsItem.parentMenu.hideAllSubs();
104 jsItem.subMenu.show();
107 jsItem.parentMenu.hideAllSubs();
109 _out : function (jsItem) {
110 // find top most menu
113 if (root instanceof WebFXMenuButton)
116 m = jsItem.parentMenu;
117 while (m.parentMenu != null && !(m.parentMenu instanceof WebFXMenuBar))
123 hideMenu : function (menu) {
124 if (this.showTimeout != null)
125 window.clearTimeout(this.showTimeout);
126 if (this.hideTimeout != null)
127 window.clearTimeout(this.hideTimeout);
129 this.hideTimeout = window.setTimeout("webFXMenuHandler.all['" + menu.id + "'].hide()", webfxMenuHideTime);
131 showMenu : function (menu, src, dir) {
132 if (this.showTimeout != null)
133 window.clearTimeout(this.showTimeout);
134 if (this.hideTimeout != null)
135 window.clearTimeout(this.hideTimeout);
137 if (arguments.length < 3)
144 function WebFXMenu() {
145 this._menuItems = [];
147 this.id = webFXMenuHandler.getId();
151 this.parentMenu = null;
152 webFXMenuHandler.all[this.id] = this;
155 WebFXMenu.prototype.width = webfxMenuDefaultWidth;
156 WebFXMenu.prototype.emptyText = webfxMenuDefaultEmptyText;
157 WebFXMenu.prototype.useAutoPosition = webfxMenuDefaultUseAutoPosition;
159 WebFXMenu.prototype.borderLeft = webfxMenuDefaultBorderLeft;
160 WebFXMenu.prototype.borderRight = webfxMenuDefaultBorderRight;
161 WebFXMenu.prototype.borderTop = webfxMenuDefaultBorderTop;
162 WebFXMenu.prototype.borderBottom = webfxMenuDefaultBorderBottom;
164 WebFXMenu.prototype.paddingLeft = webfxMenuDefaultPaddingLeft;
165 WebFXMenu.prototype.paddingRight = webfxMenuDefaultPaddingRight;
166 WebFXMenu.prototype.paddingTop = webfxMenuDefaultPaddingTop;
167 WebFXMenu.prototype.paddingBottom = webfxMenuDefaultPaddingBottom;
169 WebFXMenu.prototype.shadowLeft = webfxMenuDefaultShadowLeft;
170 WebFXMenu.prototype.shadowRight = webfxMenuDefaultShadowRight;
171 WebFXMenu.prototype.shadowTop = webfxMenuDefaultShadowTop;
172 WebFXMenu.prototype.shadowBottom = webfxMenuDefaultShadowBottom;
176 WebFXMenu.prototype.add = function (menuItem) {
177 this._menuItems[this._menuItems.length] = menuItem;
178 if (menuItem.subMenu) {
179 this._subMenus[this._subMenus.length] = menuItem.subMenu;
180 menuItem.subMenu.parentMenu = this;
183 menuItem.parentMenu = this;
186 WebFXMenu.prototype.show = function (relObj, sDir) {
187 if (this.useAutoPosition)
188 this.position(relObj, sDir);
190 var divElement = document.getElementById(this.id);
193 //divElement.style.left = opera ? this.left : this.left + "px";
194 //divElement.style.top = opera ? this.top : this.top + "px";
195 divElement.style.left = this.left + "px";
196 divElement.style.top = this.top + "px";
197 divElement.style.visibility = "visible";
200 var shimElement = document.getElementById(this.id + "Shim");
202 shimElement.style.width = divElement.offsetWidth;
203 shimElement.style.height = divElement.offsetHeight;
204 shimElement.style.top = divElement.style.top;
205 shimElement.style.left = divElement.style.left;
206 /*shimElement.style.zIndex = divElement.style.zIndex - 1; */
207 shimElement.style.display = "block";
208 shimElement.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';
217 this.parentMenu.show();
220 WebFXMenu.prototype.hide = function () {
222 var divElement = document.getElementById(this.id);
224 divElement.style.visibility = "hidden";
226 var shimElement = document.getElementById(this.id + "Shim");
228 shimElement.style.display = "none";
236 WebFXMenu.prototype.hideAllSubs = function () {
237 for (var i = 0; i < this._subMenus.length; i++) {
238 if (this._subMenus[i].shown)
239 this._subMenus[i].hide();
243 WebFXMenu.prototype.toString = function () {
244 var top = this.top + this.borderTop + this.paddingTop;
245 var str = "<div id='" + this.id + "' class='webfx-menu' style='" +
247 this.width - this.borderLeft - this.paddingLeft - this.borderRight - this.paddingRight :
248 this.width) + "px;" +
249 (this.useAutoPosition ?
250 "left:" + this.left + "px;" + "top:" + this.top + "px;" :
252 (ie50 ? "filter: none;" : "") +
255 if (this._menuItems.length == 0) {
256 str += "<span class='webfx-menu-empty'>" + this.emptyText + "</span>";
259 str += '<span class="webfx-menu-title" onmouseover="webFXMenuHandler.overMenuItem(this)"' +
260 (webfxMenuUseHover ? " onmouseout='webFXMenuHandler.outMenuItem(this)'" : "") +
261 '>' + this.emptyText + '</span>';
262 // str += '<div id="' + this.id + '-title">' + this.emptyText + '</div>';
263 // loop through all menuItems
264 for (var i = 0; i < this._menuItems.length; i++) {
265 var mi = this._menuItems[i];
267 if (!this.useAutoPosition) {
268 if (mi.subMenu && !mi.subMenu.useAutoPosition)
269 mi.subMenu.top = top - mi.subMenu.borderTop - mi.subMenu.paddingTop;
279 str += "<iframe id='" + this.id + "Shim' src='javascript:false;' scrolling='no' frameBorder='0' style='position:absolute; top:0px; left: 0px; display:none;'></iframe>";
282 for (var i = 0; i < this._subMenus.length; i++) {
283 this._subMenus[i].left = this.left + this.width - this._subMenus[i].borderLeft;
284 str += this._subMenus[i];
289 // WebFXMenu.prototype.position defined later
291 function WebFXMenuItem(sText, sHref, sToolTip, oSubMenu) {
292 this.text = sText || webfxMenuItemDefaultText;
293 this.href = (sHref == null || sHref == "") ? webfxMenuItemDefaultHref : sHref;
294 this.subMenu = oSubMenu;
296 oSubMenu.parentMenuItem = this;
297 this.toolTip = sToolTip;
298 this.id = webFXMenuHandler.getId();
299 webFXMenuHandler.all[this.id] = this;
301 WebFXMenuItem.prototype.height = webfxMenuItemDefaultHeight;
302 WebFXMenuItem.prototype.toString = function () {
304 " id='" + this.id + "'" +
305 " href=\"" + this.href + "\"" +
306 (this.toolTip ? " title=\"" + this.toolTip + "\"" : "") +
307 " onmouseover='webFXMenuHandler.overMenuItem(this)'" +
308 (webfxMenuUseHover ? " onmouseout='webFXMenuHandler.outMenuItem(this)'" : "") +
309 (this.subMenu ? " unselectable='on' tabindex='-1'" : "") +
311 (this.subMenu ? "<img class='arrow' src=\"" + webfxMenuImagePath + "arrow.right.black.png\">" : "") +
317 function WebFXMenuSeparator() {
318 this.id = webFXMenuHandler.getId();
319 webFXMenuHandler.all[this.id] = this;
321 WebFXMenuSeparator.prototype.height = webfxMenuSeparatorDefaultHeight;
322 WebFXMenuSeparator.prototype.toString = function () {
324 " id='" + this.id + "'" +
326 " onmouseover='webFXMenuHandler.overMenuItem(this)'" +
327 " onmouseout='webFXMenuHandler.outMenuItem(this)'"
333 function WebFXMenuBar() {
334 this._parentConstructor = WebFXMenu;
335 this._parentConstructor();
337 WebFXMenuBar.prototype = new WebFXMenu;
338 WebFXMenuBar.prototype.toString = function () {
339 var str = "<div id='" + this.id + "' class='webfx-menu-bar'>";
341 // loop through all menuButtons
342 for (var i = 0; i < this._menuItems.length; i++)
343 str += this._menuItems[i];
347 for (var i = 0; i < this._subMenus.length; i++)
348 str += this._subMenus[i];
353 function WebFXMenuButton(sText, sHref, sToolTip, oSubMenu) {
354 this._parentConstructor = WebFXMenuItem;
355 this._parentConstructor(sText, sHref, sToolTip, oSubMenu);
357 WebFXMenuButton.prototype = new WebFXMenuItem;
358 WebFXMenuButton.prototype.toString = function () {
360 " id='" + this.id + "'" +
361 " href='" + this.href + "'" +
362 (this.toolTip ? " title='" + this.toolTip + "'" : "") +
364 (" onmouseover='webFXMenuHandler.overMenuItem(this)'" +
365 " onmouseout='webFXMenuHandler.outMenuItem(this)'") :
367 " onfocus='webFXMenuHandler.overMenuItem(this)'" +
369 " onblur='webFXMenuHandler.blurMenu(this)'" :
374 (this.subMenu ? "<img class='arrow' src='" + webfxMenuImagePath + "arrow.right.black.png'>" : "") +
383 /* Position functions */
386 function getInnerLeft(el) {
388 if (el == null) return 0;
390 if (ieBox && el == document.body || !ieBox && el == document.documentElement) return 0;
392 return parseInt( getLeft(el) + parseInt(getBorderLeft(el)) );
398 function getLeft(el, debug) {
400 if (el == null) return 0;
403 // alert ( el.offsetLeft + ' - ' + getInnerLeft(el.offsetParent) );
405 return parseInt( el.offsetLeft + parseInt(getInnerLeft(el.offsetParent)) );
411 function getInnerTop(el) {
413 if (el == null) return 0;
415 if (ieBox && el == document.body || !ieBox && el == document.documentElement) return 0;
417 return parseInt( getTop(el) + parseInt(getBorderTop(el)) );
423 function getTop(el) {
425 if (el == null) return 0;
427 return parseInt( el.offsetTop + parseInt(getInnerTop(el.offsetParent)) );
433 function getBorderLeft(el) {
440 ? parseInt(document.defaultView.getComputedStyle(el, null).getPropertyValue("border-left-width"))
441 : parseInt(window.getComputedStyle(el, null).getPropertyValue("border-left-width"))
448 function getBorderTop(el) {
455 ? parseInt(document.defaultView.getComputedStyle(el, null).getPropertyValue("border-left-width"))
456 : parseInt(window.getComputedStyle(el, null).getPropertyValue("border-top-width"))
463 function opera_getLeft(el) {
465 if (el == null) return 0;
467 return el.offsetLeft + opera_getLeft(el.offsetParent);
473 function opera_getTop(el) {
475 if (el == null) return 0;
477 return el.offsetTop + opera_getTop(el.offsetParent);
483 function getOuterRect(el, debug) {
487 left: (opera ? opera_getLeft(el) : getLeft(el, debug)),
489 top: (opera ? opera_getTop(el) : getTop(el)),
491 width: el.offsetWidth,
493 height: el.offsetHeight
501 // mozilla bug! scrollbars not included in innerWidth/height
503 function getDocumentRect(el) {
513 (ieBox ? document.body.clientWidth : document.documentElement.clientWidth) :
521 (ieBox ? document.body.clientHeight : document.documentElement.clientHeight) :
533 function getScrollPos(el) {
539 (ieBox ? document.body.scrollLeft : document.documentElement.scrollLeft) :
547 (ieBox ? document.body.scrollTop : document.documentElement.scrollTop) :
558 /* end position functions */
560 WebFXMenu.prototype.position = function (relEl, sDir) {
562 // find parent item rectangle, piRect
565 var pi = this.parentMenuItem;
566 if (!this.parentMenuItem)
569 relEl = document.getElementById(pi.id);
571 dir = pi instanceof WebFXMenuButton ? "vertical" : "horizontal";
572 //alert('created RelEl from parent: ' + pi.id);
573 piRect = getOuterRect(relEl, 1);
575 else if (relEl.left != null && relEl.top != null && relEl.width != null && relEl.height != null) { // got a rect
576 //alert('passed a Rect as RelEl: ' + typeof(relEl));
581 //alert('passed an element as RelEl: ' + typeof(relEl));
582 piRect = getOuterRect(relEl);
585 var menuEl = document.getElementById(this.id);
586 var menuRect = getOuterRect(menuEl);
587 var docRect = getDocumentRect();
588 var scrollPos = getScrollPos();
589 var pMenu = this.parentMenu;
591 if (dir == "vertical") {
592 if (piRect.left + menuRect.width - scrollPos.left <= docRect.width) {
593 //alert('piRect.left: ' + piRect.left);
594 this.left = piRect.left;
596 this.left = this.left + 138;
597 } else if (docRect.width >= menuRect.width) {
598 //konq (not safari though) winds up here by accident and positions the menus all weird
599 //alert('docRect.width + scrollPos.left - menuRect.width');
601 this.left = docRect.width + scrollPos.left - menuRect.width;
603 //alert('scrollPos.left: ' + scrollPos.left);
604 this.left = scrollPos.left;
607 if (piRect.top + piRect.height + menuRect.height <= docRect.height + scrollPos.top)
609 this.top = piRect.top + piRect.height;
611 else if (piRect.top - menuRect.height >= scrollPos.top)
613 this.top = piRect.top - menuRect.height;
615 else if (docRect.height >= menuRect.height)
617 this.top = docRect.height + scrollPos.top - menuRect.height;
621 this.top = scrollPos.top;
624 if (piRect.top + menuRect.height - this.borderTop - this.paddingTop <= docRect.height + scrollPos.top)
626 this.top = piRect.top - this.borderTop - this.paddingTop;
628 else if (piRect.top + piRect.height - menuRect.height + this.borderTop + this.paddingTop >= 0)
630 this.top = piRect.top + piRect.height - menuRect.height + this.borderBottom + this.paddingBottom + this.shadowBottom;
632 else if (docRect.height >= menuRect.height)
634 this.top = docRect.height + scrollPos.top - menuRect.height;
638 this.top = scrollPos.top;
642 var pMenuPaddingLeft = pMenu ? pMenu.paddingLeft : 0;
644 var pMenuBorderLeft = pMenu ? pMenu.borderLeft : 0;
646 var pMenuPaddingRight = pMenu ? pMenu.paddingRight : 0;
648 var pMenuBorderRight = pMenu ? pMenu.borderRight : 0;
652 if (piRect.left + piRect.width + menuRect.width + pMenuPaddingRight +
654 pMenuBorderRight - this.borderLeft + this.shadowRight <= docRect.width + scrollPos.left)
656 this.left = piRect.left + piRect.width + pMenuPaddingRight + pMenuBorderRight - this.borderLeft;
658 else if (piRect.left - menuRect.width - pMenuPaddingLeft - pMenuBorderLeft + this.borderRight + this.shadowRight >= 0)
660 this.left = piRect.left - menuRect.width - pMenuPaddingLeft - pMenuBorderLeft + this.borderRight + this.shadowRight;
662 else if (docRect.width >= menuRect.width)
664 this.left = docRect.width + scrollPos.left - menuRect.width;
668 this.left = scrollPos.left;