Vector menu items are wrapped in spans + improve Vector addPortletLink support
* In legacy Vector, menu items are now wrapped with spans. This consistency in HTML is required for splitting Vector into two different skins. * Vector's portlet link items now support icons Bug: T289163 Bug: T291722 Change-Id: I4464888983ac8b8b5f971e0c679dbeda09a61be5
This commit is contained in:
parent
205f343581
commit
a6c0b21044
|
@ -319,9 +319,6 @@ class SkinVector extends SkinMustache {
|
||||||
public function generateHTML() {
|
public function generateHTML() {
|
||||||
if ( $this->isLegacy() ) {
|
if ( $this->isLegacy() ) {
|
||||||
$this->options['template'] = 'skin-legacy';
|
$this->options['template'] = 'skin-legacy';
|
||||||
// Does not apply to gadgets adding menu items via addPortletLink. Should be
|
|
||||||
// removed when Ib23360e3439abc828404c1de8e0906915ee7d8b6 is merged.
|
|
||||||
unset( $this->options['link'] );
|
|
||||||
}
|
}
|
||||||
return parent::generateHTML();
|
return parent::generateHTML();
|
||||||
}
|
}
|
||||||
|
|
|
@ -12,6 +12,66 @@ function closeDropdownsOnClickOutside() {
|
||||||
} );
|
} );
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {HTMLElement} item
|
||||||
|
* @return {HTMLElement|null}
|
||||||
|
*/
|
||||||
|
function getVectorMenu( item ) {
|
||||||
|
if ( item.classList.contains( 'vector-menu' ) ) {
|
||||||
|
return item;
|
||||||
|
} else {
|
||||||
|
var parent = /** @type {HTMLElement} */( item.parentNode );
|
||||||
|
return parent ? getVectorMenu( parent ) : null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Adds icon placeholder for gadgets to use.
|
||||||
|
*
|
||||||
|
* @typedef {Object} PortletLinkData
|
||||||
|
* @property {string|null} id
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* @param {HTMLElement} item
|
||||||
|
* @param {PortletLinkData} data
|
||||||
|
*/
|
||||||
|
function addPortletLinkHandler( item, data ) {
|
||||||
|
var link = item.querySelector( 'a' );
|
||||||
|
var menu = getVectorMenu( item );
|
||||||
|
// Dropdowns which have not got the noicon class are icon capable.
|
||||||
|
var isIconCapable = menu && menu.classList.contains(
|
||||||
|
'vector-menu-dropdown'
|
||||||
|
) && !menu.classList.contains(
|
||||||
|
'vector-menu-dropdown-noicon'
|
||||||
|
);
|
||||||
|
|
||||||
|
if ( isIconCapable && data.id && 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.
|
||||||
|
// eslint-disable-next-line mediawiki/class-doc
|
||||||
|
link.classList.add(
|
||||||
|
'mw-ui-icon',
|
||||||
|
'mw-ui-icon-before',
|
||||||
|
// 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.
|
||||||
|
'mw-ui-icon-vector-gadget-' + data.id
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Enhance previously added items.
|
||||||
|
Array.prototype.forEach.call(
|
||||||
|
document.querySelectorAll( '.mw-list-item-js' ),
|
||||||
|
function ( item ) {
|
||||||
|
addPortletLinkHandler( item, {
|
||||||
|
id: item.getAttribute( 'id' )
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
mw.hook( 'util.addPortletLink' ).add( addPortletLinkHandler );
|
||||||
|
|
||||||
module.exports = function dropdownMenus() {
|
module.exports = function dropdownMenus() {
|
||||||
closeDropdownsOnClickOutside();
|
closeDropdownsOnClickOutside();
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,10 +1,6 @@
|
||||||
// Extends the common MenuDropdown, but allows it to be opened via hover.
|
// Extends the common MenuDropdown, but allows it to be opened via hover.
|
||||||
|
|
||||||
.vector-menu-dropdown:not( .vector-user-menu ) {
|
.vector-menu-dropdown:not( .vector-user-menu ) {
|
||||||
li {
|
|
||||||
font-size: @font-size-tabs;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .vector-menu-content {
|
&:hover .vector-menu-content {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
|
|
Loading…
Reference in New Issue