Improve Orbit.resize()

zumerlab · Oct 7, 2024 · 13f278b · 13f278b
1 parent 54cc146
commit 13f278b
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);
 }