summaryrefslogtreecommitdiff
path: root/skins/vector/vector.js
diff options
context:
space:
mode:
Diffstat (limited to 'skins/vector/vector.js')
-rw-r--r--skins/vector/vector.js52
1 files changed, 43 insertions, 9 deletions
diff --git a/skins/vector/vector.js b/skins/vector/vector.js
index 4427d9a3..aa64624a 100644
--- a/skins/vector/vector.js
+++ b/skins/vector/vector.js
@@ -4,18 +4,52 @@
jQuery( function ( $ ) {
$( 'div.vectorMenu' ).each( function () {
var $el = $( this );
- $el.find( 'h3:first a:first' )
- // For accessibility, show the menu when the hidden link in the menu is clicked (bug 24298)
- .click( function ( e ) {
- $el.find( '.menu:first' ).toggleClass( 'menuForceShow' );
- e.preventDefault();
+ $el.find( '> h3 > a' ).parent()
+ .attr( 'tabindex', '0' )
+ // For accessibility, show the menu when the h3 is clicked (bug 24298/46486)
+ .on( 'click keypress', function ( e ) {
+ if( e.type === 'click' || e.which === 13 ) {
+ $el.find( '.menu:first' ).toggleClass( 'menuForceShow' );
+ e.preventDefault();
+ }
} )
- // When the hidden link has focus, also set a class that will change the arrow icon
+ // When the heading has focus, also set a class that will change the arrow icon
.focus( function () {
- $el.addClass( 'vectorMenuFocus' );
+ $el.find( '> a' ).addClass( 'vectorMenuFocus' );
} )
.blur( function () {
- $el.removeClass( 'vectorMenuFocus' );
- } );
+ $el.find( '> a' ).removeClass( 'vectorMenuFocus' );
+ } )
+ .find( '> a:first' )
+ // As the h3 can already be focused there's no need for the link to be focusable
+ .attr( 'tabindex', '-1' );
} );
+
+ /**
+ * Collapsible tabs for Vector
+ */
+ var $cactions = $( '#p-cactions' );
+
+ // Bind callback functions to animate our drop down menu in and out
+ // and then call the collapsibleTabs function on the menu
+ $( '#p-views ul' )
+ .bind( 'beforeTabCollapse', function () {
+ // If the dropdown was hidden, show it
+ if ( $cactions.hasClass( 'emptyPortlet' ) ) {
+ $cactions
+ .removeClass( 'emptyPortlet' )
+ .find( 'h3' )
+ .css( 'width', '1px' ).animate( { 'width': '24px' }, 390 );
+ }
+ } )
+ .bind( 'beforeTabExpand', function () {
+ // If we're removing the last child node right now, hide the dropdown
+ if ( $cactions.find( 'li' ).length === 1 ) {
+ $cactions.find( 'h3' ).animate( { 'width': '1px' }, 390, function () {
+ $( this ).attr( 'style', '' )
+ .parent().addClass( 'emptyPortlet' );
+ });
+ }
+ } )
+ .collapsibleTabs();
} );