mirror of
https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git
synced 2024-11-23 16:06:45 +00:00
refactor: simplify VE tabber condition check
This commit is contained in:
parent
70f632a4db
commit
b0670f5df8
|
@ -30,10 +30,9 @@ ve.ce.MWTabberNode.static.tagName = 'div';
|
|||
|
||||
ve.ce.MWTabberNode.static.primaryCommandName = 'mwTabber';
|
||||
|
||||
/* Methods */
|
||||
// eslint-disable-next-line no-var
|
||||
var lastHeader;
|
||||
ve.ce.MWTabberNode.static.lastHeader = null;
|
||||
|
||||
/* Methods */
|
||||
/**
|
||||
* @inheritdoc
|
||||
*/
|
||||
|
@ -42,13 +41,11 @@ ve.ce.MWTabberNode.prototype.onSetup = function () {
|
|||
ve.ce.MWTabberNode.super.prototype.onSetup.call( this );
|
||||
|
||||
const tabber = this.$element[ 0 ];
|
||||
const needsInit = tabber.classList.contains( 'tabber--init' );
|
||||
const isNewHeader = tabber.firstElementChild !== ve.ce.MWTabberNode.static.lastHeader;
|
||||
|
||||
// Do not render header if it is already rendered
|
||||
if (
|
||||
tabber.firstElementChild &&
|
||||
tabber.firstElementChild !== lastHeader &&
|
||||
!tabber.classList.contains( 'tabber--live' ) &&
|
||||
tabber.classList.contains( 'tabber' )
|
||||
if ( needsInit && isNewHeader
|
||||
) {
|
||||
this.renderHeader( tabber );
|
||||
}
|
||||
|
@ -66,7 +63,9 @@ ve.ce.MWTabberNode.prototype.renderHeader = function ( tabber ) {
|
|||
const nestedTabbers = tabber.querySelectorAll( '.tabber__panel:first-child .tabber' );
|
||||
const renderSingleHeader = function ( element ) {
|
||||
const firstTab = element.querySelector( ':scope > .tabber__header > .tabber__tabs > .tabber__tab' );
|
||||
firstTab.setAttribute( 'aria-selected', true );
|
||||
if ( firstTab ) {
|
||||
firstTab.setAttribute( 'aria-selected', 'true' );
|
||||
}
|
||||
};
|
||||
|
||||
if ( nestedTabbers.length > 0 ) {
|
||||
|
@ -76,7 +75,7 @@ ve.ce.MWTabberNode.prototype.renderHeader = function ( tabber ) {
|
|||
}
|
||||
|
||||
renderSingleHeader( tabber );
|
||||
lastHeader = tabber.firstElementChild;
|
||||
ve.ce.MWTabberNode.static.lastHeader = tabber.firstElementChild;
|
||||
};
|
||||
|
||||
/* Registration */
|
||||
|
|
|
@ -30,6 +30,8 @@ ve.ce.MWTabberTranscludeNode.static.tagName = 'div';
|
|||
|
||||
ve.ce.MWTabberTranscludeNode.static.primaryCommandName = 'mwTabberTransclude';
|
||||
|
||||
ve.ce.MWTabberTranscludeNode.static.lastHeader = null;
|
||||
|
||||
/* Methods */
|
||||
// eslint-disable-next-line no-var
|
||||
var lastHeader;
|
||||
|
@ -42,13 +44,11 @@ ve.ce.MWTabberTranscludeNode.prototype.onSetup = function () {
|
|||
ve.ce.MWTabberTranscludeNode.super.prototype.onSetup.call( this );
|
||||
|
||||
const tabber = this.$element[ 0 ];
|
||||
const needsInit = tabber.classList.contains( 'tabber--init' );
|
||||
const isNewHeader = tabber.firstElementChild !== ve.ce.MWTabberNode.static.lastHeader;
|
||||
|
||||
// Do not render header if it is already rendered
|
||||
if (
|
||||
tabber.firstElementChild &&
|
||||
tabber.firstElementChild !== lastHeader &&
|
||||
!tabber.classList.contains( 'tabber--live' ) &&
|
||||
tabber.classList.contains( 'tabber' )
|
||||
if ( needsInit && isNewHeader
|
||||
) {
|
||||
this.renderHeader( tabber );
|
||||
}
|
||||
|
@ -63,39 +63,22 @@ ve.ce.MWTabberTranscludeNode.prototype.onSetup = function () {
|
|||
* @param {HTMLElement} tabber
|
||||
*/
|
||||
ve.ce.MWTabberTranscludeNode.prototype.renderHeader = function ( tabber ) {
|
||||
const
|
||||
tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' ),
|
||||
header = tabber.querySelector( ':scope > .tabber__header' ),
|
||||
tabList = document.createElement( 'nav' ),
|
||||
indicator = document.createElement( 'div' ),
|
||||
fragment = new DocumentFragment();
|
||||
|
||||
Array.prototype.forEach.call( tabPanels, ( tabPanel, index ) => {
|
||||
const tab = document.createElement( 'a' );
|
||||
|
||||
tab.innerText = tabPanel.getAttribute( 'data-mw-tabber-title' );
|
||||
tab.classList.add( 'tabber__tab' );
|
||||
|
||||
// Make first tab active
|
||||
if ( index === 0 ) {
|
||||
tab.setAttribute( 'aria-selected', true );
|
||||
const nestedTabbers = tabber.querySelectorAll( '.tabber__panel:first-child .tabber' );
|
||||
const renderSingleHeader = function ( element ) {
|
||||
const firstTab = element.querySelector( ':scope > .tabber__header > .tabber__tabs > .tabber__tab' );
|
||||
if ( firstTab ) {
|
||||
firstTab.setAttribute( 'aria-selected', 'true' );
|
||||
}
|
||||
};
|
||||
|
||||
fragment.append( tab );
|
||||
} );
|
||||
if ( nestedTabbers.length > 0 ) {
|
||||
Array.prototype.forEach.call( nestedTabbers, ( nestedTabber ) => {
|
||||
renderSingleHeader( nestedTabber );
|
||||
} );
|
||||
}
|
||||
|
||||
tabList.append( fragment );
|
||||
|
||||
tabList.classList.add( 'tabber__tabs' );
|
||||
indicator.classList.add( 'tabber__indicator' );
|
||||
|
||||
header.append( tabList, indicator );
|
||||
|
||||
indicator.style.width = tabList.firstElementChild.offsetWidth + 'px';
|
||||
|
||||
tabber.classList.add( 'tabber--live' );
|
||||
|
||||
lastHeader = tabber.firstElementChild;
|
||||
renderSingleHeader( tabber );
|
||||
ve.ce.MWTabberNode.static.lastHeader = tabber.firstElementChild;
|
||||
};
|
||||
|
||||
/* Registration */
|
||||
|
|
Loading…
Reference in a new issue