diff --git a/src/content/listing.js b/src/content/listing.js index 07f4b76..6c0b96d 100644 --- a/src/content/listing.js +++ b/src/content/listing.js @@ -1,10 +1,13 @@ import {createMaintenancePopup} from "$lib/components/MaintenancePopup.js"; import {createMediaBoxTools} from "$lib/components/MediaBoxTools.js"; -import {initializeMediaBox} from "$lib/components/MediaBoxWrapper.js"; +import {calculateMediaBoxesPositions, initializeMediaBox} from "$lib/components/MediaBoxWrapper.js"; import {createMaintenanceStatusIcon} from "$lib/components/MaintenanceStatusIcon.js"; import {createImageShowFullscreenButton} from "$lib/components/ImageShowFullscreenButton.js"; -document.querySelectorAll('.media-box').forEach(mediaBoxElement => { +/** @type {NodeListOf} */ +const mediaBoxes = document.querySelectorAll('.media-box'); + +mediaBoxes.forEach(mediaBoxElement => { initializeMediaBox(mediaBoxElement, [ createMediaBoxTools( createMaintenancePopup(), @@ -18,3 +21,5 @@ document.querySelectorAll('.media-box').forEach(mediaBoxElement => { window.dispatchEvent(new CustomEvent('resize')); }) }); + +calculateMediaBoxesPositions(mediaBoxes); diff --git a/src/lib/components/MediaBoxWrapper.js b/src/lib/components/MediaBoxWrapper.js index 9ed76d0..cc4c6a2 100644 --- a/src/lib/components/MediaBoxWrapper.js +++ b/src/lib/components/MediaBoxWrapper.js @@ -78,6 +78,29 @@ export function initializeMediaBox(mediaBoxContainer, childComponentElements) { } } +/** + * @param {NodeListOf} mediaBoxesList + */ +export function calculateMediaBoxesPositions(mediaBoxesList) { + window.addEventListener('resize', () => { + /** @type {HTMLElement|null} */ + let lastMediaBox = null, + /** @type {number|null} */ + lastMediaBoxPosition = null; + + for (let mediaBoxElement of mediaBoxesList) { + const yPosition = mediaBoxElement.getBoundingClientRect().y; + const isOnTheSameLine = yPosition === lastMediaBoxPosition; + + mediaBoxElement.classList.toggle('media-box--first', !isOnTheSameLine); + lastMediaBox?.classList.toggle('media-box--last', !isOnTheSameLine); + + lastMediaBox = mediaBoxElement; + lastMediaBoxPosition = yPosition; + } + }) +} + /** * @typedef {Object} ImageURIs * @property {string} full