bigskysoftware / htmx-extensions

159 stars 46 forks source link

Add apply-parent-classes feature to class-tools #30

Closed MichaelWest22 closed 3 months ago

MichaelWest22 commented 3 months ago

This is a suggested change by schungx from https://github.com/bigskysoftware/htmx/pull/2485 that I've just re targeted to the htmx-extensions repo and tried to add documentation and a couple of quick tests

Here is the original description from schungx:

This PR adds a very useful feature.

It reads any apply-parent-classes or data-apply-parent-classes nodes, and then applies the class changes to its parent. The nodes are removed afterwards and not left in the target; therefore they are transitional and only act as containers to the class modification commands.

This can be used to surgically add/remove classes in any DOM element via OOB updates..

For example, the following will add the foo class to #my-element after 1 second, then remove the foo class one second later, vanishing without a trace afterwards. The net effect is direct OOB control by the server of client-side CSS classes.

<div hx-swap-oob="beforeend: #my-element">
    <div apply-parent-classes="add foo:1s, remove bar:1s></div>
</div>

This is a way to non-intrusively affect the CSS classes of an element without knowing its content.

netlify[bot] commented 3 months ago

Deploy Preview for htmx-extensions canceled.

Name Link
Latest commit 90b1495f7a6a12650b89607340a01ef98dd4faf1
Latest deploy log https://app.netlify.com/sites/htmx-extensions/deploys/6666db3bb07022000818dabc