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

feat: use clone element to get tab height when needed

Browse source 
Sometimes the tab element is hidden by its parent and a cloned element will be able to get its actual height.
This should also fix #4.
This commit is contained in:
alistair3149 2021-10-01 11:11:27 -04:00
parent 022c9e07dd
commit 331b0bea2b
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
1 changed files with 22 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
modules/ext.tabberNeue.js
View file

@ -120,6 +120,25 @@ function initTabber( tabber ) {
section = targetPanel.parentElement,
activePanel = section.querySelector( ':scope > .' + ACTIVEPANELCLASS );
const getHeight = ( el ) => {
if ( el.offsetHeight !== 0 ) {
return el.offsetHeight;
}
// Sometimes the tab is hidden by one of its parent elements
// and you can only get the actual height by cloning the element
const clone = el.cloneNode( true );
// Hide the cloned element
clone.style.cssText = 'position:absolute;visibility:hidden;';
// Add cloned element to body
document.body.appendChild( clone );
// Measure the height of the clone
const height = clone.clientHeight;
// Remove the cloned element
clone.parentNode.removeChild( clone );
return height;
};
/* eslint-disable mediawiki/class-doc */
if ( activePanel ) {
// Just to be safe since there can be multiple active classes
@ -135,10 +154,10 @@ function initTabber( tabber ) {
activePanel.classList.remove( ACTIVEPANELCLASS );
activePanel.setAttribute( 'aria-hidden', true );
section.style.height = activePanel.offsetHeight + 'px';
section.style.height = targetPanel.offsetHeight + 'px';
section.style.height = getHeight( activePanel ) + 'px';
section.style.height = getHeight( targetPanel ) + 'px';
} else {
section.style.height = targetPanel.offsetHeight + 'px';
section.style.height = getHeight( targetPanel ) + 'px';
}
// Add active class to the tab