mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-24 18:59:24 +00:00
91af0e098d
Now that the header collapses at small resolutions (I89d75843ca7e33e6de93af5d7c22e46b7249c4b7), this commit wires the search toggle to show the search box when clicked and hides it when the user clicks outside the search box. * Adds searchToggle.js to perform handle the toggle behavior of the searchbox. * Adds `@padding-horizontal-tabs`, `@size-search-expand` to variables.less so that these can be used to set the start margin of the search box (enabling its start edge to match the tab text start edge). * Modifies screen.less to only apply search max-width when >= @width-breakpoint-tablet Bug: T284242 Change-Id: I82563d44967f60aee1cd4d3aa6fb4f405822686b
89 lines
2.6 KiB
JavaScript
89 lines
2.6 KiB
JavaScript
var
|
|
HEADER_SELECTOR = '.mw-header',
|
|
SEARCH_TOGGLE_SELECTOR = '.search-toggle',
|
|
SEARCH_BOX_ID = 'p-search',
|
|
SEARCH_VISIBLE_CLASS = 'vector-header-search-toggled';
|
|
|
|
/**
|
|
* Binds event handlers necessary for the searchBox to disappear when the user
|
|
* clicks outside the searchBox.
|
|
*
|
|
* @param {HTMLElement} searchBox
|
|
* @param {HTMLElement} header
|
|
*/
|
|
function bindSearchBoxHandler( searchBox, header ) {
|
|
/**
|
|
* @param {Event} ev
|
|
* @ignore
|
|
*/
|
|
function clickHandler( ev ) {
|
|
if (
|
|
ev.target instanceof HTMLElement &&
|
|
// Check if the click target was a suggestion link. WVUI clears the
|
|
// suggestion elements from the DOM when a suggestion is clicked so we
|
|
// can't test if the suggestion is a child of the searchBox.
|
|
!$( ev.target ).closest( '.wvui-typeahead-suggestion' ).length &&
|
|
!searchBox.contains( ev.target )
|
|
) {
|
|
// eslint-disable-next-line mediawiki/class-doc
|
|
header.classList.remove( SEARCH_VISIBLE_CLASS );
|
|
|
|
document.removeEventListener( 'click', clickHandler );
|
|
}
|
|
}
|
|
|
|
document.addEventListener( 'click', clickHandler );
|
|
}
|
|
|
|
/**
|
|
* Binds event handlers necessary for the searchBox to show when the toggle is
|
|
* clicked.
|
|
*
|
|
* @param {HTMLElement} searchBox
|
|
* @param {HTMLElement} header
|
|
* @param {HTMLElement} searchToggle
|
|
*/
|
|
function bindToggleClickHandler( searchBox, header, searchToggle ) {
|
|
/**
|
|
* @param {Event} ev
|
|
* @ignore
|
|
*/
|
|
function handler( ev ) {
|
|
// The toggle is an anchor element. Prevent the browser from navigating away
|
|
// from the page when clicked.
|
|
ev.preventDefault();
|
|
|
|
bindSearchBoxHandler( searchBox, header );
|
|
|
|
// eslint-disable-next-line mediawiki/class-doc
|
|
header.classList.add( SEARCH_VISIBLE_CLASS );
|
|
|
|
// Defer focusing the input to another task in the event loop. At the time
|
|
// of this writing, Safari 14.0.3 has trouble changing the visibility of the
|
|
// element and focusing the input within the same task.
|
|
setTimeout( function () {
|
|
var searchInput = /** @type {HTMLInputElement|null} */ ( searchBox.querySelector( 'input[type="search"]' ) );
|
|
|
|
if ( searchInput ) {
|
|
searchInput.focus();
|
|
}
|
|
} );
|
|
}
|
|
|
|
searchToggle.addEventListener( 'click', handler );
|
|
}
|
|
|
|
module.exports = function initSearchToggle() {
|
|
var
|
|
header = /** @type {HTMLElement|null} */ ( document.querySelector( HEADER_SELECTOR ) ),
|
|
searchBox = /** @type {HTMLElement|null} */ ( document.getElementById( SEARCH_BOX_ID ) ),
|
|
searchToggle =
|
|
/** @type {HTMLElement|null} */ ( document.querySelector( SEARCH_TOGGLE_SELECTOR ) );
|
|
|
|
if ( !( searchBox && searchToggle && header ) ) {
|
|
return;
|
|
}
|
|
|
|
bindToggleClickHandler( searchBox, header, searchToggle );
|
|
};
|