eSales Media Git repositories
Browse code

Modernize and adjust code to Contao 5

Benjamin Roth authored on26/10/2023 15:21:49
Showing1 changed files
public/js/inView_animate.js
History View file @a95b6ce
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,91 @@
1 
+(function(){
2 
+
3 
+  function isElementInViewport(element) {
4 
+    var rect = element.getBoundingClientRect();
5 
+    if (
6 
+      rect.bottom < 0)
7 
+    {
8 
+      return 2;
9 
+    }
10 
+    else if (
11 
+      rect.top >= 0 &&
12 
+      rect.left+rect.width/2 >= 0 &&
13 
+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + (element.offsetHeight * 0.75) &&
14 
+      rect.right-rect.width/2 <= (window.innerWidth || document.documentElement.clientWidth))
15 
+    {
16 
+      return 1;
17 
+    } /*else if (
18 
+      rect.left+rect.width/2 >= 0 &&
19 
+      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
20 
+      rect.right-rect.width/2 <= (window.innerWidth || document.documentElement.clientWidth))
21 
+    {
22 
+      return 2;
23 
+    }*/
24 
+    return false;
25 
+  }
26 
+
27 
+  function getAnimatedElements() {
28 
+    var animatedWrapper = document.querySelectorAll(".is-animated"),
29 
+      elements = [];
30 
+
31 
+    for (var i = 0; i < animatedWrapper.length; i++)
32 
+    {
33 
+      var hasChildren = false;
34 
+      if (animatedWrapper[i].classList.contains("rs-columns") || animatedWrapper[i].classList.contains("animate-children"))
35 
+      {
36 
+        for (var j = 0; j < animatedWrapper[i].children.length; j++)
37 
+        {
38 
+          elements.push(animatedWrapper[i].children[j]);
39 
+        }
40 
+      } else if (!animatedWrapper[i].classList.contains("rs-columns"))
41 
+      {
42 
+        for (var j = 0; j < animatedWrapper[i].children.length; j++)
43 
+        {
44 
+          if (animatedWrapper[i].children[j].classList.contains("rs-columns"))
45 
+          {
46 
+            for (var k = 0; k < animatedWrapper[i].children[j].children.length; k++)
47 
+            {
48 
+              elements.push(animatedWrapper[i].children[j].children[k]);
49 
+              hasChildren = true;
50 
+            }
51 
+          }
52 
+        }
53 
+        if (!hasChildren)
54 
+        {
55 
+          elements.push(animatedWrapper[i]);
56 
+        }
57 
+      }
58 
+    }
59 
+    return elements;
60 
+  }
61 
+
62 
+  var elements = getAnimatedElements();
63 
+
64 
+  function callbackFunc() {
65 
+    var delay = 0;
66 
+    for (var i = 0; i < elements.length; i++)
67 
+    {
68 
+      if (elements[i].classList.contains('-in-view') === false && (hasDelay = isElementInViewport(elements[i])))
69 
+      {
70 
+        if (hasDelay === 1)
71 
+        {
72 
+          elements[i].style.transitionDelay = delay + 'ms';
73 
+          delay = delay + 125;
74 
+        }
75 
+        if (!Element.prototype.closest || isElementInViewport(elements[i]) !== 2 || (isElementInViewport(elements[i]) === 2 && !elements[i].classList.contains('-reverse') && !elements[i].closest('.is-animated').classList.contains('-reverse')))
76 
+        {
77 
+          elements[i].classList.add("-in-view");
78 
+        }
79 
+      }
80 
+
81 
+      /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
82 
+      else if (Element.prototype.closest && elements[i].classList.contains('-in-view') === true && isElementInViewport(elements[i]) === 2 && (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse')))
83 
+      {
84 
+        elements[i].classList.remove("-in-view");
85 
+      }
86 
+    }
87 
+  }
88 
+
89 
+  window.addEventListener("load", callbackFunc);
90 
+  window.addEventListener("scroll", callbackFunc);
91 
+})();