From c73e8682e119e8f3f88fb8b5dd401ffc5c72afb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?William=20Herg=C3=A8s?= <william@herges.fr>
Date: Sat, 9 Aug 2025 16:04:22 +0200
Subject: feat(batteur): background images

---
 src/component/ImageBackground.astro | 71 ++++++++++++++++++++-----------------
 1 file changed, 39 insertions(+), 32 deletions(-)

(limited to 'src/component')

diff --git a/src/component/ImageBackground.astro b/src/component/ImageBackground.astro
index 9277472..d568172 100644
--- a/src/component/ImageBackground.astro
+++ b/src/component/ImageBackground.astro
@@ -1,42 +1,49 @@
 ---
-
+const { height = "400" } = Astro.props;
 ---
 
-<div class="bg">
-  <slot/>
+<div class="bg" data-height={height}>
+  <slot />
 </div>
 
-<script lang="js">
-  document.querySelectorAll(".bg").forEach((e) => {
-    const children = e.children;
-    const max = e.clientWidth;
-    const height = e.hasAttribute("data-height") ? e.getAttribute("data-height") : 400;
-    const newChildren = [];
+<script>
+  window.onload = () => {
+    // because Astro doesn't support defer
+    document.querySelectorAll(".bg").forEach((e) => {
+      const children = e.children;
+      const max = e.clientWidth;
+      const height = e.getAttribute("data-height");
+      const newChildren = [];
+      console.log(e.hasAttribute("data-height"));
 
-    let line = document.createElement("div");
-    let currentWidth = 0;
-    let i = 0;
+      let line = document.createElement("div");
+      let currentWidth = 0;
+      let i = 0;
 
-    const fn = () => {
-      let current = children[i++];
-      let ratio = current.clientWidth / current.clientHeight;
-      line.appendChild(current.cloneNode(true));
-      currentWidth += ratio * height;
-    }
+      const fn = () => {
+        let current = children[i++];
+        console.log(current.getBoundingClientRect().width, current.getBoundingClientRect().height);
+        let ratio = current.clientWidth / current.clientHeight;
+        line.appendChild(current.cloneNode(true));
+        currentWidth += ratio * height;
+      };
 
-    while (i < children.length) {
-      // adding elements
-      while (i < children.length && currentWidth <= max) fn()
-      if (i < children.length) fn()
-      // setting height
-      let h = (max * height) / currentWidth;
-      line.style.height = `${h}px`;
-      newChildren.push(line);
-      if (i < children.length) {
-        line = document.createElement("div");
-        currentWidth = 0
+      while (i < children.length) {
+        // adding elements
+        while (i < children.length && currentWidth <= max) fn();
+        if (i < children.length) fn();
+        // setting height
+        console.log(currentWidth);
+        let h = (max * height) / currentWidth;
+        console.log(`${h}px`);
+        line.style.height = `${h - 1}px`;
+        newChildren.push(line);
+        if (i < children.length) {
+          line = document.createElement("div");
+          currentWidth = 0;
+        }
       }
-    }
-    e.replaceChildren(...newChildren);
-  });
+      e.replaceChildren(...newChildren);
+    });
+  };
 </script>
-- 
cgit v1.2.3