skins/vector/vector.js

   1 /**
   2  * Vector-specific scripts
   3  */
   4 jQuery( function ( $ ) {
   5         $( 'div.vectorMenu' ).each( function () {
   6                 var $el = $( this );
   7                 $el.find( '> h3 > a' ).parent()
   8                         .attr( 'tabindex', '0' )
   9                         // For accessibility, show the menu when the h3 is clicked (bug 24298/46486)
  10                         .on( 'click keypress', function ( e ) {
  11                                 if ( e.type === 'click' || e.which === 13 ) {
  12                                         $el.toggleClass( 'menuForceShow' );
  13                                         e.preventDefault();
  14                                 }
  15                         } )
  16                         // When the heading has focus, also set a class that will change the arrow icon
  17                         .focus( function () {
  18                                 $el.find( '> a' ).addClass( 'vectorMenuFocus' );
  19                         } )
  20                         .blur( function () {
  21                                 $el.find( '> a' ).removeClass( 'vectorMenuFocus' );
  22                         } )
  23                         .find( '> a:first' )
  24                         // As the h3 can already be focused there's no need for the link to be focusable
  25                         .attr( 'tabindex', '-1' );
  26         } );
  27
  28         /**
  29          * Sidebar
  30          */
  31         $( '#mw-panel > .portal:first' ).addClass( 'first' );
  32
  33         /**
  34          * Collapsible tabs for Vector
  35          */
  36         var $cactions = $( '#p-cactions' );
  37
  38         // Bind callback functions to animate our drop down menu in and out
  39         // and then call the collapsibleTabs function on the menu
  40         $( '#p-views ul' )
  41                 .bind( 'beforeTabCollapse', function () {
  42                         // If the dropdown was hidden, show it
  43                         if ( $cactions.hasClass( 'emptyPortlet' ) ) {
  44                                 $cactions
  45                                         .removeClass( 'emptyPortlet' )
  46                                         .find( 'h3' )
  47                                                 .css( 'width', '1px' ).animate( { 'width': '24px' }, 390 );
  48                         }
  49                 } )
  50                 .bind( 'beforeTabExpand', function () {
  51                         // If we're removing the last child node right now, hide the dropdown
  52                         if ( $cactions.find( 'li' ).length === 1 ) {
  53                                 $cactions.find( 'h3' ).animate( { 'width': '1px' }, 390, function () {
  54                                         $( this ).attr( 'style', '' )
  55                                                 .parent().addClass( 'emptyPortlet' );
  56                                 });
  57                         }
  58                 } )
  59                 .collapsibleTabs();
  60 } );