htmx icon indicating copy to clipboard operation
htmx copied to clipboard
verified publisher icon bigskysoftware

feat(hx-trigger): add support for rootMargin on intersect

Open believer opened this issue 1 year ago • 6 comments

Description

Add support for rootMargin in intersect triggers. This allows us to extend the size of the intersect area. I've selected to separate multiple values using underscores, similar to how Tailwind solves it.

Corresponding issue: #1349

Testing

I've tested it locally using one of my own projects. I didn't find any tests for the intersect modifiers, so I couldn't find anything to base new tests on.

Checklist

  • [x] I have read the contribution guidelines
  • [x] I have targeted this PR against the correct branch (master for website changes, dev for source changes)
  • [x] This is either a bugfix, a documentation update, or a new feature that has been explicitly approved via an issue
  • [x] I ran the test suite locally (npm run test) and verified that it succeeded

believer avatar Jun 05 '24 20:06 believer

i like everything about this except the underscores. What if we consumed until EOF or the next token followed by a colon? (this may be a horrible idea idk)

1cg avatar Jun 27 '24 19:06 1cg

I wasn't too excited about the underscores either, but I didn't have a better idea at the time. Two other options could be:

  • /,|(root)|(threshold)/ to match comma or one of the other two intersect options
  • /[,rt]/ for comma and the starting character of the options

I think the first option is easier to understand though

believer avatar Jun 28 '24 05:06 believer

@1cg any thoughts on the updated parsing proposal above?

believer avatar Sep 09 '24 09:09 believer

I came to need this again, so I updated the API without the need for underscores. Now it works with all these variations:

  • intersect rootMargin:10%
  • intersect rootMargin:10px 20px 30px 40px
  • intersect rootMargin:10px 10px threshold:0.1
  • intersect rootMargin:10px 10px threshold:0.1 root:#test

believer avatar Apr 18 '25 06:04 believer

Hi! Given there might be many elements with the need for lazy loading scroll with the same margin value, it would be nice to support setting a default value for all elements instead of specifying it for each element (not sure exactly how though).

gustafnk avatar May 01 '25 13:05 gustafnk

@1cg What do you think about the updated API? I found a need for this again and remembered I had this PR 😅

believer avatar Oct 10 '25 05:10 believer