From 9d8f2443575cd77336bdf88f496bbc09487f82a1 Mon Sep 17 00:00:00 2001
From: MichaelWest22 <michael@latent.nz>
Date: Mon, 10 Jun 2024 16:10:08 +1200
Subject: [PATCH 1/3] Add apply-parent-classes feature

---
 src/class-tools/class-tools.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/class-tools/class-tools.js b/src/class-tools/class-tools.js
index 7f1d9ca..f9520da 100644
--- a/src/class-tools/class-tools.js
+++ b/src/class-tools/class-tools.js
@@ -79,7 +79,13 @@
       if (name === 'htmx:afterProcessNode') {
         var elt = evt.detail.elt
         maybeProcessClasses(elt)
-        if (elt.querySelectorAll) {
+        var classList = elt.getAttribute("apply-parent-classes") || elt.getAttribute("data-apply-parent-classes");
+        if (classList) {
+          var parent = elt.parentElement;
+          parent.removeChild(elt);
+          parent.setAttribute("classes", classList);
+          maybeProcessClasses(parent);
+        } else if (elt.querySelectorAll) {
           var children = elt.querySelectorAll('[classes], [data-classes]')
           for (var i = 0; i < children.length; i++) {
             maybeProcessClasses(children[i])

From 293c6f37a7ab9cf129604d14455f9720a7ee2eb9 Mon Sep 17 00:00:00 2001
From: MichaelWest22 <michael@latent.nz>
Date: Mon, 10 Jun 2024 17:17:58 +1200
Subject: [PATCH 2/3] apply-parent-classes documentation and tests

---
 src/class-tools/README.md               |  7 ++++++-
 src/class-tools/package-lock.json       |  4 ++--
 src/class-tools/package.json            |  2 +-
 src/class-tools/test/ext/class-tools.js | 20 ++++++++++++++++++++
 4 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/class-tools/README.md b/src/class-tools/README.md
index 6a287f0..fc37e28 100644
--- a/src/class-tools/README.md
+++ b/src/class-tools/README.md
@@ -12,10 +12,12 @@ Within a run, a `,` character separates distinct class operations.
 A class operation is an operation name `add`, `remove`, or `toggle`, followed by a CSS class name,
 optionally followed by a colon `:` and a time delay.
 
+There is also the option to use `apply-parent-classes` or `data-apply-parent-classes` which uses the same format as `classes` but is instead designed for Out of band updates to allow you to manipulate CSS classes of an existing element in the DOM without otherwise knowing or altering its state. Any element with this property will apply classes to its parent and also remove this child element afterwards so should ideally be used as part of a `hx-swap-oob="beforeend: #some-element`.
+
 ## Install
 
 ```html
-<script src="https://unpkg.com/htmx-ext-class-tools@2.0.0/class-tools.js"></script>
+<script src="https://unpkg.com/htmx-ext-class-tools@2.0.1/class-tools.js"></script>
 ```
 
 ## Usage
@@ -30,4 +32,7 @@ optionally followed by a colon `:` and a time delay.
                                                                  class "foo" after 1s  -->
     <div classes="toggle foo:1s"/> <!-- toggles the class "foo" every 1s -->
 </div>
+<div hx-swap-oob="beforeend: #my-element"> <!-- adds the class "foo" to my-element for 10s -->
+    <div hx-ext="class-tools" apply-parent-classes="add foo, remove foo:10s"></div>
+</div>
 ```
diff --git a/src/class-tools/package-lock.json b/src/class-tools/package-lock.json
index 3ddfa35..3df7438 100644
--- a/src/class-tools/package-lock.json
+++ b/src/class-tools/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "htmx-ext-class-tools",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "htmx-ext-class-tools",
-      "version": "2.0.0",
+      "version": "2.0.1",
       "devDependencies": {
         "chai": "^4.3.10",
         "chai-dom": "^1.12.0",
diff --git a/src/class-tools/package.json b/src/class-tools/package.json
index 71afca9..19cc68f 100644
--- a/src/class-tools/package.json
+++ b/src/class-tools/package.json
@@ -1,7 +1,7 @@
 {
   "name": "htmx-ext-class-tools",
   "main": "class-tools.js",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "scripts": {
     "lint": "eslint test/ext test",
     "lint-fix": "eslint test/ext test --fix",
diff --git a/src/class-tools/test/ext/class-tools.js b/src/class-tools/test/ext/class-tools.js
index bab5c39..6aef5da 100644
--- a/src/class-tools/test/ext/class-tools.js
+++ b/src/class-tools/test/ext/class-tools.js
@@ -37,6 +37,26 @@ describe('class-tools extension', function() {
     }, 100)
   })
 
+  it('adds classes to parent properly', function(done) {
+    var div = make('<div>Click Me!<div hx-ext="class-tools" apply-parent-classes="add c1"></div></div>')
+    should.equal(div.classList.length, 0)
+    setTimeout(function() {
+      should.equal(div.classList.contains('c1'), true)
+      done()
+    }, 100)
+  })
+
+  it('removes classes from parent properly', function(done) {
+    var div = make('<div class="foo bar">Click Me!<div hx-ext="class-tools" apply-parent-classes="remove bar"></div></div>')
+    should.equal(div.classList.contains('foo'), true)
+    should.equal(div.classList.contains('bar'), true)
+    setTimeout(function() {
+      should.equal(div.classList.contains('foo'), true)
+      should.equal(div.classList.contains('bar'), false)
+      done()
+    }, 100)
+  })
+
   it('extension can be on parent', function(done) {
     var div = make('<div hx-ext="class-tools"><div id="d1" classes="add c1">Click Me!</div></div>')
     should.equal(div.classList.length, 0)

From 90b1495f7a6a12650b89607340a01ef98dd4faf1 Mon Sep 17 00:00:00 2001
From: MichaelWest22 <michael@latent.nz>
Date: Mon, 10 Jun 2024 22:53:44 +1200
Subject: [PATCH 3/3] Add test for cleaning up temporary child

---
 src/class-tools/test/ext/class-tools.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/class-tools/test/ext/class-tools.js b/src/class-tools/test/ext/class-tools.js
index 6aef5da..157a0c6 100644
--- a/src/class-tools/test/ext/class-tools.js
+++ b/src/class-tools/test/ext/class-tools.js
@@ -57,6 +57,14 @@ describe('class-tools extension', function() {
     }, 100)
   })
 
+  it('cleans up child with apply-parent-classes properly', function(done) {
+    var div = make('<div class="foo bar">Click Me!<div id="d2" hx-ext="class-tools" apply-parent-classes="remove bar"></div></div>')
+    setTimeout(function() {
+      should.not.exist(byId('d2'))
+      done()
+    }, 100)
+  })
+
   it('extension can be on parent', function(done) {
     var div = make('<div hx-ext="class-tools"><div id="d1" classes="add c1">Click Me!</div></div>')
     should.equal(div.classList.length, 0)