itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-28 21:41:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve API by taking string selectors in place of elements

Browse Source
This commit is contained in:
carson 2020-12-04 15:06:02 -07:00
parent 2a9b6833a6
commit b1729b2b85
2 changed files with 82 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/htmx.js
View File

@ -280,6 +280,7 @@ return (function () {
}
function removeElement(elt, delay) {
elt = resolveTarget(elt);
if (delay) {
setTimeout(function(){removeElement(elt);}, delay)
} else {
@ -288,6 +289,7 @@ return (function () {
}
function addClassToElement(elt, clazz, delay) {
elt = resolveTarget(elt);
if (delay) {
setTimeout(function(){addClassToElement(elt, clazz);}, delay)
} else {
@ -296,6 +298,7 @@ return (function () {
}
function removeClassFromElement(elt, clazz, delay) {
elt = resolveTarget(elt);
if (delay) {
setTimeout(function(){removeClassFromElement(elt, clazz);}, delay)
} else {
@ -304,10 +307,12 @@ return (function () {
}
function toggleClassOnElement(elt, clazz) {
elt = resolveTarget(elt);
elt.classList.toggle(clazz);
}
function takeClassForElement(elt, clazz) {
elt = resolveTarget(elt);
forEach(elt.parentElement.children, function(child){
removeClassFromElement(child, clazz);
})
@ -315,6 +320,7 @@ return (function () {
}
function closest(elt, selector) {
elt = resolveTarget(elt);
do if (elt == null || matches(elt, selector)) return elt;
while (elt = elt && parentElt(elt));
}
@ -1239,6 +1245,7 @@ return (function () {
}
function processNode(elt) {
elt = resolveTarget(elt);
initNode(elt);
forEach(findElementsToProcess(elt), function(child) { initNode(child) });
}
@ -1289,6 +1296,7 @@ return (function () {
}
function triggerEvent(elt, eventName, detail) {
elt = resolveTarget(elt);
if (detail == null) {
detail = {};
}

74
test/core/api.js
View File

@ -38,6 +38,20 @@ describe("Core htmx API test", function(){
detailStr.should.equal("foo");
});
it('triggers properly w/ selector', function () {
var div = make("<div id='div1'/>");
var myEventCalled = false;
var detailStr = "";
htmx.on("myEvent", function(evt){
myEventCalled = true;
detailStr = evt.detail.str;
})
htmx.trigger("#div1", "myEvent", {str:"foo"})
myEventCalled.should.equal(true);
detailStr.should.equal("foo");
});
it('triggers with no details properly', function () {
var div = make("<div/>");
var myEventCalled = false;
@ -88,6 +102,13 @@ describe("Core htmx API test", function(){
div.innerHTML.should.equal("");
});
it('should remove element properly w/ selector', function () {
var div = make("<div><a id='a1'></a></div>");
var a = htmx.find(div, "a");
htmx.remove("#a1");
div.innerHTML.should.equal("");
});
it('should add class properly', function () {
var div = make("<div></div>");
div.classList.contains("foo").should.equal(false);
@ -95,6 +116,14 @@ describe("Core htmx API test", function(){
div.classList.contains("foo").should.equal(true);
});
it('should add class properly w/ selector', function () {
var div = make("<div id='div1'></div>");
div.classList.contains("foo").should.equal(false);
htmx.addClass("#div1", "foo");
div.classList.contains("foo").should.equal(true);
});
it('should add class properly after delay', function (done) {
var div = make("<div></div>");
div.classList.contains("foo").should.equal(false);
@ -114,6 +143,14 @@ describe("Core htmx API test", function(){
div.classList.contains("foo").should.equal(false);
});
it('should remove class properly w/ selector', function () {
var div = make("<div id='div1'></div>");
htmx.addClass(div, "foo");
div.classList.contains("foo").should.equal(true);
htmx.removeClass("#div1", "foo");
div.classList.contains("foo").should.equal(false);
});
it('should add class properly after delay', function (done) {
var div = make("<div></div>");
htmx.addClass(div, "foo");
@ -135,6 +172,15 @@ describe("Core htmx API test", function(){
div.classList.contains("foo").should.equal(false);
});
it('should toggle class properly w/ selector', function () {
var div = make("<div id='div1'></div>");
div.classList.contains("foo").should.equal(false);
htmx.toggleClass("#div1", "foo");
div.classList.contains("foo").should.equal(true);
htmx.toggleClass("#div1", "foo");
div.classList.contains("foo").should.equal(false);
});
it('should take class properly', function () {
var div1 = make("<div></div>");
var div2 = make("<div></div>");
@ -163,6 +209,34 @@ describe("Core htmx API test", function(){
div3.classList.contains("foo").should.equal(true);
});
it('should take class properly w/ selector', function () {
var div1 = make("<div id='div1'></div>");
var div2 = make("<div id='div2'></div>");
var div3 = make("<div id='div3'></div>");
div1.classList.contains("foo").should.equal(false);
div2.classList.contains("foo").should.equal(false);
div3.classList.contains("foo").should.equal(false);
htmx.takeClass("#div1", "foo");
div1.classList.contains("foo").should.equal(true);
div2.classList.contains("foo").should.equal(false);
div3.classList.contains("foo").should.equal(false);
htmx.takeClass("#div2", "foo");
div1.classList.contains("foo").should.equal(false);
div2.classList.contains("foo").should.equal(true);
div3.classList.contains("foo").should.equal(false);
htmx.takeClass("#div3", "foo");
div1.classList.contains("foo").should.equal(false);
div2.classList.contains("foo").should.equal(false);
div3.classList.contains("foo").should.equal(true);
});
it('logAll works', function () {
var initialLogger = htmx.config.logger
try {