refactor: convert skins.citizen.scripts.toc to ES6

This commit is contained in:
alistair3149 2021-04-21 15:07:55 -04:00
parent f44aaa4e4c
commit c5a2aaf9ec
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
2 changed files with 30 additions and 32 deletions

View file

@ -8,5 +8,3 @@
resources/skins.citizen.scripts.search/typeahead-init.js resources/skins.citizen.scripts.search/typeahead-init.js
resources/skins.citizen.scripts.search/underscore.partial.js resources/skins.citizen.scripts.search/underscore.partial.js
resources/skins.citizen.scripts.search/wm-typeahead.js resources/skins.citizen.scripts.search/wm-typeahead.js
resources/skins.citizen.scripts.theme/inline.js
resources/skins.citizen.scripts.toc/skins.citizen.scripts.toc.js

View file

@ -1,53 +1,53 @@
/*
* Citizen - ToC JS
* https://starcitizen.tools
*/
/** /**
* Add active HTML class to items in table of content based on user viewport. * Toggle active HTML class to items in table of content based on user viewport.
* *
* @constructor * @return {void}
*/ */
function intersectionHandler() { function intersectionHandler() {
var sections = document.querySelectorAll( '.mw-headline' ), const headlines = document.querySelectorAll( '.mw-headline' ),
htmlStyles = window.getComputedStyle( document.documentElement ), toc = document.getElementById( 'toc' ),
scrollPaddingTop = htmlStyles.getPropertyValue( 'scroll-padding-top' ), marginTop = '-' + window.getComputedStyle( document.documentElement ).getPropertyValue( 'scroll-padding-top' );
// Align with scroll offset set in CSS
marginTop = "-" + scrollPaddingTop,
id, id2, toclink, node, active;
for (let i = 0; i < sections.length; i++) { console.log( marginTop );
for ( let i = 0; i < headlines.length; i++ ) {
/* eslint-disable compat/compat */
const observer = new IntersectionObserver( ( entry ) => { const observer = new IntersectionObserver( ( entry ) => {
/* eslint-enable compat/compat */
if ( entry[ 0 ].isIntersecting ) { if ( entry[ 0 ].isIntersecting ) {
id = sections[i].id; const headlineId = headlines[ i ].id,
// Try the ID of the span before // Get the decoded ID from the span before
if ( sections[i].previousSibling !== null ) { decodedId = ( headlines[ i ].previousSibling !== null ) ?
id2 = sections[i].previousSibling.id || ''; headlines[ i ].previousSibling.id : '',
links = toc.querySelector( "a[href='#" + headlineId + "']" ) ||
toc.querySelector( "a[href='#" + decodedId + "']" ),
targetLink = links.parentNode,
activeLink = toc.querySelector( '.active' );
if ( activeLink !== null ) {
activeLink.classList.remove( 'active' );
} }
toclink = document.querySelector( "a[href='#" + id + "']" ) || document.querySelector( "a[href='#" + id2 + "']" ); if ( targetLink !== null ) {
node = toclink.parentNode; targetLink.classList.add( 'active' );
active = document.querySelector( '.active' );
if ( active !== null ) {
active.classList.remove( 'active' );
}
if ( node !== null ) {
node.classList.add( 'active' );
} }
} }
}, { }, {
// Will break in viewport with short height // Will break in viewport with short height
// But calculating bottom margin on the fly is too costly // But calculating bottom margin on the fly is too costly
rootMargin: marginTop + " 0px -85% 0px" rootMargin: marginTop + ' 0px -85% 0px'
} ); } );
observer.observe( sections[i] ); observer.observe( headlines[ i ] );
} }
} }
function main() { /**
* @return {void}
*/
function initTOC() {
// Check for has-toc class since it is loaded way before #toc is present // Check for has-toc class since it is loaded way before #toc is present
if ( document.body.classList.contains( 'skin-citizen-has-toc' ) ) { if ( document.body.classList.contains( 'skin-citizen-has-toc' ) ) {
intersectionHandler(); intersectionHandler();
} }
} }
main(); initTOC();