Add x-intersect.half and full

packages/alpinejs/src/alpine.js

@@ -3,6 +3,8 @@ import { mapAttributes, directive, setPrefix as prefix } from './directives'
 import { setEvaluator, evaluate, evaluateLater } from './evaluator'
 import { start, addRootSelector, closestRoot, initTree } from './lifecycle'
 import { interceptor } from './interceptor'
+import { debounce } from './utils/debounce'
+import { throttle } from './utils/throttle'
 import { mutateDom } from './mutation'
 import { nextTick } from './nextTick'
 import { plugin } from './plugin'
@@ -28,6 +30,8 @@ let Alpine = {
     interceptor,
     mutateDom,
     directive,
+    throttle,
+    debounce,
     evaluate,
     initTree,
     nextTick,

packages/alpinejs/src/utils/debounce.js

@@ -0,0 +1,18 @@
+
+export function debounce(func, wait) {
+    var timeout
+
+    return function() {
+        var context = this, args = arguments
+
+        var later = function () {
+            timeout = null
+
+            func.apply(context, args)
+        }
+
+        clearTimeout(timeout)
+
+        timeout = setTimeout(later, wait)
+    }
+}

packages/alpinejs/src/utils/on.js

@@ -1,3 +1,5 @@
+import { debounce } from './debounce'
+import { throttle } from './throttle'
 
 export default function on (el, event, modifiers, callback) {
     let listenerTarget = el
@@ -46,14 +48,14 @@ export default function on (el, event, modifiers, callback) {
         let nextModifier = modifiers[modifiers.indexOf('debounce')+1] || 'invalid-wait'
         let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250
 
-        handler = debounce(handler, wait, this)
+        handler = debounce(handler, wait)
     }
 
     if (modifiers.includes('throttle')) {
         let nextModifier = modifiers[modifiers.indexOf('throttle')+1] || 'invalid-wait'
         let wait = isNumeric(nextModifier.split('ms')[0]) ? Number(nextModifier.split('ms')[0]) : 250
 
-        handler = throttle(handler, wait, this)
+        handler = throttle(handler, wait)
     }
 
     if (modifiers.includes('once')) {
@@ -79,40 +81,6 @@ function camelCase(subject) {
     return subject.toLowerCase().replace(/-(\w)/g, (match, char) => char.toUpperCase())
 }
 
-function debounce(func, wait) {
-    var timeout
-
-    return function() {
-        var context = this, args = arguments
-
-        var later = function () {
-            timeout = null
-
-            func.apply(context, args)
-        }
-
-        clearTimeout(timeout)
-
-        timeout = setTimeout(later, wait)
-    }
-}
-
-function throttle(func, limit) {
-    let inThrottle
-
-    return function() {
-        let context = this, args = arguments
-
-        if (! inThrottle) {
-            func.apply(context, args)
-
-            inThrottle = true
-
-            setTimeout(() => inThrottle = false, limit)
-        }
-    }
-}
-
 function isNumeric(subject){
     return ! Array.isArray(subject) && ! isNaN(subject)
 }

packages/alpinejs/src/utils/throttle.js

@@ -0,0 +1,16 @@
+
+export function throttle(func, limit) {
+    let inThrottle
+
+    return function() {
+        let context = this, args = arguments
+
+        if (! inThrottle) {
+            func.apply(context, args)
+
+            inThrottle = true
+
+            setTimeout(() => inThrottle = false, limit)
+        }
+    }
+}

packages/intersect/src/index.js

@@ -1,7 +1,12 @@
+
 export default function (Alpine) {
     Alpine.directive('intersect', (el, { value, expression, modifiers }, { evaluateLater, cleanup }) => {
         let evaluate = evaluateLater(expression)
 
+        let options = {
+            threshold: getThreshhold(modifiers),
+        }
+
         let observer = new IntersectionObserver(entries => {
             entries.forEach(entry => {
                 if (
@@ -14,7 +19,7 @@ export default function (Alpine) {
 
                 modifiers.includes('once') && observer.disconnect()
             })
-        })
+        }, options)
 
         observer.observe(el)
 
@@ -23,3 +28,10 @@ export default function (Alpine) {
         })
     })
 }
+
+function getThreshhold(modifiers) {
+    if (modifiers.includes('full')) return 0.99
+    if (modifiers.includes('half')) return 0.5
+
+    return 0
+}