userapps/broadcom/cfm/html/usr_menus.js

   1 /* -------------------------------------------------------------------------- */
   2 /*
   3    (c) 2004-2005 U.S. Robotics Corporation.
   4 */
   5 /* -------------------------------------------------------------------------- */
   6
   7 /* --------------------------------------------------------------------------
   8
   9         Define the information for a single menu item (both main bar and sub-menu).
  10         Each menu item has an associated filename, name, and description.
  11         The name and description are translated, but not the filename.
  12
  13         The menu bar object contains an array of dropdown menus.
  14         The dropdown menu object contains an array of menu commands.
  15
  16         The calling page should call the appropriate members to construct a menubar.
  17         Example:
  18                 var bar = new MenuBar(7);
  19
  20                 var dropdown = bar.addDropdown("Menu One", 20);
  21                 dropdown.addItem("Command One",         "This is the first item",       "#");
  22                 dropdown.addItem("Command Two",         "This is the second item",      "#");
  23                 dropdown.addItem("Command Three",       "This is the third item",       "#");
  24
  25                 dropdown = bar.addDropdown("Percoidei", 10);
  26                 dropdown.addItem("Remoras",             "",     "#");
  27                 dropdown.addItem("Tigerfishes", "",     "#");
  28 */
  29
  30 function MenuBar(iWidth)
  31 {
  32         // no sense passing this in because it's hardcoded in the CSS
  33         this._strID = "idMenu";         // id of the entire menubar
  34
  35         this._iWidth = iWidth;          // width of each menu item on the bar
  36         this._menus = new Array();      // array of dropdown menus
  37
  38
  39         this.addDropdown = function(strName, iWidth)
  40         {
  41                 var dropdown = new MenuDropdown(strName, iWidth);
  42                 this._menus.push(dropdown);
  43                 return dropdown;
  44         };
  45
  46         /*
  47                 This writes out the menu bar and its dropdown menus.
  48         */
  49         this.write = function()
  50         {
  51                 document.write("<ul id=\"" + this._strID + "\">\n");
  52                 for (var i = 0; i < this._menus.length; ++i)
  53                         this._menus[i].write(this._iWidth);
  54                 document.write("<\/ul>\n");
  55         };
  56 }
  57
  58
  59 /*
  60         This represents a dropdown menu.
  61 */
  62 function MenuDropdown(strName, iWidth)
  63 {
  64         this._strName = strName;
  65         this._iWidth = iWidth;
  66         this._menuItems = new Array();
  67
  68
  69         this.addItem = function(strName, strDescription, strFilename)
  70         {
  71                 this._menuItems.push(new MenuCommand(strName, strDescription, strFilename));
  72         };
  73
  74
  75         /*
  76                 Writes the HTML for a dropdown menu.
  77
  78                 <li width=X><label width=X>Menu One</label>
  79                         <ul width=Y>
  80                                 .
  81                                 .
  82                         </ul>
  83                 </li>
  84         */
  85         this.write = function(iWidth)
  86         {
  87                 document.write("<li style=\"width: " + iWidth + "em;\"><label style=\"width: " + iWidth + "em;\">" + this._strName + "<\/label>");
  88                 document.write("        <ul style=\"width: " + this._iWidth + "em;\">\n");
  89                 for (var i = 0; i < this._menuItems.length; ++i)
  90                         this._menuItems[i].write(this._iWidth);
  91                 document.write("        <\/ul>\n");
  92                 document.write("<\/li>\n");
  93         };
  94 }
  95
  96
  97 /*
  98         This represents a menu command.
  99 */
 100 function MenuCommand(strName, strDescription, strFilename)
 101 {
 102         this._strName = strName;
 103         this._strDescription = strDescription;
 104
 105         this._strFilename = strFilename;
 106
 107
 108         /*
 109                 Writes the HTML for a single menu command.
 110
 111                 <li width=Y><a width=Y href="#" title="...">Command One</a></li>
 112         */
 113         this.write = function(iWidth)
 114         {
 115                 document.write("<li style=\"width: " + iWidth + "em;\"><a style=\"width: " + iWidth + "em;\" href=\"" + this._strFilename + "\" title=\"" + this._strDescription + "\">" + this._strName + "<\/a><\/li>\n");
 116         };
 117 }
 118
 119
 120
 121 /* --------------------------------------------------------------------------
 122
 123         This function works-around an IE bug.
 124
 125         Instead of copying the following code into every menu-using HTML file's head,
 126         we make the HTML call initMenu() after the page is loaded.
 127
 128         <script type="text/javascript"><!--//--><![CDATA[//><!--
 129 fctIEfix = function()
 130                                 {
 131                                         var eltsLI = document.getElementById("idMenu").getElementsByTagName("LI");
 132                                         for (var i = 0; i < eltsLI.length; ++i)
 133                                         {
 134                                                 eltsLI[i].onmouseover = function()
 135                                                                                                                 {
 136                                                                                                                         this.className += " clsIEhover";
 137                                                                                                                 }
 138                                                 eltsLI[i].onmouseout = function()
 139                                                                                                                 {
 140                                                                                                                         this.className = this.className.replace(new RegExp(" clsIEhover\\b"), "");
 141                                                                                                                 }
 142                                         }
 143                                 }
 144 // Do this for IE only.
 145 if (window.attachEvent)
 146         window.attachEvent("onload", fctIEfix);
 147
 148         //--><!]]></script>
 149
 150 */
 151 function initMenu()
 152 {
 153         /*
 154                 We only need to do this kludge if it's IE.
 155                 (And if we do it for Firefox, it breaks.)
 156         */
 157         if (window.navigator.userAgent.indexOf("MSIE") <= 0)
 158                 return;
 159
 160
 161         // no sense passing this in because it's hardcoded in the CSS
 162         var strMenuID = "idMenu";
 163
 164         // avoid error if there's no menu
 165         var eltMenu = document.getElementById(strMenuID);
 166         if (eltMenu == null)
 167                 return;
 168
 169         var eltsLI = eltMenu.getElementsByTagName("LI");
 170         for (var i = 0; i < eltsLI.length; ++i)
 171         {
 172                 eltsLI[i].onmouseover = function()
 173                                                                                 {
 174                                                                                         this.className += " clsIEhover";
 175                                                                                 }
 176                 eltsLI[i].onmouseout = function()
 177                                                                                 {
 178                                                                                         this.className = this.className.replace(new RegExp(" clsIEhover\\b"), "");
 179                                                                                 }
 180         }
 181
 182
 183         /*
 184                 Fix other IE bug(s).
 185         */
 186         fixIEselect(strMenuID);
 187 }
 188
 189 /* --------------------------------------------------------------------------
 190
 191         BUG: IE always displays SELECT elements on top.
 192         FIX: Shim an <IFRAME> below the <UL> element.
 193
 194         We insert an IFRAME as the first child of each submenu's UL
 195         element and set their z-indexes so that the IFRAME is above
 196         SELECT elements but below the UL submenu itself.
 197 */
 198 function fixIEselect(strMenuID)
 199 {
 200         /*
 201                 We only need to do this kludge if it's IE.
 202         */
 203         if (window.navigator.userAgent.indexOf("MSIE") <= 0)
 204                 return;
 205         /*
 206                 Only do it if there are <select> elements on the page.
 207         */
 208         if (document.getElementsByTagName("SELECT").length == 0)
 209                 return;
 210
 211
 212         var ieULs = document.getElementById(strMenuID).getElementsByTagName("UL");
 213         // IE script to cover <SELECT> elements with <IFRAME>s
 214         for (var i = 0; i < ieULs.length; i++)
 215         {
 216                 var eltSubmenu = ieULs[i];
 217
 218                 // The frame should be UNDER the submenu, so we set
 219                 // "opacity=80" to make it visible in case of a problem.
 220 /* We use the DOM instead of manipulating the HTML directly.
 221                 eltSubmenu.innerHTML = "<iframe src=\"about:blank\" scrolling=\"no\" frameborder=\"no\" \
 222                                                                         style=\"position: absolute; left: 0; top: 0; z-index: -1; \
 223                                                                                 filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80);\">\
 224                                                                         </iframe>" + eltSubmenu.innerHTML;
 225
 226                 // get the IFRAME element and size it
 227                 //also works    var eltOverlay = eltSubmenu.childNodes[0];
 228                 var eltOverlay = eltSubmenu.firstChild;
 229 */
 230                 var eltOverlay = document.createElement("iframe");
 231                 eltOverlay.setAttribute("src", "about:blank");
 232                 eltOverlay.setAttribute("scrolling", "no");
 233                 eltOverlay.setAttribute("frameBorder", "no");
 234                 eltOverlay.style.position = "absolute";
 235                 eltOverlay.style.left = 0;
 236                 eltOverlay.style.top = 0;
 237                 eltOverlay.style.zIndex = -1;
 238                 eltOverlay.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=80);";
 239                 eltSubmenu.insertBefore(eltOverlay, eltSubmenu.firstChild);
 240
 241                 // the width of the submenu, the <li> elements of the submenu <ul> tag
 242                 eltOverlay.style.width = eltSubmenu.offsetWidth + "px";
 243
 244 //              // Calculate height of "tallest/longest" menu
 245 //              var iNumItems = eltSubmenu.getElementsByTagName("LI").length;
 246 //              eltOverlay.style.height = (iNumItems * eltSubmenu.offsetHeight) + "px";
 247                 eltOverlay.style.height = eltSubmenu.offsetHeight + "px";
 248
 249                 // put the submenu on top
 250                 eltSubmenu.style.zIndex = "99";
 251         }
 252 }