Sorting Data and CSS Cascading
Explore how to dynamically sort data elements using their attributes within Stimulus and manage CSS animations to prevent repeated effects. Understand how to control element class changes with a CSS controller triggered by animation events, resulting in smoother and more efficient web interactions.
We'll cover the following...
Sorting data and infinite loops
Our sortTargets method takes the list of the elements that are sortElementTargets and, well, sorts them, using the value of their data-sort-value attribute for comparison. Once it has a sorted list, it reappends them in order back to the parent, which has the effect of having all the children display in order. We also have a guard clause where nothing happens if the targets are already sorted, which also should prevent the MutationObserver from looping endlessly since the changes to the element from appending objects also qualify as mutations.
This ...