markbind
markbind copied to clipboard
MarkBind
Provide a way to add an 'expand all' button
Should be provide a way to add an ability like this to a page? https://github.com/nus-cs2103-AY2223S2/forum/issues/397#issuecomment-1515591546
One potential solution to this issue is the introduction of a new "Expand/Collapse All" button. This button would identify all expandable elements on the page and initiate their expansion. Consequently, we need to establish a rule for this.
For elements that are to be affected by this button, they must include one of the following class names:
-
expandable-expanded -
expandable-collapsed
all expandable elements
Are you thinking of any besides panels? Or is this a generic css class toggler
Imo a button to expand/collapse all panels is good but the second requirement in the thread seems a bit un-authorfriendly if we were to implement it (e.g. authors have to specify a no-auto-expand-collapse attribute to exclude certain panels) although it would be nice for readers.
Also, we need to factor in the possibility that expanded panels might have nested panels inside them. Does the button expand all panels at the top level, or do so recursively?
generic
This serves as a standard button that functions akin to a service hub. Essentially, if a component wishes to subscribe to the "expand all" function, all that's required is the simple addition of the class name to the respective component.
Also, we need to factor in the possibility that expanded panels might have nested panels inside them. Does the button expand all panels at the top level, or do so recursively?
We could add a checkbox for this.
Imo a button to expand/collapse all panels is good but the second requirement in the thread seems a bit un-authorfriendly if we were to implement it (e.g. authors have to specify a
no-auto-expand-collapseattribute to exclude certain panels) although it would be nice for readers.
Imo a button to expand/collapse all panels is good but the second requirement in the thread seems a bit un-authorfriendly if we were to implement it (e.g. authors have to specify a
no-auto-expand-collapseattribute to exclude certain panels) although it would be nice for readers.
Imo, it should be acceptable, given that the current panel already includes such collapse and expand classes, even without this specific requirement. The 'open all' button merely standardizes this feature, ensuring that all expandable components share the same class name.
Hi @damithc, you brought up this issue during class this week. From what I understand, you would prefer a button that incrementally expands and collapses panels at each level is that correct? So if you have a panel that has a nested panel, pressing the open button once would open the panel at the first level. Pressing it again would open the inner panel. Similarly, if you press the close button, the nested panel will close first. Pressing the close button again would then close the panel at the first level.
It can be a component - similiar to the scroll-to-top button to allow users to choose the icon, position and so on.
Imo a button to expand/collapse all panels is good but the second requirement in the thread seems a bit un-authorfriendly if we were to implement it (e.g. authors have to specify a
no-auto-expand-collapseattribute to exclude certain panels) although it would be nice for readers.
Do you need an opt out option for this button?
A sample usage might be:
<expand-panel-button open-icon="{some_icon}" close-icon="{some_icon}" icon-size="{some_size}" bottom="" right=""/>
Users can toggle the position to be either relative or absolute (so it will be similiar to the scroll to top button which is always at a fixed position)
@yucheng11122017 Yes, this can similar to the scroll-to-top button. However, the scroll button appears only if the page has been scrolled, whereas these buttons should appear all the time.