Vector: Fix conflicts of "Actions" dropdown with collapsibleTabs

[lhc/web/wiklou.git] / skins / vector / vector.js

diff --git a/skins/vector/vector.js b/skins/vector/vector.js
index 58ba2af..c603615 100644 (file)
--- a/skins/vector/vector.js
+++ b/skins/vector/vector.js
@@ -35,28 +35,67 @@ jQuery( function ( $ ) {
        /**
         * Collapsible tabs for Vector
         */
-       var $cactions = $( '#p-cactions' );
+       var $cactions = $( '#p-cactions' ),
+               $tabContainer = $( '#p-views ul' ),
+               originalDropdownWidth = $cactions.width();
 
        // Bind callback functions to animate our drop down menu in and out
        // and then call the collapsibleTabs function on the menu
-       $( '#p-views ul' )
+       $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': '24px' }, 390 );
+                                               .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' }, 390, function () {
+                               $cactions.find( 'h3' ).animate( { 'width': '1px' }, 'normal', function () {
                                        $( this ).attr( 'style', '' )
                                                .parent().addClass( 'emptyPortlet' );
                                });
                        }
                } )
-               .collapsibleTabs();
+               .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;
+                               }
+                       }
+               } );
 } );