User:Sideswipe9th/V22FloatingToolsMenu-debug-copy.js

//<nowiki>
// By Sideswipe9th
// Last edit date: 4 March 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:
//	- 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 a vector-toc-pinned-container? This should be null if the page has no ToC
	//var container = document.getElementById("vector-toc-pinned-container");
	
	// does the document contain an element with the classes "vector-main-menu-container vector-sidebar-container-no-toc"
	var noToCContainer = document.getElementsByClassName("vector-main-menu-container vector-sidebar-container-no-toc");
	if (noToCContainer != null && noToCContainer.length > 0)
	{
		// it does, so we're on a ToCless 
		// get the element with the id vector-main-menu, cause we're going to check its parent
		var vectorMainMenu = document.getElementById("vector-main-menu");
		// do a null check, in theory this should always exist but you never know
		if (vectorMainMenu != null)
		{
			// is the parent of vectorMainMenu the pinned container?
			// disabled for now, can't figure out how to detect when the menu is closed and force it open again
			/*if (vectorMainMenu.parentNode.id != "vector-main-menu-pinned-container")
			{
				// it is not, so lets reparent it
				var mainMenuPinned = document.getElementById("vector-main-menu-pinned-container");
				mainMenuPinned.appendChild(vectorMainMenu);
			}*/
			
			// now that the main menu is forced on, we can start to create our new heirarchy 
			
			var nav = document.getElementById("mw-panel-toc"); // grab the parent navbar that's used to always be present
			// check if mw-panel-toc is present
			if (nav == null) 
			{
				console.log("Nav was null");
				// it's not, ugh. Ok, get the elements with the class name mw-page-container-inner
				var pageContainer = document.getElementsByClassName("mw-page-container-inner");
				if (pageContainer.length > 0)
				{
					console.log("Found page-container-inner");
					// create the nav that should be present but isn't
					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";
					nav.arialabel = "Contents";
					// append this nav as a child to the right page container
					pageContainer[0].appendChild(nav);
				}
			}
			else
			{
				console.log("Nav was not null");
			}
			var newContainer = document.createElement("div"); // create a new div
			newContainer.id = "vector-toc-pinned-container"; // give it the right id
			newContainer.class = "vector-pinned-container"; // give it some class
			nav.appendChild(newContainer); // and append it to the navbar

			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
			newContainer.appendChild(toolsBar); // and finally append the tools bar to the floating ToC
		}
	}
	else
	{
		// it does not, 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
		floatingToC.appendChild(toolsBar); // and finally append the tools bar to the floating ToC
	}

});
//</nowiki>