55 lines
2.1 KiB
JavaScript
55 lines
2.1 KiB
JavaScript
/**
|
||
* Bratonien Adventskalender – Türchen-Positionierung
|
||
* --------------------------------------------------
|
||
* Dieses Skript sorgt dafür, dass sich jedes .door-Element
|
||
* exakt relativ zum sichtbaren Kalenderbild positioniert.
|
||
*
|
||
* Autor: Bratonien Development
|
||
* Stand: 2025
|
||
*/
|
||
|
||
/**
|
||
* Positioniert ein einzelnes Türchen auf Basis prozentualer Angaben.
|
||
*
|
||
* @param {string} selector - CSS-Selektor des Türchens (z. B. ".door" oder ".door[data-day='1']")
|
||
* @param {number} topPct - vertikale Position in Prozent (0–100) bezogen auf das Bild
|
||
* @param {number} leftPct - horizontale Position in Prozent (0–100) bezogen auf das Bild
|
||
* @param {number} widthPct - Breite des Türchens in Prozent der Bildbreite
|
||
*/
|
||
function positionDoor(selector, topPct, leftPct, widthPct) {
|
||
const img = document.querySelector('.kalenderbild img');
|
||
const cont = document.querySelector('.kalenderbild');
|
||
const door = document.querySelector(selector);
|
||
|
||
if (!img || !cont || !door) return;
|
||
|
||
const imgRect = img.getBoundingClientRect();
|
||
const contRect = cont.getBoundingClientRect();
|
||
const doorWidth = imgRect.width * (widthPct / 100);
|
||
|
||
door.style.position = 'absolute';
|
||
door.style.width = doorWidth + 'px';
|
||
door.style.height = doorWidth + 'px';
|
||
door.style.top = (imgRect.top - contRect.top + imgRect.height * (topPct / 100)) + 'px';
|
||
door.style.left = (imgRect.left - contRect.left + imgRect.width * (leftPct / 100)) + 'px';
|
||
}
|
||
|
||
/**
|
||
* Positioniert automatisch alle Türchen mit data-pos-Attribut.
|
||
* Beispiel:
|
||
* <div class="door" data-day="1" data-top="20" data-left="15" data-width="10">1</div>
|
||
*/
|
||
function positionAllDoors() {
|
||
const doors = document.querySelectorAll('.door');
|
||
doors.forEach(door => {
|
||
const t = parseFloat(door.dataset.top) || 0;
|
||
const l = parseFloat(door.dataset.left) || 0;
|
||
const w = parseFloat(door.dataset.width) || 10;
|
||
const selector = `.door[data-day='${door.dataset.day || ''}']`;
|
||
positionDoor(selector, t, l, w);
|
||
});
|
||
}
|
||
|
||
/* === Events === */
|
||
window.addEventListener('load', positionAllDoors);
|
||
window.addEventListener('resize', positionAllDoors); |