wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-24 07:43:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Append icon to links created via mw.util.addPortletLink"

Browse source
This commit is contained in:
jenkins-bot 2022-08-17 20:50:43 +00:00 committed by Gerrit Code Review
parent 2f65c4f696 936bb1d739
commit 1f5170238a
2 changed files with 40 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
resources/skins.vector.js/dropdownMenus.js
View file

@ -28,6 +28,39 @@ function bind() {
} ); } );
} }
/**
* Create an icon element to be appended inside the anchor tag.
*
* @param {HTMLElement|null} menuElement
* @param {HTMLElement|null} parentElement
* @param {string|null} id
*
* @return {HTMLElement|undefined}
*/
function createIconElement( menuElement, parentElement, id ) {
// Dropdowns which do not have the noicon class are icon capable.
var isIconCapable = menuElement &&
menuElement.classList.contains( 'vector-menu-dropdown' ) &&
!menuElement.classList.contains( 'vector-menu-dropdown-noicon' );
if ( !isIconCapable || !parentElement ) {
return;
}
var iconElement = document.createElement( 'span' );
iconElement.classList.add( 'mw-ui-icon' );
if ( id ) {
// The following class allows gadgets developers to style or hide an icon.
// * mw-ui-icon-vector-gadget-<id>
// The class is considered stable and should not be removed without
// a #user-notice.
iconElement.classList.add( 'mw-ui-icon-vector-gadget-' + id );
}
return iconElement;
}
/** /**
* Adds icon placeholder for gadgets to use. * Adds icon placeholder for gadgets to use.
* *
@ -42,12 +75,7 @@ function addPortletLinkHandler( item, data ) {
var link = item.querySelector( 'a' ); var link = item.querySelector( 'a' );
var $menu = $( item ).parents( '.vector-menu' ); var $menu = $( item ).parents( '.vector-menu' );
var menuElement = $menu.length && $menu.get( 0 ) || null; var menuElement = $menu.length && $menu.get( 0 ) || null;
// Dropdowns which have not got the noicon class are icon capable. var iconElement = createIconElement( menuElement, link, data.id );
var isIconCapable = menuElement && menuElement.classList.contains(
'vector-menu-dropdown'
) && !menuElement.classList.contains(
'vector-menu-dropdown-noicon'
);
// The views menu has limited space so we need to decide whether there is space // The views menu has limited space so we need to decide whether there is space
// to accomodate the new item and if not to redirect to the more dropdown. // to accomodate the new item and if not to redirect to the more dropdown.
@ -67,23 +95,9 @@ function addPortletLinkHandler( item, data ) {
mw.util.showPortlet( 'p-cactions' ); mw.util.showPortlet( 'p-cactions' );
} }
} }
/* eslint-enable no-jquery/no-global-selector */
if ( isIconCapable && link ) { if ( link && iconElement ) {
// If class was previously added this will be a no-op so it is safe to call even link.prepend( iconElement );
// if we've previously enhanced it.
link.classList.add(
'mw-ui-icon',
'mw-ui-icon-before'
);
if ( data.id ) {
// The following class allows gadgets developers to style or hide an icon.
// * mw-ui-icon-vector-gadget-<id>
// The class is considered stable and should not be removed without
// a #user-notice.
link.classList.add( 'mw-ui-icon-vector-gadget-' + data.id );
}
} }
} }
@ -99,6 +113,7 @@ Array.prototype.forEach.call(
mw.hook( 'util.addPortletLink' ).add( addPortletLinkHandler ); mw.hook( 'util.addPortletLink' ).add( addPortletLinkHandler );
module.exports = function dropdownMenus() { module.exports = {
bind(); dropdownMenus: function dropdownMenus() { bind(); },
addPortletLinkHandler: addPortletLinkHandler
}; };

2
resources/skins.vector.js/skin.js
View file

@ -1,6 +1,6 @@
var languageButton = require( './languageButton.js' ), var languageButton = require( './languageButton.js' ),
initSearchLoader = require( './searchLoader.js' ).initSearchLoader, initSearchLoader = require( './searchLoader.js' ).initSearchLoader,
dropdownMenus = require( './dropdownMenus.js' ), dropdownMenus = require( './dropdownMenus.js' ).dropdownMenus,
sidebarPersistence = require( './sidebarPersistence.js' ), sidebarPersistence = require( './sidebarPersistence.js' ),
checkbox = require( './checkbox.js' ); checkbox = require( './checkbox.js' );