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

1.2.0 release prep

Browse Source
This commit is contained in:
carson 2021-02-05 20:20:57 -07:00
parent e82c3735bb
commit 815a37c0d2
3 changed files with 185 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/ext/path-deps.js vendored
View File

@ -32,7 +32,7 @@
htmx.defineExtension('path-deps', {
onEvent: function (name, evt) {
if (name === "htmx:afterRequest") {
if (name === "htmx:beforeOnLoad") {
var config = evt.detail.requestConfig;
// mutating call
if (config.verb !== "get") {

33
dist/ext/preload.js vendored
View File

@ -13,16 +13,26 @@ htmx.defineExtension("preload", {
// SOME HELPER FUNCTIONS WE'LL NEED ALONG THE WAY
// config gets the closest non-empty value from the preload="" attribute. (default = "mousedown")
var config = function(node) {
// attr gets the closest non-empty value from the attribute.
var attr = function(node, property) {
if (node == undefined) {return undefined;}
return node.getAttribute("preload") || node.getAttribute("data-preload") || config(node.parentElement) || "mousedown"
return node.getAttribute(property) || node.getAttribute("data-" + property) || attr(node.parentElement, property)
}
// load handles the actual HTTP fetch, and uses htmx.ajax in cases where we're
// preloading an htmx resource (this sends the same HTTP headers as a regular htmx request)
var load = function(node) {
// Called after a successful AJAX request, to mark the
// content as loaded (and prevent additional AJAX calls.)
var done = function(html) {
node.preloadState = "DONE"
if (attr(node, "preload-images") == "true") {
document.createElement("div").innerHTML = html // create and populate a node to load linked resources, too.
}
}
return function() {
// If this value has already been loaded, then do not try again.
@ -30,18 +40,15 @@ htmx.defineExtension("preload", {
return;
}
// This is used after a successful AJAX request, to mark the
// content as loaded (and prevent additional AJAX calls.)
var done = function() {
node.preloadState = "DONE"
}
// Special handling for HX-GET - use built-in htmx.ajax function
// so that headers match other htmx requests, then set
// node.preloadState = TRUE so that requests are not duplicated
// in the future
if (node.getAttribute("hx-get")) {
htmx.ajax("GET", node.getAttribute("hx-get"), {handler:done});
var hxGet = node.getAttribute("hx-get") || node.getAttribute("data-hx-get")
if (hxGet) {
htmx.ajax("GET", hxGet, {handler:function(elt, info) {
done(info.xhr.responseText);
}});
return;
}
@ -51,7 +58,7 @@ htmx.defineExtension("preload", {
if (node.getAttribute("href")) {
var r = new XMLHttpRequest();
r.open("GET", node.getAttribute("href"));
r.onload = done;
r.onload = function() {done(r.responseText);};
r.send();
return;
}
@ -73,7 +80,7 @@ htmx.defineExtension("preload", {
}
// Get event name from config.
var on = config(node)
var on = attr(node, "preload") || "mousedown"
// FALL THROUGH to here means we need to add an EventListener

164
www/test/1.2.0/test/attributes/hx-headers.js Normal file
View File

@ -0,0 +1,164 @@
describe("hx-headers attribute", function() {
beforeEach(function () {
this.server = makeServer();
clearWorkArea();
});
afterEach(function () {
this.server.restore();
clearWorkArea();
});
it('basic hx-headers works', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
xhr.requestHeaders['i1'].should.equal("test");
xhr.respond(200, {}, "Clicked!")
});
var div = make("<div hx-post='/vars' hx-headers='\"i1\":\"test\"'></div>")
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('basic hx-headers works with braces', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
xhr.requestHeaders['i1'].should.equal("test");
xhr.respond(200, {}, "Clicked!")
});
var div = make("<div hx-post='/vars' hx-headers='{\"i1\":\"test\"}'></div>")
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('multiple hx-headers works', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
xhr.requestHeaders['v1'].should.equal("test");
xhr.requestHeaders['v2'].should.equal("42");
xhr.respond(200, {}, "Clicked!")
});
var div = make("<div hx-post='/vars' hx-headers='\"v1\":\"test\", \"v2\":42'></div>")
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('hx-headers can be on parents', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
xhr.requestHeaders['i1'].should.equal("test");
xhr.respond(200, {}, "Clicked!")
});
make("<div hx-headers='\"i1\":\"test\"'><div id='d1' hx-post='/vars'></div></div>");
var div = byId("d1");
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('hx-headers can override parents', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
xhr.requestHeaders['i1'].should.equal("best");
xhr.respond(200, {}, "Clicked!")
});
make("<div hx-headers='\"i1\":\"test\"'><div id='d1' hx-headers='\"i1\":\"best\"' hx-post='/vars'></div></div>");
var div = byId("d1");
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('hx-headers overrides inputs', function () {
this.server.respondWith("POST", "/include", function (xhr) {
xhr.requestHeaders['i1'].should.equal("best");
xhr.respond(200, {}, "Clicked!")
});
var div = make("<div hx-target='this'><input hx-post='/include' hx-headers='\"i1\":\"best\"' hx-trigger='click' id='i1' name='i1' value='test'/></div>")
var input = byId("i1")
input.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('basic hx-headers javascript: works', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
xhr.requestHeaders['i1'].should.equal("test");
xhr.respond(200, {}, "Clicked!")
});
var div = make('<div hx-post="/vars" hx-headers="javascript:i1:\'test\'"></div>')
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('hx-headers works with braces', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
xhr.requestHeaders['i1'].should.equal("test");
xhr.respond(200, {}, "Clicked!")
});
var div = make('<div hx-post="/vars" hx-headers="javascript:{i1:\'test\'}"></div>')
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('multiple hx-headers works', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
xhr.requestHeaders['v1'].should.equal("test");
xhr.requestHeaders['v2'].should.equal("42");
xhr.respond(200, {}, "Clicked!")
});
var div = make('<div hx-post="/vars" hx-headers="javascript:v1:\'test\', v2:42"></div>')
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('hx-headers can be on parents', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
xhr.requestHeaders['i1'].should.equal("test");
xhr.respond(200, {}, "Clicked!")
});
make('<div hx-headers="javascript:i1:\'test\'"><div id="d1" hx-post="/vars"></div></div>')
var div = byId("d1");
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('hx-headers can override parents', function () {
this.server.respondWith("POST", "/vars", function (xhr) {
xhr.requestHeaders['i1'].should.equal("best");
xhr.respond(200, {}, "Clicked!")
});
make('<div hx-headers="javascript:i1:\'test\'"><div id="d1" hx-headers="javascript:i1:\'best\'" hx-post="/vars"></div></div>')
var div = byId("d1");
div.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
it('hx-headers overrides inputs', function () {
this.server.respondWith("POST", "/include", function (xhr) {
xhr.requestHeaders['i1'].should.equal("best");
xhr.respond(200, {}, "Clicked!")
});
var div = make('<div hx-target="this"><input hx-post="/include" hx-headers="javascript:i1:\'best\'" hx-trigger="click" id="i1" name="i1" value="test"/></div>')
var input = byId("i1")
input.click();
this.server.respond();
div.innerHTML.should.equal("Clicked!");
});
});