[freeside-commits] freeside/httemplate/elements header.html, 1.12, 1.13 menu.html, 1.18, 1.19 xmenu.top.js, NONE, 1.1 xmenu.top.css, NONE, 1.1 xmenu.css, 1.4, 1.5

Ivan,,, ivan at wavetail.420.am
Fri Jan 26 00:04:38 PST 2007


Update of /home/cvs/cvsroot/freeside/httemplate/elements
In directory wavetail:/tmp/cvs-serv23827/httemplate/elements

Modified Files:
	header.html menu.html xmenu.css 
Added Files:
	xmenu.top.js xmenu.top.css 
Log Message:
top bar option!

Index: header.html
===================================================================
RCS file: /home/cvs/cvsroot/freeside/httemplate/elements/header.html,v
retrieving revision 1.12
retrieving revision 1.13
diff -u -d -r1.12 -r1.13
--- header.html	29 Dec 2006 08:51:33 -0000	1.12
+++ header.html	26 Jan 2007 08:04:36 -0000	1.13
@@ -1,11 +1,3 @@
-%
-%  my($title, $menubar) = ( shift, shift );
-%  my $etc = @_ ? shift : ''; #$etc is for things like onLoad= etc.
-%  my $head = @_ ? shift : ''; #$head is for things that go in the <HEAD> section
-%  my $conf = new FS::Conf;
-%
-%
-
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <HTML>
   <HEAD>
@@ -16,7 +8,10 @@
     <META HTTP-Equiv="Pragma" Content="no-cache">
     <META HTTP-Equiv="Expires" Content="0"> 
 
-    <% include('menu.html', 'freeside_baseurl' => $fsurl ) %>
+    <% include('menu.html', 'freeside_baseurl' => $fsurl,
+                            'position'         => $menu_position,
+              )
+    %>
 
     <SCRIPT TYPE="text/javascript">
       function clearhint_search_cust (what) {
@@ -43,7 +38,7 @@
     <% $head %>
 
   </HEAD>
-  <BODY BACKGROUND="<%$fsurl%>images/background-cheat.png" <% $etc %> STYLE="margin-top:0; margin-bottom:0; margin-left:0; margin-right:0">
+  <BODY <% $menu_position eq 'left' ? qq( BACKGROUND="${fsurl}images/background-cheat.png" ) : ' BGCOLOR="#e8e8e8" ' %> <% $etc %> STYLE="margin-top:0; margin-bottom:0; margin-left:0; margin-right:0">
     <table width="100%" CELLPADDING=0 CELLSPACING=0 STYLE="padding-left:0; padding-right:4">
       <tr>
         <td rowspan=2 BGCOLOR="#ffffff"><IMG BORDER=0 ALT="freeside" SRC="<%$fsurl%>images/small-logo.png"></td>
@@ -121,6 +116,30 @@
         <TD COLSPAN=5 WIDTH="100%" STYLE="padding:0"><IMG BORDER=0 ALT="" SRC="<%$fsurl%>images/black-gradient.png" HEIGHT="13" WIDTH="100%"></TD>
       </TR>
 
+% if ( $menu_position eq 'top' ) {
+
+      <TR>
+
+        <TD COLSPAN="5" WIDTH="100%" STYLE="padding:0">
+          <SCRIPT TYPE="text/javascript">
+            document.write(myBar);
+          </SCRIPT>
+        </TD>
+
+      </TR>
+
+      <TR>
+        <TD COLSPAN="5" WIDTH="100%" HEIGHT="2px" STYLE="padding:0" BGCOLOR="#000000">
+        </TD>
+      </TR>
+      
+      <TR>
+        <TD COLSPAN="5" WIDTH="100%" HEIGHT="4px" STYLE="padding:0" BGCOLOR="#000000">
+        </TD>
+      </TR>
+
+% }
+
       <TR>
 
         <TD COLSPAN=1 BGCOLOR="#000000" ALIGN="right">
@@ -172,13 +191,26 @@
 
       </TR>
     </TABLE>
+
     <TABLE WIDTH="100%" HEIGHT="100%" CELLSPACING=0 CELLPADDING=4>
+
       <TR>
+
+% if ( $menu_position eq 'left' ) {
+
         <TD BGCOLOR="#000000" STYLE="padding:0" WIDTH="154"></TD>
         <TD STYLE="padding:0" WIDTH="13"><IMG BORDER=0 ALT="" SRC="<%$fsurl%>images/black-gray-corner.png"></TD>
-        <TD STYLE="padding:0"><IMG BORDER=0 ALT="" SRC="<%$fsurl%>images/black-gray-top.png" HEIGHT="13" WIDTH="100%"></TD>
+
+% }
+
+        <TD STYLE="padding:0" WIDTH="100%"><IMG BORDER=0 ALT="" SRC="<%$fsurl%>images/black-gray-top.png" HEIGHT="13" WIDTH="100%"></TD>
+
       </TR>
+
       <TR HEIGHT="100%">
+
+% if ( $menu_position eq 'left' ) {
+
         <TD BGCOLOR="#000000" ALIGN="left" HEIGHT="100%" WIDTH="154" VALIGN="top" ALIGN="right">
           <SCRIPT TYPE="text/javascript">
             document.write(myBar);
@@ -188,6 +220,9 @@
 
         </TD>
         <TD STYLE="padding:0" HEIGHT="100%" WIDTH=13 VALIGN="top"><IMG WIDTH="13" HEIGHT="100%" BORDER=0 ALT="" SRC="<%$fsurl%>images/black-gray-side.png"></TD>
+
+% }
+
         <TD BGCOLOR="#e8e8e8" HEIGHT="100%" VALIGN="top"> <!-- WIDTH="100%"> -->
 
           <FONT SIZE=6>
@@ -196,3 +231,14 @@
 
           <BR><BR>
           <% $menubar !~ /^\s*$/ ? "$menubar<BR><BR>" : '' %>
+<%init>
+
+my($title, $menubar) = ( shift, shift );
+my $etc = @_ ? shift : ''; #$etc is for things like onLoad= etc.
+my $head = @_ ? shift : ''; #$head is for things that go in the <HEAD> section
+my $conf = new FS::Conf;
+
+my $menu_position = $FS::CurrentUser::CurrentUser->option('menu_position')
+                    || 'left';
+
+</%init>

Index: xmenu.css
===================================================================
RCS file: /home/cvs/cvsroot/freeside/httemplate/elements/xmenu.css,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -d -r1.4 -r1.5
--- xmenu.css	25 Jan 2007 06:04:54 -0000	1.4
+++ xmenu.css	26 Jan 2007 08:04:36 -0000	1.5
@@ -95,6 +95,9 @@
 }
 
 .webfx-menu-bar {
+        /* i want a vertical bar */
+        display:                        block;
+
 	/* background:		rgb(120,172,255);/*rgb(255,128,0);*/
 	/* background:		 #a097ed; */
 	background:		 #000000;
@@ -167,10 +170,10 @@
 	*/
 	ie-dummy:		expression(this.hideFocus=true);
 
-	border-left:	1px solid rgb(0,66,174);
-	border-right:	1px solid rgb(234,242,255);
-	border-top:		1px solid rgb(0,66,174);
-	border-bottom:	1px solid rgb(234,242,255);
+/*	border-left:	1px solid rgb(0,66,174); */
+/*	border-right:	1px solid rgb(234,242,255); */
+/*	border-top:		1px solid rgb(0,66,174); */
+/*	border-bottom:	1px solid rgb(234,242,255); */
 }
 
 .webfx-menu-title  {

--- NEW FILE: xmenu.top.css ---

.webfx-menu, .webfx-menu * {
	/*
	Set the box sizing to content box
	in the future when IE6 supports box-sizing
	there will be an issue to fix the sizes

	There is probably an issue with IE5 mac now
	because IE5 uses content-box but the script
	assumes all versions of IE uses border-box.

	At the time of this writing mozilla did not support
	box-sizing for absolute positioned element.

	Opera only supports content-box
	*/
	box-sizing:			content-box;
	-moz-box-sizing:	content-box;
}

.webfx-menu {
	position:		absolute;
	z-index:		100;
	visibility:		hidden;
	border:			1px solid black;
	padding:		1px;
	background:		white;
	filter:			progid:DXImageTransform.Microsoft.Shadow(color="#777777", Direction=135, Strength=4)
				alpha(Opacity=95);
	-moz-opacity:		0.95;
	/* a drop shadow would be nice in moz/others too... */
}

.webfx-menu-empty {
	display:		block;
	border:			1px solid white;
	padding:		2px 5px 2px 5px;
	font-size:		11px;
	/* font-family:		Tahoma, Verdan, Helvetica, Sans-Serif; */
	color:			black;
}

.webfx-menu a {
	display:		block;
	/* width:			expression(constExpression(ieBox ? "100%": "auto")); /* should be ignored by mz and op */
	width:			expression(constExpression(ie ? "98%": "auto")); /* should be ignored by mz and op */
	overflow:		visible;	
	/* padding:		2px 0px 2px 5px; */
	padding:		1px 0px 1px 5px;
	font-size:		14px;
/* 	font-family:		Verdana, Arial, Helvetica, sans-serif; */
        font-weight:            bold;
	text-decoration:	none;
	vertical-align:		center;
	color:			black;
	border:			1px solid white;
}	

.webfx-menu a:visited {
	color:			black;
	border:			1px solid white;
}

.webfx-menu a:hover {
	color:			black;
	border:			1px solid #7e0079;
}

.webfx-menu a:hover {
	color:			black;
	/* background:		#faf7fa; #f5ebf4; #efdfef; white; #BC79B8; */
	/* background:		#ffe6fe; */
	/* background:		#ffc2fe; */
	background:		#fff2fe;
	border:			1px solid #7e0079; /*rgb(120,172,255);#ff8800;*/
}	

.webfx-menu a .arrow {
	float:			right;
	border:			0;
	width:			3px;
	margin-right:	3px;
	margin-top:		4px;
}

/* separtor */
.webfx-menu div {
	height:			0;
	height:			expression(constExpression(ieBox ? "2px" : "0"));
	border-top:		1px solid #7e0079; /* rgb(120,172,255); */
	border-bottom:	1px solid rgb(234,242,255);
	overflow:		hidden;
	margin:			2px 0px 2px 0px;
	font-size:		0mm;
}

.webfx-menu-bar {
	/* background:		rgb(120,172,255);/*rgb(255,128,0);*/
	/* background:		 #a097ed; */
	background:		 #000000;
	/* border:			1px solid #7E0079; */
	/* border:			1px solid #000000; */
	/* border: none */
	color:				white;

	padding:		2px;
	
	/* IE5.0 has the wierdest box model for inline elements */
	padding:		expression(constExpression(ie50 ? "0px" : "2px"));
}

.webfx-menu-bar a,
.webfx-menu-bar a:visited {
        /* i want a vertical bar */
        /* display:                        block; */

	/* border:				1px solid black; /*rgb(0,0,0);/*rgb(255,128,0);*/
	/* border: 1px solid black; /* #ffffff; */
	/* border-bottom: 1px solid black; */
	/* border-bottom: 1px solid white; */
	/* border-bottom:	1px solid rgb(0,66,174);
	/* border-bottom: 1px solid black;
	border-bottom: 1px solid black;
	border-bottom: 1px solid black; */

	padding:			1px 5px 1px 5px;

	/* color:				black; */
	color:				white;
	text-decoration:	none;

	/* IE5.0 Does not paint borders and padding on inline elements without a height/width */
	height:		expression(constExpression(ie50 ? "17px" : "auto"));

         background-color:#333333;
	 border:1px solid;
	 border-top-color:#cccccc;
	 border-left-color:#cccccc;
	 border-right-color:#aaaaaa;
	 border-bottom-color:#aaaaaa;

         margin-right: 4px

}

.webfx-menu-bar a:link {
	color: white;
}

.webfx-menu-bar a:hover {
	/* color:			black; */
	color:			white;
	/* background:		rgb(120,172,255);	 */
	/* background:		#BC79B8; */
        background:		#7e0079;
	/* border-left:	1px solid rgb(234,242,255);
	border-right:	1px solid rgb(0,66,174);
	border-top:		1px solid rgb(234,242,255);
	border-bottom:	1px solid rgb(0,66,174); */

	 border:1px solid;
	 border-top-color:#cccccc;
	 border-left-color:#cccccc;
	 border-right-color:#aaaaaa;
	 border-bottom-color:#aaaaaa;

}

.webfx-menu-bar a .arrow {
	/* float:			right; */
	border:			0;
/*	vertical-align:		top; */
/*	width:			3px; */
/*	margin-right:	3px; */
	margin-bottom:		2px;

}

.webfx-menu-bar a:active, .webfx-menu-bar a:focus {
	-moz-outline:	none;
	outline:		none;
	/*
		ie does not support outline but ie55 can hide the outline using
		a proprietary property on HTMLElement. Did I say that IE sucks at CSS?
	*/
	ie-dummy:		expression(this.hideFocus=true);

/*	border-left:	1px solid rgb(0,66,174); */
/*	border-right:	1px solid rgb(234,242,255); */
/*	border-top:		1px solid rgb(0,66,174); */
/*	border-bottom:	1px solid rgb(234,242,255); */
}

.webfx-menu-title  {
	color:			black;
	/* background:		#faf7fa; #f5ebf4; #efdfef; white; #BC79B8; */
	background:		#7e0079;
/*	border:			1px solid #7e0079; /*rgb(120,172,255);#ff8800;*/
	/* padding:		3px 1px 3px 6px; */
	padding:		3px 1px 3px 5px;
	display:		block;
	font-size:		16px;
/*        font-family:            Verdana, Arial, Helvetica, sans-serif; */
        font-weight:            bold;
	text-decoration:	none;
	color:			white;
/*	border:			1px solid white; */
	border-bottom:		1px solid white;
        width:			expression(constExpression(ie ? "98%": "auto"));	/* should be ignored by mz and op */
}	


--- NEW FILE: xmenu.top.js ---
//<script>
/*
 * This script was created by Erik Arvidsson (erik at eae.net)
 * for WebFX (http://webfx.eae.net)
 * Copyright 2001
 * 
 * For usage see license at http://webfx.eae.net/license.html	
 *
 * Created:		2001-01-12
 * Updates:		2001-11-20	Added hover mode support and removed Opera focus hacks
 *				2001-12-20	Added auto positioning and some properties to support this
 *				2002-08-13	toString used ' for attributes. Changed to " to allow in args
 */
 
// check browsers
var ua = navigator.userAgent;
var opera = /opera [56789]|opera\/[56789]/i.test(ua);
var ie = !opera && /MSIE/.test(ua);
var ie50 = ie && /MSIE 5\.[01234]/.test(ua);
var ie6 = ie && /MSIE [6789]/.test(ua);
var ieBox = ie && (document.compatMode == null || document.compatMode != "CSS1Compat");
var moz = !opera && /gecko/i.test(ua);
var nn6 = !opera && /netscape.*6\./i.test(ua);
var khtml = /KHTML/i.test(ua);

// define the default values

webfxMenuDefaultWidth			= 154;

webfxMenuDefaultBorderLeft		= 1;
webfxMenuDefaultBorderRight		= 1;
webfxMenuDefaultBorderTop		= 1;
webfxMenuDefaultBorderBottom	= 1;

webfxMenuDefaultPaddingLeft		= 1;
webfxMenuDefaultPaddingRight	= 1;
webfxMenuDefaultPaddingTop		= 1;
webfxMenuDefaultPaddingBottom	= 1;

webfxMenuDefaultShadowLeft		= 0;
webfxMenuDefaultShadowRight		= ie && !ie50 && /win32/i.test(navigator.platform) ? 4 :0;
webfxMenuDefaultShadowTop		= 0;
webfxMenuDefaultShadowBottom	= ie && !ie50 && /win32/i.test(navigator.platform) ? 4 : 0;


webfxMenuItemDefaultHeight		= 18;
webfxMenuItemDefaultText		= "Untitled";
webfxMenuItemDefaultHref		= "javascript:void(0)";

webfxMenuSeparatorDefaultHeight	= 6;

webfxMenuDefaultEmptyText		= "Empty";

webfxMenuDefaultUseAutoPosition	= nn6 ? false : true;



// other global constants

webfxMenuImagePath				= "";

webfxMenuUseHover				= opera ? true : false;
webfxMenuHideTime				= 500;
webfxMenuShowTime				= 200;



var webFXMenuHandler = {
	idCounter		:	0,
	idPrefix		:	"webfx-menu-object-",
	all				:	{},
	getId			:	function () { return this.idPrefix + this.idCounter++; },
	overMenuItem	:	function (oItem) {
		if (this.showTimeout != null)
			window.clearTimeout(this.showTimeout);
		if (this.hideTimeout != null)
			window.clearTimeout(this.hideTimeout);
		var jsItem = this.all[oItem.id];
		if (webfxMenuShowTime <= 0)
			this._over(jsItem);
		else if ( jsItem )
			//this.showTimeout = window.setTimeout(function () { webFXMenuHandler._over(jsItem) ; }, webfxMenuShowTime);
			// I hate IE5.0 because the piece of shit crashes when using setTimeout with a function object
			this.showTimeout = window.setTimeout("webFXMenuHandler._over(webFXMenuHandler.all['" + jsItem.id + "'])", webfxMenuShowTime);
	},
	outMenuItem	:	function (oItem) {
		if (this.showTimeout != null)
			window.clearTimeout(this.showTimeout);
		if (this.hideTimeout != null)
			window.clearTimeout(this.hideTimeout);
		var jsItem = this.all[oItem.id];
		if (webfxMenuHideTime <= 0)
			this._out(jsItem);
		else if ( jsItem ) 
			//this.hideTimeout = window.setTimeout(function () { webFXMenuHandler._out(jsItem) ; }, webfxMenuHideTime);
			this.hideTimeout = window.setTimeout("webFXMenuHandler._out(webFXMenuHandler.all['" + jsItem.id + "'])", webfxMenuHideTime);
	},
	blurMenu		:	function (oMenuItem) {
		window.setTimeout("webFXMenuHandler.all[\"" + oMenuItem.id + "\"].subMenu.hide();", webfxMenuHideTime);
	},
	_over	:	function (jsItem) {
		if (jsItem.subMenu) {
			jsItem.parentMenu.hideAllSubs();
			jsItem.subMenu.show();
		}
		else
			jsItem.parentMenu.hideAllSubs();
	},
	_out	:	function (jsItem) {
		// find top most menu
		var root = jsItem;
		var m;
		if (root instanceof WebFXMenuButton)
			m = root.subMenu;
		else {
			m = jsItem.parentMenu;
			while (m.parentMenu != null && !(m.parentMenu instanceof WebFXMenuBar))
				m = m.parentMenu;
		}
		if (m != null)	
			m.hide();	
	},
	hideMenu	:	function (menu) {
		if (this.showTimeout != null)
			window.clearTimeout(this.showTimeout);
		if (this.hideTimeout != null)
			window.clearTimeout(this.hideTimeout);

		this.hideTimeout = window.setTimeout("webFXMenuHandler.all['" + menu.id + "'].hide()", webfxMenuHideTime);
	},
	showMenu	:	function (menu, src, dir) {
		if (this.showTimeout != null)
			window.clearTimeout(this.showTimeout);
		if (this.hideTimeout != null)
			window.clearTimeout(this.hideTimeout);

		if (arguments.length < 3)
			dir = "vertical";
		
		menu.show(src, dir);
	}
};

function WebFXMenu() {
	this._menuItems	= [];
	this._subMenus	= [];
	this.id			= webFXMenuHandler.getId();
	this.top		= 0;
	this.left		= 0;
	this.shown		= false;
	this.parentMenu	= null;
	webFXMenuHandler.all[this.id] = this;
}

WebFXMenu.prototype.width			= webfxMenuDefaultWidth;
WebFXMenu.prototype.emptyText		= webfxMenuDefaultEmptyText;
WebFXMenu.prototype.useAutoPosition	= webfxMenuDefaultUseAutoPosition;

WebFXMenu.prototype.borderLeft		= webfxMenuDefaultBorderLeft;
WebFXMenu.prototype.borderRight		= webfxMenuDefaultBorderRight;
WebFXMenu.prototype.borderTop		= webfxMenuDefaultBorderTop;
WebFXMenu.prototype.borderBottom	= webfxMenuDefaultBorderBottom;

WebFXMenu.prototype.paddingLeft		= webfxMenuDefaultPaddingLeft;
WebFXMenu.prototype.paddingRight	= webfxMenuDefaultPaddingRight;
WebFXMenu.prototype.paddingTop		= webfxMenuDefaultPaddingTop;
WebFXMenu.prototype.paddingBottom	= webfxMenuDefaultPaddingBottom;

WebFXMenu.prototype.shadowLeft		= webfxMenuDefaultShadowLeft;
WebFXMenu.prototype.shadowRight		= webfxMenuDefaultShadowRight;
WebFXMenu.prototype.shadowTop		= webfxMenuDefaultShadowTop;
WebFXMenu.prototype.shadowBottom	= webfxMenuDefaultShadowBottom;



WebFXMenu.prototype.add = function (menuItem) {
	this._menuItems[this._menuItems.length] = menuItem;
	if (menuItem.subMenu) {
		this._subMenus[this._subMenus.length] = menuItem.subMenu;
		menuItem.subMenu.parentMenu = this;
	}
	
	menuItem.parentMenu = this;
};

WebFXMenu.prototype.show = function (relObj, sDir) {
	if (this.useAutoPosition)
		this.position(relObj, sDir);

	var divElement = document.getElementById(this.id);
	if ( divElement ) {

	  divElement.style.left = opera ? this.left : this.left + "px";
	  divElement.style.top = opera ? this.top : this.top + "px";
	  divElement.style.visibility = "visible";

	  if ( ie ) {
	    var shimElement = document.getElementById(this.id + "Shim");
	    if ( shimElement ) {
	      shimElement.style.width = divElement.offsetWidth;
	      shimElement.style.height = divElement.offsetHeight;
	      shimElement.style.top = divElement.style.top;
	      shimElement.style.left = divElement.style.left;
	      /*shimElement.style.zIndex = divElement.style.zIndex - 1; */
	      shimElement.style.display = "block";
	      shimElement.style.filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';
	    }
	  }

	}

	this.shown = true;

	if (this.parentMenu)
		this.parentMenu.show();
};

WebFXMenu.prototype.hide = function () {
	this.hideAllSubs();
	var divElement = document.getElementById(this.id);
	if ( divElement ) {
	  divElement.style.visibility = "hidden";
	  if ( ie ) {
	    var shimElement = document.getElementById(this.id + "Shim");
	    if ( shimElement ) {
	      shimElement.style.display = "none";
	    }
	  }
	}

	this.shown = false;
};

WebFXMenu.prototype.hideAllSubs = function () {
	for (var i = 0; i < this._subMenus.length; i++) {
		if (this._subMenus[i].shown)
			this._subMenus[i].hide();
	}
};

WebFXMenu.prototype.toString = function () {
	var top = this.top + this.borderTop + this.paddingTop;
	var str = "<div id='" + this.id + "' class='webfx-menu' style='" + 
	"width:" + (!ieBox  ?
		this.width - this.borderLeft - this.paddingLeft - this.borderRight - this.paddingRight  : 
		this.width) + "px;" +
	(this.useAutoPosition ?
		"left:" + this.left + "px;" + "top:" + this.top + "px;" :
		"") +
	(ie50 ? "filter: none;" : "") +
	"'>";

	if (this._menuItems.length == 0) {
		str +=	"<span class='webfx-menu-empty'>" + this.emptyText + "</span>";
	}
	else {	
		str += '<span class="webfx-menu-title" onmouseover="webFXMenuHandler.overMenuItem(this)"' +
			(webfxMenuUseHover ? " onmouseout='webFXMenuHandler.outMenuItem(this)'" : "") +
			 '>' + this.emptyText + '</span>';
        	// str += '<div id="' + this.id + '-title">' + this.emptyText + '</div>';
		// loop through all menuItems
		for (var i = 0; i < this._menuItems.length; i++) {
			var mi = this._menuItems[i];
			str += mi;
			if (!this.useAutoPosition) {
				if (mi.subMenu && !mi.subMenu.useAutoPosition)
					mi.subMenu.top = top - mi.subMenu.borderTop - mi.subMenu.paddingTop;
				top += mi.height;
			}
		}

	}
	
	str += "</div>";

	if ( ie ) {
          str += "<iframe id='" + this.id + "Shim' src='javascript:false;' scrolling='no' frameBorder='0' style='position:absolute; top:0px; left: 0px; display:none;'></iframe>";
	}
	
	for (var i = 0; i < this._subMenus.length; i++) {
		this._subMenus[i].left = this.left + this.width - this._subMenus[i].borderLeft;
		str += this._subMenus[i];
	}
	
	return str;
};
// WebFXMenu.prototype.position defined later

function WebFXMenuItem(sText, sHref, sToolTip, oSubMenu) {
	this.text = sText || webfxMenuItemDefaultText;
	this.href = (sHref == null || sHref == "") ? webfxMenuItemDefaultHref : sHref;
	this.subMenu = oSubMenu;
	if (oSubMenu)
		oSubMenu.parentMenuItem = this;
	this.toolTip = sToolTip;
	this.id = webFXMenuHandler.getId();
	webFXMenuHandler.all[this.id] = this;
};
WebFXMenuItem.prototype.height = webfxMenuItemDefaultHeight;
WebFXMenuItem.prototype.toString = function () {
	return	"<a" +
			" id='" + this.id + "'" +
			" href=\"" + this.href + "\"" +
			(this.toolTip ? " title=\"" + this.toolTip + "\"" : "") +
			" onmouseover='webFXMenuHandler.overMenuItem(this)'" +
			(webfxMenuUseHover ? " onmouseout='webFXMenuHandler.outMenuItem(this)'" : "") +
			(this.subMenu ? " unselectable='on' tabindex='-1'" : "") +
			">" +
			(this.subMenu ? "<img class='arrow' src=\"" + webfxMenuImagePath + "arrow.right.black.png\">" : "") +
			this.text + 
			"</a>";
};


function WebFXMenuSeparator() {
	this.id = webFXMenuHandler.getId();
	webFXMenuHandler.all[this.id] = this;
};
WebFXMenuSeparator.prototype.height = webfxMenuSeparatorDefaultHeight;
WebFXMenuSeparator.prototype.toString = function () {
	return	"<div" +
			" id='" + this.id + "'" +
			(webfxMenuUseHover ? 
			" onmouseover='webFXMenuHandler.overMenuItem(this)'" +
			" onmouseout='webFXMenuHandler.outMenuItem(this)'"
			:
			"") +
			"></div>"
};

function WebFXMenuBar() {
	this._parentConstructor = WebFXMenu;
	this._parentConstructor();
}
WebFXMenuBar.prototype = new WebFXMenu;
WebFXMenuBar.prototype.toString = function () {
	var str = "<div id='" + this.id + "' class='webfx-menu-bar'>";
	
	// loop through all menuButtons
	for (var i = 0; i < this._menuItems.length; i++)
		str += this._menuItems[i];
	
	str += "</div>";

	for (var i = 0; i < this._subMenus.length; i++)
		str += this._subMenus[i];
	
	return str;
};

function WebFXMenuButton(sText, sHref, sToolTip, oSubMenu) {
	this._parentConstructor = WebFXMenuItem;
	this._parentConstructor(sText, sHref, sToolTip, oSubMenu);
}
WebFXMenuButton.prototype = new WebFXMenuItem;
WebFXMenuButton.prototype.toString = function () {
	return	"<a" +
			" id='" + this.id + "'" +
			" href='" + this.href + "'" +
			(this.toolTip ? " title='" + this.toolTip + "'" : "") +
			(webfxMenuUseHover ?
				(" onmouseover='webFXMenuHandler.overMenuItem(this)'" +
				" onmouseout='webFXMenuHandler.outMenuItem(this)'") :
				(
					" onfocus='webFXMenuHandler.overMenuItem(this)'" +
					(this.subMenu ?
						" onblur='webFXMenuHandler.blurMenu(this)'" :
						""
					)
				)) +
			">" +
			this.text + 
			(this.subMenu ? "<img class='arrow' src='" + webfxMenuImagePath + "arrow.down.png'>" : "") +				
			"</a>";
};





/* Position functions */


function getInnerLeft(el, debug) {

	if (el == null) return 0;

	if (ieBox && el == document.body || !ieBox && el == document.documentElement) return 0;

        //if ( debug ) 
	//  alert ( 'getInnerLeft: ' + getLeft(el) + ' - ' + getBorderLeft(el) );

	return parseInt( getLeft(el) + parseInt(getBorderLeft(el)) );

}



function getLeft(el, debug) {

	if (el == null) return 0;

        //if ( debug )
	//  alert ( el + ': ' + el.offsetLeft + ' - ' + getInnerLeft(el.offsetParent) );

	return parseInt( el.offsetLeft + parseInt(getInnerLeft(el.offsetParent)) );

}



function getInnerTop(el) {

	if (el == null) return 0;

	if (ieBox && el == document.body || !ieBox && el == document.documentElement) return 0;

	return parseInt( getTop(el) + parseInt(getBorderTop(el)) );

}



function getTop(el) {

	if (el == null) return 0;

	return parseInt( el.offsetTop + parseInt(getInnerTop(el.offsetParent)) );

}



function getBorderLeft(el) {

	return ie ?

		el.clientLeft :

		( khtml 
		    ? parseInt(document.defaultView.getComputedStyle(el, null).getPropertyValue("border-left-width"))
		    : parseInt(window.getComputedStyle(el, null).getPropertyValue("border-left-width")) 
		);

}



function getBorderTop(el) {

	return ie ?

		el.clientTop :

		( khtml 
		    ? parseInt(document.defaultView.getComputedStyle(el, null).getPropertyValue("border-left-width"))
		    : parseInt(window.getComputedStyle(el, null).getPropertyValue("border-top-width"))
		);

}



function opera_getLeft(el) {

	if (el == null) return 0;

	return el.offsetLeft + opera_getLeft(el.offsetParent);

}



function opera_getTop(el) {

	if (el == null) return 0;

	return el.offsetTop + opera_getTop(el.offsetParent);

}



function getOuterRect(el, debug) {

	return {

		left:	(opera ? opera_getLeft(el) : getLeft(el, debug)),

		top:	(opera ? opera_getTop(el) : getTop(el)),

		width:	el.offsetWidth,

		height:	el.offsetHeight

	};

}



// mozilla bug! scrollbars not included in innerWidth/height

function getDocumentRect(el) {

	return {

		left:	0,

		top:	0,

		width:	(ie ?

					(ieBox ? document.body.clientWidth : document.documentElement.clientWidth) :

					window.innerWidth

				),

		height:	(ie ?

					(ieBox ? document.body.clientHeight : document.documentElement.clientHeight) :

					window.innerHeight

				)

	};

}



function getScrollPos(el) {

	return {

		left:	(ie ?

					(ieBox ? document.body.scrollLeft : document.documentElement.scrollLeft) :

					window.pageXOffset

				),

		top:	(ie ?

					(ieBox ? document.body.scrollTop : document.documentElement.scrollTop) :

					window.pageYOffset

				)

	};

}


/* end position functions */

WebFXMenu.prototype.position = function (relEl, sDir) {
	var dir = sDir;
	// find parent item rectangle, piRect
	var piRect;
	if (!relEl) {
		var pi = this.parentMenuItem;
		if (!this.parentMenuItem)
			return;
		
		relEl = document.getElementById(pi.id);
		if (dir == null)
			dir = pi instanceof WebFXMenuButton ? "vertical" : "horizontal";
		//alert('created RelEl from parent: ' + pi.id);
		piRect = getOuterRect(relEl, 1);
	}
	else if (relEl.left != null && relEl.top != null && relEl.width != null && relEl.height != null) {	// got a rect
		//alert('passed a Rect as RelEl: ' + typeof(relEl));

		piRect = relEl;
	}
	else {
		//alert('passed an element as RelEl: ' + typeof(relEl));
		piRect = getOuterRect(relEl);
	}

	var menuEl = document.getElementById(this.id);
	var menuRect = getOuterRect(menuEl);
	var docRect = getDocumentRect();
	var scrollPos = getScrollPos();
	var pMenu = this.parentMenu;
	
	if (dir == "vertical") {
		if (piRect.left + menuRect.width - scrollPos.left <= docRect.width) {
			//alert('piRect.left: ' + piRect.left);
			this.left = piRect.left;
//			if ( ! ie )
//			  this.left = this.left + 138;
		} else if (docRect.width >= menuRect.width) {
			//konq (not safari though) winds up here by accident and positions the menus all weird
			//alert('docRect.width + scrollPos.left - menuRect.width');

			this.left = docRect.width + scrollPos.left - menuRect.width;
		} else {
			//alert('scrollPos.left: ' + scrollPos.left);
			this.left = scrollPos.left;
		}
			
		if (piRect.top + piRect.height + menuRect.height <= docRect.height + scrollPos.top)

			this.top = piRect.top + piRect.height;

		else if (piRect.top - menuRect.height >= scrollPos.top)

			this.top = piRect.top - menuRect.height;

		else if (docRect.height >= menuRect.height)

			this.top = docRect.height + scrollPos.top - menuRect.height;

		else

			this.top = scrollPos.top;
	}
	else {
		if (piRect.top + menuRect.height - this.borderTop - this.paddingTop <= docRect.height + scrollPos.top)

			this.top = piRect.top - this.borderTop - this.paddingTop;

		else if (piRect.top + piRect.height - menuRect.height + this.borderTop + this.paddingTop >= 0)

			this.top = piRect.top + piRect.height - menuRect.height + this.borderBottom + this.paddingBottom + this.shadowBottom;

		else if (docRect.height >= menuRect.height)

			this.top = docRect.height + scrollPos.top - menuRect.height;

		else

			this.top = scrollPos.top;



		var pMenuPaddingLeft = pMenu ? pMenu.paddingLeft : 0;

		var pMenuBorderLeft = pMenu ? pMenu.borderLeft : 0;

		var pMenuPaddingRight = pMenu ? pMenu.paddingRight : 0;

		var pMenuBorderRight = pMenu ? pMenu.borderRight : 0;

		

		if (piRect.left + piRect.width + menuRect.width + pMenuPaddingRight +

			pMenuBorderRight - this.borderLeft + this.shadowRight <= docRect.width + scrollPos.left)

			this.left = piRect.left + piRect.width + pMenuPaddingRight + pMenuBorderRight - this.borderLeft;

		else if (piRect.left - menuRect.width - pMenuPaddingLeft - pMenuBorderLeft + this.borderRight + this.shadowRight >= 0)

			this.left = piRect.left - menuRect.width - pMenuPaddingLeft - pMenuBorderLeft + this.borderRight + this.shadowRight;

		else if (docRect.width >= menuRect.width)

			this.left = docRect.width  + scrollPos.left - menuRect.width;

		else

			this.left = scrollPos.left;
	}
};

Index: menu.html
===================================================================
RCS file: /home/cvs/cvsroot/freeside/httemplate/elements/menu.html,v
retrieving revision 1.18
retrieving revision 1.19
diff -u -d -r1.18 -r1.19
--- menu.html	25 Jan 2007 06:00:40 -0000	1.18
+++ menu.html	26 Jan 2007 08:04:36 -0000	1.19
@@ -1,6 +1,17 @@
 <script type="text/javascript" src="<%$fsurl%>elements/cssexpr.js"></script>
-<script type="text/javascript" src="<%$fsurl%>elements/xmenu.js"></script>
-<link href="<%$fsurl%>elements/xmenu.css" type="text/css" rel="stylesheet">
+
+% if ( $opt{'position'} eq 'top' ) {
+
+  <script type="text/javascript" src="<%$fsurl%>elements/xmenu.top.js"></script>
+  <link href="<%$fsurl%>elements/xmenu.top.css" type="text/css" rel="stylesheet">
+
+% } else {  # elsif ( $opt{'position'} eq 'left' ) {
+
+  <script type="text/javascript" src="<%$fsurl%>elements/xmenu.js"></script>
+  <link href="<%$fsurl%>elements/xmenu.css" type="text/css" rel="stylesheet">
+
+% }
+
 <link href="<%$fsurl%>elements/freeside.css" type="text/css" rel="stylesheet">
 
 <SCRIPT TYPE="text/javascript">



More information about the freeside-commits mailing list