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: merge activeTabpanel resize observer into the main resizeObserver

Browse source
This commit is contained in:
alistair3149 2024-06-07 14:53:48 -04:00
parent a414d2df70
commit 35ffe555c0
No known key found for this signature in database
1 changed files with 12 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -246,14 +246,19 @@ class TabberAction {
}
/**
* Handles the resize event for the header element.
* Updates the header overflow based on the scroll position of the tab list.
* Handles the resize event for tabber elements.
* Updates the header overflow if the resized element is a tab list,
* or sets the active tab panel if the resized element is a tab panel.
*
* @param {ResizeObserverEntry[]} entries - An array of ResizeObserverEntry objects.
*/
static handleHeaderResize( entries ) {
static onResize( entries ) {
for ( const { target } of entries ) {
TabberAction.updateHeaderOverflow( target );
if ( target.classList.contains( 'tabber__tabs' ) ) {
TabberAction.updateHeaderOverflow( target );
} else if ( target.classList.contains( 'tabber__panel' ) ) {
TabberAction.setActiveTabpanel( target );
}
}
}
}
@ -275,13 +280,10 @@ class TabberEvent {
this.indicator = this.tabber.querySelector( ':scope > .tabber__header > .tabber__indicator' );
this.tabFocus = 0;
this.debouncedUpdateHeaderOverflow = mw.util.debounce( () => TabberAction.updateHeaderOverflow( this.tablist ), 100 );
this.debouncedSetActiveTabpanel = mw.util.debounce( () => TabberAction.setActiveTabpanel( this.getActiveTabpanel() ), 100 );
this.handleTabFocusChange = this.handleTabFocusChange.bind( this );
this.onHeaderClick = this.onHeaderClick.bind( this );
this.onTablistScroll = this.onTablistScroll.bind( this );
this.onTablistKeydown = this.onTablistKeydown.bind( this );
// eslint-disable-next-line compat/compat
this.activeTabpanelObserver = new ResizeObserver( this.debounceSetActiveTabpanel() );
}
/**
@ -293,15 +295,6 @@ class TabberEvent {
return document.getElementById( this.activeTab.getAttribute( 'aria-controls' ) );
}
/**
* Returns a debounced function that updates the height of the active tabpanel
*
* @return {Function} A debounced function that updates the height of the active tabpanel.
*/
debounceSetActiveTabpanel() {
return this.debouncedSetActiveTabpanel;
}
/**
* Returns a debounced function that updates the header overflow.
*
@ -412,8 +405,8 @@ class TabberEvent {
this.header.addEventListener( 'click', this.onHeaderClick );
this.tablist.addEventListener( 'scroll', this.onTablistScroll );
this.tablist.addEventListener( 'keydown', this.onTablistKeydown );
this.activeTabpanelObserver.observe( this.getActiveTabpanel() );
resizeObserver.observe( this.tablist );
resizeObserver.observe( this.getActiveTabpanel() );
}
/**
@ -423,8 +416,8 @@ class TabberEvent {
this.header.removeEventListener( 'click', this.onHeaderClick );
this.tablist.removeEventListener( 'scroll', this.onTablistScroll );
this.tablist.removeEventListener( 'keydown', this.onTablistKeydown );
this.activeTabpanelObserver.unobserve( this.getActiveTabpanel() );
resizeObserver.unobserve( this.tablist );
resizeObserver.unobserve( this.getActiveTabpanel() );
}
/**
@ -650,7 +643,7 @@ function load( tabberEls ) {
}
// eslint-disable-next-line compat/compat
resizeObserver = new ResizeObserver( mw.util.debounce( TabberAction.handleHeaderResize, 100 ) );
resizeObserver = new ResizeObserver( mw.util.debounce( TabberAction.onResize, 100 ) );
// Delay animation execution so it doesn't not animate the tab gets into position on load
setTimeout( () => {