mcs/class/System.Web/System.Web.UI.WebControls/MenuModern.js

   1 /*
   2  * Authors:
   3  *      Marek Habersack <grendel@twistedcode.net>
   4  *
   5  * (C) 2010 Novell, Inc (http: *novell.com)
   6  *
   7  * Permission is hereby granted, free of charge, to any person obtaining
   8  * a copy of this software and associated documentation files (the
   9  * "Software"), to deal in the Software without restriction, including
  10  * without limitation the rights to use, copy, modify, merge, publish,
  11  * distribute, sublicense, and/or sell copies of the Software, and to
  12  * permit persons to whom the Software is furnished to do so, subject to
  13  * the following conditions:
  14  *
  15  * The above copyright notice and this permission notice shall be
  16  * included in all copies or substantial portions of the Software.
  17  *
  18  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  19  * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  20  * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  21  * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
  22  * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
  23  * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
  24  * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  25  *
  26  * This code serves only the List rendering mode of the Menu control in Mono
  27  *
  28  */
  29 if (!window.Sys) { window.Sys = {}; }
  30 if (!Sys.WebForms) { Sys.WebForms = {}; }
  31
  32 Sys.WebForms.Menu = function (options)
  33 {
  34         if (options == null)
  35                 throw "Sys.WebForms.Menu constructor requires options to be not null.";
  36
  37         if (options.element == null)
  38                 throw "options.element is required.";
  39
  40         if (options.orientation == null)
  41                 throw "options.orientation is required.";
  42
  43         if (typeof (options.element) == "string")
  44                 this.menuID = options.element;
  45         else
  46                 this.mainElement = options.element;
  47
  48         this.disappearAfter = options.disappearAfter || 500;
  49         this.orientation = options.orientation;
  50         this.tabIndex = options.tabIndex || 0;
  51         this.disabled = options.disabled || false;
  52         this.level = options.level || 0;
  53         this.menuItemIndex = 0;
  54
  55         if (this.level != 0) {
  56                 if (options.parentMenu == null)
  57                         throw "options.parentMenu is required for all submenus.";
  58
  59                 this.parentMenu = options.parentMenu;
  60         }
  61
  62         if (this.mainElement == null) {
  63                 this.mainElement = document.getElementById (this.menuID);
  64                 if (this.mainElement == null)
  65                         throw "Unable to find menu element with id '" + this.menuID + "'.";
  66
  67                 if (this.mainElement.tagName != "DIV")
  68                         throw "This script must be used only when the menu containing element is DIV.";
  69         }
  70
  71         /* Due to the way we generate the menu in the list mode, every submenu other than the root one is dynamic */
  72         if (this.level > 1) {
  73                 this.menuType = "dynamic";
  74                 if (options.parentMenu == null)
  75                         throw "options.parent is required for all submenus.";
  76
  77                 var subMenuId = Sys.WebForms.Menu.Helpers.getNextSubMenuId ();
  78                 this.parentMenu = options.parentMenu;
  79                 this.orientation = this.parentMenu.orientation;
  80                 this.path = this.parentMenu.path + subMenuId;
  81                 this.menuID = this.parentMenu.menuID;
  82                 if (this.mainElement.id == null || this.mainElement.id == "")
  83                         this.mainElement.id = this.menuID + ":submenu:" + subMenuId;
  84         } else {
  85                 this.menuType = "static";
  86                 if (this.level == 1) {
  87                         this.menuID = this.parentMenu.menuID;
  88                         this.orientation = this.parentMenu.orientation;
  89                 }
  90                 this.parentMenu = null;
  91                 this.path = "0";
  92                 this.mainElement.setAttribute ("tabindex", this.tabIndex);
  93                 this.mainElement.setAttribute ("role", this.orientation == "vertical" ? "menu" : "menubar");
  94                 with (this.mainElement.style) {
  95                         width = "auto";
  96                         position = "relative";
  97                 }
  98         }
  99
 100         if (this.level > 0) {
 101                 Sys.WebForms.Menu.Helpers.appendCssClass (this.mainElement, this.menuType);
 102         }
 103
 104         if (this.level <= 1)
 105                 Sys.WebForms.Menu.Helpers.setFloat (this.mainElement, "left");
 106
 107         this.loadItems ();
 108 }
 109
 110 Sys.WebForms.Menu.Helpers = {
 111         __subMenuCounter: 0,
 112         __menuItems: [],
 113         __popupToClose: null,
 114
 115         setPopupToClose: function (element) {
 116                 this.__popupToClose = element;
 117         },
 118
 119         getPopupToClose: function () {
 120                 return this.__popupToClose;
 121         },
 122
 123         setFloat: function (element, side) {
 124                 /* For standards-compliant browsers */
 125                 element.style.cssFloat = "left";
 126
 127                 /* For IE */
 128                 element.style.styleFloat = "left";
 129         },
 130
 131         appendCssClass: function (element, className) {
 132                 if (element == null || className == null)
 133                         return;
 134
 135                 var cname = element.className;
 136                 if (cname == null || cname == "")
 137                         cname = className;
 138                 else
 139                         cname += " " + className;
 140
 141                 element.className = cname;
 142         },
 143
 144         getNextSubMenuId: function () {
 145                 return ++this.__subMenuCounter;
 146         },
 147
 148         addMenuItem: function (item) {
 149                 if (item == null)
 150                         return;
 151
 152                 if (!(item instanceof Sys.WebForms.MenuItem))
 153                         throw "item must be an instance of Sys.WebForms.MenuItem";
 154
 155                 if (this.__menuItems [item.path] != null)
 156                         throw "item already exists (path " + item.path + ")";
 157
 158                 this.__menuItems [item.path] = item;
 159         },
 160
 161         getMenuItem: function (element) {
 162                 if (element == null)
 163                         return null;
 164
 165                 var itemPath = element ["__MonoMenuItemPath"];
 166                 if (itemPath == null)
 167                         return null;
 168
 169                 return this.__menuItems [itemPath];
 170         },
 171
 172         addEventHandler: function (element, eventType, handler, capture) {
 173                 /* There's also element.attachEvent, but it changes handler semantics on IE, so we don't
 174                  * even take it into consideration.
 175                  */
 176                 if (element.addEventListener)
 177                         element.addEventListener(eventType, handler, !!capture);
 178                 else
 179                         element ["on" + eventType] = handler;
 180         }
 181 };
 182
 183 Sys.WebForms.Menu.prototype.loadItems = function ()
 184 {
 185         var children = this.mainElement.childNodes;
 186         var count = children.length;
 187         var child;
 188
 189         for (var i = 0; i < count; i++) {
 190                 child = children [i];
 191                 if (child.nodeType != 1)
 192                         continue;
 193
 194                 if (child.tagName == "UL") {
 195                         var submenu = new Sys.WebForms.Menu ({ element: child, disappearAfter: this.disappearAfter, orientation: this.orientation,
 196                                                                disabled: this.disabled, level: this.level + 1, tabIndex: this.tabIndex, parentMenu: this});
 197                 } else if (child.tagName == "LI") {
 198                         var menuItem = new Sys.WebForms.MenuItem ({ element: child, menuType: this.menuType, disappearAfter: this.disappearAfter, orientation: this.orientation,
 199                                                                     disabled: this.disabled, level: this.level + 1, tabIndex: this.tabIndex, parentMenu: this});
 200                 }
 201         }
 202 }
 203
 204 Sys.WebForms.Menu.prototype.getNextMenuItemId = function ()
 205 {
 206         return ++this.menuItemIndex;
 207 }
 208
 209 Sys.WebForms.MenuItem = function (options)
 210 {
 211         if (options == null)
 212                 throw "Sys.WebForms.MenuItem constructor requires options to be not null.";
 213
 214         if (options.element == null)
 215                 throw "options.element must be set.";
 216
 217         if (options.menuType == null)
 218                 throw "options.menuType must be set.";
 219
 220         if (options.parentMenu == null)
 221                 throw "options.parentMenu is required.";
 222
 223         this.element = options.element;
 224         this.menuType = options.menuType;
 225         this.parentMenu = options.parentMenu;
 226         this.path = this.parentMenu.path + this.parentMenu.getNextMenuItemId ();
 227
 228         var children = this.element.childNodes;
 229         var child;
 230         var subMenu = null;
 231
 232         for (var i = 0; i < children.length; i++) {
 233                 child = children [i];
 234                 if (child.nodeType != 1)
 235                         continue;
 236
 237                 switch (child.tagName) {
 238                         case "A":
 239                                 Sys.WebForms.Menu.Helpers.appendCssClass (child, this.menuType);
 240                                 child.setAttribute ("tabindex", "-1");
 241                                 break;
 242
 243                         case "UL":
 244                                 this.subMenu = new Sys.WebForms.Menu ({ element: child, disappearAfter: options.disappearAfter, orientation: options.orientation,
 245                                                                         disabled: options.disabled, level: options.level, tabIndex: options.tabIndex, parentMenu: options.parentMenu});
 246                                 if (this.subMenu.menuType == "dynamic") {
 247                                         var topValue;
 248                                         var leftValue;
 249
 250                                         if (this.subMenu.orientation == "horizontal" && this.subMenu.parentMenu != null && this.subMenu.parentMenu.menuType == "static") {
 251                                                 topValue = "100%";
 252                                                 leftValue = "0px";
 253                                         } else {
 254                                                 topValue = "0px";
 255                                                 leftValue = "100%";
 256                                         }
 257
 258                                         with (this.subMenu.mainElement.style) {
 259                                                 display = "none";
 260                                                 position = "absolute";
 261                                                 top = topValue;
 262                                                 left = leftValue;
 263                                         }
 264                                 }
 265
 266                                 Sys.WebForms.Menu.Helpers.appendCssClass (this.element, "has-popup");
 267                                 this.element.setAttribute ("aria-haspopup", this.subMenu.mainElement.id);
 268                                 Sys.WebForms.Menu.Helpers.addEventHandler (this.element, "mouseover", this.mouseOverHandler);
 269                                 Sys.WebForms.Menu.Helpers.addEventHandler (this.element, "mouseout", this.mouseOutHandler);
 270                                 break;
 271                 }
 272         }
 273
 274         Sys.WebForms.Menu.Helpers.appendCssClass (this.element, this.menuType);
 275         this.element.style.position = "relative";
 276         this.element.setAttribute ("role", "menuitem");
 277         this.element ["__MonoMenuItemPath"] = this.path;
 278
 279         if (this.parentMenu.orientation == "horizontal" && this.parentMenu.menuType == "static")
 280                 Sys.WebForms.Menu.Helpers.setFloat (this.element, "left");
 281
 282         Sys.WebForms.Menu.Helpers.addMenuItem (this);
 283 }
 284
 285 Sys.WebForms.MenuItem.prototype.log = function (msg)
 286 {
 287         if (console && console.log)
 288                 console.log (msg);
 289 }
 290
 291 Sys.WebForms.MenuItem.prototype.hide = function (popup, leaveParentOpen)
 292 {
 293         if (popup == null || popup.mainElement == null || popup.menuType == "static")
 294                 return;
 295
 296         var current = popup;
 297         while (current != null) {
 298                 if (current.menuType == "static" || (leaveParentOpen && current == this.parentMenu))
 299                         break;
 300
 301                 if (current.mainElement != null)
 302                         current.mainElement.style.display = "none";
 303
 304                 if (current.hideTimerId != null) {
 305                         window.clearTimeout (current.hideTimerId);
 306                         current.hideTimerId = null;
 307                 }
 308
 309                 current = current.parentMenu;
 310         }
 311 }
 312
 313 Sys.WebForms.MenuItem.prototype.onMouseOver = function (popupId)
 314 {
 315         var cur = Sys.WebForms.Menu.Helpers.getPopupToClose ();
 316         if (cur != null) {
 317                 if (cur.hideTimerId != null) {
 318                         window.clearTimeout (cur.hideTimerId);
 319                         cur.hideTimerId = null;
 320                 }
 321                 this.hide (cur, true);
 322                 Sys.WebForms.Menu.Helpers.setPopupToClose (null);
 323         }
 324         if (popupId == null || popupId == "")
 325                 return;
 326
 327         var popup = document.getElementById (popupId);
 328         if (popup == null)
 329                 throw "Popup with id '" + popupId + "' could not be found.";
 330
 331         this.hide (cur, true);
 332         popup.style.display = "block";
 333 }
 334
 335 Sys.WebForms.MenuItem.prototype.onMouseOut = function (popupId)
 336 {
 337         if (popupId == null || popupId == "")
 338                 return;
 339
 340         var popup = document.getElementById (popupId);
 341         if (popup == null)
 342                 throw "Popup with id '" + popupId + "' could not be found.";
 343
 344         var cur = this.subMenu;
 345         if (cur != null) {
 346                 var myself = this;
 347                 cur.hideTimerId = window.setTimeout (function () {
 348                                                              myself.hide (cur, false);
 349                                                      },
 350                                                      this.subMenu.disappearAfter);
 351
 352         }
 353         Sys.WebForms.Menu.Helpers.setPopupToClose (cur);
 354 }
 355
 356 Sys.WebForms.MenuItem.prototype.mouseOverHandler = function (e)
 357 {
 358         var menuItem = Sys.WebForms.Menu.Helpers.getMenuItem (this);
 359         if (menuItem == null || !(menuItem instanceof Sys.WebForms.MenuItem)) {
 360                 e.returnResult = false;
 361                 e.cancelBuble = false;
 362                 throw "MenuItem could not be found in mouseover handler.";
 363         }
 364
 365         menuItem.onMouseOver (this.getAttribute ("aria-haspopup"));
 366         menuItem.finalizeEvent (e);
 367 }
 368
 369 Sys.WebForms.MenuItem.prototype.mouseOutHandler = function (e)
 370 {
 371         var menuItem = Sys.WebForms.Menu.Helpers.getMenuItem (this);
 372
 373         if (menuItem == null || !(menuItem instanceof Sys.WebForms.MenuItem)) {
 374                 e.returnResult = false;
 375                 e.cancelBuble = false;
 376                 throw "MenuItem could not be found in mouseout handler.";
 377         }
 378         menuItem.onMouseOut (this.getAttribute ("aria-haspopup"));
 379         menuItem.finalizeEvent (e);
 380 }
 381
 382 Sys.WebForms.MenuItem.prototype.finalizeEvent = function (e)
 383 {
 384         /* For standards-compliant browsers */
 385         if (e != null) {
 386                 if (e.preventDefault)
 387                         e.preventDefault();
 388                 else
 389                         e.returnResult = false;
 390
 391                 if (e.stopPropagation)
 392                         e.stopPropagation();
 393                 else
 394                         e.cancelBubble = true;
 395         }
 396
 397         /* For IE */
 398         if (window.event != null)
 399                 window.event.cancelBubble = true;
 400 }