From 0a9734cebb028dff4aa785416f58e76ac57c2127 Mon Sep 17 00:00:00 2001
From: Thomas Dannenberg <kontakt@bratonien.de>
Date: Tue, 4 Nov 2025 10:32:53 +0000
Subject: [PATCH] =?UTF-8?q?adventskalender/shared/js/position.js=20hinzuge?=
 =?UTF-8?q?f=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 adventskalender/shared/js/position.js | 55 +++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 adventskalender/shared/js/position.js

diff --git a/adventskalender/shared/js/position.js b/adventskalender/shared/js/position.js
new file mode 100644
index 0000000..fa912e4
--- /dev/null
+++ b/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);
\ No newline at end of file