StarCitizenTools/mediawiki-extensions-TabberNeue
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git synced 2024-11-23 16:06:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: drop incorrect usage of rAF and do not set aria-hidden on tabpanels

Browse source
This commit is contained in:
alistair3149 2024-11-16 00:19:36 -05:00 committed by alistair3149
parent e85d4785b1
commit 910f5c72f4
1 changed files with 40 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
modules/ext.tabberNeue/ext.tabberNeue.js
View file

@ -41,12 +41,10 @@ class TabberAction {
if ( !TabberAction.shouldShowAnimation() ) {
return;
}
window.requestAnimationFrame( () => {
document.documentElement.classList.toggle(
'tabber-animations-ready',
enableAnimations
);
} );
document.documentElement.classList.toggle(
'tabber-animations-ready',
enableAnimations
);
}
/**
@ -63,10 +61,8 @@ class TabberAction {
const isScrollable = tablistScrollWidth > tablistWidth;
if ( !isScrollable ) {
window.requestAnimationFrame( () => {
header.classList.remove( 'tabber__header--next-visible' );
header.classList.remove( 'tabber__header--prev-visible' );
} );
header.classList.remove( 'tabber__header--next-visible' );
header.classList.remove( 'tabber__header--prev-visible' );
return;
}
@ -75,16 +71,14 @@ class TabberAction {
const isAtEnd = scrollLeft + tablistWidth >= tablistScrollWidth;
const isAtMiddle = !isAtStart && !isAtEnd;
window.requestAnimationFrame( () => {
header.classList.toggle(
'tabber__header--next-visible',
isAtStart || isAtMiddle
);
header.classList.toggle(
'tabber__header--prev-visible',
isAtEnd || isAtMiddle
);
} );
header.classList.toggle(
'tabber__header--next-visible',
isAtStart || isAtMiddle
);
header.classList.toggle(
'tabber__header--prev-visible',
isAtEnd || isAtMiddle
);
}
/**
@ -150,39 +144,31 @@ class TabberAction {
currentActiveTabpanel = TabberAction.getTabpanel( currentActiveTab );
}
window.requestAnimationFrame( () => {
if ( currentActiveTab ) {
const currentActiveTabAttributes = {
tabindex: -1,
'aria-selected': 'false'
};
Util.setAttributes( currentActiveTab, currentActiveTabAttributes );
if ( currentActiveTab ) {
const currentActiveTabAttributes = {
tabindex: -1,
'aria-selected': 'false'
};
Util.setAttributes( currentActiveTab, currentActiveTabAttributes );
if ( currentActiveTabpanel ) {
const currentActiveTabpanelAttributes = {
tabindex: -1,
'aria-hidden': 'true'
};
Util.setAttributes( currentActiveTabpanel, currentActiveTabpanelAttributes );
}
if ( currentActiveTabpanel ) {
const currentActiveTabpanelAttributes = { tabindex: -1 };
Util.setAttributes( currentActiveTabpanel, currentActiveTabpanelAttributes );
}
}
const activeTabAttributes = {
tabindex: 0,
'aria-selected': 'true'
};
const activeTabAttributes = {
tabindex: 0,
'aria-selected': 'true'
};
const activeTabpanelAttributes = {
tabindex: 0,
'aria-hidden': 'false'
};
const activeTabpanelAttributes = { tabindex: 0 };
Util.setAttributes( activeTab, activeTabAttributes );
Util.setAttributes( activeTabpanel, activeTabpanelAttributes );
TabberAction.setActiveTabpanel( activeTabpanel, currentActiveTabpanel );
Util.setAttributes( activeTab, activeTabAttributes );
Util.setAttributes( activeTabpanel, activeTabpanelAttributes );
TabberAction.setActiveTabpanel( activeTabpanel, currentActiveTabpanel );
resolve();
} );
resolve();
} );
}
@ -193,13 +179,16 @@ class TabberAction {
* @param {Element} tablist - The tab list element to scroll.
*/
static scrollTablist( offset, tablist ) {
const scrollLeft = Util.roundScrollLeft( tablist.scrollLeft ) + offset;
window.requestAnimationFrame( () => {
tablist.scrollLeft = Math.min(
const getToScroll = () => {
const scrollLeft = Util.roundScrollLeft( tablist.scrollLeft ) + offset;
return Math.min(
Math.max( scrollLeft, 0 ),
tablist.scrollWidth - tablist.offsetWidth
);
};
const toScroll = getToScroll();
window.requestAnimationFrame( () => {
tablist.scrollLeft = toScroll;
} );
}