From 047df6d44b96d4bd10c21e91468b60c2671d330a Mon Sep 17 00:00:00 2001
From: Megan Valcour <meganvalcour@imarc.com>
Date: Mon, 23 May 2022 13:56:19 -0400
Subject: [PATCH 1/2] Initial commit of useIntersectionObserver composable.

---
 .../js/components/UseIntersectionObserver.js  | 60 +++++++++++++++++++
 1 file changed, 60 insertions(+)
 create mode 100644 resources/js/components/UseIntersectionObserver.js

diff --git a/resources/js/components/UseIntersectionObserver.js b/resources/js/components/UseIntersectionObserver.js
new file mode 100644
index 0000000..eb91c72
--- /dev/null
+++ b/resources/js/components/UseIntersectionObserver.js
@@ -0,0 +1,60 @@
+/**
+ * @function useIntersectionObserver
+ * @param  {HTMLElement} elementToWatch elementToWatch
+ * @param  {function} callback          callback once element is intersecting
+ * @param  {function} outCallback       callback once element is not intersecting (optional)
+ * @param  {Boolen} once                if callback only run one time
+ * @param  {Object} options             Intersection Observer API options
+ * @return {Object}
+ */
+import {
+    ref,
+    onMounted,
+    onUnmounted
+} from 'vue'
+
+export function useIntersectionObserver (
+    elementToWatch,
+    callback,
+    outCallback = () => {},
+    once = true,
+    options = {
+        threshold: 1.0,
+    }
+) {
+    const isIntersecting = ref(false)
+    const observer = ref(null)
+
+    // Initiate the observer
+    observer.value = new IntersectionObserver(([entry]) => {
+        // If the element to watch is intersecting within the threshold
+        if (entry && entry.isIntersecting) {
+            // Update the reactive isIntersection
+            isIntersecting.value = true
+
+            // Run the callback
+            callback(entry.target)
+
+            // If the callback should only run once, unobserve the element
+            if (once) {
+                observer.value.unobserve(entry.target)
+            }
+        } else {
+            // Update the reactive isIntersection
+            isIntersecting.value = false
+
+            // Run the callback
+            outCallback(entry.target)
+        }
+    }, options)
+
+    // Observe/unobserve within lifecycle hooks
+    onMounted(() => observer.value.observe(elementToWatch))
+    onUnmounted(() => observer.value.disconnect())
+
+    // Returns reactive versions of isIntersecting, and the observer itself
+    return {
+        isIntersecting,
+        observer,
+    }
+};

From 62f75d11ee91224cd7a94dc9e2269c284754e57a Mon Sep 17 00:00:00 2001
From: Tim Spears <timspears@imarc.com>
Date: Mon, 1 Aug 2022 11:12:59 -0400
Subject: [PATCH 2/2] combine args, make observer unreactive

---
 .../js/components/UseIntersectionObserver.js  | 23 +++++++++++--------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/resources/js/components/UseIntersectionObserver.js b/resources/js/components/UseIntersectionObserver.js
index eb91c72..aca52db 100644
--- a/resources/js/components/UseIntersectionObserver.js
+++ b/resources/js/components/UseIntersectionObserver.js
@@ -16,17 +16,20 @@ import {
 export function useIntersectionObserver (
     elementToWatch,
     callback,
-    outCallback = () => {},
-    once = true,
-    options = {
-        threshold: 1.0,
+    config = {
+        outCallback: () => {},
+        once: true,
+        options: {
+            threshold: 0.1,
+        },
     }
 ) {
     const isIntersecting = ref(false)
-    const observer = ref(null)
+
+    const { outCallback, once, options } = config
 
     // Initiate the observer
-    observer.value = new IntersectionObserver(([entry]) => {
+    const observer = new IntersectionObserver(([entry]) => {
         // If the element to watch is intersecting within the threshold
         if (entry && entry.isIntersecting) {
             // Update the reactive isIntersection
@@ -37,7 +40,7 @@ export function useIntersectionObserver (
 
             // If the callback should only run once, unobserve the element
             if (once) {
-                observer.value.unobserve(entry.target)
+                observer.unobserve(entry.target)
             }
         } else {
             // Update the reactive isIntersection
@@ -49,10 +52,10 @@ export function useIntersectionObserver (
     }, options)
 
     // Observe/unobserve within lifecycle hooks
-    onMounted(() => observer.value.observe(elementToWatch))
-    onUnmounted(() => observer.value.disconnect())
+    onMounted(() => observer.observe(elementToWatch))
+    onUnmounted(() => observer.disconnect())
 
-    // Returns reactive versions of isIntersecting, and the observer itself
+    // Returns reactive version of isIntersecting, and the observer itself
     return {
         isIntersecting,
         observer,