diff --git a/adventskalender/shared/js/position.js b/adventskalender/shared/js/position.js index a5e40d9..6a325ac 100644 --- a/adventskalender/shared/js/position.js +++ b/adventskalender/shared/js/position.js @@ -1,10 +1,3 @@ -/** - * Bratonien Adventskalender – Türchen-Positionierung (2025) - * --------------------------------------------------------- - * Liest data-top / data-left / data-width aus jedem Türchen (door, fluegel, openfield) - * und positioniert sie pixelgenau auf dem sichtbaren Bild. - */ - function positionAllDoors() { const cont = document.querySelector('.kalenderbild'); const img = cont?.querySelector('img'); @@ -13,7 +6,7 @@ function positionAllDoors() { const imgRect = img.getBoundingClientRect(); const contRect = cont.getBoundingClientRect(); - // === Normale Türen (.door) + // Normale Türen document.querySelectorAll('.door').forEach(door => { const day = door.dataset.day; const topPct = parseFloat(door.dataset.top) || 0; @@ -23,40 +16,44 @@ function positionAllDoors() { const w = imgRect.width * (widthPct / 100); 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`; + 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}"]`); if (field) { field.style.position = 'absolute'; - field.style.width = `${w}px`; - field.style.height = `${w}px`; - field.style.top = door.style.top; - field.style.left = door.style.left; + field.style.width = `${w}px`; + field.style.height = `${w}px`; + field.style.top = door.style.top; + field.style.left = door.style.left; } }); - // === Flügel (.fluegel.left und .fluegel.right) - document.querySelectorAll('.fluegel').forEach(fluegel => { - const day = fluegel.dataset.day; - const topPct = parseFloat(fluegel.dataset.top) || 0; - const leftPct = parseFloat(fluegel.dataset.left) || 0; - const widthPct = parseFloat(fluegel.dataset.width) || 6; + // Flügel-Links/Rechts + document.querySelectorAll('.fluegel').forEach(flg => { + const day = flg.dataset.day; + const side = flg.classList.contains('left') ? 'left' : 'right'; + const topPct = parseFloat(flg.dataset.top) || 0; + const leftPct = parseFloat(flg.dataset.left) || 0; + const widthPct = parseFloat(flg.dataset.width) || 12; - const w = imgRect.width * (widthPct / 100); - const h = w * 2; + const fullW = imgRect.width * (widthPct / 100); + const halfW = fullW / 2; + const fullH = fullW * 2; - fluegel.style.position = 'absolute'; - fluegel.style.width = `${w}px`; - fluegel.style.height = `${h}px`; - fluegel.style.top = `${imgRect.top - contRect.top + imgRect.height * (topPct / 100)}px`; - fluegel.style.left = `${imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2}px`; + const baseLeft = imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2; + + flg.style.position = 'absolute'; + flg.style.width = `${halfW}px`; + flg.style.height = `${fullH}px`; + flg.style.top = `${imgRect.top - contRect.top + imgRect.height * (topPct / 100)}px`; + flg.style.left = side === 'left' ? `${baseLeft}px` : `${baseLeft + halfW}px`; }); - // === Openfields für Flügel - document.querySelectorAll('.openfield').forEach(field => { + // Offenes Feld bei Flügeltüren + document.querySelectorAll('.openfield.double').forEach(field => { const day = field.dataset.day; const topPct = parseFloat(field.dataset.top) || 0; const leftPct = parseFloat(field.dataset.left) || 0; @@ -66,10 +63,31 @@ function positionAllDoors() { const h = w * 2; field.style.position = 'absolute'; - field.style.width = `${w}px`; - field.style.height = `${h}px`; - field.style.top = `${imgRect.top - contRect.top + imgRect.height * (topPct / 100)}px`; - field.style.left = `${imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2}px`; + field.style.width = `${w}px`; + field.style.height = `${h}px`; + field.style.top = `${imgRect.top - contRect.top + imgRect.height * (topPct / 100)}px`; + field.style.left = `${imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2}px`; + }); + + // Zahlen mittig über beiden Flügeln + document.querySelectorAll('.door-number').forEach(number => { + const day = number.dataset.day; + const topPct = parseFloat(number.dataset.top) || 0; + const leftPct = parseFloat(number.dataset.left) || 0; + const widthPct = parseFloat(number.dataset.width) || 12; + + const w = imgRect.width * (widthPct / 100); + const h = w * 2; + + number.style.position = 'absolute'; + number.style.width = `${w}px`; + number.style.height = `${h}px`; + number.style.top = `${imgRect.top - contRect.top + imgRect.height * (topPct / 100)}px`; + number.style.left = `${imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2}px`; + number.style.display = 'flex'; + number.style.alignItems = 'center'; + number.style.justifyContent = 'center'; + number.style.pointerEvents = 'none'; }); } @@ -82,26 +100,4 @@ document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'visible') { setTimeout(positionAllDoors, 200); } -}); - -// === Zahlen für Flügeltüren (.door-number) -document.querySelectorAll('.door-number').forEach(number => { - const day = number.dataset.day; - const topPct = parseFloat(number.dataset.top) || 0; - const leftPct = parseFloat(number.dataset.left) || 0; - const widthPct = parseFloat(number.dataset.width) || 12; - - const w = imgRect.width * (widthPct / 100); - const h = w * 2; - - number.style.position = 'absolute'; - number.style.width = `${w}px`; - number.style.height = `${h}px`; - number.style.top = `${imgRect.top - contRect.top + imgRect.height * (topPct / 100)}px`; - number.style.left = `${imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2}px`; - - number.style.display = 'flex'; - number.style.alignItems = 'center'; - number.style.justifyContent = 'center'; - number.style.pointerEvents = 'none'; }); \ No newline at end of file