skins/vector/collapsibleNav.js

   1 /**
   2  * Collapsible navigation for Vector
   3  */
   4 ( function ( mw, $ ) {
   5         'use strict';
   6         var map;
   7
   8         // Use the same function for all navigation headings - don't repeat
   9         function toggle( $element ) {
  10                 $.cookie(
  11                         'vector-nav-' + $element.parent().attr( 'id' ),
  12                         $element.parent().is( '.collapsed' ),
  13                         { 'expires': 30, 'path': '/' }
  14                 );
  15                 $element
  16                         .parent()
  17                         .toggleClass( 'expanded' )
  18                         .toggleClass( 'collapsed' )
  19                         .find( '.body' )
  20                         .slideToggle( 'fast' );
  21         }
  22
  23         /* Browser Support */
  24
  25         map = {
  26                 // Left-to-right languages
  27                 ltr: {
  28                         // Collapsible Nav is broken in Opera < 9.6 and Konqueror < 4
  29                         opera: [['>=', 9.6]],
  30                         konqueror: [['>=', 4.0]],
  31                         blackberry: false,
  32                         ipod: false,
  33                         iphone: false,
  34                         ps3: false
  35                 },
  36                 // Right-to-left languages
  37                 rtl: {
  38                         opera: [['>=', 9.6]],
  39                         konqueror: [['>=', 4.0]],
  40                         blackberry: false,
  41                         ipod: false,
  42                         iphone: false,
  43                         ps3: false
  44                 }
  45         };
  46         if ( !$.client.test( map ) ) {
  47                 return true;
  48         }
  49
  50         $( function ( $ ) {
  51                 var $headings, tabIndex;
  52
  53                 /* General Portal Modification */
  54
  55                 // Always show the first portal
  56                 $( '#mw-panel > .portal:first' ).addClass( 'first persistent' );
  57                 // Apply a class to the entire panel to activate styles
  58                 $( '#mw-panel' ).addClass( 'collapsible-nav' );
  59                 // Use cookie data to restore preferences of what to show and hide
  60                 $( '#mw-panel > .portal:not(.persistent)' )
  61                         .each( function ( i ) {
  62                                 var id = $(this).attr( 'id' ),
  63                                         state = $.cookie( 'vector-nav-' + id );
  64                                 // Add anchor tag to heading for better accessibility
  65                                 $( this ).find( 'h3' ).wrapInner( $( '<a href="#"></a>' ).click( false ) );
  66                                 // In the case that we are not showing the new version, let's show the languages by default
  67                                 if (
  68                                         state === 'true' ||
  69                                         ( state === null && i < 1 ) ||
  70                                         ( state === null && id === 'p-lang' )
  71                                 ) {
  72                                         $(this)
  73                                                 .addClass( 'expanded' )
  74                                                 .removeClass( 'collapsed' )
  75                                                 .find( '.body' )
  76                                                 .hide() // bug 34450
  77                                                 .show();
  78                                 } else {
  79                                         $(this)
  80                                                 .addClass( 'collapsed' )
  81                                                 .removeClass( 'expanded' );
  82                                 }
  83                                 // Re-save cookie
  84                                 if ( state !== null ) {
  85                                         $.cookie( 'vector-nav-' + $(this).attr( 'id' ), state, { 'expires': 30, 'path': '/' } );
  86                                 }
  87                         } );
  88
  89                 /* Tab Indexing */
  90
  91                 $headings = $( '#mw-panel > .portal:not(.persistent) > h3' );
  92
  93                 // Get the highest tab index
  94                 tabIndex = $( document ).lastTabIndex() + 1;
  95
  96                 // Fix the search not having a tabindex
  97                 $( '#searchInput' ).attr( 'tabindex', tabIndex++ );
  98
  99                 // Make it keyboard accessible
 100                 $headings.attr( 'tabindex', function () {
 101                         return tabIndex++;
 102                 });
 103
 104                 // Toggle the selected menu's class and expand or collapse the menu
 105                 $( '#mw-panel' )
 106                         .delegate( '.portal:not(.persistent) > h3', 'keydown', function ( e ) {
 107                                 // Make the space and enter keys act as a click
 108                                 if ( e.which === 13 /* Enter */ || e.which === 32 /* Space */ ) {
 109                                         toggle( $(this) );
 110                                 }
 111                         } )
 112                         .delegate( '.portal:not(.persistent) > h3', 'mousedown', function ( e ) {
 113                                 if ( e.which !== 3 ) { // Right mouse click
 114                                         toggle( $(this) );
 115                                         $(this).blur();
 116                                 }
 117                                 return false;
 118                         } );
 119         });
 120
 121 }( mediaWiki, jQuery ) );