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