2 * Collapsible navigation for Vector
8 // Use the same function for all navigation headings - don't repeat
9 function toggle( $element ) {
10 var isCollapsed = $element.parent().is( '.collapsed' );
13 'vector-nav-' + $element.parent().attr( 'id' ),
15 { 'expires': 30, 'path': '/' }
20 .toggleClass( 'expanded' )
21 .toggleClass( 'collapsed' )
23 .slideToggle( 'fast' );
24 isCollapsed = !isCollapsed;
29 'aria-pressed': isCollapsed ? 'false' : 'true',
30 'aria-expanded': isCollapsed ? 'false' : 'true'
37 // Left-to-right languages
39 // Collapsible Nav is broken in Opera < 9.6 and Konqueror < 4
41 konqueror: [['>=', 4.0]],
47 // Right-to-left languages
50 konqueror: [['>=', 4.0]],
57 if ( !$.client.test( map ) ) {
62 var $headings, tabIndex;
64 /* General Portal Modification */
66 // Always show the first portal
67 $( '#mw-panel > .portal:first' ).addClass( 'first persistent' );
68 // Apply a class to the entire panel to activate styles
69 $( '#mw-panel' ).addClass( 'collapsible-nav' );
70 // Use cookie data to restore preferences of what to show and hide
71 $( '#mw-panel > .portal:not(.persistent)' )
72 .each( function ( i ) {
73 var id = $(this).attr( 'id' ),
74 state = $.cookie( 'vector-nav-' + id );
75 $(this).find( 'ul:first' ).attr( 'id', id + '-list' );
76 // Add anchor tag to heading for better accessibility
77 $( this ).find( 'h3' ).wrapInner(
81 'aria-haspopup': 'true',
82 'aria-controls': id + '-list',
87 // In the case that we are not showing the new version, let's show the languages by default
90 ( state === null && i < 1 ) ||
91 ( state === null && id === 'p-lang' )
94 .addClass( 'expanded' )
95 .removeClass( 'collapsed' )
99 $(this).find( 'h3 > a' )
101 'aria-pressed': 'true',
102 'aria-expanded': 'true'
106 .addClass( 'collapsed' )
107 .removeClass( 'expanded' );
108 $(this).find( 'h3 > a' )
110 'aria-pressed': 'false',
111 'aria-expanded': 'false'
115 if ( state !== null ) {
116 $.cookie( 'vector-nav-' + $(this).attr( 'id' ), state, { 'expires': 30, 'path': '/' } );
122 $headings = $( '#mw-panel > .portal:not(.persistent) > h3' );
124 // Get the highest tab index
125 tabIndex = $( document ).lastTabIndex() + 1;
127 // Fix the search not having a tabindex
128 $( '#searchInput' ).attr( 'tabindex', tabIndex++ );
130 // Make it keyboard accessible
131 $headings.attr( 'tabindex', function () {
135 // Toggle the selected menu's class and expand or collapse the menu
137 .delegate( '.portal:not(.persistent) > h3', 'keydown', function ( e ) {
138 // Make the space and enter keys act as a click
139 if ( e.which === 13 /* Enter */ || e.which === 32 /* Space */ ) {
143 .delegate( '.portal:not(.persistent) > h3', 'mousedown', function ( e ) {
144 if ( e.which !== 3 ) { // Right mouse click
152 }( mediaWiki, jQuery ) );