mediawiki-skins-Vector/resources/skins.vector.js/menuTabs.js
Nicholas Ray 97147857b2 Add vector-tab-noicon class to tabbed menus when menu items are added by gadgets
* Removes server rendered vector-tab-noicon class from legacy Vector as it is
not currently used.

* Adds menuTabs.js responsible for adding the vector-tab-noicon class when menu
items are added to tabbed menus. This is only used in vector-22.

* Adds unit test

Bug: T320691
Change-Id: Iffad86125f8754305f592ddc19d894866bd6dedc
2022-10-20 18:21:58 -06:00

41 lines
975 B
JavaScript

var
TABS_SELECTOR = '.vector-menu-tabs',
LIST_ITEM_JS_SELECTOR = '.mw-list-item-js',
NO_ICON_CLASS = 'vector-tab-noicon';
/**
* T320691: Add a `.vector-tab-noicon` class to any tabbed menu item that is
* added by a gadget so that the menu item has the correct padding and margin.
*
* @param {HTMLElement} item
*/
function addNoIconClass( item ) {
item.classList.add( NO_ICON_CLASS );
}
function init() {
// Feature detect whether the `.closest` api is supported. If not, return early.
if ( !document.body.closest ) {
return;
}
// Enhance previously added items.
Array.prototype.forEach.call(
document.querySelectorAll( TABS_SELECTOR + ' ' + LIST_ITEM_JS_SELECTOR ),
addNoIconClass
);
mw.hook( 'util.addPortletLink' ).add(
/**
* @param {HTMLElement} item
*/
function ( item ) {
// Check if this menu item belongs to a tabs menu.
if ( item.closest( TABS_SELECTOR ) ) {
addNoIconClass( item );
}
} );
}
module.exports = init;