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

feat: improve handling of animation

Browse source
This commit is contained in:
alistair3149 2024-05-25 15:27:47 -04:00
parent a66f6e604f
commit b4b66b8172
No known key found for this signature in database
2 changed files with 26 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -329,7 +329,9 @@ class TabberEvent {
if ( !TabberEvent.shouldShowAnimation() ) {
return;
}
document.documentElement.classList.toggle( 'tabber-animations-ready', enableAnimations );
window.requestAnimationFrame( () => {
document.documentElement.classList.toggle( 'tabber-animations-ready', enableAnimations );
} );
}
/**
@ -694,16 +696,16 @@ class TabberBuilder {
*/
attachEvents() {
this.tablist.addEventListener( 'scroll', () => {
const activeTab = this.tablist.querySelector( '[aria-selected="true"]' );
TabberEvent.toggleAnimation( false );
window.requestAnimationFrame( () => {
const activeTab = this.tablist.querySelector( '[aria-selected="true"]' );
TabberEvent.toggleAnimation( false );
TabberEvent.updateHeaderOverflow( this.tabber );
TabberEvent.updateIndicator( this.tabber, activeTab );
// Disable animiation for a short time so that the indicator don't get animated
setTimeout( () => {
TabberEvent.toggleAnimation( true );
}, 100 );
} );
// Disable animiation for a short time so that the indicator don't get animated
setTimeout( () => {
TabberEvent.toggleAnimation( true );
}, 250 );
} );
if ( window.ResizeObserver ) {
const headerOverflowObserver = new ResizeObserver( mw.util.debounce( 250, () => {
@ -746,7 +748,7 @@ function load( tabberEls ) {
tabberBuilder.init();
} );
const urlHash = new mw.Uri( location.href ).fragment;
const urlHash = window.location.hash;
if ( Hash.exists( urlHash ) ) {
TabberEvent.setActiveTab( urlHash );
const activeTabpanel = document.getElementById( urlHash );
@ -755,8 +757,11 @@ function load( tabberEls ) {
} );
}
TabberEvent.toggleAnimation( true );
TabberEvent.attachEvents();
// Delay animation execution so it doesn't not animate the tab gets into position on load
setTimeout( () => {
TabberEvent.toggleAnimation( true );
}, 250 );
}
/**

13
modules/ext.tabberNeue/ext.tabberNeue.less
View file

@ -191,9 +191,20 @@
// Animations
.tabber-animations-ready {
.tabber {
&__header {
scroll-behavior: smooth;
}
&__indicator {
transition: transform 250ms ease, width 250ms ease;
}
&__section,
&__tabs {
@media ( min-width: 720px ) {
scroll-behavior: smooth;
}
}
}
}
@ -249,7 +260,7 @@
}
}
.tabber--animate {
.tabber-animations-ready {
.tabber {
&__section,
&__tabs {