*/
/* -------------------------------------------------------------------------- */
-
/* --------------------------------------------------------------------------
Define the information for a single menu item (both main bar and sub-menu).
- Each menu item has an associated filename, title, and description.
- The title and description are translated, but not the filename.
+ Each menu item has an associated filename, name, and description.
+ The name and description are translated, but not the filename.
+
+ The menu bar object contains an array of dropdown menus.
+ The dropdown menu object contains an array of menu commands.
+
+ The calling page should call the appropriate members to construct a menubar.
+ Example:
+ var bar = new MenuBar(7);
+
+ var dropdown = bar.addDropdown("Menu One", 20);
+ dropdown.addItem("Command One", "This is the first item", "#");
+ dropdown.addItem("Command Two", "This is the second item", "#");
+ dropdown.addItem("Command Three", "This is the third item", "#");
+ dropdown = bar.addDropdown("Percoidei", 10);
+ dropdown.addItem("Remoras", "", "#");
+ dropdown.addItem("Tigerfishes", "", "#");
*/
-function MenuItem(strFilename, strTitle, strDescription, menuSub)
+function MenuBar(iWidth)
{
- this.strFilename = strFilename;
- this.strTitle = strTitle;
- this.strDescription = strDescription;
- this.menuSub = menuSub;
+ // no sense passing this in because it's hardcoded in the CSS
+ this._strID = "idMenu"; // id of the entire menubar
+
+ this._iWidth = iWidth; // width of each menu item on the bar
+ this._menus = new Array(); // array of dropdown menus
+
+
+ this.addDropdown = function(strName, iWidth)
+ {
+ var dropdown = new MenuDropdown(strName, iWidth);
+ this._menus.push(dropdown);
+ return dropdown;
+ };
+
+ /*
+ This writes out the menu bar and its dropdown menus.
+ */
+ this.write = function()
+ {
+ document.write("<ul id=\"" + this._strID + "\">\n");
+ for (var i = 0; i < this._menus.length; ++i)
+ this._menus[i].write(this._iWidth);
+ document.write("<\/ul>\n");
+ };
}
/*
- Arguments:
- User name: "admin" or "power" or "user"
- Standard: "annex_c" or ... what?
- Protocol: "Bridge" or ... what?
- IP extension: 0 | 1
- Firewall: 0 | 1
- NAT: 0 | 1
- Wireless: 0 | 1
- QoS: 0 | 1
+ This represents a dropdown menu.
*/
-function createMenu(strUsername, strStd, strProtocol, bIPext, bFirewall, bNAT, strWireless, bQoS)
+function MenuDropdown(strName, iWidth)
{
- if (strUsername == "user")
- return createMenuUser(strWireless);
- else
- return createMenuAdmin(strStd, strProtocol, bIPext, bFirewall, bNAT, strWireless, bQoS);
-}
+ this._strName = strName;
+ this._iWidth = iWidth;
+ this._menuItems = new Array();
-/* --------------------------------------------------------------------------
+ this.addItem = function(strName, strDescription, strFilename)
+ {
+ this._menuItems.push(new MenuCommand(strName, strDescription, strFilename));
+ };
- These represent the various menus. There is a main menu bar and some sub-menus.
- The second and third strings in each item need to be translated.
- The first string is a filename and does not need to be translated.
+ /*
+ Writes the HTML for a dropdown menu.
+
+ <li width=X><label width=X>Menu One</label>
+ <ul width=Y>
+ .
+ .
+ </ul>
+ </li>
+ */
+ this.write = function(iWidth)
+ {
+ document.write("<li style=\"width: " + iWidth + "em;\"><label style=\"width: " + iWidth + "em;\">" + this._strName + "<\/label>");
+ document.write(" <ul style=\"width: " + this._iWidth + "em;\">\n");
+ for (var i = 0; i < this._menuItems.length; ++i)
+ this._menuItems[i].write(this._iWidth);
+ document.write(" <\/ul>\n");
+ document.write("<\/li>\n");
+ };
+}
- This is the only section that contains text to be translated.
- The tag below must not be modified. It is used by
- Translation to extract the text to be translated.
- *** TRANSLATION START -->
+/*
+ This represents a menu command.
*/
-
-// N.B.: All filenames must be in lowercase here.
-
-function createMenuUser(strWireless)
+function MenuCommand(strName, strDescription, strFilename)
{
-// SUBMENUS
- var menuStatus = new Array(
- new MenuItem("info.html", "General", ""),
- new MenuItem("wancfg.cmd?action=view", "DSL", ""),
- new MenuItem("logintro.html", "System Log", ""),
- new MenuItem("statsifc.html", "LAN Statistics", ""),
- new MenuItem("statswan.cmd", "WAN Statistics", ""),
- new MenuItem("statsatm.cmd", "ATM Statistics", ""),
- new MenuItem("statsadsl.html", "ADSL Statistics", "")
- );
-
-
- var menuLAN = new Array(
- new MenuItem("rtroutecfg.cmd?action=view", "Routing - Routing Table", ""),
- new MenuItem("arpview.cmd", "Routing - ARP Table", "")
- );
-
-
- var menuDevice = new Array(
- new MenuItem("backupsettings.html", "Back up Settings", ""),
- new MenuItem("updatesettings.html", "Restore Settings", ""),
- new MenuItem("upload.html", "Upgrade", ""),
- new MenuItem("diag.html", "Diagnostics", ""));
- if (strWireless == "1")
- menuDevice.push(new MenuItem("snmpconfig.html", "SNMP", ""));
-
-// MAIN MENU
- var menuMain = new Array(
- new MenuItem("", "Status", "View status", menuStatus),
- new MenuItem("", "LAN", "Configure local network", menuLAN),
- new MenuItem("", "Device", "Configure the modem", menuDevice)
- );
-
- return menuMain;
-}
+ this._strName = strName;
+ this._strDescription = strDescription;
+ this._strFilename = strFilename;
-function createMenuAdmin(strStd, strProtocol, bIPext, bFirewall, bNAT, strWireless, bQoS)
-{
- /*
- STATUS
- */
- var menuStatus = new Array(
- new MenuItem("info.html", "General", ""),
- new MenuItem("wancfg.cmd?action=view", "DSL", ""),
- new MenuItem("logview.cmd", "System Log", ""),
- new MenuItem("statsifc.html", "LAN Statistics", ""),
- new MenuItem("statswan.cmd", "WAN Statistics", ""),
- new MenuItem("statsatm.cmd", "ATM Statistics", ""),
- new MenuItem("statsadsl.html", "ADSL Statistics", "")
- );
/*
- INTERNET
+ Writes the HTML for a single menu command.
+
+ <li width=Y><a width=Y href="#" title="...">Command One</a></li>
*/
- var menuISP = new Array(
- new MenuItem( "wancfg.cmd", "WAN Setup", "")
- );
- if (strStd == "annex_c")
- menuISP.push(new MenuItem( "adslcfgc.html", "ADSL Settings", ""));
- else
- menuISP.push(new MenuItem( "adslcfg.html", "ADSL Settings", ""));
-
- if ( ((strProtocol == "PPPoE") && !bIPext) ||
- ((strProtocol == "PPPoA") && !bIPext) ||
- (strProtocol == "MER") ||
- (strProtocol == "IPoA"))
+ this.write = function(iWidth)
{
- menuISP.push( new MenuItem("rtdefaultcfg.html", "Default Gateway", ""),
- new MenuItem("dnscfg.html", "DNS Server", ""));
- }
+ document.write("<li style=\"width: " + iWidth + "em;\"><a style=\"width: " + iWidth + "em;\" href=\"" + this._strFilename + "\" title=\"" + this._strDescription + "\">" + this._strName + "<\/a><\/li>\n");
+ };
+}
+
- if (strProtocol != "Bridge")
- menuISP.push( new MenuItem("scacccntr.cmd?action=view", "Access Control - IP Addresses", ""),
- new MenuItem("scsrvcntr.cmd?action=view", "Access Control - Services", "")
- );
- menuISP.push(new MenuItem( "ddnsmngr.cmd", "Dynamic DNS", ""));
+/* --------------------------------------------------------------------------
+
+ This function works-around an IE bug.
+
+ Instead of copying the following code into every menu-using HTML file's head,
+ we make the HTML call initMenu() after the page is loaded.
+
+ <script type="text/javascript"><!--//--><![CDATA[//><!--
+fctIEfix = function()
+ {
+ var eltsLI = document.getElementById("idMenu").getElementsByTagName("LI");
+ for (var i = 0; i < eltsLI.length; ++i)
+ {
+ eltsLI[i].onmouseover = function()
+ {
+ this.className += " clsIEhover";
+ }
+ eltsLI[i].onmouseout = function()
+ {
+ this.className = this.className.replace(new RegExp(" clsIEhover\\b"), "");
+ }
+ }
+ }
+// Do this for IE only.
+if (window.attachEvent)
+ window.attachEvent("onload", fctIEfix);
+
+ //--><!]]></script>
+
+*/
+function initMenu()
+{
/*
- LAN
+ We only need to do this kludge if it's IE.
+ (And if we do it for Firefox, it breaks.)
*/
- var menuLAN = null;
- if ( ((strProtocol == "PPPoE") && !bIPext) ||
- ((strProtocol == "PPPoA") && !bIPext) ||
- (strProtocol == "MER") ||
- (strProtocol == "IPoA"))
- {
- menuLAN = new Array(
- new MenuItem("lancfg2.html", "DHCP Server", ""),
- new MenuItem("portmap.cmd", "Video Interfaces", ""),
- new MenuItem("rtroutecfg.cmd?action=view", "Routing - Routing Table", ""),
- new MenuItem("rtroutecfg.cmd?action=viewcfg", "Routing - Static Routes", ""),
- new MenuItem("ripcfg.cmd?action=view", "Routing - RIP", ""),
- new MenuItem("arpview.cmd", "Routing - ARP Table", ""),
- new MenuItem("dhcpinfo.html", "DHCP Clients", "")
- );
- if (bQoS)
- menuLAN.push(new MenuItem("qoscls.cmd?action=view", "Quality of Service", ""));
- }
- else if (strProtocol == "Bridge")
+ if (window.navigator.userAgent.indexOf("MSIE") <= 0)
+ return;
+
+
+ // no sense passing this in because it's hardcoded in the CSS
+ var strMenuID = "idMenu";
+
+ // avoid error if there's no menu
+ var eltMenu = document.getElementById(strMenuID);
+ if (eltMenu == null)
+ return;
+
+ var eltsLI = eltMenu.getElementsByTagName("LI");
+ for (var i = 0; i < eltsLI.length; ++i)
{
- menuLAN = new Array(
- new MenuItem("lancfg2.html", "DHCP Server", ""),
- new MenuItem("portmap.cmd", "Video Interfaces", "")
- );
- if (bQoS)
- menuLAN.push(new MenuItem("qoscls.cmd?action=view", "Quality of Service", ""));
+ eltsLI[i].onmouseover = function()
+ {
+ this.className += " clsIEhover";
+ }
+ eltsLI[i].onmouseout = function()
+ {
+ this.className = this.className.replace(new RegExp(" clsIEhover\\b"), "");
+ }
}
- /*
- WIRELESS
- */
- var menuWireless = new Array(
- new MenuItem("wlcfg.html", "Setup", ""),
- new MenuItem("wlstationlist.cmd?", "Client List", ""),
- new MenuItem("wlwds.cmd?action=view", "AP Mode", ""),
- new MenuItem("wlcfgadv.html", "Advanced Settings", "")
- );
/*
- SECURITY
+ Fix other IE bug(s).
*/
- var menuSecurity = new Array();
- if (strWireless == "1")
- {
- menuSecurity.push(
- new MenuItem("wlsecurity.html", "Wireless", ""),
- new MenuItem("wlmacflt.cmd?action=view", "MAC Filter", "")
- );
- }
-//WHY? if (strProtocol != "Bridge")
- menuSecurity.push(new MenuItem("password.html", "Device Login", ""));
- if ((strProtocol != "Not Applicable") && !bIPext)
- {
- if (strProtocol == "Bridge")
- {
- menuSecurity.push(
- new MenuItem("todmngr.tod?action=view", "Internet Access Control", ""),
- new MenuItem("scmacflt.cmd?action=view", "LAN MAC Filter", "")
- );
- }
-
- /*
- If it's not a bridge and the firewall is on, display filter commands
- */
- if ((strProtocol != "Bridge") && bFirewall)
- {
- menuSecurity.push(
- new MenuItem("todmngr.tod?action=view", "Internet Access Control", ""),
- new MenuItem("scoutflt.cmd?action=view", "IP Filtering - Outbound Filters", ""),
- new MenuItem("scinflt.cmd?action=view", "IP Filtering - Inbound Filters", "")
- );
- }
-
- /*
- If NAT is enabled, display virtual server commands
- */
- if (bNAT)
- {
- menuSecurity.push(
- new MenuItem("scvrtsrv.cmd?action=view", "Virtual Servers", ""),
- new MenuItem("scprttrg.cmd?action=view", "Port Triggering", ""),
- new MenuItem("scdmz.html", "DMZ Host", "")
- );
- }
- }
+ fixIEselect(strMenuID);
+}
+
+/* --------------------------------------------------------------------------
+ BUG: IE always displays SELECT elements on top.
+ FIX: Shim an <IFRAME> below the <UL> element.
+
+ We insert an IFRAME as the first child of each submenu's UL
+ element and set their z-indexes so that the IFRAME is above
+ SELECT elements but below the UL submenu itself.
+*/
+function fixIEselect(strMenuID)
+{
/*
- DEVICE
+ We only need to do this kludge if it's IE.
*/
- var menuDevice = new Array(
- new MenuItem("sntpcfg.html", "Time", ""),
- new MenuItem("ippcfg.html", "Print Server", ""),
- new MenuItem("backupsettings.html", "Back Up Settings", ""),
- new MenuItem("updatesettings.html", "Restore Settings", ""),
- new MenuItem("resetrouter.html", "Restart", ""),
- new MenuItem("upload.html", "Upgrade", ""),
- new MenuItem("defaultsettings.html", "Restore Defaults", ""),
- new MenuItem("diag.html", "Diagnostics", ""));
- if (strWireless == "1")
- menuDevice.push(new MenuItem("snmpconfig.html", "SNMP", ""));
-
-/*COMMENTED OUT OF HARP:
- var menuVoice = new Array(
- new MenuItem("scinflt.cmd?action=view", "NAT - Inbound Filters", ""),
- new MenuItem("scoutflt.cmd?action=view", "NAT - Outbound Filters", ""),
- new MenuItem("voicecfg.html", "Voice", ""),
- new MenuItem("voicemgcpview.cmd", "MGCP", ""),
- new MenuItem("voicestats45.html", "SIP", "")
- );
-*/
-
+ if (window.navigator.userAgent.indexOf("MSIE") <= 0)
+ return;
/*
- MAIN MENU
+ Only do it if there are <select> elements on the page.
*/
- var menuMain = new Array(
- new MenuItem("", "Status", "View status", menuStatus),
- new MenuItem("", "Internet", "Configure ISP settings", menuISP)
- );
- if (menuLAN != null)
- menuMain.push( new MenuItem("", "LAN", "Configure local network", menuLAN));
- if (strWireless == "1")
- menuMain.push( new MenuItem("", "Wireless", "Configure wireless settings", menuWireless));
- if (menuSecurity != null)
- menuMain.push( new MenuItem("", "Security", "Configure security", menuSecurity));
- menuMain.push( new MenuItem("", "Device", "Configure the modem", menuDevice)
-// NO VOICE new MenuItem("", "Voice", "View voice statistics", menuVoice)
- );
-
- return menuMain;
-}
+ if (document.getElementsByTagName("SELECT").length == 0)
+ return;
-/*
- <-- TRANSLATION END ***
- Nothing after this needs to be translated.
- The above tag must not be modified. It is used by
- Translation to extract the text to be translated.
+
+ var ieULs = document.getElementById(strMenuID).getElementsByTagName("UL");
+ // IE script to cover <SELECT> elements with <IFRAME>s
+ for (var i = 0; i < ieULs.length; i++)
+ {
+ var eltSubmenu = ieULs[i];
+
+ // The frame should be UNDER the submenu, so we set
+ // "opacity=80" to make it visible in case of a problem.
+/* We use the DOM instead of manipulating the HTML directly.
+ eltSubmenu.innerHTML = "<iframe src=\"about:blank\" scrolling=\"no\" frameborder=\"no\" \
+ style=\"position: absolute; left: 0; top: 0; z-index: -1; \
+ filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80);\">\
+ </iframe>" + eltSubmenu.innerHTML;
+
+ // get the IFRAME element and size it
+ //also works var eltOverlay = eltSubmenu.childNodes[0];
+ var eltOverlay = eltSubmenu.firstChild;
*/
+ var eltOverlay = document.createElement("iframe");
+ eltOverlay.setAttribute("src", "about:blank");
+ eltOverlay.setAttribute("scrolling", "no");
+ eltOverlay.setAttribute("frameBorder", "no");
+ eltOverlay.style.position = "absolute";
+ eltOverlay.style.left = 0;
+ eltOverlay.style.top = 0;
+ eltOverlay.style.zIndex = -1;
+ eltOverlay.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80);";
+ eltSubmenu.insertBefore(eltOverlay, eltSubmenu.firstChild);
+
+ // the width of the submenu, the <li> elements of the submenu <ul> tag
+ eltOverlay.style.width = eltSubmenu.offsetWidth + "px";
+
+// // Calculate height of "tallest/longest" menu
+// var iNumItems = eltSubmenu.getElementsByTagName("LI").length;
+// eltOverlay.style.height = (iNumItems * eltSubmenu.offsetHeight) + "px";
+ eltOverlay.style.height = eltSubmenu.offsetHeight + "px";
+
+ // put the submenu on top
+ eltSubmenu.style.zIndex = "99";
+ }
+}
projects / bcm963xx.git / blobdiff