From b9bb0d694b51cd250dbabf2199b09749e605d96c Mon Sep 17 00:00:00 2001
From: Andros Fenollosa <andros@fenollosa.email>
Date: Mon, 3 Aug 2020 17:02:50 +0200
Subject: [PATCH] Optimize visible with observables

---
 src/events/visible.js | 31 +++++++++++++++++++++++--------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/events/visible.js b/src/events/visible.js
index d5e6dff..336c365 100644
--- a/src/events/visible.js
+++ b/src/events/visible.js
@@ -12,10 +12,12 @@ function addEventVisible() {
     let eventNotVisible = 'is-not-visible';
     let elementsVisibles = getElementsValidatesByEvent(eventVisible);
     let elementsNotVisibles = getElementsValidatesByEvent(eventNotVisible);
-    window.addEventListener("scroll", () => {
-        // Visible
-        elementsVisibles.forEach((element) => {
-            if (isInViewport(element)) {
+
+    // Visible
+    const onIntersectionVisible = (entries) => {
+        entries.forEach((entry) => {
+            let element = entry.target;
+            if (entry.isIntersecting) {
                 let params = splitParams(element, eventVisible);
                 switch(params.functionParent) {
                 case 'class':
@@ -31,9 +33,17 @@ function addEventVisible() {
                 }
             }
         });
-        // Not visible
-        elementsNotVisibles.forEach((element) => {
-            if (!isInViewport(element)) {
+    };
+    const observerVisible = new IntersectionObserver(onIntersectionVisible);
+    elementsVisibles.forEach((element) => {
+        observerVisible.observe(element);
+    });
+
+    // Not visible
+    const onIntersectionNotVisible = (entries) => {
+        entries.forEach((entry) => {
+            let element = entry.target;
+            if (!entry.isIntersecting) {
                 let params = splitParams(element, eventNotVisible);
                 switch(params.functionParent) {
                 case 'class':
@@ -49,6 +59,11 @@ function addEventVisible() {
                 }
             }
         });
-    }, false);
+    };
+
+    const observerNotVisible = new IntersectionObserver(onIntersectionNotVisible);
+    elementsNotVisibles.forEach((element) => {
+        observerNotVisible.observe(element);
+    });
 }