[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
- Previous message: [freeside-commits] freeside/httemplate/pref pref.html, 1.1,
1.2 pref-process.html, 1.1, 1.2
- Next message: [freeside-commits] freeside/httemplate/images arrow.down.png, 1.1,
1.2 menu-left-example.png, NONE, 1.1 menu-top-example.png, NONE, 1.1
- Messages sorted by:
[ date ]
[ thread ]
[ subject ]
[ author ]
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">
- Previous message: [freeside-commits] freeside/httemplate/pref pref.html, 1.1,
1.2 pref-process.html, 1.1, 1.2
- Next message: [freeside-commits] freeside/httemplate/images arrow.down.png, 1.1,
1.2 menu-left-example.png, NONE, 1.1 menu-top-example.png, NONE, 1.1
- Messages sorted by:
[ date ]
[ thread ]
[ subject ]
[ author ]
More information about the freeside-commits
mailing list