From efe992b4fb1ec586cb6378a2ed28a0ad5a62aa37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominique=20J=C3=BCrgensen?= <mail@dominiq.eu>
Date: Sat, 25 Dec 2021 22:00:35 +0100
Subject: [PATCH] Fix: on window resize

---
 src/parallax-css-testpage/particles.js  | 76 ++++++++++++++++++-------
 src/parallax-css-testpage/template.html |  5 +-
 2 files changed, 59 insertions(+), 22 deletions(-)

diff --git a/src/parallax-css-testpage/particles.js b/src/parallax-css-testpage/particles.js
index 6667cb1b6..7bc7882ae 100644
--- a/src/parallax-css-testpage/particles.js
+++ b/src/parallax-css-testpage/particles.js
@@ -14,7 +14,7 @@ const Static = true
 
 
 function randomValue(min, max) {
-    const value = (Math.random() * (+max - +min) + +min)
+    var value = (Math.random() * (+max - +min) + +min)
     // Prevent values that can be possible boring
     return (value === 0 || value === 1)
         ? randomValue(min, max)
@@ -22,12 +22,12 @@ function randomValue(min, max) {
 }
 
 function getNodeYOffset(node) {
-    const dimensions = node.getBoundingClientRect()
+    var dimensions = node.getBoundingClientRect()
     return (dimensions) ? dimensions.y : 0
 }
 
 function getNodeHeight(node) {
-    const dimensions = node.getBoundingClientRect()
+    var dimensions = node.getBoundingClientRect()
     return (dimensions) ? dimensions.height : window.innerHeight
 }
 
@@ -67,8 +67,8 @@ function Particle({ position, direction, size, color }) {
 
 function Update(scene, particle) {
     // Cache object access
-    const width = scene.width
-    const height = scene.height
+    var width = scene.width
+    var height = scene.height
 
     // Animate the pulse effect of the particle
     //
@@ -268,23 +268,59 @@ function CreateParticles(scene, {
 
 
 function Particles(configs) {
-    function doRenderParticles(rendererList) {
-        requestAnimationFrame(function () {
-            doRenderParticles(
-                rendererList.map(function doRender(render) {
-                    return render()
-                })
-            )
+    function animate(rendererList) {
+        if (isRunning) {
+            requestAnimationFrame(function () {
+                animate(
+                    rendererList.map(function doRender(render) {
+                        return render()
+                    })
+                )
+            })
+        }
+    }
+
+    function init() {
+        return configs.map(function (particleConfig) {
+            var scene     = CreateScene(particleConfig.scene)
+            var particles = CreateParticles(scene, particleConfig.particles)
+            return Animate(scene, particles)
         })
     }
 
-    return function () {
-        doRenderParticles(
-            configs.map(function (particleConfig) {
-                var scene     = CreateScene(particleConfig.scene)
-                var particles = CreateParticles(scene, particleConfig.particles)
-                return Animate(scene, particles)
-            })
-        )
+    var particles = []
+    var isRunning = false
+    var throttled = false
+    var delay = 250
+
+    return {
+        init: function () {
+            particles = init()
+        },
+
+        run: function () {
+            if (particles.length === 0) {
+                particles = init()
+            }
+            isRunning = true
+            animate(particles)
+        },
+
+        stop: function () {
+            isRunning = false
+        },
+
+        onScreenSizeChange: function () {
+            isRunning = false
+            if (!throttled) {
+                throttled = true
+                setTimeout(function () {
+                    particles = init()
+                    isRunning = true                
+                    animate(particles)
+                    throttled = false
+                }, delay)
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/parallax-css-testpage/template.html b/src/parallax-css-testpage/template.html
index 5fcfa853e..76bcb7cd4 100644
--- a/src/parallax-css-testpage/template.html
+++ b/src/parallax-css-testpage/template.html
@@ -121,11 +121,12 @@
             }
         }
 
-        var animate = Particles([
+        var animation = Particles([
             fgParticleConfig,
             bgParticleConfig,
         ])
-        animate()
+        animation.run()
+        window.addEventListener('resize', animation.onScreenSizeChange)
     </script>
 
 </body>
-- 
GitLab