Browse Source

Adjust threshold modifier to use 100 as 100% instead of 1 (#2787)

Caleb Porzio 3 years ago
parent
commit
455350bce2
2 changed files with 8 additions and 8 deletions
  1. 4 4
      packages/docs/src/en/plugins/intersect.md
  2. 4 4
      packages/intersect/src/index.js

+ 4 - 4
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
 <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.
 
@@ -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.
 
@@ -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`:
 

+ 4 - 4
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) {