From 4ea910a2e394efb2df83f2413857a15a9410bd75 Mon Sep 17 00:00:00 2001 From: Thomas Dannenberg Date: Tue, 4 Nov 2025 17:35:46 +0000 Subject: [PATCH] adventskalender/shared/js/position.js aktualisiert --- adventskalender/shared/js/position.js | 30 +++++++++++++-------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/adventskalender/shared/js/position.js b/adventskalender/shared/js/position.js index 9dc485c..91cb9ff 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(); - // alle Türchen positionieren + // === Einzel-Türen und Openfields === document.querySelectorAll('.door').forEach(door => { const day = door.dataset.day; const topPct = parseFloat(door.dataset.top) || 0; @@ -22,14 +22,12 @@ 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'; - // passendes openfield finden und synchron positionieren const field = document.querySelector(`.openfield[data-day="${day}"]`); if (field) { field.style.position = 'absolute'; @@ -39,19 +37,19 @@ function positionAllDoors() { field.style.left = door.style.left; } }); -} -window.addEventListener('load', positionAllDoors); -window.addEventListener('resize', positionAllDoors); + // === 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; -// iOS / Mobile: neu berechnen bei Drehung oder Wake-up -window.addEventListener('orientationchange', () => { - setTimeout(positionAllDoors, 300); // kleiner Delay für Safari -}); + const w = imgRect.width * (widthPct / 100); -// 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 + 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