From 455350bce21c4c9fb43212d6211846885f8249c9 Mon Sep 17 00:00:00 2001 From: Caleb Porzio Date: Fri, 25 Mar 2022 15:59:53 -0400 Subject: [PATCH] Adjust threshold modifier to use 100 as 100% instead of 1 (#2787) --- packages/docs/src/en/plugins/intersect.md | 8 ++++---- packages/intersect/src/index.js | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/docs/src/en/plugins/intersect.md b/packages/docs/src/en/plugins/intersect.md index d79f1ecad..b5541a04d 100644 --- a/packages/docs/src/en/plugins/intersect.md +++ b/packages/docs/src/en/plugins/intersect.md @@ -110,7 +110,7 @@ Sometimes it's useful to evaluate an expression only the first time an element e ### .half -Evaluates the expression once the intersection threshold exceeds `0.5`. +Evaluates the expression once the intersection threshold exceeds `0.5`. Useful for elements where it's important to show at least part of the element. @@ -121,7 +121,7 @@ Useful for elements where it's important to show at least part of the element. ### .full -Evaluates the expression once the intersection threshold exceeds `0.99`. +Evaluates the expression once the intersection threshold exceeds `0.99`. Useful for elements where it's important to show the whole element. @@ -134,9 +134,9 @@ Useful for elements where it's important to show the whole element. Allows you to control the `threshold` property of the underlying `IntersectionObserver`: -This value should be a decimal in the range "0-1". A value of "0" means: trigger an "intersection" if ANY part of the element enters the viewport (the default behavior). While a value of "1" means: don't trigger an "intersection" unless the entire element has entered the viewport. +This value should be in the range of "0-100". A value of "0" means: trigger an "intersection" if ANY part of the element enters the viewport (the default behavior). While a value of "100" means: don't trigger an "intersection" unless the entire element has entered the viewport. -Any value in between is a "ratio" of those two extremes. +Any value in between is a percentage of those two extremes. For example if you want to trigger an intersection after half of the element has entered the page, you can use `.threshold.50`: diff --git a/packages/intersect/src/index.js b/packages/intersect/src/index.js index b5ed6a753..0880258cd 100644 --- a/packages/intersect/src/index.js +++ b/packages/intersect/src/index.js @@ -31,12 +31,12 @@ function getThreshhold(modifiers) { if (modifiers.includes('half')) return 0.5 if (! modifiers.includes('threshold')) return 0 - let threshhold = modifiers[modifiers.indexOf('threshold') + 1] + let threshold = modifiers[modifiers.indexOf('threshold') + 1] - if (threshhold === '1') return 1 - if (threshhold === '0') return 0 + if (threshold === '100') return 1 + if (threshold === '0') return 0 - return Number(`.${threshhold}`) + return Number(`.${threshold}`) } export function getLengthValue(rawValue) {