/** * Vector-specific scripts */ jQuery( function ( $ ) { /** * Collapsible tabs */ var $cactions = $( '#p-cactions' ), $tabContainer = $( '#p-views ul' ), originalDropdownWidth = $cactions.width(); /** * Focus search input at the very end */ $( '#searchInput' ).attr( 'tabindex', $( document ).lastTabIndex() + 1 ); /** * Dropdown menu accessibility */ $( 'div.vectorMenu' ).each( function () { var $el = $( this ); $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.toggleClass( 'menuForceShow' ); e.preventDefault(); } } ) // When the heading has focus, also set a class that will change the arrow icon .focus( function () { $el.find( '> a' ).addClass( 'vectorMenuFocus' ); } ) .blur( function () { $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' ); } ); // Bind callback functions to animate our drop down menu in and out // and then call the collapsibleTabs function on the menu $tabContainer .bind( 'beforeTabCollapse', function () { // If the dropdown was hidden, show it if ( $cactions.hasClass( 'emptyPortlet' ) ) { $cactions .removeClass( 'emptyPortlet' ) .find( 'h3' ) .css( 'width', '1px' ).animate( { width: originalDropdownWidth }, 'normal' ); } } ) .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' }, 'normal', function () { $( this ).attr( 'style', '' ) .parent().addClass( 'emptyPortlet' ); } ); } } ) .collapsibleTabs( { expandCondition: function ( eleWidth ) { // (This looks a bit awkward because we're doing expensive queries as late as possible.) var distance = $.collapsibleTabs.calculateTabDistance(); // If there are at least eleWidth + 1 pixels of free space, expand. // We add 1 because .width() will truncate fractional values but .offset() will not. if ( distance >= eleWidth + 1 ) { return true; } else { // Maybe we can still expand? Account for the width of the "Actions" dropdown if the // expansion would hide it. if ( $cactions.find( 'li' ).length === 1 ) { return distance >= eleWidth + 1 - originalDropdownWidth; } else { return false; } } }, collapseCondition: function () { // (This looks a bit awkward because we're doing expensive queries as late as possible.) // TODO The dropdown itself should probably "fold" to just the down-arrow (hiding the text) // if it can't fit on the line? // If there's an overlap, collapse. if ( $.collapsibleTabs.calculateTabDistance() < 0 ) { // But only if the width of the tab to collapse is smaller than the width of the dropdown // we would have to insert. An example language where this happens is Lithuanian (lt). if ( $cactions.hasClass( 'emptyPortlet' ) ) { return $tabContainer.children( 'li.collapsible:last' ).width() > originalDropdownWidth; } else { return true; } } else { return false; } } } ); } );