mediawiki-skins-MinervaNeue/includes/Skins/ToggleList/ToggleList.js
bwang 0bee6a1eb6 Move the form element in Minerva's header and apply core checkbox hack consistently to toggle lists
- Factors out Header and SearchBox partials

Bug: T294164
Depends-on: I16d1dfba1b6d0745afff14f1b79586bb17ecdd69
Change-Id: I997f3c2de5cf813db63220580e7cb3fe09aa6932
2022-01-04 11:01:17 -06:00

36 lines
1.1 KiB
JavaScript

( function () {
var
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
* aria-expanded attribute based on list visibility.
*
* @param {Window} window
* @param {HTMLElement} component
* @return {void}
*/
function bind( window, component ) {
var
checkbox = /** @type {HTMLInputElement} */ (
component.querySelector( CHECKBOX_HACK_CHECKBOX_SELECTOR )
),
button = component.querySelector( CHECKBOX_HACK_BUTTON_SELECTOR ),
target = component.querySelector( CHECKBOX_HACK_TARGET_SELECTOR );
if ( !( checkbox && button && target ) ) {
return;
}
checkboxHack.bind( window, checkbox, button, target );
}
module.exports = Object.freeze( {
selector: CHECKBOX_HACK_CONTAINER_SELECTOR,
bind: bind
} );
}() );