StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-12-03 18:36:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
.eslintignore
View file

@ -8,5 +8,3 @@
resources/skins.citizen.scripts.search/typeahead-init.js
resources/skins.citizen.scripts.search/underscore.partial.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

60
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() {
var sections = document.querySelectorAll( '.mw-headline' ),
htmlStyles = window.getComputedStyle( document.documentElement ),
scrollPaddingTop = htmlStyles.getPropertyValue( 'scroll-padding-top' ),
// Align with scroll offset set in CSS
marginTop = "-" + scrollPaddingTop,
id, id2, toclink, node, active;
const headlines = document.querySelectorAll( '.mw-headline' ),
toc = document.getElementById( 'toc' ),
marginTop = '-' + window.getComputedStyle( document.documentElement ).getPropertyValue( 'scroll-padding-top' );
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 ) => {
/* eslint-enable compat/compat */
if ( entry[ 0 ].isIntersecting ) {
id = sections[i].id;
// Try the ID of the span before
if ( sections[i].previousSibling !== null ) {
id2 = sections[i].previousSibling.id || '';
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' );
if ( activeLink !== null ) {
activeLink.classList.remove( 'active' );
}
toclink = document.querySelector( "a[href='#" + id + "']" ) || document.querySelector( "a[href='#" + id2 + "']" );
node = toclink.parentNode;
active = document.querySelector( '.active' );
if ( active !== null ) {
active.classList.remove( 'active' );
}
if ( node !== null ) {
node.classList.add( 'active' );
if ( targetLink !== null ) {
targetLink.classList.add( 'active' );
}
}
}, {
// Will break in viewport with short height
// 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
if ( document.body.classList.contains( 'skin-citizen-has-toc' ) ) {
intersectionHandler();
}
}
main();
initTOC();