itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-10-02 15:25:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

hx-remove-class

Browse Source
This commit is contained in:
carson 2020-04-26 20:12:09 -07:00
parent 4fc6913379
commit 0ffbd9c771
2 changed files with 41 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/htmx.js
View File

@ -133,23 +133,33 @@ var HTMx = HTMx || (function()
} }
// DOM element processing // DOM element processing
function parseAndApplyClass(classInfo, elt, operation) { function processClassList(elt, classList, operation) {
var cssClass = ""; console.log(elt);
var delay = 50; var values = classList.split(",");
if (classInfo.indexOf(":") > 0) { for (var i = 0; i < values.length; i++) {
var split = classInfo.split(':'); var cssClass = "";
cssClass = split[0]; var delay = 50;
delay = parseInterval(split[1]); if (values[i].trim().indexOf(":") > 0) {
} else { var split = values[i].trim().split(':');
cssClass = classInfo; 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) { function processElement(elt) {
if(elt.getAttribute('hx-get')) { if(getAttributeValue(elt,'hx-get')) {
var trigger = getTrigger(elt); var trigger = getTrigger(elt);
if (trigger === 'load') { if (trigger === 'load') {
issueAjaxRequest(elt, getAttributeValue(elt, 'hx-get')); issueAjaxRequest(elt, getAttributeValue(elt, 'hx-get'));
@ -160,11 +170,11 @@ var HTMx = HTMx || (function()
}); });
} }
} }
if (elt.getAttribute('hx-add-class')) { if (getAttributeValue(elt, 'hx-add-class')) {
var values = elt.getAttribute('hx-add-class').split(","); processClassList(elt, getAttributeValue(elt,'hx-add-class'), "add");
for (var i = 0; i < values.length; i++) { }
parseAndApplyClass(values[i].trim(), elt, 'add'); if (getAttributeValue(elt, 'hx-remove-class')) {
} processClassList(elt, getAttributeValue(elt,'hx-remove-class'), "remove");
} }
for (var i = 0; i < elt.children.length; i++) { for (var i = 0; i < elt.children.length; i++) {
var child = elt.children[i]; var child = elt.children[i];

18
test/core.html
View File

@ -45,7 +45,7 @@
</script> </script>
<script> <script>
describe("Core HTMx Tests", function(){ describe("HTMx AJAX Tests", function(){
beforeEach(function() { beforeEach(function() {
this.server = sinon.fakeServer.create(); this.server = sinon.fakeServer.create();
clearWorkArea(); clearWorkArea();
@ -182,7 +182,6 @@
let i = 0; let i = 0;
this.server.respondWith("GET", "/test", function(xhr){ this.server.respondWith("GET", "/test", function(xhr){
i++; i++;
console.log(xhr);
xhr.respond(200, {}, '<a id="a' + i + '" hx-get="/test2" hx-swap="innerHTML">' + i + '</a>'); xhr.respond(200, {}, '<a id="a' + i + '" hx-get="/test2" hx-swap="innerHTML">' + i + '</a>');
}); });
this.server.respondWith("GET", "/test2", "*"); this.server.respondWith("GET", "/test2", "*");
@ -261,8 +260,7 @@
clearWorkArea(); clearWorkArea();
}); });
// bootstrap test it('adds classes properly', function(done)
it('add classes properly', function(done)
{ {
let div = make('<div hx-add-class="c1">Click Me!</div>') let div = make('<div hx-add-class="c1">Click Me!</div>')
should.equal(div.classList.length, 0); should.equal(div.classList.length, 0);
@ -272,6 +270,17 @@
}, 100); }, 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> </script>
@ -282,7 +291,6 @@
<em>Work Area</em> <em>Work Area</em>
<hr/> <hr/>
<div id="work-area"> <div id="work-area">
</div> </div>
</body> </body>
</html> </html>