Motivation

Not long after the creation of the first COVID-19 medical cases chart (for Mainland China) in the English Wikipedia, month buttons were implemented to filter the amount of data/rows displayed at once. Besides these buttons, Last X days (which would be the only button toggled on by default) and All buttons were thought of and partially implemented to make visualization even more convenient and meaningful.

Problem

The problem arises with the latter two buttons because their set of affected/toggled elements overlaps with those of the month buttons. The current implementation of custom toggles simply flips/toggles the state of all collapsibles attached to the button. This is not desired in many situations. For example, check this basic demo using the appropriate dependencies. If one clicks the "Odd" button in the first subsection and then repeatedly clicks "Blue", he will never get all the blue numbers shown/hidden at the same time. This is because part of the blue numbers set was already toggled by the "Odd" button. Not only this, but the current custom toggles do not attach a state/class (shown by the light blue border) to the button, only on the collapsible elements. All in all, these make it impossible to properly create buttons similar to the former two as verifiable on the first chart of the applied example if one clicks Aug (its first days will be shown while the last will be hidden, creating a data gap, instead of just ALSO showing August days).

Proposed solution

I propose the creation of two new custom toggle classes: mw-onofftoggle, which adds a state interface to the toggle, but otherwise keeps its original behavior; and mw-partialtoggle, which has a modified toggling behavior that takes the state of the toggle into account (collapsed->expand all, partial->expand all, expanded->collapse all) instead of just flipping each element independently. The latter behaves like a potentially partial toggle because each toggle tracks the state of its attached elements. If only some of its elements are shown, the toggle state will be mw-collapsible-toggle-partial. This can be achieved if another toggle affects an elements set that partially overlaps with the former one.

The mw-onofftoggle works great for toggles like the "+10" button in the basic demo and the, to be implemented, Cumulative button in the second chart of the applied example (it would switch all chart data between new and cumulative). The mw-partialtoggle is perfect for the other applied example's chart buttons, especially the All button. These two new classes would probably be useful in many other situations in Wikipedia pages (200+ just in the medical cases charts) and even MediaWiki. Therefore, I thought the best place to propose such changes would be in jquery.makeCollapsible.js. My proposed script also has some bug fixes and code reordering.

This task supersedes T262622. This is my first JS project :)