From 29d97d9e126339705ba30a658953abb6353139cc Mon Sep 17 00:00:00 2001
From: Danny Verkade - Cream <danny@cream.nl>
Date: Mon, 15 Jun 2020 17:49:32 +0200
Subject: [PATCH] Changed logic to trigger event per item which is in viewport

Changed logic to trigger event per item which is in the viewport. The old code triggered this for all the items in the jQuery selector instead of only the ones which are actually in the viewport.
---
 jquery.inview.js | 243 ++++++++++++++++++++++++-----------------------
 1 file changed, 123 insertions(+), 120 deletions(-)

diff --git a/jquery.inview.js b/jquery.inview.js
index b4aa399..0f3aa3b 100644
--- a/jquery.inview.js
+++ b/jquery.inview.js
@@ -4,139 +4,142 @@
  *    - forked from http://github.com/zuk/jquery.inview/
  */
 (function (factory) {
-  if (typeof define == 'function' && define.amd) {
-    // AMD
-    define(['jquery'], factory);
-  } else if (typeof exports === 'object') {
-    // Node, CommonJS
-    module.exports = factory(require('jquery'));
-  } else {
-      // Browser globals
-    factory(jQuery);
-  }
+    if (typeof define == 'function' && define.amd) {
+        // AMD
+        define(['jquery'], factory);
+    } else if (typeof exports === 'object') {
+        // Node, CommonJS
+        module.exports = factory(require('jquery'));
+    } else {
+        // Browser globals
+        factory(jQuery);
+    }
 }(function ($) {
 
-  var inviewObjects = [], viewportSize, viewportOffset,
-      d = document, w = window, documentElement = d.documentElement, timer;
-
-  $.event.special.inview = {
-    add: function(data) {
-      inviewObjects.push({ data: data, $element: $(this), element: this });
-      // Use setInterval in order to also make sure this captures elements within
-      // "overflow:scroll" elements or elements that appeared in the dom tree due to
-      // dom manipulation and reflow
-      // old: $(window).scroll(checkInView);
-      //
-      // By the way, iOS (iPad, iPhone, ...) seems to not execute, or at least delays
-      // intervals while the user scrolls. Therefore the inview event might fire a bit late there
-      //
-      // Don't waste cycles with an interval until we get at least one element that
-      // has bound to the inview event.
-      if (!timer && inviewObjects.length) {
-         timer = setInterval(checkInView, 250);
-      }
-    },
-
-    remove: function(data) {
-      for (var i=0; i<inviewObjects.length; i++) {
-        var inviewObject = inviewObjects[i];
-        if (inviewObject.element === this && inviewObject.data.guid === data.guid) {
-          inviewObjects.splice(i, 1);
-          break;
+    var inviewObjects = [], viewportSize, viewportOffset,
+        d = document, w = window, documentElement = d.documentElement, timer;
+
+    $.event.special.inview = {
+        add: function(data) {
+            inviewObjects.push({ data: data, $element: $(this), element: this });
+            // Use setInterval in order to also make sure this captures elements within
+            // "overflow:scroll" elements or elements that appeared in the dom tree due to
+            // dom manipulation and reflow
+            // old: $(window).scroll(checkInView);
+            //
+            // By the way, iOS (iPad, iPhone, ...) seems to not execute, or at least delays
+            // intervals while the user scrolls. Therefore the inview event might fire a bit late there
+            //
+            // Don't waste cycles with an interval until we get at least one element that
+            // has bound to the inview event.
+            if (!timer && inviewObjects.length) {
+                timer = setInterval(checkInView, 250);
+            }
+        },
+
+        remove: function(data) {
+            for (var i=0; i<inviewObjects.length; i++) {
+                var inviewObject = inviewObjects[i];
+                if (inviewObject.element === this && inviewObject.data.guid === data.guid) {
+                    inviewObjects.splice(i, 1);
+                    break;
+                }
+            }
+
+            // Clear interval when we no longer have any elements listening
+            if (!inviewObjects.length) {
+                clearInterval(timer);
+                timer = null;
+            }
+        }
+    };
+
+    function getViewportSize() {
+        var mode, domObject, size = { height: w.innerHeight, width: w.innerWidth };
+
+        // if this is correct then return it. iPad has compat Mode, so will
+        // go into check clientHeight/clientWidth (which has the wrong value).
+        if (!size.height) {
+            mode = d.compatMode;
+            if (mode || !$.support.boxModel) { // IE, Gecko
+                domObject = mode === 'CSS1Compat' ?
+                    documentElement : // Standards
+                    d.body; // Quirks
+                size = {
+                    height: domObject.clientHeight,
+                    width:  domObject.clientWidth
+                };
+            }
         }
-      }
 
-      // Clear interval when we no longer have any elements listening
-      if (!inviewObjects.length) {
-         clearInterval(timer);
-         timer = null;
-      }
+        return size;
     }
-  };
-
-  function getViewportSize() {
-    var mode, domObject, size = { height: w.innerHeight, width: w.innerWidth };
-
-    // if this is correct then return it. iPad has compat Mode, so will
-    // go into check clientHeight/clientWidth (which has the wrong value).
-    if (!size.height) {
-      mode = d.compatMode;
-      if (mode || !$.support.boxModel) { // IE, Gecko
-        domObject = mode === 'CSS1Compat' ?
-          documentElement : // Standards
-          d.body; // Quirks
-        size = {
-          height: domObject.clientHeight,
-          width:  domObject.clientWidth
+
+    function getViewportOffset() {
+        return {
+            top:  w.pageYOffset || documentElement.scrollTop   || d.body.scrollTop,
+            left: w.pageXOffset || documentElement.scrollLeft  || d.body.scrollLeft
         };
-      }
     }
 
-    return size;
-  }
+    function checkInView() {
+        if (!inviewObjects.length) {
+            return;
+        }
 
-  function getViewportOffset() {
-    return {
-      top:  w.pageYOffset || documentElement.scrollTop   || d.body.scrollTop,
-      left: w.pageXOffset || documentElement.scrollLeft  || d.body.scrollLeft
-    };
-  }
+        var i = 0, $elements = $.map(inviewObjects, function(inviewObject) {
+            var selector  = inviewObject.data.selector,
+                $element  = inviewObject.$element;
+            return selector ? $element.find(selector) : $element;
+        });
+
+        viewportSize   = viewportSize   || getViewportSize();
+        viewportOffset = viewportOffset || getViewportOffset();
+
+        // Don't ask me why because I haven't figured out yet:
+        // viewportOffset and viewportSize are sometimes suddenly null in Firefox 5.
+        // Even though it sounds weird:
+        // It seems that the execution of this function is interferred by the onresize/onscroll event
+        // where viewportOffset and viewportSize are unset
+        if (!viewportOffset || !viewportSize) {
+            return;
+        }
 
-  function checkInView() {
-    if (!inviewObjects.length) {
-      return;
+        for (; i<inviewObjects.length; i++) {
+            // Ignore elements that are not in the DOM tree
+            if (!$.contains(documentElement, $elements[i][0])) {
+                continue;
+            }
+
+            var $element = $($elements[i]);
+
+            for (var j=0; j<$element.length; j++) {
+                var elementSize   = { height: $element[j].offsetHeight, width: $element[j].offsetWidth },
+                    elementOffset = $($element[j]).offset(),
+                    inView        = $($element[j]).data('inview');
+
+                if (elementOffset.top + elementSize.height > viewportOffset.top &&
+                    elementOffset.top < viewportOffset.top + viewportSize.height &&
+                    elementOffset.left + elementSize.width > viewportOffset.left &&
+                    elementOffset.left < viewportOffset.left + viewportSize.width) {
+                    if (!inView) {
+                        $($element[j]).data('inview', true).trigger('inview', [true]);
+                    }
+                } else if (inView) {
+                    $($element[j]).data('inview', false).trigger('inview', [false]);
+                }
+            }
+        }
     }
 
-    var i = 0, $elements = $.map(inviewObjects, function(inviewObject) {
-      var selector  = inviewObject.data.selector,
-          $element  = inviewObject.$element;
-      return selector ? $element.find(selector) : $element;
+    $(w).on("scroll resize scrollstop", function() {
+        viewportSize = viewportOffset = null;
     });
 
-    viewportSize   = viewportSize   || getViewportSize();
-    viewportOffset = viewportOffset || getViewportOffset();
-
-    for (; i<inviewObjects.length; i++) {
-      // Ignore elements that are not in the DOM tree
-      if (!$.contains(documentElement, $elements[i][0])) {
-        continue;
-      }
-
-      var $element      = $($elements[i]),
-          elementSize   = { height: $element[0].offsetHeight, width: $element[0].offsetWidth },
-          elementOffset = $element.offset(),
-          inView        = $element.data('inview');
-
-      // Don't ask me why because I haven't figured out yet:
-      // viewportOffset and viewportSize are sometimes suddenly null in Firefox 5.
-      // Even though it sounds weird:
-      // It seems that the execution of this function is interferred by the onresize/onscroll event
-      // where viewportOffset and viewportSize are unset
-      if (!viewportOffset || !viewportSize) {
-        return;
-      }
-
-      if (elementOffset.top + elementSize.height > viewportOffset.top &&
-          elementOffset.top < viewportOffset.top + viewportSize.height &&
-          elementOffset.left + elementSize.width > viewportOffset.left &&
-          elementOffset.left < viewportOffset.left + viewportSize.width) {
-        if (!inView) {
-          $element.data('inview', true).trigger('inview', [true]);
-        }
-      } else if (inView) {
-        $element.data('inview', false).trigger('inview', [false]);
-      }
+    // IE < 9 scrolls to focused elements without firing the "scroll" event
+    if (!documentElement.addEventListener && documentElement.attachEvent) {
+        documentElement.attachEvent("onfocusin", function() {
+            viewportOffset = null;
+        });
     }
-  }
-
-  $(w).on("scroll resize scrollstop", function() {
-    viewportSize = viewportOffset = null;
-  });
-
-  // IE < 9 scrolls to focused elements without firing the "scroll" event
-  if (!documentElement.addEventListener && documentElement.attachEvent) {
-    documentElement.attachEvent("onfocusin", function() {
-      viewportOffset = null;
-    });
-  }
 }));