[Summary view] [Print] [Text view]

   1  /**
   2   * Vector-specific scripts
   3   */
   4  jQuery( function ( $ ) {
   5      /**
   6       * Focus search input at the very end
   7       */
   8      $( '#searchInput' ).attr( 'tabindex', $( document ).lastTabIndex() + 1 );
   9  
  10      /**
  11       * Dropdown menu accessibility
  12       */
  13      $( 'div.vectorMenu' ).each( function () {
  14          var $el = $( this );
  15          $el.find( '> h3 > a' ).parent()
  16              .attr( 'tabindex', '0' )
  17              // For accessibility, show the menu when the h3 is clicked (bug 24298/46486)
  18              .on( 'click keypress', function ( e ) {
  19                  if ( e.type === 'click' || e.which === 13 ) {
  20                      $el.toggleClass( 'menuForceShow' );
  21                      e.preventDefault();
  22                  }
  23              } )
  24              // When the heading has focus, also set a class that will change the arrow icon
  25              .focus( function () {
  26                  $el.find( '> a' ).addClass( 'vectorMenuFocus' );
  27              } )
  28              .blur( function () {
  29                  $el.find( '> a' ).removeClass( 'vectorMenuFocus' );
  30              } )
  31              .find( '> a:first' )
  32              // As the h3 can already be focused there's no need for the link to be focusable
  33              .attr( 'tabindex', '-1' );
  34      } );
  35  
  36      /**
  37       * Sidebar
  38       */
  39      $( '#mw-panel > .portal:first' ).addClass( 'first' );
  40  
  41      /**
  42       * Collapsible tabs
  43       */
  44      var $cactions = $( '#p-cactions' ),
  45          $tabContainer = $( '#p-views ul' ),
  46          originalDropdownWidth = $cactions.width();
  47  
  48      // Bind callback functions to animate our drop down menu in and out
  49      // and then call the collapsibleTabs function on the menu
  50      $tabContainer
  51          .bind( 'beforeTabCollapse', function () {
  52              // If the dropdown was hidden, show it
  53              if ( $cactions.hasClass( 'emptyPortlet' ) ) {
  54                  $cactions
  55                      .removeClass( 'emptyPortlet' )
  56                      .find( 'h3' )
  57                          .css( 'width', '1px' ).animate( { 'width': originalDropdownWidth }, 'normal' );
  58              }
  59          } )
  60          .bind( 'beforeTabExpand', function () {
  61              // If we're removing the last child node right now, hide the dropdown
  62              if ( $cactions.find( 'li' ).length === 1 ) {
  63                  $cactions.find( 'h3' ).animate( { 'width': '1px' }, 'normal', function () {
  64                      $( this ).attr( 'style', '' )
  65                          .parent().addClass( 'emptyPortlet' );
  66                  });
  67              }
  68          } )
  69          .collapsibleTabs( {
  70              expandCondition: function ( eleWidth ) {
  71                  // (This looks a bit awkward because we're doing expensive queries as late as possible.)
  72  
  73                  var distance = $.collapsibleTabs.calculateTabDistance();
  74                  // If there are at least eleWidth + 1 pixels of free space, expand.
  75                  // We add 1 because .width() will truncate fractional values but .offset() will not.
  76                  if ( distance >= eleWidth + 1 ) {
  77                      return true;
  78                  } else {
  79                      // Maybe we can still expand? Account for the width of the "Actions" dropdown if the
  80                      // expansion would hide it.
  81                      if ( $cactions.find( 'li' ).length === 1 ) {
  82                          return distance >= eleWidth + 1 - originalDropdownWidth;
  83                      } else {
  84                          return false;
  85                      }
  86                  }
  87              },
  88              collapseCondition: function () {
  89                  // (This looks a bit awkward because we're doing expensive queries as late as possible.)
  90                  // TODO The dropdown itself should probably "fold" to just the down-arrow (hiding the text)
  91                  // if it can't fit on the line?
  92  
  93                  // If there's an overlap, collapse.
  94                  if ( $.collapsibleTabs.calculateTabDistance() < 0 ) {
  95                      // But only if the width of the tab to collapse is smaller than the width of the dropdown
  96                      // we would have to insert. An example language where this happens is Lithuanian (lt).
  97                      if ( $cactions.hasClass( 'emptyPortlet' ) ) {
  98                          return $tabContainer.children( 'li.collapsible:last' ).width() > originalDropdownWidth;
  99                      } else {
 100                          return true;
 101                      }
 102                  } else {
 103                      return false;
 104                  }
 105              }
 106          } );
 107  } );