User:Sideswipe9th/V22FloatingToolsMenu.js

// // By Sideswipe9th // Last edit date: 12 December 2023 // Known bugs: //   - On pages with a ToC, scrolling the main content area will cause the stick panel to jump to whatever //     the "focused" header is, if you've scrolled down to access the toolsbar it will jump back up //    - If the Main Menu is hidden, the CSS for this breaks. I think I just need to add another check to make sure //     The parent containers exist when the menu is hidden, and if not create empty ones // Change log: // - 12 December 2023 //     * Fix bug where the tools menu was no longer appearing on TOC-less pages, after another set of class and ID changes in the theme // - 27 November 2023 //     * Fix bug where the tools menu was no longer being added to TOC-less pages, after some class and id changes in the theme // - 6 April 2023 //     * Fix bug where the className on the containers was not being set properly for newly created elements //     * Fix bug where the nav with id mw-panel-toc needs to have its margin-left set to 0px when it's added to ToCless pages. //	- 4 March 2023 //		* Fix the tools menu not being appended on TOC-less pages after the previously always present nav I was relying on was removed //	- 18 February 2023 //		* Initial release $( function {	// does the document contain an element with the id "mw-panel-toc"	var navTocContainer = document.getElementById("mw-panel-toc");	if (navTocContainer == null)	{		// it does not, so we're on a ToCless page		// get the div with the class name mw-page-container-inner		var pageContainer = document.getElementsByClassName("vector-column-start");		if (pageContainer.length > 0)		{			// so we now need to create a NAV with id mw-panel-toc			nav = document.createElement("NAV");			// assign it the right ID, classes, and arialabel			nav.id = "mw-panel-toc";			nav.className = "mw-table-of-contents-container vector-toc-landmark vector-sticky-pinned-container";			nav.arialabel = "Contents";			nav.style.setProperty("margin-left", "0px");			// append this nav as a child to div with clas mw-page-container-inner			pageContainer[0].appendChild(nav);

var toolsBar = document.getElementById("vector-page-tools"); // then grab the tools bar by ID			toolsBar.disabled = true; // because enabling the tools bar will break this, we want to force it to disabled nav.appendChild(toolsBar); // and finally append the tools bar to the floating ToC }	}	else {		// it does, so we're on a page that has a ToC. This code is simpler, as we just want to append the tools bar // to the end of vector-toc var toolsBar = document.getElementById("vector-page-tools"); // first grab the tools bar by ID		var floatingToC = document.getElementById("vector-toc"); // then grab the floating TOC by ID		if (floatingToC != null && toolsBar != null) {			floatingToC.appendChild(toolsBar); // and finally append the tools bar to the floating ToC }	}

}); //