mediawiki-skins-Vector/includes/templates/Menu.mustache

{{!
	See @typedef MenuDefinition
}}
{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
<!-- Please do not use role attribute as CSS selector, it is deprecated. -->
<nav id="{{id}}" {{#class}}class="{{.}}"{{/class}} aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}}
	 {{{html-user-language-attributes}}}>
	{{#is-dropdown}}
	<input type="checkbox" class="vector-menu-checkbox" aria-labelledby="{{id}}-label" />
	{{/is-dropdown}}
	<h3 id="{{id}}-label" {{#heading-class}}class="{{.}}"{{/heading-class}}>
		<span>{{label}}</span>
	</h3>
	<div class="vector-menu-content">
		<ul class="vector-menu-content-list">{{{html-items}}}</ul>
		{{{html-after-portal}}}
	</div>
</nav>
Extract PersonalMenu,mustache component from VectorTemplate PersonalMenu is the login/logout notifications etc. menu at the very top of the Vector skin. Bug: T239248, T240062 Change-Id: Iae224cbd838e44669a9f27e6dd303c6c3b402d41 2020-01-09 10:59:09 +00:00			`{{!`
Refactor: VectorMenu merged in to Menu Bug: T249372 Change-Id: Ifaf78b507c12aa251228213c89751cbb4d111d9a 2020-05-06 00:00:56 +00:00			`See @typedef MenuDefinition`
Extract PersonalMenu,mustache component from VectorTemplate PersonalMenu is the login/logout notifications etc. menu at the very top of the Vector skin. Bug: T239248, T240062 Change-Id: Iae224cbd838e44669a9f27e6dd303c6c3b402d41 2020-01-09 10:59:09 +00:00			`}}`
Use semantic HTML5 elements where applicable `[role]`s are retained for now as they are harmless although redundant when added to HTML5 elements. `role="contentinfo"` on `footer` is a special case to address a known VoiceOver bug. Bug: T66477 Change-Id: I540d9a41fc7fd580c5d61b90480e8745ae145850 2020-05-13 22:46:23 +00:00			{{! `role` is unnecessary but kept to support selectors in any gadgets or user styles. }}
			`<!-- Please do not use role attribute as CSS selector, it is deprecated. -->`
Drop unsupported skin CSS classes Drop support for vectorMenu, vectorTabs and vectorMenuCheckbox, body, menu selectors in preference for standard selectors. This change will impact a large amount of user scripts/styles but should not impact any gadgets. These classes were kept around for user scripts and styles however are not needed internally. As we transition to a more maintainable skin menu system, it is time to lose these selectors even though this will cause disruption. Vector now will use the mw-portlet class rather than the vector-menu class in its own CSS styling, however it keeps the other classes to allow differentiation of the different types of menu. Changes to test: Previously the tests assumed all portlets were empty when checking the classes. This is very rare, so its better to check the classes of non-empty portlets, so several tests are updated accordingly to drop the emptyPortlet class. Bug: T262092 Change-Id: I1824335eb47d613c2a4804ec1f1106c0f4c16101 2020-09-04 19:34:05 +00:00			`<nav id="{{id}}" {{#class}}class="{{.}}"{{/class}} aria-labelledby="{{id}}-label" role="navigation" {{{html-tooltip}}}`
Refactor: html-userlangattributes -> html-user-language-attributes This matches the name in core and is needed in preparation for switching to SkinMustache Additional change: The JS variable htmluserlangattributes is renamed "htmlUserLanguageAttributes" Change-Id: I306ebb615f720852fb35c25ac240d6b802d05ecc 2020-07-14 21:40:28 +00:00			`{{{html-user-language-attributes}}}>`
Refactor: VectorMenu merged in to Menu Bug: T249372 Change-Id: Ifaf78b507c12aa251228213c89751cbb4d111d9a 2020-05-06 00:00:56 +00:00			`{{#is-dropdown}}`
Drop unsupported skin CSS classes Drop support for vectorMenu, vectorTabs and vectorMenuCheckbox, body, menu selectors in preference for standard selectors. This change will impact a large amount of user scripts/styles but should not impact any gadgets. These classes were kept around for user scripts and styles however are not needed internally. As we transition to a more maintainable skin menu system, it is time to lose these selectors even though this will cause disruption. Vector now will use the mw-portlet class rather than the vector-menu class in its own CSS styling, however it keeps the other classes to allow differentiation of the different types of menu. Changes to test: Previously the tests assumed all portlets were empty when checking the classes. This is very rare, so its better to check the classes of non-empty portlets, so several tests are updated accordingly to drop the emptyPortlet class. Bug: T262092 Change-Id: I1824335eb47d613c2a4804ec1f1106c0f4c16101 2020-09-04 19:34:05 +00:00			`<input type="checkbox" class="vector-menu-checkbox" aria-labelledby="{{id}}-label" />`
Refactor: Simplify and standardize menu definitions * Standardise the menu markup. This means all menus in Vector will now be wrapped in a div and will have a heading. * All menus now have the vector-menu class. Styles specific to personal tools are moved to layout since these are concerned with placement. * The ul class will always have menu class. * emptyPortal class is generalised into vector-menu-empty for consistency with other classes and moved from common.less into Menu.less * Standardise hooks - BaseTemplateAfterPortlet can now be run on any menu. Changes to HTML: * lang and dir attributes are moved from the h3 up to the div element .vectorTabs, .portal(s) and #p-personal now has hidden span element inside h3 * for non portals ul.menu" is now wrapped in a div.vector-menu-content This change does impact the following CSS selectors which will need to be updated: I see no matches for these selectors in code search. ``` #p-variants > ul #p-namespaces > ul #p-personal > ul #p-views > ul #p-cactions > ul ``` Using global-search.toolforge.org I see one match for p-variants, 26 for p-namespaces, 30 for p-personal, 36 for p-views and 7 for p-cactions. I see this as acceptable breakage provided a user notice is sent out which it has been (T252447) Bug: T249372 Change-Id: Id59234aa6b822a24848386bdc04d8d7ed37ca145 2020-04-16 18:40:39 +00:00			`{{/is-dropdown}}`
Add mw-interlanguage-selector class to language button & hide menu/arrow when appropriate * We add the `.mw-interlanguage-selector` class to the .vector-menu-heading in the server rendered HTML. `ext.uls.interface.js` later attaches a click handler to this selector that loads the rest of ULS. * We hide the dropdown arrow for js users and only show it again if ext.uls.interface module isn't installed or is not being loaded. * When the `ext.uls.interface` module has been loaded, we hide the checkbox and checkbox hack menu in favor of showing the ULS popover. Additionally: * Adds '.vector-menu-heading' class to menu headings. * Change h3 selector to `.vector-menu-heading`. Bug: T273232 Change-Id: I6f4572c16ca4096dcda3aac4d585003b93dcccfa 2021-02-04 02:23:19 +00:00			`<h3 id="{{id}}-label" {{#heading-class}}class="{{.}}"{{/heading-class}}>`
Refactor: VectorMenu merged in to Menu Bug: T249372 Change-Id: Ifaf78b507c12aa251228213c89751cbb4d111d9a 2020-05-06 00:00:56 +00:00			`<span>{{label}}</span>`
			`</h3>`
Drop unsupported skin CSS classes Drop support for vectorMenu, vectorTabs and vectorMenuCheckbox, body, menu selectors in preference for standard selectors. This change will impact a large amount of user scripts/styles but should not impact any gadgets. These classes were kept around for user scripts and styles however are not needed internally. As we transition to a more maintainable skin menu system, it is time to lose these selectors even though this will cause disruption. Vector now will use the mw-portlet class rather than the vector-menu class in its own CSS styling, however it keeps the other classes to allow differentiation of the different types of menu. Changes to test: Previously the tests assumed all portlets were empty when checking the classes. This is very rare, so its better to check the classes of non-empty portlets, so several tests are updated accordingly to drop the emptyPortlet class. Bug: T262092 Change-Id: I1824335eb47d613c2a4804ec1f1106c0f4c16101 2020-09-04 19:34:05 +00:00			`<div class="vector-menu-content">`
			`<ul class="vector-menu-content-list">{{{html-items}}}</ul>`
Refactor: Portal is also a Menu To complete the refactor, the Portal is also refactored as a Menu using the getMenu function. An old code path supporting portals outputted by hooks with strings is marked as deprecated to simplify this code in future. array-portals-first -> data-portals-first (the value is not an array) Changes: * $this->getLanguages and $this->getToolbox() always returns an array (see BaseTemplate) but we previously supported portals made using raw HTML. Let's move away from that behaviour and deprecate it. * Hooks are moved into buildSidebarProps and marked as deprecated where possible (SkinTemplateToolboxEnd). SidebarBeforeOutput can be used instead. Bug: T249372 Change-Id: I2549af3e24e5d51c09e9a88ca50a0d9b2e154c3f 2020-04-07 23:21:20 +00:00			`{{{html-after-portal}}}`
			`</div>`
Use semantic HTML5 elements where applicable `[role]`s are retained for now as they are harmless although redundant when added to HTML5 elements. `role="contentinfo"` on `footer` is a special case to address a known VoiceOver bug. Bug: T66477 Change-Id: I540d9a41fc7fd580c5d61b90480e8745ae145850 2020-05-13 22:46:23 +00:00			`</nav>`