User:Phlsph7/UnfoldedNumberedTOC(Vector2022).js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/*** Unfolded and numbered TOC for Vector 2022 ***/

// Unfolds the table of contents and numbers the sections.
// This script is a modified version of the code found at https://greasyfork.org/en/scripts/458558-wikipedia-vector-2022-better-toc .
// It is licensed under the MIT license.

(function () {
	// check whether the Vector 2022 skin is used
	if (document.body.classList.contains("skin-vector-2022")){
		// compose stylesheet contents
		var stylesheetContents = '';
		
		// show numbers
		stylesheetContents += `
		.vector-toc-numb {
			display: inline !important
		}`;

		// add space after numbers
		stylesheetContents += `
		.vector-toc-numb:after {
			content: " "
		}`;

		// hide unfold button
		stylesheetContents += `
		.vector-toc-level-1 > button {
			display: none !important;
		}`;

		// adjust spacing
		stylesheetContents += `
		.vector-toc-text {
			padding: 2px 0 !important;
			gap: 0.25em;
			display: flex;
		}
		
		.vector-toc-list-item .vector-toc-list-item {
			padding-left: 1em !important;
		}
		
		.vector-toc .vector-toc-numb, .vector-toc .vector-toc-numb:after {
			display: inline !important; white-space: pre;
		}
		`;
		
		// add stylesheet to document
		const stylesheet = document.createElement('style');
		stylesheet.innerHTML = stylesheetContents;
		document.head.append(stylesheet);
		
		// unfold sections
		const listElements = document.getElementsByClassName('vector-toc-level-1');
		for(var listElement of listElements){
			listElement.classList.add('vector-toc-list-item-expanded');
		}
		
		// avoid bug showing multiple columns for the use of italics
		const tocTextElements = document.getElementsByClassName('vector-toc-text');
		for(var tocTextElement of tocTextElements){
			// put everything after the number into a separate span element
			tocTextElement.innerHTML = tocTextElement.innerHTML.replace('</span>', '</span><span>') + '</span>';
		}
	}
})();