mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git
synced 2024-09-25 03:09:24 +00:00
Merge "Add setFocusToToggleButton function to pinnableElement.js"
This commit is contained in:
commit
4c65b5ec59
|
@ -138,6 +138,7 @@ const updateTocLocation = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
pinnableElement.movePinnableElement( TOC_ID, newContainerId );
|
pinnableElement.movePinnableElement( TOC_ID, newContainerId );
|
||||||
|
pinnableElement.setFocusOnToggleButton( TOC_ID );
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -97,14 +97,45 @@ function pinnableElementClickHandler( header ) {
|
||||||
} = header.dataset;
|
} = header.dataset;
|
||||||
|
|
||||||
togglePinnableClasses( header );
|
togglePinnableClasses( header );
|
||||||
|
setSavedPinnableState( header );
|
||||||
|
|
||||||
// Optional functionality of moving the pinnable element in the DOM
|
// Optional functionality of moving the pinnable element in the DOM
|
||||||
// to different containers based on it's pinned status
|
// to different containers based on it's pinned status
|
||||||
if ( pinnableElementId && pinnedContainerId && unpinnedContainerId ) {
|
if ( pinnableElementId && pinnedContainerId && unpinnedContainerId ) {
|
||||||
const newContainerId = isPinned( header ) ? pinnedContainerId : unpinnedContainerId;
|
const newContainerId = isPinned( header ) ? pinnedContainerId : unpinnedContainerId;
|
||||||
movePinnableElement( pinnableElementId, newContainerId );
|
movePinnableElement( pinnableElementId, newContainerId );
|
||||||
|
setFocusOnToggleButton( pinnableElementId );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets focus on the correct toggle button depending on the pinned state.
|
||||||
|
* Also opens the dropdown containing the unpinned element.
|
||||||
|
*
|
||||||
|
* @param {string} pinnableElementId
|
||||||
|
*/
|
||||||
|
function setFocusOnToggleButton( pinnableElementId ) {
|
||||||
|
let focusElement;
|
||||||
|
const pinnableElement = document.getElementById( pinnableElementId );
|
||||||
|
const header = /** @type {HTMLElement|null} */ ( pinnableElement && pinnableElement.querySelector( '.vector-pinnable-header' ) );
|
||||||
|
if ( !pinnableElement || !header ) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( isPinned( header ) ) {
|
||||||
|
focusElement = /** @type {HTMLElement|null} */ ( pinnableElement.querySelector( '.vector-pinnable-header-unpin-button' ) );
|
||||||
|
} else {
|
||||||
|
const dropdown = pinnableElement.closest( '.vector-menu-dropdown' );
|
||||||
|
const dropdownCheckbox = /** @type {HTMLInputElement|null} */ ( dropdown && dropdown.querySelector( '.vector-menu-checkbox' ) );
|
||||||
|
// Open dropdown containing the unpinned element
|
||||||
|
if ( dropdownCheckbox ) {
|
||||||
|
dropdownCheckbox.checked = true;
|
||||||
|
}
|
||||||
|
focusElement = /** @type {HTMLElement|null} */ ( pinnableElement.querySelector( '.vector-pinnable-header-pin-button' ) );
|
||||||
|
}
|
||||||
|
if ( focusElement ) {
|
||||||
|
focusElement.focus();
|
||||||
}
|
}
|
||||||
setSavedPinnableState( header );
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -124,6 +155,7 @@ function bindPinnableToggleButtons( header ) {
|
||||||
toggleButtons.forEach( function ( button ) {
|
toggleButtons.forEach( function ( button ) {
|
||||||
button.addEventListener( 'click', pinnableElementClickHandler.bind( null, header ) );
|
button.addEventListener( 'click', pinnableElementClickHandler.bind( null, header ) );
|
||||||
} );
|
} );
|
||||||
|
|
||||||
// set saved pinned state for narrow breakpoint behaviour.
|
// set saved pinned state for narrow breakpoint behaviour.
|
||||||
setSavedPinnableState( header );
|
setSavedPinnableState( header );
|
||||||
// Check the breakpoint in case an override is needed on pageload.
|
// Check the breakpoint in case an override is needed on pageload.
|
||||||
|
@ -177,6 +209,7 @@ function initPinnableElement() {
|
||||||
module.exports = {
|
module.exports = {
|
||||||
initPinnableElement,
|
initPinnableElement,
|
||||||
movePinnableElement,
|
movePinnableElement,
|
||||||
|
setFocusOnToggleButton,
|
||||||
isPinned,
|
isPinned,
|
||||||
PINNED_HEADER_CLASS,
|
PINNED_HEADER_CLASS,
|
||||||
UNPINNED_HEADER_CLASS
|
UNPINNED_HEADER_CLASS
|
||||||
|
|
Loading…
Reference in a new issue