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
src/Resources/public/js/inView_animate.js
History View file @a95b6ce
1 1 
deleted file mode 100644
... ... 
@@ -1,91 +0,0 @@
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 
-})();
Browse code

Fix animation else if condition

Benjamin Roth authored on15/03/2021 14:32:29
Showing1 changed files
src/Resources/public/js/inView_animate.js
History View file @86a0941
... ... 
@@ -72,7 +72,10 @@
72 72 
           elements[i].style.transitionDelay = delay + 'ms';
73 73 
           delay = delay + 125;
74 74 
         }
75 
-        elements[i].classList.add("-in-view");
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 
+        }
76 79 
       }
77 80
78 81 
       /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
Browse code

Fix animation else if condition

Benjamin Roth authored on15/03/2021 14:23:19
Showing1 changed files
src/Resources/public/js/inView_animate.js
History View file @273bdc2
... ... 
@@ -76,7 +76,7 @@
76 76 
       }
77 77
78 78 
       /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
79 
-      else if (Element.prototype.closest && elements[i].classList.contains('-in-view') === true && (!isElementInViewport(elements[i]) || isElementInViewport(elements[i]) === 2) && (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse')))
79 
+      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')))
80 80 
       {
81 81 
         elements[i].classList.remove("-in-view");
82 82 
       }
Browse code

Fix animation else if condition

Benjamin Roth authored on15/03/2021 14:19:58
Showing1 changed files
src/Resources/public/js/inView_animate.js
History View file @300732f
... ... 
@@ -3,6 +3,11 @@
3 3 
   function isElementInViewport(element) {
4 4 
     var rect = element.getBoundingClientRect();
5 5 
     if (
6 
+      rect.bottom < 0)
7 
+    {
8 
+      return 2;
9 
+    }
10 
+    else if (
6 11 
       rect.top >= 0 &&
7 12 
       rect.left+rect.width/2 >= 0 &&
8 13 
       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + (element.offsetHeight * 0.75) &&
... ... 
@@ -15,11 +20,7 @@
15 20 
       rect.right-rect.width/2 <= (window.innerWidth || document.documentElement.clientWidth))
16 21 
     {
17 22 
       return 2;
18 
-    }*/ else if (
19 
-      rect.bottom < 0)
20 
-    {
21 
-      return 2;
22 
-    }
23 
+    }*/
23 24 
     return false;
24 25 
   }
25 26
Browse code

Fix animation else if condition

Benjamin Roth authored on15/03/2021 14:18:48
Showing1 changed files
src/Resources/public/js/inView_animate.js
History View file @4d7c62c
... ... 
@@ -16,7 +16,7 @@
16 16 
     {
17 17 
       return 2;
18 18 
     }*/ else if (
19 
-      rect.bottom < (window.innerHeight || document.documentElement.clientHeight))
19 
+      rect.bottom < 0)
20 20 
     {
21 21 
       return 2;
22 22 
     }
Browse code

Fix animation else if condition

Benjamin Roth authored on15/03/2021 14:10:44
Showing1 changed files
src/Resources/public/js/inView_animate.js
History View file @d2183f3
... ... 
@@ -9,12 +9,16 @@
9 9 
       rect.right-rect.width/2 <= (window.innerWidth || document.documentElement.clientWidth))
10 10 
     {
11 11 
       return 1;
12 
-    } else if (
12 
+    } /*else if (
13 13 
       rect.left+rect.width/2 >= 0 &&
14 14 
       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
15 15 
       rect.right-rect.width/2 <= (window.innerWidth || document.documentElement.clientWidth))
16 16 
     {
17 17 
       return 2;
18 
+    }*/ else if (
19 
+      rect.bottom < (window.innerHeight || document.documentElement.clientHeight))
20 
+    {
21 
+      return 2;
18 22 
     }
19 23 
     return false;
20 24 
   }
Browse code

Fix animation else if condition

Benjamin Roth authored on15/03/2021 14:02:54
Showing1 changed files
src/Resources/public/js/inView_animate.js
History View file @01f6fc9
... ... 
@@ -71,7 +71,7 @@
71 71 
       }
72 72
73 73 
       /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
74 
-      else if (Element.prototype.closest && elements[i].classList.contains('-in-view') === true && !isElementInViewport(elements[i]) && (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse')))
74 
+      else if (Element.prototype.closest && elements[i].classList.contains('-in-view') === true && (!isElementInViewport(elements[i]) || isElementInViewport(elements[i]) === 2) && (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse')))
75 75 
       {
76 76 
         elements[i].classList.remove("-in-view");
77 77 
       }
Browse code

Fix animation else if condition

Benjamin Roth authored on15/03/2021 13:57:45
Showing1 changed files
src/Resources/public/js/inView_animate.js
History View file @f74c29c
... ... 
@@ -71,7 +71,7 @@
71 71 
       }
72 72
73 73 
       /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
74 
-      elseif (Element.prototype.closest && elements[i].classList.contains('-in-view') === true && !isElementInViewport(elements[i]) && (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse')))
74 
+      else if (Element.prototype.closest && elements[i].classList.contains('-in-view') === true && !isElementInViewport(elements[i]) && (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse')))
75 75 
       {
76 76 
         elements[i].classList.remove("-in-view");
77 77 
       }
Browse code

Hopefully fix reversible animation possibility

Benjamin Roth authored on15/03/2021 13:49:40
Showing1 changed files
src/Resources/public/js/inView_animate.js
History View file @f5669ff
... ... 
@@ -67,22 +67,13 @@
67 67 
           elements[i].style.transitionDelay = delay + 'ms';
68 68 
           delay = delay + 125;
69 69 
         }
70 
-        if (hasDelay !== 2 && (!Element.prototype.closest || (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse'))))
71 
-        {
72 
-          elements[i].classList.add("-in-view");
73 
-        }
70 
+        elements[i].classList.add("-in-view");
74 71 
       }
75 72
76 73 
       /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
77 
-      else
74 
+      elseif (Element.prototype.closest && elements[i].classList.contains('-in-view') === true && !isElementInViewport(elements[i]) && (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse')))
78 75 
       {
79 
-        if (Element.prototype.closest && elements[i].classList.contains('-in-view') === true && (hasDelay = isElementInViewport(elements[i])) && (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse')))
80 
-        {
81 
-          if (hasDelay === 2)
82 
-          {
83 
-            elements[i].classList.remove("-in-view");
84 
-          }
85 
-        }
76 
+        elements[i].classList.remove("-in-view");
86 77 
       }
87 78 
     }
88 79 
   }
Browse code

Tweak and fix reversible animation possibility

Benjamin Roth authored on15/03/2021 10:46:19
Showing1 changed files
src/Resources/public/js/inView_animate.js
History View file @4a112a3
... ... 
@@ -67,15 +67,21 @@
67 67 
           elements[i].style.transitionDelay = delay + 'ms';
68 68 
           delay = delay + 125;
69 69 
         }
70 
-        elements[i].classList.add("-in-view");
70 
+        if (hasDelay !== 2 && (!Element.prototype.closest || (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse'))))
71 
+        {
72 
+          elements[i].classList.add("-in-view");
73 
+        }
71 74 
       }
72 75
73 76 
       /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
74 77 
       else
75 78 
       {
76 
-        if (Element.prototype.closest && (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse')))
79 
+        if (Element.prototype.closest && elements[i].classList.contains('-in-view') === true && (hasDelay = isElementInViewport(elements[i])) && (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse')))
77 80 
         {
78 
-          elements[i].classList.remove("-in-view");
81 
+          if (hasDelay === 2)
82 
+          {
83 
+            elements[i].classList.remove("-in-view");
84 
+          }
79 85 
         }
80 86 
       }
81 87 
     }
Browse code

Provide reversible animation possibility

Benjamin Roth authored on15/03/2021 10:31:53
Showing1 changed files
src/Resources/public/js/inView_animate.js
History View file @abfa285
... ... 
@@ -71,10 +71,13 @@
71 71 
       }
72 72
73 73 
       /* Else-Bedinung entfernen, um .visible nicht wieder zu löschen, wenn das Element den Viewport verlässt. */
74 
-      /*else
74 
+      else
75 75 
       {
76 
-        elements[i].classList.remove("-in-view");
77 
-      }*/
76 
+        if (Element.prototype.closest && (elements[i].classList.contains('-reverse') || elements[i].closest('.is-animated').classList.contains('-reverse')))
77 
+        {
78 
+          elements[i].classList.remove("-in-view");
79 
+        }
80 
+      }
78 81 
     }
79 82 
   }
80 83
Browse code

Big fix for animations

Benjamin Roth authored on24/04/2020 19:38:44
Showing1 changed files
src/Resources/public/js/inView_animate.js
History View file @d4641dc
... ... 
@@ -4,31 +4,31 @@
4 4 
     var rect = element.getBoundingClientRect();
5 5 
     if (
6 6 
       rect.top >= 0 &&
7 
-      rect.left >= 0 &&
7 
+      rect.left+rect.width/2 >= 0 &&
8 8 
       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) + (element.offsetHeight * 0.75) &&
9 
-      rect.right <= (window.innerWidth || document.documentElement.clientWidth))
9 
+      rect.right-rect.width/2 <= (window.innerWidth || document.documentElement.clientWidth))
10 10 
     {
11 11 
       return 1;
12 12 
     } else if (
13 
-      rect.left >= 0 &&
13 
+      rect.left+rect.width/2 >= 0 &&
14 14 
       rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
15 
-      rect.right <= (window.innerWidth || document.documentElement.clientWidth))
15 
+      rect.right-rect.width/2 <= (window.innerWidth || document.documentElement.clientWidth))
16 16 
     {
17 17 
       return 2;
18 18 
     }
19 19 
     return false;
20 20 
   }
21 21
22 
-  //var elements = document.querySelectorAll(".is-animated:not(.rs-columns), .is-animated:not(.rs-columns) > .rs-columns > *, .is-animated.rs-columns > *");
23 22 
   function getAnimatedElements() {
24 
-    var animatedWrapper = document.querySelectorAll(".iss-animated"),
23 
+    var animatedWrapper = document.querySelectorAll(".is-animated"),
25 24 
       elements = [];
26 25
27 26 
     for (var i = 0; i < animatedWrapper.length; i++)
28 27 
     {
28 
+      var hasChildren = false;
29 29 
       if (animatedWrapper[i].classList.contains("rs-columns") || animatedWrapper[i].classList.contains("animate-children"))
30 30 
       {
31 
-        for (var j = 0; j < animatedWrapper[i].children[j].length; j++)
31 
+        for (var j = 0; j < animatedWrapper[i].children.length; j++)
32 32 
         {
33 33 
           elements.push(animatedWrapper[i].children[j]);
34 34 
         }
... ... 
@@ -41,10 +41,11 @@
41 41 
             for (var k = 0; k < animatedWrapper[i].children[j].children.length; k++)
42 42 
             {
43 43 
               elements.push(animatedWrapper[i].children[j].children[k]);
44 
+              hasChildren = true;
44 45 
             }
45 46 
           }
46 47 
         }
47 
-        if (!elements.length)
48 
+        if (!hasChildren)
48 49 
         {
49 50 
           elements.push(animatedWrapper[i]);
50 51 
         }
... ... 
@@ -63,10 +64,7 @@
63 64 
       {
64 65 
         if (hasDelay === 1)
65 66 
         {
66 
-          for (var j = 0; j < elements[i].children.length; j++)
67 
-          {
68 
-            elements[i].children[j].style.transitionDelay = delay + 'ms';
69 
-          }
67 
+          elements[i].style.transitionDelay = delay + 'ms';
70 68 
           delay = delay + 125;
71 69 
         }
72 70 
         elements[i].classList.add("-in-view");
Browse code

Test something

Benjamin Roth authored on24/04/2020 19:08:25
Showing1 changed files
src/Resources/public/js/inView_animate.js
History View file @333b093
... ... 
@@ -21,7 +21,7 @@
21 21
22 22 
   //var elements = document.querySelectorAll(".is-animated:not(.rs-columns), .is-animated:not(.rs-columns) > .rs-columns > *, .is-animated.rs-columns > *");
23 23 
   function getAnimatedElements() {
24 
-    var animatedWrapper = document.querySelectorAll(".is-animated"),
24 
+    var animatedWrapper = document.querySelectorAll(".iss-animated"),
25 25 
       elements = [];
26 26
27 27 
     for (var i = 0; i < animatedWrapper.length; i++)
Browse code

Fix element selector function in animation javascript

Benjamin Roth authored on24/04/2020 16:14:51
Showing1 changed files
src/Resources/public/js/inView_animate.js
History View file @7b6330b
... ... 
@@ -28,7 +28,10 @@
28 28 
     {
29 29 
       if (animatedWrapper[i].classList.contains("rs-columns") || animatedWrapper[i].classList.contains("animate-children"))
30 30 
       {
31 
-        elements = animatedWrapper[i].children;
31 
+        for (var j = 0; j < animatedWrapper[i].children[j].length; j++)
32 
+        {
33 
+          elements.push(animatedWrapper[i].children[j]);
34 
+        }
32 35 
       } else if (!animatedWrapper[i].classList.contains("rs-columns"))
33 36 
       {
34 37 
         for (var j = 0; j < animatedWrapper[i].children.length; j++)
... ... 
@@ -43,7 +46,7 @@
43 46 
         }
44 47 
         if (!elements.length)
45 48 
         {
46 
-          elements = animatedWrapper;
49 
+          elements.push(animatedWrapper[i]);
47 50 
         }
48 51 
       }
49 52 
     }
... ... 
@@ -51,7 +54,6 @@
51 54 
   }
52 55
53 56 
   var elements = getAnimatedElements();
54 
-  console.log(elements);
55 57
56 58 
   function callbackFunc() {
57 59 
     var delay = 0;
Browse code

Implement animation toolset for content elements

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