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

feat: do not animate indicator when scrolling

Browse source
This commit is contained in:
alistair3149 2022-10-23 18:06:52 -04:00
parent ce35fb8908
commit e124e8170a
No known key found for this signature in database
2 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
modules/ext.tabberNeue.js
View file

@ -118,12 +118,22 @@ function initTabber( tabber, count ) {
} }
}; };
var updateIndicator = function () { var updateIndicator = function ( showTransition ) {
var activeTab = tabList.querySelector( ACTIVETAB_SELECTOR ); var activeTab = tabList.querySelector( ACTIVETAB_SELECTOR );
var width = getActualSize( activeTab, 'width' ); var width = getActualSize( activeTab, 'width' );
indicator.style.width = width + 'px'; indicator.style.width = width + 'px';
indicator.style.transform = 'translateX(' + ( activeTab.offsetLeft - tabList.scrollLeft ) + 'px)'; indicator.style.transform = 'translateX(' + ( activeTab.offsetLeft - tabList.scrollLeft ) + 'px)';
indicator.style.transition = '';
// Do not animate when user prefers reduced motion
if ( window.matchMedia( '(prefers-reduced-motion: reduce)' ).matches ) {
return;
}
if ( showTransition ) {
indicator.style.transition = 'transform 250ms ease, width 250ms ease';
}
}; };
var resizeObserver = null; var resizeObserver = null;
@ -201,8 +211,10 @@ function initTabber( tabber, count ) {
// Listen for scroll event on header // Listen for scroll event on header
// Also triggered by side-scrolling using other means other than the buttons // Also triggered by side-scrolling using other means other than the buttons
tabList.addEventListener( 'scroll', function () { tabList.addEventListener( 'scroll', function () {
updateButtons(); window.requestAnimationFrame( function () {
updateIndicator(); updateButtons();
updateIndicator( false );
} );
} ); } );
// Add class to enable animation // Add class to enable animation
@ -300,7 +312,7 @@ function initTabber( tabber, count ) {
targetTab.setAttribute( 'aria-selected', true ); targetTab.setAttribute( 'aria-selected', true );
targetPanel.setAttribute( 'aria-hidden', false ); targetPanel.setAttribute( 'aria-hidden', false );
updateIndicator(); updateIndicator( true );
// Lazyload transclusion if needed // Lazyload transclusion if needed
if ( allowRemoteLoad && if ( allowRemoteLoad &&

6
modules/ext.tabberNeue.less
View file

@ -246,12 +246,6 @@
&__header { &__header {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
&__indicator {
// Placeholder animation
// TODO: Allow indicator to sync with panel scrolling
transition: transform 250ms ease, width 250ms ease;
}
} }
.tabber--animate { .tabber--animate {