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