From 608a5604825e85d8c97bae3f9b37ce0f3f8344a5 Mon Sep 17 00:00:00 2001 From: Thomas Dannenberg Date: Tue, 4 Nov 2025 17:37:19 +0000 Subject: [PATCH] adventskalender/shared/js/position.js aktualisiert --- adventskalender/shared/js/position.js | 32 ++++++++++++++------------- 1 file changed, 17 insertions(+), 15 deletions(-) diff --git a/adventskalender/shared/js/position.js b/adventskalender/shared/js/position.js index 3700a44..ffb0543 100644 --- a/adventskalender/shared/js/position.js +++ b/adventskalender/shared/js/position.js @@ -13,7 +13,7 @@ function positionAllDoors() { const imgRect = img.getBoundingClientRect(); const contRect = cont.getBoundingClientRect(); - // === Einzel-Türen und Openfields === + // alle Türchen positionieren document.querySelectorAll('.door').forEach(door => { const day = door.dataset.day; const topPct = parseFloat(door.dataset.top) || 0; @@ -22,13 +22,15 @@ function positionAllDoors() { const w = imgRect.width * (widthPct / 100); + // Tür positionieren door.style.position = 'absolute'; door.style.width = w + 'px'; door.style.height = w + 'px'; door.style.top = (imgRect.top - contRect.top + imgRect.height * (topPct / 100)) + 'px'; door.style.left = (imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2) + 'px'; - const field = document.querySelector(`.openfield[data-day="${day}"]`); + // passendes openfield finden und synchron positionieren + const field = document.querySelector(.openfield[data-day="${day}"]); if (field) { field.style.position = 'absolute'; field.style.width = w + 'px'; @@ -37,19 +39,19 @@ function positionAllDoors() { field.style.left = door.style.left; } }); +} - // === Flügel (links & rechts) === - document.querySelectorAll('.fluegel').forEach(flugel => { - const topPct = parseFloat(flugel.dataset.top) || 0; - const leftPct = parseFloat(flugel.dataset.left) || 0; - const widthPct = parseFloat(flugel.dataset.width) || 5; +window.addEventListener('load', positionAllDoors); +window.addEventListener('resize', positionAllDoors); - const w = imgRect.width * (widthPct / 100); +// iOS / Mobile: neu berechnen bei Drehung oder Wake-up +window.addEventListener('orientationchange', () => { + setTimeout(positionAllDoors, 300); // kleiner Delay für Safari +}); - flugel.style.position = 'absolute'; - flugel.style.width = w + 'px'; - flugel.style.height = w + 'px'; - flugel.style.top = (imgRect.top - contRect.top + imgRect.height * (topPct / 100)) + 'px'; - flugel.style.left = (imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2) + 'px'; - }); -} \ No newline at end of file +// optional: neu positionieren, wenn die Seite wieder aktiv wird +document.addEventListener('visibilitychange', () => { + if (document.visibilityState === 'visible') { + setTimeout(positionAllDoors, 200); + } +}); \ No newline at end of file