A little app to serve my photography from my personal website
use resizeObserver
Waiting for spindle ...
+20
-16
+4
assets/photos/index.css
+4
assets/photos/index.css
···
15
15
16
16
.photos > * {
17
17
max-height: 500px;
18
+
overflow: hidden;
18
19
transition: transform 0.3s;
20
+
opacity: 0;
19
21
}
20
22
21
23
.photos > *:hover {
···
23
25
}
24
26
25
27
.photos > * img {
28
+
object-fit: cover;
26
29
max-height: 100%;
27
30
}
28
31
···
64
67
65
68
.photos__nav {
66
69
flex-basis: max-content;
70
+
min-width: 200px;
67
71
}
68
72
69
73
.photos__nav a {
+16
-16
assets/photos/index.js
+16
-16
assets/photos/index.js
···
13
13
14
14
const MAX_HEIGHT = parseFloat(getComputedStyle(photos[0].element).maxHeight.replace('px', ''))
15
15
const container = document.querySelector(".photos");
16
+
const gap = parseFloat(getComputedStyle(container).gap.replace('px', ''));
16
17
17
18
const recalculateHeights = () => {
18
19
const containerWidth = container.getBoundingClientRect().width - 1;
19
-
const gap = parseFloat(getComputedStyle(container).gap.replace('px', ''));
20
-
21
20
const newRow = () => ({
22
21
photos: [],
23
22
aspectRatio: 0,
···
45
44
})
46
45
47
46
grid.forEach(({ aspectRatio, photos }) => {
48
-
photos.forEach(({ element }) => {
49
-
const height = rowWidth(photos) / aspectRatio;
50
-
element.style.height = `${height}px`;
47
+
photos.forEach((photo) => {
48
+
const { element, aspectRatio: photoAspectRatio } = photo;
49
+
photo.height = rowWidth(photos) / aspectRatio;
50
+
photo.width = photoAspectRatio * photo.height;
51
51
});
52
52
});
53
+
54
+
photos.forEach(({ element, width, height }) => {
55
+
element.style.height = `${height}px`;
56
+
element.style.maxWidth = `${width}px`;
57
+
element.style.opacity = 100;
58
+
});
53
59
};
54
60
55
-
window.addEventListener("load", () => {
56
-
recalculateHeights();
57
-
});
58
-
59
-
let windowWidth = window.innerWidth;
60
-
window.addEventListener("resize", () => {
61
-
if (window.innerWidth === windowWidth) {
62
-
return;
61
+
const resizeObserver = new ResizeObserver((entries) => {
62
+
for (const entry of entries) {
63
+
recalculateHeights();
63
64
}
65
+
});
64
66
65
-
windowWidth = window.innerWidth;
66
-
recalculateHeights();
67
-
});
67
+
resizeObserver.observe(document.body);
68
68
69
69
const pageNumberSelect = document.getElementById("page_number")
70
70
pageNumberSelect.addEventListener("change", (event) => {