mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-25 23:05:47 +00:00
d59ca5c83a
* We will likely use it for other things in the future * Based on Vector's implementation * Also do not get toc element twice
48 lines
1.5 KiB
JavaScript
48 lines
1.5 KiB
JavaScript
const ACTIVE_ITEM_CLASS = 'toc__item--active';
|
|
|
|
/**
|
|
* Toggle active HTML class to items in table of content based on user viewport.
|
|
*
|
|
* @param {Element} toc TOC element
|
|
* @return {void}
|
|
*/
|
|
function initToC( toc ) {
|
|
const
|
|
headlines = document.querySelectorAll( '.mw-headline' ),
|
|
marginTop = '-' + window.getComputedStyle( document.documentElement ).getPropertyValue( 'scroll-padding-top' );
|
|
|
|
for ( let i = 0; i < headlines.length; i++ ) {
|
|
/* eslint-disable compat/compat */
|
|
const observer = new IntersectionObserver( ( entry ) => {
|
|
/* eslint-enable compat/compat */
|
|
if ( entry[ 0 ].isIntersecting ) {
|
|
const
|
|
headlineId = headlines[ i ].id,
|
|
// Get the decoded ID from the span before
|
|
decodedId = ( headlines[ i ].previousSibling !== null ) ?
|
|
headlines[ i ].previousSibling.id : '',
|
|
links = toc.querySelector( "a[href='#" + headlineId + "']" ) ||
|
|
toc.querySelector( "a[href='#" + decodedId + "']" ),
|
|
targetLink = links.parentNode,
|
|
activeLink = toc.querySelector( '.' + ACTIVE_ITEM_CLASS );
|
|
|
|
if ( activeLink !== null ) {
|
|
activeLink.classList.remove( ACTIVE_ITEM_CLASS );
|
|
}
|
|
if ( targetLink !== null ) {
|
|
targetLink.classList.add( ACTIVE_ITEM_CLASS );
|
|
}
|
|
}
|
|
}, {
|
|
// Will break in viewport with short height
|
|
// But calculating bottom margin on the fly is too costly
|
|
rootMargin: marginTop + ' 0px -85% 0px'
|
|
} );
|
|
observer.observe( headlines[ i ] );
|
|
}
|
|
}
|
|
|
|
module.exports = {
|
|
init: initToC
|
|
};
|