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
  40         // Bind callback functions to animate our drop down menu in and out
  41         // and then call the collapsibleTabs function on the menu
  42         $( '#p-views ul' )
  43                 .bind( 'beforeTabCollapse', function () {
  44                         // If the dropdown was hidden, show it
  45                         if ( $cactions.hasClass( 'emptyPortlet' ) ) {
  46                                 $cactions
  47                                         .removeClass( 'emptyPortlet' )
  48                                         .find( 'h3' )
  49                                                 .css( 'width', '1px' ).animate( { 'width': '24px' }, 390 );
  50                         }
  51                 } )
  52                 .bind( 'beforeTabExpand', function () {
  53                         // If we're removing the last child node right now, hide the dropdown
  54                         if ( $cactions.find( 'li' ).length === 1 ) {
  55                                 $cactions.find( 'h3' ).animate( { 'width': '1px' }, 390, function () {
  56                                         $( this ).attr( 'style', '' )
  57                                                 .parent().addClass( 'emptyPortlet' );
  58                                 });
  59                         }
  60                 } )
  61                 .collapsibleTabs();
  62 } );