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

refactor: simpler indicator update

Browse source 
False alert, no need to use IntersectionObserver so yeahhh
This commit is contained in:
alistair3149 2022-10-21 23:07:56 -04:00
parent 62cb545642
commit 57257cd1ba
No known key found for this signature in database
1 changed files with 36 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
modules/ext.tabberNeue.js
View file

@ -65,22 +65,47 @@ function initTabber( tabber, count ) {
header.append( prevButton, tabList, nextButton, indicator ); header.append( prevButton, tabList, nextButton, indicator );
}; };
var updateSectionHeight = function ( section, activePanel ) { // There is probably a smarter way to do this
var height = activePanel.offsetHeight; var getActualSize = function ( element, type ) {
if ( height === 0 ) { var value;
switch ( type ) {
case 'width':
value = element.offsetWidth;
break;
case 'height':
value = element.offsetHeight;
break;
}
if ( value === 0 ) {
// Sometimes the tab is hidden by one of its parent elements // Sometimes the tab is hidden by one of its parent elements
// and you can only get the actual height by cloning the element // and you can only get the actual size by cloning the element
var clone = activePanel.cloneNode( true ); var clone = element.cloneNode( true );
// Hide the cloned element // Hide the cloned element
clone.style.cssText = 'position:absolute;visibility:hidden;'; clone.style.cssText = 'position:absolute;visibility:hidden;';
// Add cloned element to body // Add cloned element to body
document.body.appendChild( clone ); document.body.appendChild( clone );
// Measure the height of the clone // Measure the size of the clone
height = clone.clientHeight; switch ( type ) {
case 'width':
value = element.offsetWidth;
break;
case 'height':
value = element.offsetHeight;
break;
}
// Remove the cloned element // Remove the cloned element
clone.parentNode.removeChild( clone ); clone.parentNode.removeChild( clone );
} }
section.style.height = String( height ) + 'px';
return value;
};
var updateSectionHeight = function ( section, activePanel ) {
var height = getActualSize( activePanel, 'height' );
section.style.height = height + 'px';
// Scroll to tab // Scroll to tab
section.scrollLeft = activePanel.offsetLeft; section.scrollLeft = activePanel.offsetLeft;
}; };
@ -95,20 +120,10 @@ function initTabber( tabber, count ) {
var updateIndicator = function () { var updateIndicator = function () {
var activeTab = tabList.querySelector( '.' + ACTIVETABCLASS ); var activeTab = tabList.querySelector( '.' + ACTIVETABCLASS );
// When the activeTab is visible in viewport, set the indicator
// IntersectionObserver is not supported in IE
// Probably time to drop IE support and move to ES6
/* eslint-disable-next-line compat/compat */
var observer = new IntersectionObserver( function ( entries ) {
entries.forEach( function ( entry ) {
if ( entry.isIntersecting ) {
indicator.style.width = activeTab.offsetWidth + 'px';
indicator.style.transform = 'translateX(' + ( activeTab.offsetLeft - tabList.scrollLeft ) + 'px)';
}
} );
}, tabList );
observer.observe( activeTab ); var width = getActualSize( activeTab, 'width' );
indicator.style.width = width + 'px';
indicator.style.transform = 'translateX(' + ( activeTab.offsetLeft - tabList.scrollLeft ) + 'px)';
}; };
var resizeObserver = null; var resizeObserver = null;