40 lines
1.7 KiB
JavaScript
40 lines
1.7 KiB
JavaScript
function positionAllDoors() {
|
|
const cont = document.querySelector('.kalenderbild');
|
|
const img = cont?.querySelector('img');
|
|
if (!cont || !img) return;
|
|
|
|
const imgRect = img.getBoundingClientRect();
|
|
const contRect = cont.getBoundingClientRect();
|
|
|
|
// Normale Türen + Openfields
|
|
document.querySelectorAll('.door, .openfield').forEach(el => {
|
|
const topPct = parseFloat(el.dataset.top) || 0;
|
|
const leftPct = parseFloat(el.dataset.left) || 0;
|
|
const widthPct = parseFloat(el.dataset.width) || 10;
|
|
|
|
const widthPx = imgRect.width * (widthPct / 100);
|
|
const heightPx = widthPx; // quadratisch
|
|
|
|
el.style.position = 'absolute';
|
|
el.style.width = widthPx + 'px';
|
|
el.style.height = heightPx + 'px';
|
|
el.style.top = (imgRect.top - contRect.top + imgRect.height * (topPct / 100)) + 'px';
|
|
el.style.left = (imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2) + 'px';
|
|
});
|
|
|
|
// Flügel: data-width = bereits halbe Breite → NICHT nochmal teilen!
|
|
document.querySelectorAll('.fluegel').forEach(fluegel => {
|
|
const topPct = parseFloat(fluegel.dataset.top) || 0;
|
|
const leftPct = parseFloat(fluegel.dataset.left) || 0;
|
|
const widthPct = parseFloat(fluegel.dataset.width) || 5;
|
|
|
|
const widthPx = imgRect.width * (widthPct / 100);
|
|
const heightPx = widthPx * 2; // volle Türhöhe
|
|
|
|
fluegel.style.position = 'absolute';
|
|
fluegel.style.width = widthPx + 'px';
|
|
fluegel.style.height = heightPx + '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';
|
|
});
|
|
} |