54 lines
1.9 KiB
JavaScript
54 lines
1.9 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();
|
|
|
|
// Türchen, Flügel und Felder positionieren
|
|
document.querySelectorAll('[data-day]').forEach(el => {
|
|
const day = el.dataset.day;
|
|
const topPct = parseFloat(el.dataset.top) || 0;
|
|
const leftPct = parseFloat(el.dataset.left) || 0;
|
|
const widthPct = parseFloat(el.dataset.width) || 10;
|
|
|
|
const fullWidth = imgRect.width * (widthPct / 100);
|
|
const fullTop = (imgRect.top - contRect.top + imgRect.height * (topPct / 100)) + 'px';
|
|
const fullLeft = (imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2) + 'px';
|
|
|
|
el.style.position = 'absolute';
|
|
el.style.top = fullTop;
|
|
el.style.left = fullLeft;
|
|
|
|
if (el.classList.contains('hinge-left') || el.classList.contains('hinge-right')) {
|
|
el.style.width = fullWidth + 'px';
|
|
el.style.height = fullWidth + 'px';
|
|
|
|
} else if (el.classList.contains('fluegel')) {
|
|
el.style.width = fullWidth + 'px';
|
|
el.style.height = (fullWidth * 2) + 'px';
|
|
|
|
} else if (el.classList.contains('openfield')) {
|
|
el.style.width = fullWidth + 'px';
|
|
el.style.height = (fullWidth * 2) + 'px';
|
|
|
|
} else if (el.classList.contains('door-number')) {
|
|
el.style.transform = 'translate(-50%, -50%)';
|
|
el.style.left = '50%';
|
|
el.style.top = '50%';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Events
|
|
window.addEventListener('load', positionAllDoors);
|
|
window.addEventListener('resize', positionAllDoors);
|
|
window.addEventListener('orientationchange', () => {
|
|
setTimeout(positionAllDoors, 300);
|
|
});
|
|
document.addEventListener('visibilitychange', () => {
|
|
if (document.visibilityState === 'visible') {
|
|
setTimeout(positionAllDoors, 200);
|
|
}
|
|
}); |