MediaWiki:Citizen.js

/* All JavaScript here will be loaded for users of the Citizen skin */ mw.loader.using( [ 'mediawiki.util' ] ).done( function {

/* Disable toggling sections when edit */ x=document.getElementsByClassName("mw-editsection"); for(i=0; i<x.length; i++) { x[i].getElementsByTagName("a")[0].onclick = function(e){ e.stopPropagation; }; }	/* Collapsible TOC */ x=document.querySelectorAll(".citizen-toc li a"); for(i=0; i<x.length; i++) { x[i].onclick = function(e){ y = this.parentElement.getElementsByTagName("ul"); if(y.length) { if(y[0].style.display == "block") { y[0].style.display = "none"; y[0].parentElement.classList.add("collapsed"); } else { y[0].style.display = "block"; y[0].parentElement.classList.remove("collapsed"); }			}		};	}	x=document.querySelectorAll(".citizen-toc li"); for(i=0; i<x.length; i++) { if(x[i].getElementsByTagName("li").length) x[i].classList.add("haschildren"); }

} );

/* Override upstream code */ mw.loader.implement("skins.citizen.scripts@11xte", {   "main": "resources/skins.citizen.scripts/skin.js",    "files": {		"resources/skins.citizen.scripts/sections.js": function(require, module, exports) {            function initCollapsibleSections {                const prefix = 'section-',                    headings = document.querySelectorAll('.' + prefix + 'heading'),                    sections = document.querySelectorAll('.' + prefix + 'collapsible');                for (let i = 0; i < headings.length; i++) {                    const j = i + 1,                        collapsibleID = prefix + 'collapsible-' + j,                        headline = headings[i].querySelector('.mw-headline') || headings[i].querySelector('.mw-heading');                    headline.setAttribute('tabindex', 0);                    headline.setAttribute('role', 'button');                    headline.setAttribute('aria-controls', collapsibleID); headline.setAttribute('aria-expanded', true); headings[i]. addEventListener('click', function {                       this.classList.toggle(prefix + 'heading--collapsed');                        sections[j].classList.toggle(prefix + 'collapsible--collapsed');                        headline.setAttribute('aria-expanded', headline.getAttribute('aria-expanded') === 'true' ? 'false' : 'true');                   }); }           }            module.exports = { init: initCollapsibleSections };       },        "resources/skins.citizen.scripts/tableOfContents.js": function(require, module, exports) { const ACTIVE_SECTION_CLASS = 'citizen-toc__listItem--active'; let activeSection;

function changeActiveSection(id) { const toc = document.getElementById('mw-panel-toc'); const getLink = (hash) => { const prefix = 'a[href="#',                       suffix = '"]'; let el = toc.querySelector(prefix + hash + suffix); if (el === null) { el = toc.querySelector(prefix + encodeURIComponent(hash) + suffix); }                   return el; };               const link = getLink(id); if (activeSection) { activeSection.classList.remove(ACTIVE_SECTION_CLASS); activeSection = undefined; }               activeSection = link.parentNode; activeSection.classList.add(ACTIVE_SECTION_CLASS); }

function initToC { const bodyContent = document. getElementById('bodyContent'); const getTopMargin = => { return Number(window.getComputedStyle(document.documentElement).getPropertyValue('scroll-padding-top').slice(0, -2)) + 20; };               const initSectionObserver = require('./sectionObserver.js').init; const sectionObserver = initSectionObserver({                   elements: bodyContent.querySelectorAll('.mw-headline') || bodyContent.querySelectorAll('.mw-heading'),                    topMargin: getTopMargin,                    onIntersection: (section) => {                        changeActiveSection(section.id);                    }                }); sectionObserver.resume; }           module.exports = { init: initToC };       }    	    } });