From 5fa9941913d1d8ab478e099a0601d9774726ecda Mon Sep 17 00:00:00 2001 From: Jan Romero <> Date: Sat, 13 Jul 2024 17:57:49 +0200 Subject: [PATCH] Add support for from: modifier on intersect events --- src/htmx.js | 5 +- test/manual/index.html | 1 + test/manual/intersect-from-modifier.html | 86 ++++++++++++++++++++++++ www/content/attributes/hx-trigger.md | 1 + www/content/docs.md | 1 + 5 files changed, 92 insertions(+), 2 deletions(-) create mode 100644 test/manual/intersect-from-modifier.html diff --git a/src/htmx.js b/src/htmx.js index 834c67794..c50a62972 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -2565,6 +2565,7 @@ var htmx = (function() { maybeReveal(asElement(elt)) } else if (triggerSpec.trigger === 'intersect') { const observerOptions = {} + const from = triggerSpec.from ? querySelectorExt(elt, triggerSpec.from) : elt if (triggerSpec.root) { observerOptions.root = querySelectorExt(elt, triggerSpec.root) } @@ -2575,12 +2576,12 @@ var htmx = (function() { for (let i = 0; i < entries.length; i++) { const entry = entries[i] if (entry.isIntersecting) { - triggerEvent(elt, 'intersect') + triggerEvent(from, 'intersect') break } } }, observerOptions) - observer.observe(asElement(elt)) + observer.observe(asElement(from)) addEventListener(asElement(elt), handler, nodeData, triggerSpec) } else if (triggerSpec.trigger === 'load') { if (!maybeFilterEvent(triggerSpec, elt, makeEvent('load', { elt }))) { diff --git a/test/manual/index.html b/test/manual/index.html index cda517180..28238c72b 100644 --- a/test/manual/index.html +++ b/test/manual/index.html @@ -12,6 +12,7 @@

Functionality

  • CSP Test
  • Form Test
  • Intersect Test
  • +
  • Intersect Test With from: Modifier
  • Indicator CSS Test
  • Indicator CSS Test 2
  • Poll Conditionals
  • diff --git a/test/manual/intersect-from-modifier.html b/test/manual/intersect-from-modifier.html new file mode 100644 index 000000000..34b0bcf68 --- /dev/null +++ b/test/manual/intersect-from-modifier.html @@ -0,0 +1,86 @@ + + + + Test Intersect With from: Modifier + + + + + + + + + +

    Intersect event with from: modifier

    +

    New content should be loaded whenever the page footer is scrolled into view.

    +

    This demonstrates the functionality of hx-trigger="intersect from:footer"

    + + + + + + \ No newline at end of file diff --git a/www/content/attributes/hx-trigger.md b/www/content/attributes/hx-trigger.md index 6be727487..98302e0f3 100644 --- a/www/content/attributes/hx-trigger.md +++ b/www/content/attributes/hx-trigger.md @@ -98,6 +98,7 @@ There are some additional non-standard events that htmx supports: * `revealed` - triggered when an element is scrolled into the viewport (also useful for lazy-loading). If you are using `overflow` in css like `overflow-y: scroll` you should use `intersect once` instead of `revealed`. * `intersect` - fires once when an element first intersects the viewport. This supports two additional options: * `root:` - a CSS selector of the root element for intersection + * `from:` - a CSS selector of the element whose intersection should trigger the event * `threshold:` - a floating point number between 0.0 and 1.0, indicating what amount of intersection to fire the event on ### Triggering via the `HX-Trigger` header diff --git a/www/content/docs.md b/www/content/docs.md index ba9ce630b..aea84b764 100644 --- a/www/content/docs.md +++ b/www/content/docs.md @@ -289,6 +289,7 @@ htmx provides a few special events for use in [hx-trigger](@/attributes/hx-trigg * `revealed` - fires once when an element first scrolls into the viewport * `intersect` - fires once when an element first intersects the viewport. This supports two additional options: * `root:` - a CSS selector of the root element for intersection + * `from:` - a CSS selector of the element whose intersection should trigger the event * `threshold:` - a floating point number between 0.0 and 1.0, indicating what amount of intersection to fire the event on You can also use custom events to trigger requests if you have an advanced use case.