User:Sideswipe9th/V22FloatingToolsMenu.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.

//<nowiki>
// 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
		}
	}

});
//</nowiki>