From 0ffbd9c771d1dad0dd8f960ff7ae51b99c4bb0b3 Mon Sep 17 00:00:00 2001
From: carson <carson@leaddyno.com>
Date: Sun, 26 Apr 2020 20:12:09 -0700
Subject: [PATCH] hx-remove-class

---
 src/htmx.js    | 46 ++++++++++++++++++++++++++++------------------
 test/core.html | 18 +++++++++++++-----
 2 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/htmx.js b/src/htmx.js
index 37a4439d..ebb5f30a 100644
--- a/src/htmx.js
+++ b/src/htmx.js
@@ -133,23 +133,33 @@ var HTMx = HTMx || (function()
     }
 
 // DOM element processing
-    function parseAndApplyClass(classInfo, elt, operation) {
-        var cssClass = "";
-        var delay = 50;
-        if (classInfo.indexOf(":") > 0) {
-            var split = classInfo.split(':');
-            cssClass = split[0];
-            delay = parseInterval(split[1]);
-        } else {
-            cssClass = classInfo;
+    function processClassList(elt, classList, operation) {
+        console.log(elt);
+        var values = classList.split(",");
+        for (var i = 0; i < values.length; i++) {
+            var cssClass = "";
+            var delay = 50;
+            if (values[i].trim().indexOf(":") > 0) {
+                var split = values[i].trim().split(':');
+                cssClass = split[0];
+                delay = parseInterval(split[1]);
+            } else {
+                cssClass = values[i].trim();
+            }
+            console.log(elt);
+            console.log(operation);
+            console.log(cssClass);
+            setTimeout(function () {
+                console.log(elt);
+                console.log(operation);
+                console.log(cssClass);
+                elt.classList[operation].call(elt.classList, cssClass);
+            }, delay);
         }
-        setTimeout(function() {
-            elt.classList[operation].call(elt.classList, cssClass)
-        }, delay);
     }
 
     function processElement(elt) {
-        if(elt.getAttribute('hx-get')) {
+        if(getAttributeValue(elt,'hx-get')) {
             var trigger = getTrigger(elt);
             if (trigger === 'load') {
                 issueAjaxRequest(elt, getAttributeValue(elt, 'hx-get'));
@@ -160,11 +170,11 @@ var HTMx = HTMx || (function()
                 });
             }
         }
-        if (elt.getAttribute('hx-add-class')) {
-            var values = elt.getAttribute('hx-add-class').split(",");
-            for (var i = 0; i < values.length; i++) {
-                parseAndApplyClass(values[i].trim(), elt, 'add');
-            }
+        if (getAttributeValue(elt, 'hx-add-class')) {
+            processClassList(elt, getAttributeValue(elt,'hx-add-class'), "add");
+        }
+        if (getAttributeValue(elt, 'hx-remove-class')) {
+            processClassList(elt, getAttributeValue(elt,'hx-remove-class'), "remove");
         }
         for (var i = 0; i < elt.children.length; i++) {
             var child = elt.children[i];
diff --git a/test/core.html b/test/core.html
index 983d7c8f..c0647ed8 100644
--- a/test/core.html
+++ b/test/core.html
@@ -45,7 +45,7 @@
 </script>
 
 <script>
-    describe("Core HTMx Tests", function(){
+    describe("HTMx AJAX Tests", function(){
         beforeEach(function() {
             this.server = sinon.fakeServer.create();
             clearWorkArea();
@@ -182,7 +182,6 @@
             let i = 0;
             this.server.respondWith("GET", "/test", function(xhr){
                 i++;
-                console.log(xhr);
                 xhr.respond(200, {}, '<a id="a' + i + '" hx-get="/test2" hx-swap="innerHTML">' + i + '</a>');
             });
             this.server.respondWith("GET", "/test2", "*");
@@ -261,8 +260,7 @@
             clearWorkArea();
         });
 
-        // bootstrap test
-        it('add classes properly', function(done)
+        it('adds classes properly', function(done)
         {
             let div = make('<div hx-add-class="c1">Click Me!</div>')
             should.equal(div.classList.length, 0);
@@ -272,6 +270,17 @@
             }, 100);
         });
 
+        it('removes classes properly', function(done)
+        {
+            let div = make('<div class="foo bar" hx-remove-class="bar">Click Me!</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);
+        });
 
     })
 </script>
@@ -282,7 +291,6 @@
 <em>Work Area</em>
 <hr/>
 <div id="work-area">
-
 </div>
 </body>
 </html>