mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-30 14:31:47 +00:00
add intersect event for intersection observer
supports the `root` and `threshold` config variables
This commit is contained in:
carson
parent
4dd5004851
commit
f6efc4a8c3
22
src/htmx.js
22
src/htmx.js
@ -878,6 +878,9 @@ return (function () {
|
|||||||
} else if (token === "throttle" && tokens[0] === ":") {
|
} else if (token === "throttle" && tokens[0] === ":") {
|
||||||
tokens.shift();
|
tokens.shift();
|
||||||
triggerSpec.throttle = parseInterval(consumeUntil(tokens, WHITESPACE_OR_COMMA));
|
triggerSpec.throttle = parseInterval(consumeUntil(tokens, WHITESPACE_OR_COMMA));
|
||||||
|
} else if ((token === "root" || token === "threshold") && tokens[0] === ":") {
|
||||||
|
tokens.shift();
|
||||||
|
triggerSpec[token] = consumeUntil(tokens, WHITESPACE_OR_COMMA);
|
||||||
} else {
|
} else {
|
||||||
triggerErrorEvent(elt, "htmx:syntax:error", {token:tokens.shift()});
|
triggerErrorEvent(elt, "htmx:syntax:error", {token:tokens.shift()});
|
||||||
}
|
}
|
||||||
@ -1324,6 +1327,25 @@ return (function () {
|
|||||||
} else if (triggerSpec.trigger === "revealed") {
|
} else if (triggerSpec.trigger === "revealed") {
|
||||||
initScrollHandler();
|
initScrollHandler();
|
||||||
maybeReveal(elt);
|
maybeReveal(elt);
|
||||||
|
} else if (triggerSpec.trigger === "intersect") {
|
||||||
|
var observerOptions = {};
|
||||||
|
if (triggerSpec.root) {
|
||||||
|
observerOptions.root = querySelectorExt(triggerSpec.root)
|
||||||
|
}
|
||||||
|
if (triggerSpec.threshold) {
|
||||||
|
observerOptions.threshold = parseFloat(triggerSpec.threshold);
|
||||||
|
}
|
||||||
|
var observer = new IntersectionObserver(function (entries) {
|
||||||
|
for (var i = 0; i < entries.length; i++) {
|
||||||
|
var entry = entries[i];
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
triggerEvent(elt, "intersect");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, observerOptions);
|
||||||
|
observer.observe(elt);
|
||||||
|
addEventListener(elt, verb, path, nodeData, triggerSpec);
|
||||||
} else if (triggerSpec.trigger === "load") {
|
} else if (triggerSpec.trigger === "load") {
|
||||||
loadImmediately(elt, verb, path, nodeData, triggerSpec.delay);
|
loadImmediately(elt, verb, path, nodeData, triggerSpec.delay);
|
||||||
} else if (triggerSpec.pollInterval) {
|
} else if (triggerSpec.pollInterval) {
|
||||||
|
|||||||
154
test/manual/intersect-test-eventHandler.html
Normal file
154
test/manual/intersect-test-eventHandler.html
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>Test Scroll Event Handler</title>
|
||||||
|
<script src="../../node_modules/sinon/pkg/sinon.js"></script>
|
||||||
|
<script src="../util/util.js"></script>
|
||||||
|
<script src="../../src/htmx.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
server = makeServer();
|
||||||
|
server.autoRespond = true;
|
||||||
|
server.respondWith("GET", "/more_content", "Here is more content for this page, loaded 'remotely'.");
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.panel {
|
||||||
|
height:200px;
|
||||||
|
background-color:#eee;
|
||||||
|
margin-bottom:20px;
|
||||||
|
padding:20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body style="padding:20px;font-family: sans-serif">
|
||||||
|
<h1>Scrolling Event Handler Tests</h1>
|
||||||
|
<p>You should be able to scroll this page at any speed and see HTML fragments loaded into the DIVs "remotely" without any hiccups.</p>
|
||||||
|
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
|
||||||
|
<h1>Threshold .5</h1>
|
||||||
|
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:.5"></div>
|
||||||
|
|
||||||
|
<h1>Threshold 1</h1>
|
||||||
|
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect threshold:1"></div>
|
||||||
|
|
||||||
|
<h1>Regular</h1>
|
||||||
|
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
<div class="panel" hx-get="/more_content" hx-trigger="intersect"></div>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user