mirror of
https://github.com/bigskysoftware/htmx.git
synced 2025-09-28 05:21:18 +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] === ":") {
|
||||
tokens.shift();
|
||||
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 {
|
||||
triggerErrorEvent(elt, "htmx:syntax:error", {token:tokens.shift()});
|
||||
}
|
||||
@ -1324,6 +1327,25 @@ return (function () {
|
||||
} else if (triggerSpec.trigger === "revealed") {
|
||||
initScrollHandler();
|
||||
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") {
|
||||
loadImmediately(elt, verb, path, nodeData, triggerSpec.delay);
|
||||
} 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