User:Sideswipe9th/V22FloatingToolsMenu-debug-copy.js: Difference between revisions

Revision as of 16:20, 6 April 2023

Latest revision as of 18:12, 12 December 2023

(11 intermediate revisions by the same user not shown)

Line 1:

//<nowiki>

// By Sideswipe9th

// Last edit date: 412 MarchDecember 2023

// Known bugs:

// - On pages with a ToC, scrolling the main content area will cause the stick panel to jump to whatever

Line 8:

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

Line 13 ⟶ 20:

// * Initial release

$( function() {

// does the document contain aan vector-toc-pinned-container?element This should be null ifwith the pageid has no ToC"mw-panel-toc"

//var containernavTocContainer = document.getElementById("vectormw-panel-toc-pinned-container");

if (navnavTocContainer == null)

// 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 not, so we're on a ToCless page

// get the elementdiv with the idclass vectorname mw-mainpage-menu, cause we're going to check its parentcontainer-inner

var vectorMainMenupageContainer = document.getElementByIdgetElementsByClassName("vector-maincolumn-menustart");

if (pageContainer.length > 0)

// do a null check, in theory this should always exist but you never know

if (vectorMainMenu != null)

{

// so we now need to create a NAV with id mw-panel-toc

// is the parent of vectorMainMenu the pinned container?

nav = document.createElement("NAV");

// disabled for now, can't figure out how to detect when the menu is closed and force it open again

// assign it the right ID, classes, and arialabel

/*if (vectorMainMenu.parentNode.id != "vector-main-menu-pinned-container")

nav.id = "mw-panel-toc";

{

nav.className = "mw-table-of-contents-container vector-toc-landmark vector-sticky-pinned-container";

// it is not, so lets reparent it

nav.arialabel = "Contents";

var mainMenuPinned = document.getElementById("vector-main-menu-pinned-container");

nav.style.setProperty("margin-left =", "0px");

mainMenuPinned.appendChild(vectorMainMenu);

// append this nav as a child to thediv rightwith pageclas mw-page-container-inner

}*/

pageContainer[0].appendChild(nav);

// 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)

{

// 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)

{

// 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";

nav.style.margin-left = "0px";

// append this nav as a child to the right page container

pageContainer[0].appendChild(nav);

}

}

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

newContainernav.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

if (floatingToC != null && toolsBar != null)
{
floatingToC.appendChild(toolsBar); // and finally append the tools bar to the floating ToC

{}

}