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

perf: only attach resize observer for active tabpanel when it is in viewport

Browse source
This commit is contained in:
alistair3149 2024-06-23 15:38:27 -04:00
parent 72adfbc74e
commit 05e95d880d
No known key found for this signature in database
1 changed files with 6 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -271,6 +271,7 @@ class TabberEvent {
this.header = this.tablist.parentElement; this.header = this.tablist.parentElement;
this.tabs = this.tablist.querySelectorAll( ':scope > .tabber__tab' ); this.tabs = this.tablist.querySelectorAll( ':scope > .tabber__tab' );
this.activeTab = this.tablist.querySelector( '[aria-selected="true"]' ); this.activeTab = this.tablist.querySelector( '[aria-selected="true"]' );
this.activeTabpanel = TabberAction.getTabpanel( this.activeTab );
this.indicator = this.tabber.querySelector( this.indicator = this.tabber.querySelector(
':scope > .tabber__header > .tabber__indicator' ':scope > .tabber__header > .tabber__indicator'
); );
@ -330,6 +331,7 @@ class TabberEvent {
// Prevent default anchor actions // Prevent default anchor actions
e.preventDefault(); e.preventDefault();
this.activeTab = tab; this.activeTab = tab;
this.activeTabpanel = TabberAction.getTabpanel( this.activeTab );
// Update the URL hash without adding to browser history // Update the URL hash without adding to browser history
if ( config.updateLocationOnTabChange ) { if ( config.updateLocationOnTabChange ) {
@ -400,6 +402,7 @@ class TabberEvent {
this.tablist.addEventListener( 'scroll', this.onTablistScroll ); this.tablist.addEventListener( 'scroll', this.onTablistScroll );
this.tablist.addEventListener( 'keydown', this.onTablistKeydown ); this.tablist.addEventListener( 'keydown', this.onTablistKeydown );
resizeObserver.observe( this.tablist ); resizeObserver.observe( this.tablist );
resizeObserver.observe( this.activeTabpanel );
} }
/** /**
@ -410,6 +413,7 @@ class TabberEvent {
this.tablist.removeEventListener( 'scroll', this.onTablistScroll ); this.tablist.removeEventListener( 'scroll', this.onTablistScroll );
this.tablist.removeEventListener( 'keydown', this.onTablistKeydown ); this.tablist.removeEventListener( 'keydown', this.onTablistKeydown );
resizeObserver.unobserve( this.tablist ); resizeObserver.unobserve( this.tablist );
resizeObserver.unobserve( this.activeTabpanel );
} }
/** /**
@ -429,6 +433,8 @@ class TabberEvent {
} ); } );
} ); } );
this.observer.observe( this.tabber ); this.observer.observe( this.tabber );
// Need to unobserve active tabpanels first so that only the ones in viewport are observed
resizeObserver.unobserve( this.activeTabpanel );
this.resume(); this.resume();
} }
} }