itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-29 22:11:22 +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
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];

18
test/core.html
View File

@ -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>