mediawiki-skins-MinervaNeue/resources/skins.minerva.scripts/addPortletLink.js
bwang b66ac786d1 Prepare addPortletLink handler for Codex switchover
Change-Id: I33e541ab7b816640a63541ce719e094bb8f5d78e
2023-08-24 12:07:28 -05:00

101 lines
2.5 KiB
JavaScript

/**
* @param {jQuery.Object} $item The added list item, or null if no element was added.
* @return {Object} of arrays with mandatory class names for list item elements.
*/
function getClassesForItem( $item ) {
var $parent = $item.parent(),
useCodex = mw.loader.getState( 'codex-search-styles' ) !== 'registered',
// eslint-disable-next-line no-jquery/no-class-state
isPageActionList = $parent.hasClass( 'page-actions-menu__list' ),
// eslint-disable-next-line no-jquery/no-class-state
isToggleList = $parent.hasClass( 'toggle-list__list' );
if ( isToggleList ) {
return {
li: [ 'toggle-list-item' ],
span: [ 'toggle-list-item__label' ],
a: [ 'toggle-list-item__anchor' ]
};
} else if ( isPageActionList ) {
return {
li: [ 'page-actions-menu__list-item' ],
span: useCodex ? [] : [
'mw-ui-icon', 'mw-ui-icon-element',
'mw-ui-icon-with-label-desktop', 'mw-ui-button', 'mw-ui-quiet'
],
a: useCodex ? [
'cdx-button',
'cdx-button--size-large',
'cdx-button--fake-button',
'cdx-button--fake-button--enabled',
'cdx-button--icon-only',
'cdx-button--weight-quiet'
] : []
};
} else {
return {
li: [],
span: [],
a: []
};
}
}
/**
* Insert icon into the portlet link.
*
* @param {jQuery.Object} $link
* @param {string|undefined} id for icon
*/
function insertIcon( $link, id ) {
var useCodex = mw.loader.getState( 'codex-search-styles' ) !== 'registered';
var icon = document.createElement( 'span' ),
classes = useCodex ? 'minerva-icon' : 'mw-ui-icon';
if ( id ) {
classes += ' mw-ui-icon-portletlink-' + id;
}
icon.setAttribute( 'class', classes );
$link.prepend( icon );
}
/**
* @param {HTMLElement|null} listItem The added list item, or null if no element was added.
* @param {Object} data
*/
function hookHandler( listItem, data ) {
var $item, $a, classes,
id = data.id;
if ( listItem && !listItem.dataset.minervaPortlet ) {
$item = $( listItem );
classes = getClassesForItem( $item );
$item.addClass( classes.li );
$a = $item.find( 'a' );
$a.addClass( classes.a );
$item.find( 'a > span' ).addClass( classes.span );
listItem.dataset.minervaPortlet = true;
if ( classes.span.indexOf( 'mw-ui-icon' ) === -1 ) {
insertIcon( $a, id );
}
}
}
/**
* Init portlet link items added by gadgets prior to Minerva
* loading.
*/
function init() {
Array.prototype.forEach.call(
document.querySelectorAll( '.mw-list-item-js' ),
function ( item ) {
hookHandler( item, {
id: item.getAttribute( 'id' )
} );
}
);
}
module.exports = {
init: init,
hookHandler: hookHandler
};