mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-09-23 10:19:05 +00:00
Merge "Move the form element in Minerva's header and apply core checkbox hack consistently to toggle lists"
This commit is contained in:
jenkins-bot
Gerrit Code Review
commit
9a9f3a72df
|
|
@ -33,6 +33,6 @@
|
|||
},
|
||||
{
|
||||
"resourceModule": "skins.minerva.scripts",
|
||||
"maxSize": "11.8KB"
|
||||
"maxSize": "11.9KB"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
42
includes/Skins/Header.mustache
Normal file
42
includes/Skins/Header.mustache
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
<header class="header-container header-chrome">
|
||||
<div class="minerva-header">
|
||||
<nav class="navigation-drawer toggle-list view-border-box">
|
||||
<input type="checkbox" id="main-menu-input" class="toggle-list__checkbox" role="button" aria-haspopup="true" aria-expanded="false" aria-labelledby="mw-mf-main-menu-button">
|
||||
<label for="main-menu-input" id="mw-mf-main-menu-button" aria-hidden="true"
|
||||
class=" mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-menu-base20 mw-ui-icon-flush-left toggle-list__toggle"
|
||||
title="{{msg-mobile-frontend-main-menu-button-tooltip}}" data-event-name="ui.mainmenu">{{msg-mobile-frontend-main-menu-button-tooltip}}</label>
|
||||
{{#data-minerva-main-menu}}{{>menu}}{{/data-minerva-main-menu}}
|
||||
<label class="main-menu-mask" for="main-menu-input"></label>
|
||||
</nav>
|
||||
<div class="branding-box">
|
||||
<a href="{{link-mainpage}}">
|
||||
{{#data-logos}}
|
||||
<span>{{>Logo}}</span>
|
||||
{{/data-logos}}
|
||||
{{#is-minerva-beta}}<sup>β</sup>{{/is-minerva-beta}}
|
||||
</a>
|
||||
</div>
|
||||
{{#data-search-box}}
|
||||
{{>SearchBox}}
|
||||
{{/data-search-box}}
|
||||
<nav class="minerva-user-navigation" aria-label="{{msg-minerva-user-navigation}}">
|
||||
<div>
|
||||
{{!
|
||||
A button when clicked will submit the form
|
||||
This is used so that on tablet devices with JS disabled the search button
|
||||
passes the value of input to the search
|
||||
We avoid using input[type=submit] as these cannot be easily styled as mediawiki ui icons
|
||||
which is problematic in Opera Mini (see T140490)
|
||||
}}
|
||||
<button id="searchIcon" class="mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-search-base20 skin-minerva-search-trigger mw-ui-button mw-ui-quiet">{{msg-searchbutton}}</button>
|
||||
</div>
|
||||
{{^is-anon}}
|
||||
<div class="minerva-user-notifications" id="pt-notifications-alert">
|
||||
{{{html-minerva-user-notifications}}}
|
||||
</div>
|
||||
{{/is-anon}}
|
||||
{{#html-minerva-user-menu}}{{{html-minerva-user-menu}}}{{/html-minerva-user-menu}}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
7
includes/Skins/SearchBox.mustache
Normal file
7
includes/Skins/SearchBox.mustache
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<form action="{{form-action}}" method="get">
|
||||
<div class="search-box">
|
||||
<input type="hidden" name="title" value="{{page-title}}"/>
|
||||
<input class="search mw-ui-background-icon-search skin-minerva-search-trigger" type="search" name="search" id="searchInput"
|
||||
{{{html-input-attributes}}}">
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
( function () {
|
||||
var
|
||||
/** The component selector. */
|
||||
selector = '.toggle-list',
|
||||
/** The visible label icon associated with the checkbox. */
|
||||
toggleSelector = '.toggle-list__toggle',
|
||||
/** The underlying hidden checkbox that controls list visibility. */
|
||||
checkboxSelector = '.toggle-list__checkbox';
|
||||
checkboxHack = require( ( 'mediawiki.page.ready' ) ).checkboxHack,
|
||||
CHECKBOX_HACK_CONTAINER_SELECTOR = '.toggle-list',
|
||||
CHECKBOX_HACK_CHECKBOX_SELECTOR = '.toggle-list__checkbox',
|
||||
CHECKBOX_HACK_BUTTON_SELECTOR = '.toggle-list__toggle',
|
||||
CHECKBOX_HACK_TARGET_SELECTOR = '.toggle-list__list';
|
||||
|
||||
/**
|
||||
* Automatically dismiss the list when clicking or focusing elsewhere and update the
|
||||
|
|
@ -17,53 +16,20 @@
|
|||
*/
|
||||
function bind( window, component ) {
|
||||
var
|
||||
toggle = component.querySelector( toggleSelector ),
|
||||
checkbox = /** @type {HTMLInputElement} */ (
|
||||
component.querySelector( checkboxSelector )
|
||||
);
|
||||
component.querySelector( CHECKBOX_HACK_CHECKBOX_SELECTOR )
|
||||
),
|
||||
button = component.querySelector( CHECKBOX_HACK_BUTTON_SELECTOR ),
|
||||
target = component.querySelector( CHECKBOX_HACK_TARGET_SELECTOR );
|
||||
|
||||
window.addEventListener( 'click', function ( event ) {
|
||||
if ( event.target !== toggle && event.target !== checkbox ) {
|
||||
// Something besides the button or checkbox was tapped. Dismiss the list.
|
||||
_dismiss( checkbox );
|
||||
}
|
||||
}, true );
|
||||
|
||||
// If focus is given to any element outside the list, dismiss the list. Setting a focusout
|
||||
// listener on list would be preferable, but this interferes with the click listener.
|
||||
window.addEventListener( 'focusin', function ( event ) {
|
||||
if ( event.target instanceof Node && !component.contains( event.target ) ) {
|
||||
// Something besides the button or checkbox was focused. Dismiss the list.
|
||||
_dismiss( checkbox );
|
||||
}
|
||||
}, true );
|
||||
|
||||
checkbox.addEventListener( 'change', _updateAriaExpanded.bind( undefined, checkbox ) );
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides the list.
|
||||
*
|
||||
* @param {HTMLInputElement} checkbox
|
||||
* @return {void}
|
||||
*/
|
||||
function _dismiss( checkbox ) {
|
||||
checkbox.checked = false;
|
||||
_updateAriaExpanded( checkbox );
|
||||
}
|
||||
|
||||
/**
|
||||
* Revise the aria-expanded state to match the checked state.
|
||||
*
|
||||
* @param {HTMLInputElement} checkbox
|
||||
* @return {void}
|
||||
*/
|
||||
function _updateAriaExpanded( checkbox ) {
|
||||
checkbox.setAttribute( 'aria-expanded', ( !!checkbox.checked ).toString() );
|
||||
if ( !( checkbox && button && target ) ) {
|
||||
return;
|
||||
}
|
||||
checkboxHack.bind( window, checkbox, button, target );
|
||||
}
|
||||
|
||||
module.exports = Object.freeze( {
|
||||
selector: selector,
|
||||
selector: CHECKBOX_HACK_CONTAINER_SELECTOR,
|
||||
bind: bind
|
||||
} );
|
||||
}() );
|
||||
|
|
|
|||
|
|
@ -16,11 +16,13 @@
|
|||
class="toggle-list__checkbox"
|
||||
role="button"
|
||||
aria-labelledby="{{toggleID}}"
|
||||
aria-expanded="false">
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true">
|
||||
<label
|
||||
id="{{toggleID}}"
|
||||
class="toggle-list__toggle {{toggleClass}}"
|
||||
for="{{checkboxID}}"
|
||||
aria-hidden="true"
|
||||
data-event-name="{{analyticsEventName}}">
|
||||
{{text}}
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,51 +1,7 @@
|
|||
<div id="mw-mf-viewport">
|
||||
<div id="mw-mf-page-center">
|
||||
<a class="mw-mf-page-center__mask" href="#"></a>
|
||||
<header class="header-container header-chrome">
|
||||
<form class="minerva-header" {{#data-search-box}}action="{{form-action}}"{{/data-search-box}} method="get">
|
||||
<nav class="navigation-drawer toggle-list view-border-box">
|
||||
<input type="checkbox" id="main-menu-input" class="toggle-list__checkbox" role="button" aria-labelledby="mw-mf-main-menu-button">
|
||||
<label for="main-menu-input" id="mw-mf-main-menu-button"
|
||||
class=" mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-menu-base20 mw-ui-icon-flush-left toggle-list__toggle"
|
||||
title="{{msg-mobile-frontend-main-menu-button-tooltip}}" data-event-name="ui.mainmenu">{{msg-mobile-frontend-main-menu-button-tooltip}}</label>
|
||||
{{#data-minerva-main-menu}}{{>menu}}{{/data-minerva-main-menu}}
|
||||
<label class="main-menu-mask" for="main-menu-input"></label>
|
||||
</nav>
|
||||
<div class="branding-box">
|
||||
<a href="{{link-mainpage}}">
|
||||
{{#data-logos}}
|
||||
<span>{{>Logo}}</span>
|
||||
{{/data-logos}}
|
||||
{{#is-minerva-beta}}<sup>β</sup>{{/is-minerva-beta}}
|
||||
</a>
|
||||
</div>
|
||||
{{#data-search-box}}
|
||||
<div class="search-box">
|
||||
<input type="hidden" name="title" value="{{page-title}}"/>
|
||||
<input class="search mw-ui-background-icon-search skin-minerva-search-trigger" type="search" name="search" id="searchInput"
|
||||
{{{html-input-attributes}}}">
|
||||
</div>
|
||||
{{/data-search-box}}
|
||||
<nav class="minerva-user-navigation" aria-label="{{msg-minerva-user-navigation}}">
|
||||
<div>
|
||||
{{!
|
||||
A button when clicked will submit the form
|
||||
This is used so that on tablet devices with JS disabled the search button
|
||||
passes the value of input to the search
|
||||
We avoid using input[type=submit] as these cannot be easily styled as mediawiki ui icons
|
||||
which is problematic in Opera Mini (see T140490)
|
||||
}}
|
||||
<button id="searchIcon" class="mw-ui-icon mw-ui-icon-element mw-ui-icon-wikimedia-search-base20 skin-minerva-search-trigger mw-ui-button mw-ui-quiet">{{msg-searchbutton}}</button>
|
||||
</div>
|
||||
{{^is-anon}}
|
||||
<div class="minerva-user-notifications" id="pt-notifications-alert">
|
||||
{{{html-minerva-user-notifications}}}
|
||||
</div>
|
||||
{{/is-anon}}
|
||||
{{#html-minerva-user-menu}}{{{html-minerva-user-menu}}}{{/html-minerva-user-menu}}
|
||||
</nav>
|
||||
</form>
|
||||
</header>
|
||||
{{>Header}}
|
||||
<main id="content" class="mw-body">
|
||||
<div class="banner-container">
|
||||
{{>banners}}
|
||||
|
|
|
|||
|
|
@ -347,7 +347,8 @@ module.exports = function () {
|
|||
// eslint-disable-next-line no-jquery/no-global-selector
|
||||
$watch = $( '#page-actions-watch' ),
|
||||
toolbarElement = document.querySelector( Toolbar.selector ),
|
||||
userMenu = document.querySelector( '.minerva-user-menu' ); // See UserMenuDirector.
|
||||
userMenu = document.querySelector( '.minerva-user-menu' ), // See UserMenuDirector.
|
||||
navigationDrawer = document.querySelector( '.navigation-drawer' );
|
||||
|
||||
// The `minerva-animations-ready` class can be used by clients to prevent unwanted
|
||||
// CSS transitions from firing on page load in some browsers (see
|
||||
|
|
@ -392,6 +393,14 @@ module.exports = function () {
|
|||
if ( userMenu ) {
|
||||
ToggleList.bind( window, userMenu );
|
||||
}
|
||||
if ( navigationDrawer ) {
|
||||
ToggleList.bind( window, navigationDrawer );
|
||||
var navigationDrawerMask = navigationDrawer.querySelector( '.main-menu-mask' );
|
||||
// The 'for' attribute is used to close the drawer when the mask is clicked without JS
|
||||
// Since we are using JS to enhance the drawer behavior, we need to
|
||||
// remove the attribute to prevent the drawer from being toggled twice
|
||||
navigationDrawerMask.removeAttribute( 'for' );
|
||||
}
|
||||
TabScroll.initTabsScrollPosition();
|
||||
// Setup the issues banner on the page
|
||||
// Pages which dont exist (id 0) cannot have issues
|
||||
|
|
|
|||
Loading…
Reference in a new issue