jonny
/
Vector-Local
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ensure collapsible TOC is closed when links are clicked 

Bug: T310828
Depends-on: I2783928740e6a0684476a642f812cc6647be8e3f
Change-Id: I0bab194465f89637eecb43590eb8d29b5f2fd7d2
This commit is contained in:
bwang 2022-07-26 13:58:01 -05:00 committed by Bernard Wang
parent 479bcc3958
commit e5251a1448
3 changed files with 37 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
resources/skins.vector.js/checkbox.js
View File

@ -5,12 +5,6 @@
* However the main menu and collapsible TOC use a variation of the checkbox hack
* that requires their own JS for enhancements.
*
* This code targets any element with a mw-checkbox-hack-button class. It must have
* a `for` attribute to qualify for enhancements.
*
* Enhancements include:
* - Update `aria-role`s based on expanded/collapsed state.
* - Update button icon based on expanded/collapsed state.
*/
/** @interface MwApiConstructor */
@ -96,15 +90,15 @@ function bindToggleOnSpaceEnter( button ) {
}
/**
* Improve the interactivity of the sidebar panel by binding optional checkbox hack enhancements
* for focus and `aria-expanded`. Also, flip the icon image on click.
* Improve the interactivity of the sidebar panel by binding checkbox hack enhancements.
*
* @param {HTMLElement|null} checkbox
* @param {HTMLElement|null} button
* @param {HTMLElement|null} target
* @return {void}
*/
function initCheckboxHack( checkbox, button ) {
if ( checkbox instanceof HTMLInputElement && button ) {
function initMainMenu( checkbox, button, target ) {
if ( checkbox instanceof HTMLInputElement && button && target ) {
checkboxHack.bindToggleOnClick( checkbox, button );
bindUpdateAriaExpandedOnInput( checkbox, button );
updateAriaExpanded( checkbox, button );
@ -113,22 +107,41 @@ function initCheckboxHack( checkbox, button ) {
}
/**
* Initialize all JavaScript sidebar enhancements.
* Improve the interactivity of the collapsed TOC by binding checkbox hack enhancements.
*
* @param {Window} window
* @param {HTMLElement|null} checkbox
* @param {HTMLElement|null} button
* @param {HTMLElement|null} target
* @return {void}
*/
function init( window ) {
var buttons = window.document.querySelectorAll( '.mw-checkbox-hack-button' );
function initCollapsedToc( checkbox, button, target ) {
if ( checkbox instanceof HTMLInputElement && button && target ) {
checkboxHack.bindToggleOnClick( checkbox, button );
checkboxHack.bindDismissOnClickOutside( window, checkbox, button, target );
checkboxHack.bindDismissOnClickLink( checkbox, target );
bindUpdateAriaExpandedOnInput( checkbox, button );
updateAriaExpanded( checkbox, button );
bindToggleOnSpaceEnter( button );
}
}
Array.prototype.forEach.call( buttons, function ( button ) {
var checkboxId = button.getAttribute( 'for' ),
checkbox = checkboxId ? window.document.getElementById( checkboxId ) : null;
if ( checkbox ) {
initCheckboxHack( checkbox, button );
}
} );
/**
* Initialize main menu and collapsed TOC enhancements.
*
* @param {Document} document
*/
function init( document ) {
initMainMenu(
document.getElementById( 'mw-sidebar-checkbox' ),
document.getElementById( 'mw-sidebar-button' ),
document.getElementById( 'mw-navigation' )
);
initCollapsedToc(
document.getElementById( 'vector-toc-collapsed-checkbox' ),
document.getElementById( 'vector-toc-collapsed-button' ),
document.getElementById( 'mw-panel-toc' )
);
}
module.exports = {

17
resources/skins.vector.js/dropdownMenus.js
View File

@ -8,8 +8,7 @@ var
CHECKBOX_HACK_TARGET_SELECTOR = '.vector-menu-content';
/**
* Add the ability for users to toggle dropdown menus using the enter key (as
* well as space) using core's checkboxHack.
* Enhance dropdownMenu functionality and accessibility using core's checkboxHack.
*/
function bind() {
// Search for all dropdown containers using the CHECKBOX_HACK_CONTAINER_SELECTOR.
@ -29,19 +28,6 @@ function bind() {
} );
}
/**
* T295085: Close all dropdown menus when page is unloaded to prevent them from
* being open when navigating back to a page.
*/
function bindCloseOnUnload() {
addEventListener( 'beforeunload', function () {
var checkboxes = document.querySelectorAll( CHECKBOX_HACK_CHECKBOX_SELECTOR + ':checked' );
Array.prototype.forEach.call( checkboxes, function ( checkbox ) {
/** @type {HTMLInputElement} */ ( checkbox ).checked = false;
} );
} );
}
/**
* Adds icon placeholder for gadgets to use.
*
@ -115,5 +101,4 @@ mw.hook( 'util.addPortletLink' ).add( addPortletLinkHandler );
module.exports = function dropdownMenus() {
bind();
bindCloseOnUnload();
};

2
resources/skins.vector.js/skin.js
View File

@ -43,7 +43,7 @@ function enableCssAnimations( document ) {
function main( window ) {
enableCssAnimations( window.document );
sidebarPersistence.init();
checkbox.init( window );
checkbox.init( window.document );
initSearchLoader( document );
languageButton();
dropdownMenus();