IBX-3456 Collapse all button support #1394
Conversation
| const checkIfChangeText = () => { | ||
| const allGroups = doc.querySelectorAll(MULTI_COLLAPSE_BODY_CLASS); | ||
| if (singleElementClicked.length === allGroups.length || singleElementClicked.length === 0) { | ||
| collapseAll.classList.toggle('d-none'); |
There was a problem hiding this comment.
I my opinion we should avoid using BS class d-none. I prefer toggle btn label not class. But I you want toggle class do it on btn then you won't have to change the class for two nodes, just one, and you can manage showing labels in CSS
There was a problem hiding this comment.
I followed the existing examples of implementation in the code, but I can change it in any other way.
| const collapseAll = toggleAllBtn?.querySelector('.ibexa-attribute-group__toggler-collapse'); | ||
| const MULTI_COLLAPSE_BODY_CLASS = '.multi-collapse'; | ||
| let singleElementClicked = []; | ||
| const checkIfChangeText = () => { |
There was a problem hiding this comment.
I think the name of the function is wrong because this function only toggles the d-none class.
I have one more question, what will happen if it will be 2 or 3 collapse all buttons for different groups?
I would probably create a new JS file that contain all the collapse/expand logic for multiple collpase. The button in the data-attribute could be given a selector which collapse it should collapse/expand/listen to, etc.
There was a problem hiding this comment.
I proposed a new name for the function. In my opinion, based on the YAGNI principle, we should first discuss the probability of such a situation before making such changes.
| }; | ||
| const handleCollapseAction = (expandAction) => { | ||
| singleElementClicked = []; | ||
| doc.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { |
There was a problem hiding this comment.
I think here's some bigger problem - it should be contextualized in some way. Now you'll collapse ALL elements on page that has this class, even if they're in some totally different place and are used for something totally different.
Probably instead of doc you should use some container to limit to some specific part of site
|
Related PRs:
Description:
For QA:
Documentation: