feat(batteur): background images

1 files changed, 39 insertions, 32 deletions

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>