ModernizedToC

ModernizedToC is a concept of an upgraded Table of Contents created by JustLeafy, and is currently being built by Robyn Grayson.
__TOC__
The box seen above this paragraph, is called the Table of Contents, which is used to navigate around the article, yet, the current Table of Contents is nowhere near in its perfect form.
== Description ==
=== Goals ===
This script has multiple goals to reach:
* Needing to have a fixed functionality. A fixed functionality for the Table of Contents will actually make navigation between sections much easier. Additionally, the Table of Contents normally has a fixed position.
* Getting additional options. While the current Table of Contents has no options other than closing and hiding it, more options and tools for the Table of Contents will make it more interesting and engaging, and something that can be importantly used.
* Receiving a new design. Modernization is not all about design, but the Table of Contents should receive a new design, due to the fact that it had a simple design that lacked a modern feel. It also caused some trouble in the whitespace in articles. Not only the new design will clean the look, but it will also eliminate all whitespace caused by it in articles.
=== Specific Changes ===
These are all of the specific changes to it. Some changes are very obvious and easily notable:
==== Design & Functionality ====
* The loading throbber is removed, because even with a modern loading spinner, it wouldn't look too good.
* It has been completely redesigned from an ugly design of the ToC that caused whitespace in articles into a clean and modernized sidebar with a fixed functionality, located on the left, eliminating all the whitespace it has caused in articles.
* When scrolling through the Table of Contents, the header will float (the Table of Contents label along with the icons). It will also have a minimal scrollbar, to provide a modern feel.
* When in a specific section, the background color of the heading in the ToC will be highlighted in a lighter shade of black and a white arrow will appear in it.
* Section numbers are removed, to provide a more minimalist design.
==== Additional Options ====
* It has a "back to top" icon, which will lead back to the top of the article.
* It also has an "edit" icon, which edits, moves or deletes the headings, along with their sections.
* There is a search icon, which searches for headings in the article.
==== Other Changes ====
* The contents button appears next to the "Edit" button. When clicking on it, the Table of Contents will display on the left and it will remove the background. The hide link has been replaced by the back arrow, and the back arrow will collapse the Table of Contents, restore the background and the "Contents" button.
* The "Introduction" heading is the first heading, found on all article pages.
== History ==
JustLeafy thinks that the Table of Contents definitely needed modernization, due to the fact that it is somewhat featureless, doesn't have a fixed functionality nor a modern design and it causes too much unnecessary whitespace.
== Code ==
Currently unavailable.
== FAQ ==
Why are you suggesting this?
I want to redesign the ToC so it has fixed functionality, a clean design and is easier to use with additional tools.
Would you want such a script to be available for site-wide or personal use?
Unfortunately, such script would actually be for personal use only, because it can break multiple rules in the customization policy.
Would you recommend this to others?
If this script becomes available, then I'd recommend it, especially if a user does not like the current design and function of the ToC.
We already have FloatingToc from the Dev Wiki. Why create something similar?
This script actually has a huge difference between itself and FloatingToc. A good example being the fact that it stays on the left side, while FloatingToc can be put anywhere and can be expanded to any size. This is only one example, and there is still a lot of other differences.
Is this JavaScript or CSS?
Obviously, it's JavaScript combined with some CSS.
Category:JavaScript