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: allow nested Tabber to be shown in VE preview

Browse source
This commit is contained in:
alistair3149 2023-07-05 22:57:05 -04:00
parent a29e3a22c0
commit 857f6f1f9f
No known key found for this signature in database
2 changed files with 46 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
modules/ve-tabberNeue/ve.ce.MWTabberNode.js
View file

@ -63,35 +63,50 @@ ve.ce.MWTabberNode.prototype.onSetup = function () {
* @param {HTMLElement} tabber
*/
ve.ce.MWTabberNode.prototype.renderHeader = function ( tabber ) {
const
tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' ),
container = document.createElement( 'header' ),
tabList = document.createElement( 'nav' ),
fragment = new DocumentFragment();
const nestedTabbers = tabber.querySelectorAll( '.tabber__panel:first-child .tabber' );
Array.prototype.forEach.call( tabPanels, function ( tabPanel, index ) {
const tab = document.createElement( 'a' );
const renderSingleHeader = function ( element ) {
const
tabPanels = element.querySelectorAll( ':scope > .tabber__section > .tabber__panel' ),
header = element.querySelector( ':scope > .tabber__header' ),
tabList = document.createElement( 'nav' ),
indicator = document.createElement( 'div' ),
fragment = new DocumentFragment();
tab.innerText = tabPanel.title;
tab.classList.add( 'tabber__tab' );
Array.prototype.forEach.call( tabPanels, function ( tabPanel, index ) {
const tab = document.createElement( 'a' );
// Make first tab active
if ( index === 0 ) {
tab.classList.add( 'tabber__tab--active' );
}
tab.innerText = tabPanel.getAttribute( 'data-title' );
tab.classList.add( 'tabber__tab' );
fragment.append( tab );
} );
// Make first tab active
if ( index === 0 ) {
tab.setAttribute( 'aria-selected', true );
}
tabList.append( fragment );
fragment.append( tab );
} );
container.classList.add( 'tabber__header' );
tabList.classList.add( 'tabber__tabs' );
tabList.append( fragment );
container.append( tabList );
tabber.prepend( container );
tabList.classList.add( 'tabber__tabs' );
indicator.classList.add( 'tabber__indicator' );
tabber.classList.add( 'tabber--live' );
header.append( tabList, indicator );
console.log( tabList );
indicator.style.width = tabList.firstElementChild.offsetWidth + 'px';
element.classList.add( 'tabber--live' );
};
if ( nestedTabbers.length > 0 ) {
Array.prototype.forEach.call( nestedTabbers, function ( nestedTabber ) {
renderSingleHeader( nestedTabber );
} );
}
renderSingleHeader( tabber );
lastHeader = tabber.firstElementChild;
};

17
modules/ve-tabberNeue/ve.ce.MWTabberTranscludeNode.js
View file

@ -63,20 +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' ),
container = document.createElement( 'header' ),
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, function ( tabPanel, index ) {
const tab = document.createElement( 'a' );
tab.innerText = tabPanel.title;
tab.innerText = tabPanel.getAttribute( 'data-title' );
tab.classList.add( 'tabber__tab' );
// Make first tab active
if ( index === 0 ) {
tab.classList.add( 'tabber__tab--active' );
tab.setAttribute( 'aria-selected', true );
}
fragment.append( tab );
@ -84,11 +86,12 @@ ve.ce.MWTabberTranscludeNode.prototype.renderHeader = function ( tabber ) {
tabList.append( fragment );
container.classList.add( 'tabber__header' );
tabList.classList.add( 'tabber__tabs' );
indicator.classList.add( 'tabber__indicator' );
container.append( tabList );
tabber.prepend( container );
header.append( tabList, indicator );
indicator.style.width = tabList.firstElementChild.offsetWidth + 'px';
tabber.classList.add( 'tabber--live' );