StarCitizenTools/mediawiki-extensions-TabberNeue
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git synced 2024-11-27 17:50:55 +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

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

@ -63,21 +63,25 @@ ve.ce.MWTabberNode.prototype.onSetup = function () {
* @param {HTMLElement} tabber * @param {HTMLElement} tabber
*/ */
ve.ce.MWTabberNode.prototype.renderHeader = function ( tabber ) { ve.ce.MWTabberNode.prototype.renderHeader = function ( tabber ) {
const nestedTabbers = tabber.querySelectorAll( '.tabber__panel:first-child .tabber' );
const renderSingleHeader = function ( element ) {
const const
tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' ), tabPanels = element.querySelectorAll( ':scope > .tabber__section > .tabber__panel' ),
container = document.createElement( 'header' ), header = element.querySelector( ':scope > .tabber__header' ),
tabList = document.createElement( 'nav' ), tabList = document.createElement( 'nav' ),
indicator = document.createElement( 'div' ),
fragment = new DocumentFragment(); fragment = new DocumentFragment();
Array.prototype.forEach.call( tabPanels, function ( tabPanel, index ) { Array.prototype.forEach.call( tabPanels, function ( tabPanel, index ) {
const tab = document.createElement( 'a' ); const tab = document.createElement( 'a' );
tab.innerText = tabPanel.title; tab.innerText = tabPanel.getAttribute( 'data-title' );
tab.classList.add( 'tabber__tab' ); tab.classList.add( 'tabber__tab' );
// Make first tab active // Make first tab active
if ( index === 0 ) { if ( index === 0 ) {
tab.classList.add( 'tabber__tab--active' ); tab.setAttribute( 'aria-selected', true );
} }
fragment.append( tab ); fragment.append( tab );
@ -85,13 +89,24 @@ ve.ce.MWTabberNode.prototype.renderHeader = function ( tabber ) {
tabList.append( fragment ); tabList.append( fragment );
container.classList.add( 'tabber__header' );
tabList.classList.add( 'tabber__tabs' ); tabList.classList.add( 'tabber__tabs' );
indicator.classList.add( 'tabber__indicator' );
container.append( tabList ); header.append( tabList, indicator );
tabber.prepend( container );
tabber.classList.add( 'tabber--live' ); 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; 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 * @param {HTMLElement} tabber
*/ */
ve.ce.MWTabberTranscludeNode.prototype.renderHeader = function ( tabber ) { ve.ce.MWTabberTranscludeNode.prototype.renderHeader = function ( tabber ) {
const tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' ), const
container = document.createElement( 'header' ), tabPanels = tabber.querySelectorAll( ':scope > .tabber__section > .tabber__panel' ),
header = tabber.querySelector( ':scope > .tabber__header' ),
tabList = document.createElement( 'nav' ), tabList = document.createElement( 'nav' ),
indicator = document.createElement( 'div' ),
fragment = new DocumentFragment(); fragment = new DocumentFragment();
Array.prototype.forEach.call( tabPanels, function ( tabPanel, index ) { Array.prototype.forEach.call( tabPanels, function ( tabPanel, index ) {
const tab = document.createElement( 'a' ); const tab = document.createElement( 'a' );
tab.innerText = tabPanel.title; tab.innerText = tabPanel.getAttribute( 'data-title' );
tab.classList.add( 'tabber__tab' ); tab.classList.add( 'tabber__tab' );
// Make first tab active // Make first tab active
if ( index === 0 ) { if ( index === 0 ) {
tab.classList.add( 'tabber__tab--active' ); tab.setAttribute( 'aria-selected', true );
} }
fragment.append( tab ); fragment.append( tab );
@ -84,11 +86,12 @@ ve.ce.MWTabberTranscludeNode.prototype.renderHeader = function ( tabber ) {
tabList.append( fragment ); tabList.append( fragment );
container.classList.add( 'tabber__header' );
tabList.classList.add( 'tabber__tabs' ); tabList.classList.add( 'tabber__tabs' );
indicator.classList.add( 'tabber__indicator' );
container.append( tabList ); header.append( tabList, indicator );
tabber.prepend( container );
indicator.style.width = tabList.firstElementChild.offsetWidth + 'px';
tabber.classList.add( 'tabber--live' ); tabber.classList.add( 'tabber--live' );