StarCitizenTools/mediawiki-extensions-TabberNeue
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git synced 2024-11-27 17:50:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: use aria attribute instead of class to select panels

Browse source
This commit is contained in:
alistair3149 2022-10-23 17:11:18 -04:00
parent 9349bc334e
commit 656f3967f9
No known key found for this signature in database
1 changed files with 7 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
modules/ext.tabberNeue.js
View file

@ -5,7 +5,8 @@
* @param {number} count * @param {number} count
*/ */
function initTabber( tabber, count ) { function initTabber( tabber, count ) {
var ACTIVETAB_SELECTOR = '[aria-selected="true"]'; var ACTIVETAB_SELECTOR = '[aria-selected="true"]',
ACTIVEPANEL_SELECTOR = '[aria-hidden="false"]';
var tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' ); var tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' );
@ -257,11 +258,10 @@ function initTabber( tabber, count ) {
* @param {boolean} scrollIntoView * @param {boolean} scrollIntoView
*/ */
function showPanel( targetHash, allowRemoteLoad, scrollIntoView ) { function showPanel( targetHash, allowRemoteLoad, scrollIntoView ) {
var ACTIVEPANELCLASS = 'tabber__panel--active', var targetPanel = document.getElementById( targetHash ),
targetPanel = document.getElementById( targetHash ),
targetTab = document.getElementById( 'tab-' + targetHash ), targetTab = document.getElementById( 'tab-' + targetHash ),
section = targetPanel.parentNode, section = targetPanel.parentNode,
activePanel = section.querySelector( ':scope > .' + ACTIVEPANELCLASS ), activePanel = section.querySelector( ':scope > ' + ACTIVEPANEL_SELECTOR ),
parentPanel, parentSection; parentPanel, parentSection;
var loadTransclusion = function () { var loadTransclusion = function () {
@ -294,13 +294,11 @@ function initTabber( tabber, count ) {
resizeObserver.unobserve( activePanel ); resizeObserver.unobserve( activePanel );
} }
activePanel.classList.remove( ACTIVEPANELCLASS );
activePanel.setAttribute( 'aria-hidden', true ); activePanel.setAttribute( 'aria-hidden', true );
} }
// Add active class to the tab // Add active class to the tab
targetTab.setAttribute( 'aria-selected', true ); targetTab.setAttribute( 'aria-selected', true );
targetPanel.classList.add( ACTIVEPANELCLASS );
targetPanel.setAttribute( 'aria-hidden', false ); targetPanel.setAttribute( 'aria-hidden', false );
updateIndicator(); updateIndicator();
@ -320,7 +318,7 @@ function initTabber( tabber, count ) {
// ResizeObserver should take care of the recursivity already // ResizeObserver should take care of the recursivity already
/* eslint-disable-next-line no-unmodified-loop-condition */ /* eslint-disable-next-line no-unmodified-loop-condition */
while ( !resizeObserver ) { while ( !resizeObserver ) {
parentPanel = parentSection.closest( '.' + ACTIVEPANELCLASS ); parentPanel = parentSection.closest( ACTIVEPANEL_SELECTOR );
if ( !parentPanel ) { if ( !parentPanel ) {
break; break;
} }
@ -364,10 +362,9 @@ function initTabber( tabber, count ) {
targetPanel.setAttribute( 'aria-busy', 'false' ); targetPanel.setAttribute( 'aria-busy', 'false' );
} }
var ACTIVEPANELCLASS = 'tabber__panel--active', var targetHash = targetPanel.getAttribute( 'id' ),
targetHash = targetPanel.getAttribute( 'id' ),
section = targetPanel.parentNode, section = targetPanel.parentNode,
activePanel = section.querySelector( ':scope > .' + ACTIVEPANELCLASS ); activePanel = section.querySelector( ':scope > ' + ACTIVEPANEL_SELECTOR );
if ( nextRequest ) { if ( nextRequest ) {
currentRequest = nextRequest; currentRequest = nextRequest;