From 13f278bc5dc6a630977d0b881cd6b3e10529d6e0 Mon Sep 17 00:00:00 2001
From: Juan Martin <martinmuda@gmail.com>
Date: Mon, 7 Oct 2024 17:44:17 +0300
Subject: [PATCH] Improve Orbit.resize()

---
 src/js/orbit-resize.js      | 18 +++++++++++++-----
 src/scss/_gravity-spot.scss |  2 ++
 src/scss/_orbit-class.scss  |  4 ++--
 src/scss/_satellite.scss    |  2 +-
 4 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/js/orbit-resize.js b/src/js/orbit-resize.js
index ee861f4..bff2897 100644
--- a/src/js/orbit-resize.js
+++ b/src/js/orbit-resize.js
@@ -6,17 +6,25 @@ Orbit = {
         const parentElement = document.querySelector(parentElementSelector);
     
         if (!parentElement) {
-        console.error(`No se encontró ningún elemento con el selector ${parentElementSelector}`);
+        console.error(`Not found: ${parentElementSelector}`);
         return;
         }
         const resizeObserver = new ResizeObserver(entries => {
         for (let entry of entries) {
             const { width } = entry.contentRect;
-            const childElement = parentElement.querySelector('.gravity-spot');
-            if (childElement) {
-            childElement.style.setProperty('--o-force', `${width}px`);
+
+            const childElements = parentElement.querySelectorAll('.gravity-spot');
+            if (childElements) {
+                childElements.forEach(childElement => {
+                    let gravityForce = getComputedStyle(childElement).getPropertyValue('--o-force');
+                    
+                    let forceRatio = width / 500
+                    console.log(gravityForce, forceRatio, parseFloat(gravityForce) * forceRatio)
+                    childElement.style.setProperty('--o-force-ratio', `${forceRatio}`);
+                });
+            
             } else {
-            console.error('No se encontró ningún elemento hijo con la clase .child-element');
+            console.error('No gravity-spot found');
             }
         }
         });
diff --git a/src/scss/_gravity-spot.scss b/src/scss/_gravity-spot.scss
index 5295261..7d493b0 100644
--- a/src/scss/_gravity-spot.scss
+++ b/src/scss/_gravity-spot.scss
@@ -3,6 +3,7 @@
   container-name: gravityspot;
   /* Reset to defaults everytime gravity-spot is used */
   --o-force: 500px;
+  --o-force-ratio: 1;
   --o-from: 0deg;
   --o-range: 360deg;
   --o-ellipse-x: 1;
@@ -19,3 +20,4 @@
   justify-content: center;
   border: none; 
 }
+
diff --git a/src/scss/_orbit-class.scss b/src/scss/_orbit-class.scss
index 906ec6f..bdb7278 100644
--- a/src/scss/_orbit-class.scss
+++ b/src/scss/_orbit-class.scss
@@ -2,8 +2,8 @@
 
 .orbit, [class*='orbit-']{
   container-name: orbit;
-  --o-base-diameter: (var(--o-initial-orbit, 0) + var(--o-orbit-number)) * var(--o-force) / (#{$max-orbits} + var(--o-initial-orbit, 0));
-  --o-prev-diameter: ((var(--o-initial-orbit, 0) + var(--o-orbit-number)) - 1) * var(--o-force) / (#{$max-orbits} + var(--o-initial-orbit, 0));
+  --o-base-diameter: (var(--o-initial-orbit, 0) + var(--o-orbit-number)) * (var(--o-force) * var(--o-force-ratio)) / (#{$max-orbits} + var(--o-initial-orbit, 0));
+  --o-prev-diameter: ((var(--o-initial-orbit, 0) + var(--o-orbit-number)) - 1) * (var(--o-force) * var(--o-force-ratio)) / (#{$max-orbits} + var(--o-initial-orbit, 0));
   --o-diameter: calc(var(--o-base-diameter) - ((var(--o-base-diameter) - var(--o-prev-diameter)) * var(--o-orbit-ratio, 0)));
   --o-radius: calc(var(--o-diameter) / 2);
   width: calc(var(--o-diameter) / var(--o-ellipse-x));
diff --git a/src/scss/_satellite.scss b/src/scss/_satellite.scss
index ca04db7..8026247 100644
--- a/src/scss/_satellite.scss
+++ b/src/scss/_satellite.scss
@@ -35,6 +35,6 @@
 }
 
 .satellite.rounded-box {
-  border-radius: calc(var(--o-force) * 0.015);
+  border-radius: calc(var(--o-force) * var(--o-force-ratio) * 0.015);
 }