blob: d56817220f047cfc42295f2d54b5da301cc39bfb (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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>
|
