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:
commit
9a9f3a72df
|
@ -33,6 +33,6 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"resourceModule": "skins.minerva.scripts",
|
"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 () {
|
( function () {
|
||||||
var
|
var
|
||||||
/** The component selector. */
|
checkboxHack = require( ( 'mediawiki.page.ready' ) ).checkboxHack,
|
||||||
selector = '.toggle-list',
|
CHECKBOX_HACK_CONTAINER_SELECTOR = '.toggle-list',
|
||||||
/** The visible label icon associated with the checkbox. */
|
CHECKBOX_HACK_CHECKBOX_SELECTOR = '.toggle-list__checkbox',
|
||||||
toggleSelector = '.toggle-list__toggle',
|
CHECKBOX_HACK_BUTTON_SELECTOR = '.toggle-list__toggle',
|
||||||
/** The underlying hidden checkbox that controls list visibility. */
|
CHECKBOX_HACK_TARGET_SELECTOR = '.toggle-list__list';
|
||||||
checkboxSelector = '.toggle-list__checkbox';
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Automatically dismiss the list when clicking or focusing elsewhere and update the
|
* Automatically dismiss the list when clicking or focusing elsewhere and update the
|
||||||
|
@ -17,53 +16,20 @@
|
||||||
*/
|
*/
|
||||||
function bind( window, component ) {
|
function bind( window, component ) {
|
||||||
var
|
var
|
||||||
toggle = component.querySelector( toggleSelector ),
|
|
||||||
checkbox = /** @type {HTMLInputElement} */ (
|
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 ( !( checkbox && button && target ) ) {
|
||||||
if ( event.target !== toggle && event.target !== checkbox ) {
|
return;
|
||||||
// Something besides the button or checkbox was tapped. Dismiss the list.
|
}
|
||||||
_dismiss( checkbox );
|
checkboxHack.bind( window, checkbox, button, target );
|
||||||
}
|
|
||||||
}, 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() );
|
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = Object.freeze( {
|
module.exports = Object.freeze( {
|
||||||
selector: selector,
|
selector: CHECKBOX_HACK_CONTAINER_SELECTOR,
|
||||||
bind: bind
|
bind: bind
|
||||||
} );
|
} );
|
||||||
}() );
|
}() );
|
||||||
|
|
|
@ -16,11 +16,13 @@
|
||||||
class="toggle-list__checkbox"
|
class="toggle-list__checkbox"
|
||||||
role="button"
|
role="button"
|
||||||
aria-labelledby="{{toggleID}}"
|
aria-labelledby="{{toggleID}}"
|
||||||
aria-expanded="false">
|
aria-expanded="false"
|
||||||
|
aria-haspopup="true">
|
||||||
<label
|
<label
|
||||||
id="{{toggleID}}"
|
id="{{toggleID}}"
|
||||||
class="toggle-list__toggle {{toggleClass}}"
|
class="toggle-list__toggle {{toggleClass}}"
|
||||||
for="{{checkboxID}}"
|
for="{{checkboxID}}"
|
||||||
|
aria-hidden="true"
|
||||||
data-event-name="{{analyticsEventName}}">
|
data-event-name="{{analyticsEventName}}">
|
||||||
{{text}}
|
{{text}}
|
||||||
</label>
|
</label>
|
||||||
|
|
|
@ -1,51 +1,7 @@
|
||||||
<div id="mw-mf-viewport">
|
<div id="mw-mf-viewport">
|
||||||
<div id="mw-mf-page-center">
|
<div id="mw-mf-page-center">
|
||||||
<a class="mw-mf-page-center__mask" href="#"></a>
|
<a class="mw-mf-page-center__mask" href="#"></a>
|
||||||
<header class="header-container header-chrome">
|
{{>Header}}
|
||||||
<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>
|
|
||||||
<main id="content" class="mw-body">
|
<main id="content" class="mw-body">
|
||||||
<div class="banner-container">
|
<div class="banner-container">
|
||||||
{{>banners}}
|
{{>banners}}
|
||||||
|
|
|
@ -347,7 +347,8 @@ module.exports = function () {
|
||||||
// eslint-disable-next-line no-jquery/no-global-selector
|
// eslint-disable-next-line no-jquery/no-global-selector
|
||||||
$watch = $( '#page-actions-watch' ),
|
$watch = $( '#page-actions-watch' ),
|
||||||
toolbarElement = document.querySelector( Toolbar.selector ),
|
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
|
// The `minerva-animations-ready` class can be used by clients to prevent unwanted
|
||||||
// CSS transitions from firing on page load in some browsers (see
|
// CSS transitions from firing on page load in some browsers (see
|
||||||
|
@ -392,6 +393,14 @@ module.exports = function () {
|
||||||
if ( userMenu ) {
|
if ( userMenu ) {
|
||||||
ToggleList.bind( window, 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();
|
TabScroll.initTabsScrollPosition();
|
||||||
// Setup the issues banner on the page
|
// Setup the issues banner on the page
|
||||||
// Pages which dont exist (id 0) cannot have issues
|
// Pages which dont exist (id 0) cannot have issues
|
||||||
|
|
Loading…
Reference in a new issue