style(background): rename component into MosaicBackground

1 files changed, 49 insertions, 0 deletions

diff --git a/src/component/MosaicBackground.astro b/src/component/MosaicBackground.astro
new file mode 100644
index 0000000..d568172
--- /dev/null
+++ b/src/component/MosaicBackground.astro
@@ -0,0 +1,49 @@
+---
+const { height = "400" } = Astro.props;
+---
+
+<div class="bg" data-height={height}>
+  <slot />
+</div>
+
+<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;
+
+      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
+        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);
+    });
+  };
+</script>