View source for 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:
//  - 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("mw-page-container-inner");
		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);
			
			// ok, now we have a nav element in the right place, time to move its content to the right place.
			var newContainer = document.createElement("div"); // create a new div
			newContainer.id = "vector-toc-pinned-container"; // give it the right id
			newContainer.className = "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, 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>