diff --git a/README.md b/README.md index a73cba5..5414103 100644 --- a/README.md +++ b/README.md @@ -82,6 +82,13 @@ Use the `intersect-full` utility to trigger the event when when the element is f
``` +### Custom threshold +If `intersect-half` or `intersect-full` don't fit your needs, you can set a custom threshold using Tailwind's arbitrary value syntax: `intersect-[]`, where `` is a number between `0` and `1`. +```html +
+``` +This triggers the event once 30% of the element is visible. Values outside the `0`–`1` range are clamped. + ## Custom classes If you want to define the intersection behavior in a custom class (e.g. with the @apply directive), add a `intersect` class to your HTML element. ```html diff --git a/src/observer/index.js b/src/observer/index.js index cf27bb2..44f5473 100644 --- a/src/observer/index.js +++ b/src/observer/index.js @@ -1,3 +1,10 @@ +const NAMED_THRESHOLDS = { + 'intersect-full': 0.99, + 'intersect-half': 0.5, +} + +const ARBITRARY_REGEX = /(?:^|\s)intersect-\[([\d.]+)\]/ + const Observer = { start() { if (document.readyState === 'loading') { @@ -50,15 +57,22 @@ const Observer = { }) }, + /** + * + * @param {Element} element + * @returns {number} + */ _getThreshold(element) { - if (element.classList.contains('intersect-full')) { - return 0.99 + for (const className in NAMED_THRESHOLDS) { + if (element.classList.contains(className)) + return NAMED_THRESHOLDS[className] } - - if (element.classList.contains('intersect-half')) { - return 0.5 + const match = element.className.match(ARBITRARY_REGEX) + if (match) { + const threshold = parseFloat(match[1]) + if (!Number.isNaN(threshold)) + return Math.min(Math.max(0, threshold), 1) } - return 0 },