mediawiki-skins-Vector/resources/skins.vector.legacy.js/vector.js
jdlrobson e048c2a729 Refactor: Simplify and standardize menu definitions
* Standardise the menu markup. This means all menus in Vector will now
be wrapped in a div and will have a heading.
* All menus now have the vector-menu class. Styles specific to personal tools
are moved to layout since these are concerned with placement.
* The ul class will always have menu class.
* emptyPortal class is generalised into vector-menu-empty for consistency
with other classes and moved from common.less into Menu.less
* Standardise hooks - BaseTemplateAfterPortlet can now be run on any
menu.

Changes to HTML:
* lang and dir attributes are moved from the h3 up to the div element
.vectorTabs, .portal(s) and #p-personal now has hidden span element inside h3
* for non portals ul.menu" is now wrapped in a div.vector-menu-content

This change does impact the following CSS selectors which will need to be updated:

I see no matches for these selectors in code search.

```
 #p-variants > ul
 #p-namespaces > ul
 #p-personal > ul
 #p-views > ul
 #p-cactions > ul

```
Using global-search.toolforge.org I see one match
for p-variants, 26 for p-namespaces, 30 for p-personal,
36 for p-views and 7 for p-cactions. I see this as acceptable
breakage provided a user notice is sent out which it has been
(T252447)

Bug: T249372
Change-Id: Id59234aa6b822a24848386bdc04d8d7ed37ca145
2020-05-12 15:17:38 -07:00

119 lines
4.5 KiB
JavaScript

/**
* Collapsible tabs for Vector
*/
function init() {
// eslint-disable-next-line no-jquery/no-global-selector
var $cactions = $( '#p-cactions' ),
// eslint-disable-next-line no-jquery/no-global-selector
$tabContainer = $( '#p-views ul' ),
initialCactionsWidth = function () {
// HACK: This depends on a discouraged feature of jQuery width().
// The #p-cactions element is generally hidden by default, but
// the consumers of this function need to know the width that the
// "More" menu would consume if it were visible. This means it
// must not return 0 if hidden, but rather virtually render it
// and compute its width, then hide it again. jQuery width() does
// all that for us.
var width = $cactions.width() || 0;
initialCactionsWidth = function () {
return width;
};
return width;
};
// Bind callback functions to animate our drop down menu in and out
// and then call the collapsibleTabs function on the menu
$tabContainer
.on( 'beforeTabCollapse', function () {
var expandedWidth;
// If the dropdown was hidden, show it
// eslint-disable-next-line no-jquery/no-class-state
if ( $cactions.hasClass( 'vector-menu-empty' ) ) {
$cactions.removeClass( 'vector-menu-empty' );
// Now that it is visible, force-render it virtually
// to get its expanded width, then shrink it 1px before we
// yield from JS (which means the expansion won't be visible).
// Then animate from the 1px to the expanded width.
expandedWidth = $cactions.width();
// eslint-disable-next-line no-jquery/no-animate
$cactions.find( 'h3' )
.css( 'width', '1px' )
.animate( { width: expandedWidth }, 'normal' );
}
} )
.on( 'beforeTabExpand', function () {
// If we're removing the last child node right now, hide the dropdown
if ( $cactions.find( 'li' ).length === 1 ) {
// eslint-disable-next-line no-jquery/no-animate
$cactions.find( 'h3' ).animate( { width: '1px' }, 'normal', function () {
$( this ).attr( 'style', '' )
.parent().addClass( 'vector-menu-empty' );
} );
}
} )
.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 - initialCactionsWidth();
} else {
return false;
}
}
},
collapseCondition: function () {
var collapsibleWidth = 0,
doCollapse = false;
// 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?
// Never collapse if there is no overlap.
if ( $.collapsibleTabs.calculateTabDistance() >= 0 ) {
return false;
}
// Always collapse if the "More" button is already shown.
// eslint-disable-next-line no-jquery/no-class-state
if ( !$cactions.hasClass( 'vector-menu-empty' ) ) {
return true;
}
// If we reach here, this means:
// 1. #p-cactions is currently empty and invisible (e.g. when logged out),
// 2. and, there is at least one li.collapsible link in #p-views, as asserted
// by handleResize() before calling here. Such link exists e.g. as
// "View history" on articles, but generally not on special pages.
// 3. and, the left-navigation and right-navigation are overlapping
// each other, e.g. when making the window very narrow, or if a gadget
// added a lot of tabs.
$tabContainer.children( 'li.collapsible' ).each( function ( _index, element ) {
collapsibleWidth += $( element ).width() || 0;
if ( collapsibleWidth > initialCactionsWidth() ) {
// We've found one or more collapsible links that are wider
// than the "More" menu would be if it were made visible,
// which means it is worth doing a collapsing.
doCollapse = true;
// Stop this possibly expensive loop the moment the condition is met once.
return false;
}
return;
} );
return doCollapse;
}
} );
}
module.exports = Object.freeze( { init: init } );