adventskalender/shared/js/position.js hinzugefügt

adventskalender/shared/js/position.js

@@ -0,0 +1,55 @@
+/**
+ * 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);