diff options
Diffstat (limited to 'src/component/ImageBackground.astro')
| -rw-r--r-- | src/component/ImageBackground.astro | 49 |
1 files changed, 0 insertions, 49 deletions
diff --git a/src/component/ImageBackground.astro b/src/component/ImageBackground.astro deleted file mode 100644 index d568172..0000000 --- a/src/component/ImageBackground.astro +++ /dev/null @@ -1,49 +0,0 @@ ---- -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> |
