Thomas/Bratonien-Adventskalender
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adventskalender/shared/js/position.js aktualisiert

Browse Source
This commit is contained in:
Thomas Dannenberg
2025-11-04 18:38:29 +00:00
parent 56b169cf10
commit f7509120bf
1 changed files with 41 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
adventskalender/shared/js/position.js
View File

@@ -1,7 +1,7 @@
/**
* Bratonien Adventskalender – Türchen-Positionierung (2025)
* ---------------------------------------------------------
* Liest data-top / data-left / data-width aus jedem .fluegel und .openfield
* Liest data-top / data-left / data-width aus jedem Flügel, jeder normalen Tür und jedem Openfield,
* und positioniert die Elemente exakt auf dem sichtbaren Bild.
*/
@@ -13,34 +13,55 @@ function positionAllDoors() {
const imgRect = img.getBoundingClientRect();
const contRect = cont.getBoundingClientRect();
// Flügel (bei Doppeltüren) positionieren
document.querySelectorAll('.fluegel').forEach(flg => {
const day = flg.dataset.day;
const topPct = parseFloat(flg.dataset.top) || 0;
const leftPct = parseFloat(flg.dataset.left) || 0;
const widthPct = parseFloat(flg.dataset.width) || 10;
// Normale Türen (einzeln)
document.querySelectorAll('.door').forEach(door => {
const day = door.dataset.day;
const topPct = parseFloat(door.dataset.top) || 0;
const leftPct = parseFloat(door.dataset.left) || 0;
const widthPct = parseFloat(door.dataset.width) || 10;
const w = imgRect.width * (widthPct / 100);
const h = w * 2; // Flügel doppelt so hoch wie breit
flg.style.position = 'absolute';
flg.style.width = w + 'px';
flg.style.height = h + 'px';
flg.style.top = (imgRect.top - contRect.top + imgRect.height * (topPct / 100)) + 'px';
flg.style.left = (imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2) + 'px';
door.style.position = 'absolute';
door.style.width = w + 'px';
door.style.height = w + 'px';
door.style.top = (imgRect.top - contRect.top + imgRect.height * (topPct / 100)) + 'px';
door.style.left = (imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2) + 'px';
});
// Openfields korrekt positionieren
// Flügel-Türen (linker + rechter Flügel)
document.querySelectorAll('.fluegel').forEach(fluegel => {
const day = fluegel.dataset.day;
const side = fluegel.classList.contains('left') ? 'left' : 'right';
const topPct = parseFloat(fluegel.dataset.top) || 0;
const leftPct = parseFloat(fluegel.dataset.left) || 0;
const widthPct = parseFloat(fluegel.dataset.width) || 10;
const fluegelWidth = imgRect.width * (widthPct / 100);
const fluegelHeight = fluegelWidth * 2; // doppelte Höhe
fluegel.style.position = 'absolute';
fluegel.style.width = fluegelWidth + 'px';
fluegel.style.height = fluegelHeight + 'px';
fluegel.style.top = (imgRect.top - contRect.top + imgRect.height * (topPct / 100)) + 'px';
if (side === 'left') {
fluegel.style.left = (imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2) + 'px';
} else {
fluegel.style.left = (imgRect.width * (leftPct / 100) + fluegelWidth + (contRect.width - imgRect.width) / 2) + 'px';
}
});
// Openfields
document.querySelectorAll('.openfield').forEach(field => {
const day = field.dataset.day;
const topPct = parseFloat(field.dataset.top) || 0;
const leftPct = parseFloat(field.dataset.left) || 0;
const widthPct = parseFloat(field.dataset.width) || 10;
const isFluegel = document.querySelector(`.fluegel.left[data-day="${day}"]`) !== null;
const w = imgRect.width * (widthPct / 100);
const hasFluegel = document.querySelector(`.fluegel[data-day="${day}"]`);
const h = hasFluegel ? w * 2 : w;
const h = isFluegel ? w * 2 : w;
field.style.position = 'absolute';
field.style.width = w + 'px';
@@ -52,9 +73,12 @@ function positionAllDoors() {
window.addEventListener('load', positionAllDoors);
window.addEventListener('resize', positionAllDoors);
// iOS / Mobile: neu berechnen bei Drehung oder Wake-up
window.addEventListener('orientationchange', () => {
setTimeout(positionAllDoors, 300);
});
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
setTimeout(positionAllDoors, 200);