jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Append icon to links created via mw.util.addPortletLink 

For modern Vector, the preferred way to place an icon
beside a link is with a dedicated <span> element instead
of a `:before` pseudo-element.

This change appends a <span> element with an icon to
links created by mw.util.addPortletLink instead of
using the `.mw-ui-icon-before` class.

Bug: T314798
Change-Id: I019470d9ca38a6bd63a690882bed03b5f1ac03c4
This commit is contained in:
Jan Drewniak 2022-08-16 15:50:34 -04:00
parent 8c3a4792e9
commit 936bb1d739
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.
*
@ -42,12 +75,7 @@ function addPortletLinkHandler( item, data ) {
var link = item.querySelector( 'a' );
var $menu = $( item ).parents( '.vector-menu' );
var menuElement = $menu.length && $menu.get( 0 ) || null;
// Dropdowns which have not got the noicon class are icon capable.
var isIconCapable = menuElement && menuElement.classList.contains(
'vector-menu-dropdown'
) && !menuElement.classList.contains(
'vector-menu-dropdown-noicon'
);
var iconElement = createIconElement( menuElement, link, data.id );
// 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.
@ -67,23 +95,9 @@ function addPortletLinkHandler( item, data ) {
mw.util.showPortlet( 'p-cactions' );
}
}
/* eslint-enable no-jquery/no-global-selector */
if ( isIconCapable && link ) {
// If class was previously added this will be a no-op so it is safe to call even
// 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 );
}
if ( link && iconElement ) {
link.prepend( iconElement );
}
}
@ -99,6 +113,7 @@ Array.prototype.forEach.call(
mw.hook( 'util.addPortletLink' ).add( addPortletLinkHandler );
module.exports = function dropdownMenus() {
bind();
module.exports = {
dropdownMenus: function dropdownMenus() { bind(); },
addPortletLinkHandler: addPortletLinkHandler
};

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

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