[Summary view] [Print] [Text view]

   1  /*!
   2   * jQuery UI Menu 1.9.2
   3   * http://jqueryui.com
   4   *
   5   * Copyright 2012 jQuery Foundation and other contributors
   6   * Released under the MIT license.
   7   * http://jquery.org/license
   8   *
   9   * http://api.jqueryui.com/menu/
  10   *
  11   * Depends:
  12   *    jquery.ui.core.js
  13   *    jquery.ui.widget.js
  14   *    jquery.ui.position.js
  15   */
  16  (function( $, undefined ) {
  17  
  18  var mouseHandled = false;
  19  
  20  $.widget( "ui.menu", {
  21      version: "1.9.2",
  22      defaultElement: "<ul>",
  23      delay: 300,
  24      options: {
  25          icons: {
  26              submenu: "ui-icon-carat-1-e"
  27          },
  28          menus: "ul",
  29          position: {
  30              my: "left top",
  31              at: "right top"
  32          },
  33          role: "menu",
  34  
  35          // callbacks
  36          blur: null,
  37          focus: null,
  38          select: null
  39      },
  40  
  41      _create: function() {
  42          this.activeMenu = this.element;
  43          this.element
  44              .uniqueId()
  45              .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
  46              .toggleClass( "ui-menu-icons", !!this.element.find( ".ui-icon" ).length )
  47              .attr({
  48                  role: this.options.role,
  49                  tabIndex: 0
  50              })
  51              // need to catch all clicks on disabled menu
  52              // not possible through _on
  53              .bind( "click" + this.eventNamespace, $.proxy(function( event ) {
  54                  if ( this.options.disabled ) {
  55                      event.preventDefault();
  56                  }
  57              }, this ));
  58  
  59          if ( this.options.disabled ) {
  60              this.element
  61                  .addClass( "ui-state-disabled" )
  62                  .attr( "aria-disabled", "true" );
  63          }
  64  
  65          this._on({
  66              // Prevent focus from sticking to links inside menu after clicking
  67              // them (focus should always stay on UL during navigation).
  68              "mousedown .ui-menu-item > a": function( event ) {
  69                  event.preventDefault();
  70              },
  71              "click .ui-state-disabled > a": function( event ) {
  72                  event.preventDefault();
  73              },
  74              "click .ui-menu-item:has(a)": function( event ) {
  75                  var target = $( event.target ).closest( ".ui-menu-item" );
  76                  if ( !mouseHandled && target.not( ".ui-state-disabled" ).length ) {
  77                      mouseHandled = true;
  78  
  79                      this.select( event );
  80                      // Open submenu on click
  81                      if ( target.has( ".ui-menu" ).length ) {
  82                          this.expand( event );
  83                      } else if ( !this.element.is( ":focus" ) ) {
  84                          // Redirect focus to the menu
  85                          this.element.trigger( "focus", [ true ] );
  86  
  87                          // If the active item is on the top level, let it stay active.
  88                          // Otherwise, blur the active item since it is no longer visible.
  89                          if ( this.active && this.active.parents( ".ui-menu" ).length === 1 ) {
  90                              clearTimeout( this.timer );
  91                          }
  92                      }
  93                  }
  94              },
  95              "mouseenter .ui-menu-item": function( event ) {
  96                  var target = $( event.currentTarget );
  97                  // Remove ui-state-active class from siblings of the newly focused menu item
  98                  // to avoid a jump caused by adjacent elements both having a class with a border
  99                  target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" );
 100                  this.focus( event, target );
 101              },
 102              mouseleave: "collapseAll",
 103              "mouseleave .ui-menu": "collapseAll",
 104              focus: function( event, keepActiveItem ) {
 105                  // If there's already an active item, keep it active
 106                  // If not, activate the first item
 107                  var item = this.active || this.element.children( ".ui-menu-item" ).eq( 0 );
 108  
 109                  if ( !keepActiveItem ) {
 110                      this.focus( event, item );
 111                  }
 112              },
 113              blur: function( event ) {
 114                  this._delay(function() {
 115                      if ( !$.contains( this.element[0], this.document[0].activeElement ) ) {
 116                          this.collapseAll( event );
 117                      }
 118                  });
 119              },
 120              keydown: "_keydown"
 121          });
 122  
 123          this.refresh();
 124  
 125          // Clicks outside of a menu collapse any open menus
 126          this._on( this.document, {
 127              click: function( event ) {
 128                  if ( !$( event.target ).closest( ".ui-menu" ).length ) {
 129                      this.collapseAll( event );
 130                  }
 131  
 132                  // Reset the mouseHandled flag
 133                  mouseHandled = false;
 134              }
 135          });
 136      },
 137  
 138      _destroy: function() {
 139          // Destroy (sub)menus
 140          this.element
 141              .removeAttr( "aria-activedescendant" )
 142              .find( ".ui-menu" ).andSelf()
 143                  .removeClass( "ui-menu ui-widget ui-widget-content ui-corner-all ui-menu-icons" )
 144                  .removeAttr( "role" )
 145                  .removeAttr( "tabIndex" )
 146                  .removeAttr( "aria-labelledby" )
 147                  .removeAttr( "aria-expanded" )
 148                  .removeAttr( "aria-hidden" )
 149                  .removeAttr( "aria-disabled" )
 150                  .removeUniqueId()
 151                  .show();
 152  
 153          // Destroy menu items
 154          this.element.find( ".ui-menu-item" )
 155              .removeClass( "ui-menu-item" )
 156              .removeAttr( "role" )
 157              .removeAttr( "aria-disabled" )
 158              .children( "a" )
 159                  .removeUniqueId()
 160                  .removeClass( "ui-corner-all ui-state-hover" )
 161                  .removeAttr( "tabIndex" )
 162                  .removeAttr( "role" )
 163                  .removeAttr( "aria-haspopup" )
 164                  .children().each( function() {
 165                      var elem = $( this );
 166                      if ( elem.data( "ui-menu-submenu-carat" ) ) {
 167                          elem.remove();
 168                      }
 169                  });
 170  
 171          // Destroy menu dividers
 172          this.element.find( ".ui-menu-divider" ).removeClass( "ui-menu-divider ui-widget-content" );
 173      },
 174  
 175      _keydown: function( event ) {
 176          var match, prev, character, skip, regex,
 177              preventDefault = true;
 178  
 179  		function escape( value ) {
 180              return value.replace( /[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&" );
 181          }
 182  
 183          switch ( event.keyCode ) {
 184          case $.ui.keyCode.PAGE_UP:
 185              this.previousPage( event );
 186              break;
 187          case $.ui.keyCode.PAGE_DOWN:
 188              this.nextPage( event );
 189              break;
 190          case $.ui.keyCode.HOME:
 191              this._move( "first", "first", event );
 192              break;
 193          case $.ui.keyCode.END:
 194              this._move( "last", "last", event );
 195              break;
 196          case $.ui.keyCode.UP:
 197              this.previous( event );
 198              break;
 199          case $.ui.keyCode.DOWN:
 200              this.next( event );
 201              break;
 202          case $.ui.keyCode.LEFT:
 203              this.collapse( event );
 204              break;
 205          case $.ui.keyCode.RIGHT:
 206              if ( this.active && !this.active.is( ".ui-state-disabled" ) ) {
 207                  this.expand( event );
 208              }
 209              break;
 210          case $.ui.keyCode.ENTER:
 211          case $.ui.keyCode.SPACE:
 212              this._activate( event );
 213              break;
 214          case $.ui.keyCode.ESCAPE:
 215              this.collapse( event );
 216              break;
 217          default:
 218              preventDefault = false;
 219              prev = this.previousFilter || "";
 220              character = String.fromCharCode( event.keyCode );
 221              skip = false;
 222  
 223              clearTimeout( this.filterTimer );
 224  
 225              if ( character === prev ) {
 226                  skip = true;
 227              } else {
 228                  character = prev + character;
 229              }
 230  
 231              regex = new RegExp( "^" + escape( character ), "i" );
 232              match = this.activeMenu.children( ".ui-menu-item" ).filter(function() {
 233                  return regex.test( $( this ).children( "a" ).text() );
 234              });
 235              match = skip && match.index( this.active.next() ) !== -1 ?
 236                  this.active.nextAll( ".ui-menu-item" ) :
 237                  match;
 238  
 239              // If no matches on the current filter, reset to the last character pressed
 240              // to move down the menu to the first item that starts with that character
 241              if ( !match.length ) {
 242                  character = String.fromCharCode( event.keyCode );
 243                  regex = new RegExp( "^" + escape( character ), "i" );
 244                  match = this.activeMenu.children( ".ui-menu-item" ).filter(function() {
 245                      return regex.test( $( this ).children( "a" ).text() );
 246                  });
 247              }
 248  
 249              if ( match.length ) {
 250                  this.focus( event, match );
 251                  if ( match.length > 1 ) {
 252                      this.previousFilter = character;
 253                      this.filterTimer = this._delay(function() {
 254                          delete this.previousFilter;
 255                      }, 1000 );
 256                  } else {
 257                      delete this.previousFilter;
 258                  }
 259              } else {
 260                  delete this.previousFilter;
 261              }
 262          }
 263  
 264          if ( preventDefault ) {
 265              event.preventDefault();
 266          }
 267      },
 268  
 269      _activate: function( event ) {
 270          if ( !this.active.is( ".ui-state-disabled" ) ) {
 271              if ( this.active.children( "a[aria-haspopup='true']" ).length ) {
 272                  this.expand( event );
 273              } else {
 274                  this.select( event );
 275              }
 276          }
 277      },
 278  
 279      refresh: function() {
 280          var menus,
 281              icon = this.options.icons.submenu,
 282              submenus = this.element.find( this.options.menus );
 283  
 284          // Initialize nested menus
 285          submenus.filter( ":not(.ui-menu)" )
 286              .addClass( "ui-menu ui-widget ui-widget-content ui-corner-all" )
 287              .hide()
 288              .attr({
 289                  role: this.options.role,
 290                  "aria-hidden": "true",
 291                  "aria-expanded": "false"
 292              })
 293              .each(function() {
 294                  var menu = $( this ),
 295                      item = menu.prev( "a" ),
 296                      submenuCarat = $( "<span>" )
 297                          .addClass( "ui-menu-icon ui-icon " + icon )
 298                          .data( "ui-menu-submenu-carat", true );
 299  
 300                  item
 301                      .attr( "aria-haspopup", "true" )
 302                      .prepend( submenuCarat );
 303                  menu.attr( "aria-labelledby", item.attr( "id" ) );
 304              });
 305  
 306          menus = submenus.add( this.element );
 307  
 308          // Don't refresh list items that are already adapted
 309          menus.children( ":not(.ui-menu-item):has(a)" )
 310              .addClass( "ui-menu-item" )
 311              .attr( "role", "presentation" )
 312              .children( "a" )
 313                  .uniqueId()
 314                  .addClass( "ui-corner-all" )
 315                  .attr({
 316                      tabIndex: -1,
 317                      role: this._itemRole()
 318                  });
 319  
 320          // Initialize unlinked menu-items containing spaces and/or dashes only as dividers
 321          menus.children( ":not(.ui-menu-item)" ).each(function() {
 322              var item = $( this );
 323              // hyphen, em dash, en dash
 324              if ( !/[^\-—–\s]/.test( item.text() ) ) {
 325                  item.addClass( "ui-widget-content ui-menu-divider" );
 326              }
 327          });
 328  
 329          // Add aria-disabled attribute to any disabled menu item
 330          menus.children( ".ui-state-disabled" ).attr( "aria-disabled", "true" );
 331  
 332          // If the active item has been removed, blur the menu
 333          if ( this.active && !$.contains( this.element[ 0 ], this.active[ 0 ] ) ) {
 334              this.blur();
 335          }
 336      },
 337  
 338      _itemRole: function() {
 339          return {
 340              menu: "menuitem",
 341              listbox: "option"
 342          }[ this.options.role ];
 343      },
 344  
 345      focus: function( event, item ) {
 346          var nested, focused;
 347          this.blur( event, event && event.type === "focus" );
 348  
 349          this._scrollIntoView( item );
 350  
 351          this.active = item.first();
 352          focused = this.active.children( "a" ).addClass( "ui-state-focus" );
 353          // Only update aria-activedescendant if there's a role
 354          // otherwise we assume focus is managed elsewhere
 355          if ( this.options.role ) {
 356              this.element.attr( "aria-activedescendant", focused.attr( "id" ) );
 357          }
 358  
 359          // Highlight active parent menu item, if any
 360          this.active
 361              .parent()
 362              .closest( ".ui-menu-item" )
 363              .children( "a:first" )
 364              .addClass( "ui-state-active" );
 365  
 366          if ( event && event.type === "keydown" ) {
 367              this._close();
 368          } else {
 369              this.timer = this._delay(function() {
 370                  this._close();
 371              }, this.delay );
 372          }
 373  
 374          nested = item.children( ".ui-menu" );
 375          if ( nested.length && ( /^mouse/.test( event.type ) ) ) {
 376              this._startOpening(nested);
 377          }
 378          this.activeMenu = item.parent();
 379  
 380          this._trigger( "focus", event, { item: item } );
 381      },
 382  
 383      _scrollIntoView: function( item ) {
 384          var borderTop, paddingTop, offset, scroll, elementHeight, itemHeight;
 385          if ( this._hasScroll() ) {
 386              borderTop = parseFloat( $.css( this.activeMenu[0], "borderTopWidth" ) ) || 0;
 387              paddingTop = parseFloat( $.css( this.activeMenu[0], "paddingTop" ) ) || 0;
 388              offset = item.offset().top - this.activeMenu.offset().top - borderTop - paddingTop;
 389              scroll = this.activeMenu.scrollTop();
 390              elementHeight = this.activeMenu.height();
 391              itemHeight = item.height();
 392  
 393              if ( offset < 0 ) {
 394                  this.activeMenu.scrollTop( scroll + offset );
 395              } else if ( offset + itemHeight > elementHeight ) {
 396                  this.activeMenu.scrollTop( scroll + offset - elementHeight + itemHeight );
 397              }
 398          }
 399      },
 400  
 401      blur: function( event, fromFocus ) {
 402          if ( !fromFocus ) {
 403              clearTimeout( this.timer );
 404          }
 405  
 406          if ( !this.active ) {
 407              return;
 408          }
 409  
 410          this.active.children( "a" ).removeClass( "ui-state-focus" );
 411          this.active = null;
 412  
 413          this._trigger( "blur", event, { item: this.active } );
 414      },
 415  
 416      _startOpening: function( submenu ) {
 417          clearTimeout( this.timer );
 418  
 419          // Don't open if already open fixes a Firefox bug that caused a .5 pixel
 420          // shift in the submenu position when mousing over the carat icon
 421          if ( submenu.attr( "aria-hidden" ) !== "true" ) {
 422              return;
 423          }
 424  
 425          this.timer = this._delay(function() {
 426              this._close();
 427              this._open( submenu );
 428          }, this.delay );
 429      },
 430  
 431      _open: function( submenu ) {
 432          var position = $.extend({
 433              of: this.active
 434          }, this.options.position );
 435  
 436          clearTimeout( this.timer );
 437          this.element.find( ".ui-menu" ).not( submenu.parents( ".ui-menu" ) )
 438              .hide()
 439              .attr( "aria-hidden", "true" );
 440  
 441          submenu
 442              .show()
 443              .removeAttr( "aria-hidden" )
 444              .attr( "aria-expanded", "true" )
 445              .position( position );
 446      },
 447  
 448      collapseAll: function( event, all ) {
 449          clearTimeout( this.timer );
 450          this.timer = this._delay(function() {
 451              // If we were passed an event, look for the submenu that contains the event
 452              var currentMenu = all ? this.element :
 453                  $( event && event.target ).closest( this.element.find( ".ui-menu" ) );
 454  
 455              // If we found no valid submenu ancestor, use the main menu to close all sub menus anyway
 456              if ( !currentMenu.length ) {
 457                  currentMenu = this.element;
 458              }
 459  
 460              this._close( currentMenu );
 461  
 462              this.blur( event );
 463              this.activeMenu = currentMenu;
 464          }, this.delay );
 465      },
 466  
 467      // With no arguments, closes the currently active menu - if nothing is active
 468      // it closes all menus.  If passed an argument, it will search for menus BELOW
 469      _close: function( startMenu ) {
 470          if ( !startMenu ) {
 471              startMenu = this.active ? this.active.parent() : this.element;
 472          }
 473  
 474          startMenu
 475              .find( ".ui-menu" )
 476                  .hide()
 477                  .attr( "aria-hidden", "true" )
 478                  .attr( "aria-expanded", "false" )
 479              .end()
 480              .find( "a.ui-state-active" )
 481                  .removeClass( "ui-state-active" );
 482      },
 483  
 484      collapse: function( event ) {
 485          var newItem = this.active &&
 486              this.active.parent().closest( ".ui-menu-item", this.element );
 487          if ( newItem && newItem.length ) {
 488              this._close();
 489              this.focus( event, newItem );
 490          }
 491      },
 492  
 493      expand: function( event ) {
 494          var newItem = this.active &&
 495              this.active
 496                  .children( ".ui-menu " )
 497                  .children( ".ui-menu-item" )
 498                  .first();
 499  
 500          if ( newItem && newItem.length ) {
 501              this._open( newItem.parent() );
 502  
 503              // Delay so Firefox will not hide activedescendant change in expanding submenu from AT
 504              this._delay(function() {
 505                  this.focus( event, newItem );
 506              });
 507          }
 508      },
 509  
 510      next: function( event ) {
 511          this._move( "next", "first", event );
 512      },
 513  
 514      previous: function( event ) {
 515          this._move( "prev", "last", event );
 516      },
 517  
 518      isFirstItem: function() {
 519          return this.active && !this.active.prevAll( ".ui-menu-item" ).length;
 520      },
 521  
 522      isLastItem: function() {
 523          return this.active && !this.active.nextAll( ".ui-menu-item" ).length;
 524      },
 525  
 526      _move: function( direction, filter, event ) {
 527          var next;
 528          if ( this.active ) {
 529              if ( direction === "first" || direction === "last" ) {
 530                  next = this.active
 531                      [ direction === "first" ? "prevAll" : "nextAll" ]( ".ui-menu-item" )
 532                      .eq( -1 );
 533              } else {
 534                  next = this.active
 535                      [ direction + "All" ]( ".ui-menu-item" )
 536                      .eq( 0 );
 537              }
 538          }
 539          if ( !next || !next.length || !this.active ) {
 540              next = this.activeMenu.children( ".ui-menu-item" )[ filter ]();
 541          }
 542  
 543          this.focus( event, next );
 544      },
 545  
 546      nextPage: function( event ) {
 547          var item, base, height;
 548  
 549          if ( !this.active ) {
 550              this.next( event );
 551              return;
 552          }
 553          if ( this.isLastItem() ) {
 554              return;
 555          }
 556          if ( this._hasScroll() ) {
 557              base = this.active.offset().top;
 558              height = this.element.height();
 559              this.active.nextAll( ".ui-menu-item" ).each(function() {
 560                  item = $( this );
 561                  return item.offset().top - base - height < 0;
 562              });
 563  
 564              this.focus( event, item );
 565          } else {
 566              this.focus( event, this.activeMenu.children( ".ui-menu-item" )
 567                  [ !this.active ? "first" : "last" ]() );
 568          }
 569      },
 570  
 571      previousPage: function( event ) {
 572          var item, base, height;
 573          if ( !this.active ) {
 574              this.next( event );
 575              return;
 576          }
 577          if ( this.isFirstItem() ) {
 578              return;
 579          }
 580          if ( this._hasScroll() ) {
 581              base = this.active.offset().top;
 582              height = this.element.height();
 583              this.active.prevAll( ".ui-menu-item" ).each(function() {
 584                  item = $( this );
 585                  return item.offset().top - base + height > 0;
 586              });
 587  
 588              this.focus( event, item );
 589          } else {
 590              this.focus( event, this.activeMenu.children( ".ui-menu-item" ).first() );
 591          }
 592      },
 593  
 594      _hasScroll: function() {
 595          return this.element.outerHeight() < this.element.prop( "scrollHeight" );
 596      },
 597  
 598      select: function( event ) {
 599          // TODO: It should never be possible to not have an active item at this
 600          // point, but the tests don't trigger mouseenter before click.
 601          this.active = this.active || $( event.target ).closest( ".ui-menu-item" );
 602          var ui = { item: this.active };
 603          if ( !this.active.has( ".ui-menu" ).length ) {
 604              this.collapseAll( event, true );
 605          }
 606          this._trigger( "select", event, ui );
 607      }
 608  });
 609  
 610  }( jQuery ));