Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 3 commits into from
Jul 8, 2024

Conversation

MichaelWest22
Copy link
Contributor

This is a suggested change by schungx from bigskysoftware/htmx#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.

Copy link

netlify bot commented Jun 10, 2024

Deploy Preview for htmx-extensions canceled.

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

@1cg 1cg merged commit 03b3018 into bigskysoftware:main Jul 8, 2024
4 checks passed
@MichaelWest22 MichaelWest22 deleted the patch-1 branch July 16, 2024 22:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants