skins/vector/vector.js

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