User:Phlsph7/ClassicalTOC(Vector2022).js

/* Classical table of contents for Vector 2022 */// utility function to get the URL of the current page and apply the parameter for the legacy vector skinfunction getURL(){let url = window.location.href.split('#')[0] + "?useskin=vector";if(window.location.href.split('#').length > 1){url += "#" + window.location.href.split('#').slice(1).join("#");}return url;}// uses the html text of the page with the legacy vector skin as input, extracts the TOC, and places it into the current pagefunction getTOCfromHTML(html){// adjust the style of the extracted TOCfunction adjustStyle(){// remove bullet points and fix margin for unordered listslet ulElements = toc.getElementsByTagName('ul');for(let ulElement of ulElements){ulElement.style.listStyle = "none";ulElement.style.marginTop = "0em";}// fix left margin for the main unordered listlet masterUl = toc.getElementsByTagName('ul')[0];masterUl.style.marginLeft = "0.5em";masterUl.style.fontSize = "95%";// adjust font-size and font-family for the TOC heading ("Contents")let tocHeading = document.getElementById('mw-toc-heading');tocHeading.style.fontWeight = 'bold';// button used to fold and unfold the TOClet foldButton = document.createElement('a');// button stylefoldButton.style.fontSize = '80%';foldButton.style.marginLeft = '0.5em';foldButton.style.fontFamily = 'sans-serif';foldButton.style.fontWeight = 'normal';foldButton.style.verticalAlign = 'text-bottom';tocHeading.appendChild(foldButton);foldButton.innerHTML = '<span style="color: #202122">[</span>hide<span style="color: #202122">]</span>';// when clicked: fold/unfold the TOC and change the button textfoldButton.onclick = function(event){if(foldButton.innerText.includes('hide')){foldButton.innerHTML = foldButton.innerHTML.split('hide').join('show');masterUl.style.display = 'none';}else{foldButton.innerHTML = foldButton.innerHTML.split('show').join('hide');masterUl.style.display = '';}};// adjust colors and spaces per entryconst styleSheet = document.createElement('style');styleSheet.innerHTML = `.tocnumber{color: #202122;padding-right: 0.2em;}.toctext{color: #0645ad;}`;document.head.append(styleSheet);}// change the look into a grey boxfunction setClassicalBoxLook(){toc.style.border = "1px solid #a2a9b1";toc.style.backgroundColor = "#f8f9fa";toc.style.display = "inline-block";toc.style.paddingRight = "0.5em";let tocHeading = document.getElementById('mw-toc-heading');tocHeading.style.textAlign = "center";tocHeading.style.borderBottom = "none";tocHeading.style.marginTop = "0.3em";tocHeading.style.marginLeft = "0.3em";firstSectionHeadline.style.clear = "left";}// fix for pages that use the template "clear" before the first sectionfunction fixClearTemplate(){let neighbor =  toc.previousElementSibling;if(neighbor != null && neighbor.style.clear === 'both' && neighbor.innerText == ''){neighbor.parentNode.insertBefore(toc, neighbor);}}// scroll to the right position for section links in case the loading takes too longfunction scrollToRightPosition(){if(window.location.hash){let hashValue = window.location.hash.substring(1);let selectedHeadline = document.getElementById(hashValue);if(selectedHeadline != null){selectedHeadline.scrollIntoView();}}}// parse the html filevar parser = new DOMParser();var htmlDoc = parser.parseFromString(html, "text/html");// extract the TOC and place it before the first headlinevar toc = htmlDoc.getElementById("toc");var firstSectionHeadline = getFirstSectionHeadline();if(toc != null && firstSectionHeadline != null){// insert before the first sectionfirstSectionHeadline.parentElement.insertBefore(toc, firstSectionHeadline);// adjust the general styleadjustStyle();// apply the box layoutsetClassicalBoxLook();// fix for the template "clear"fixClearTemplate();// scroll to the right position for section links in case the loading takes too longscrollToRightPosition();}}// utility function to get the headline of the first section, the TOC should be inserted before itfunction getFirstSectionHeadline(){var mainContainer = document.getElementById('mw-content-text');var firstSectionHeadline = mainContainer.getElementsByTagName('h2')[0];return firstSectionHeadline;}// main function(function(){// check whether the Vector 2022 skin is usedif (document.body.classList.contains("skin-vector-2022")){// does not work when editing pages, so only show the TOC when viewing pagesif(mw.config.get("wgAction") === "view"){// load the legacy html to extract their TOCfetch(getURL()).then(response => response.text()).then(getTOCfromHTML);}}})();