Specify subgroups of checkboxes

[vladdeSV]

For instance, if my markup does not contain neat groups of checkboxes, such as a table, it would be cool if I could specify checkboxes that belong to each other. That way, columns could be swiped without affecting the other columns.

I want the syntax the users write to be:

<div data-checkswipe data-checkswipe-specify>
  <input data-checkswipe-use="foo">
  <input data-checkswipe-use="foo">
  
  <input data-checkswipe-use="quux">
  <input data-checkswipe-use="quux">
  <input data-checkswipe-use="quux">
</div>

Where the first two inputs would be swipe-able as a group, and the last three would be another group.

However, I don't see a way with CSS to only make one of the subgroups enlarge without modifying the DOM.

[vladdeSV]

I thought about keeping state of which as the value for -specify, eg. data-checkswipe-specify=quux, and somehow specify all checkboxes that have -use=quux to be selected… but according to https://stackoverflow.com/a/42090046/5990425 that is not possible :(

[vladdeSV]

One solution which modifies the DOM would of course be to check the value of -use and tag all those checkboxes with another attribute, like data-checkswipe-foobar and have the CSS enlarge those.

But honestly I don't really vibe with that idea, as it sort of goes agains my "clean" vision for this library.

[vladdeSV]

If data-checkswipe-use is treated as an empty string, any old code would still be usable with 0 user changes… but the behavior runtime would be different.

edit: different because DOM would be modified, but UX would be the same

[vladdeSV]

Here's an idea: the value of each -use gets "munched" and stored in as a property of the checkbox, so that on runtime there are no values.

The JavaScript could then find all related checkboxes with that same value in the property and set the -use attribute to some pre-defined value like use (-use=use), which there could be CSS rules for.

Maybe some cracked CSS rule for data-checkswipe-specify=multiple.

[vladdeSV]

I don't want to modify the CSS in the injected styles, since it's not certain that the injected CSS is being used; the styles could be manually copied into the page's styles.