Skip to content

Commit

Permalink
Adjust threshold modifier to use 100 as 100% instead of 1 (#2787)
Browse files Browse the repository at this point in the history
  • Loading branch information
calebporzio authored Mar 25, 2022
1 parent b10d3f5 commit 455350b
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 8 deletions.
8 changes: 4 additions & 4 deletions packages/docs/src/en/plugins/intersect.md
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ Sometimes it's useful to evaluate an expression only the first time an element e
<a name="half"></a>
### .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.

Expand All @@ -121,7 +121,7 @@ Useful for elements where it's important to show at least part of the element.
<a name="full"></a>
### .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.

Expand All @@ -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`:

Expand Down
8 changes: 4 additions & 4 deletions packages/intersect/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down

0 comments on commit 455350b

Please sign in to comment.