refactor: use documentFragment for buildTabs

This commit is contained in:
alistair3149 2021-06-21 19:28:47 -04:00
parent 775d38e36a
commit 45fb952d2d
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C

View file

@ -13,11 +13,7 @@ function initTabber( tabber ) {
nextButton = document.createElement( 'div' ); nextButton = document.createElement( 'div' );
const buildTabs = () => { const buildTabs = () => {
container.classList.add( 'tabber__header' ); const fragment = new DocumentFragment();
tablist.classList.add( 'tabber__nav' );
tablist.setAttribute( 'role', 'tablist' );
prevButton.classList.add( 'tabber__header__prev' );
nextButton.classList.add( 'tabber__header__next' );
[ ...tabPanels ].forEach( ( tabPanel ) => { [ ...tabPanels ].forEach( ( tabPanel ) => {
const hash = mw.util.escapeIdForAttribute( tabPanel.title ) + '-' + key, const hash = mw.util.escapeIdForAttribute( tabPanel.title ) + '-' + key,
@ -36,9 +32,17 @@ function initTabber( tabber ) {
tab.setAttribute( 'id', 'tab-' + hash ); tab.setAttribute( 'id', 'tab-' + hash );
tab.setAttribute( 'aria-controls', hash ); tab.setAttribute( 'aria-controls', hash );
tablist.append( tab ); fragment.append( tab );
} ); } );
tablist.append( fragment );
container.classList.add( 'tabber__header' );
tablist.classList.add( 'tabber__nav' );
tablist.setAttribute( 'role', 'tablist' );
prevButton.classList.add( 'tabber__header__prev' );
nextButton.classList.add( 'tabber__header__next' );
container.append( prevButton, tablist, nextButton ); container.append( prevButton, tablist, nextButton );
}; };