skins/vector/vector.js

   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 } );