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 17:46:27 +00:00
parent 63cfaf768d
commit c445bbcd82
1 changed files with 5 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,3 @@
/**
* Bratonien Adventskalender – Türchen-Positionierung (2025)
* ---------------------------------------------------------
* Liest data-top / data-left / data-width aus jedem Element
* und positioniert .door, .fluegel, .openfield korrekt über dem Bild.
*/
function positionAllDoors() { function positionAllDoors() {
const cont = document.querySelector('.kalenderbild'); const cont = document.querySelector('.kalenderbild');
const img = cont?.querySelector('img'); const img = cont?.querySelector('img');
@@ -29,14 +22,14 @@ function positionAllDoors() {
el.style.left = (imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2) + 'px'; el.style.left = (imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2) + 'px';
}); });
// Flügel: jeweils halbe Breite, doppelte Höhe (nicht quadratisch!) // Flügel: data-width = bereits halbe Breite → NICHT nochmal teilen!
document.querySelectorAll('.fluegel').forEach(fluegel => { document.querySelectorAll('.fluegel').forEach(fluegel => {
const topPct = parseFloat(fluegel.dataset.top) || 0; const topPct = parseFloat(fluegel.dataset.top) || 0;
const leftPct = parseFloat(fluegel.dataset.left) || 0; const leftPct = parseFloat(fluegel.dataset.left) || 0;
const widthPct = parseFloat(fluegel.dataset.width) || 10; const widthPct = parseFloat(fluegel.dataset.width) || 5;
const widthPx = imgRect.width * (widthPct / 100) / 2; const widthPx = imgRect.width * (widthPct / 100);
const heightPx = widthPx * 2; const heightPx = widthPx * 2; // volle Türhöhe
fluegel.style.position = 'absolute'; fluegel.style.position = 'absolute';
fluegel.style.width = widthPx + 'px'; fluegel.style.width = widthPx + 'px';
@@ -44,15 +37,4 @@ function positionAllDoors() {
fluegel.style.top = (imgRect.top - contRect.top + imgRect.height * (topPct / 100)) + 'px'; fluegel.style.top = (imgRect.top - contRect.top + imgRect.height * (topPct / 100)) + 'px';
fluegel.style.left = (imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2) + 'px'; fluegel.style.left = (imgRect.width * (leftPct / 100) + (contRect.width - imgRect.width) / 2) + 'px';
}); });
} }
window.addEventListener('load', positionAllDoors);
window.addEventListener('resize', positionAllDoors);
window.addEventListener('orientationchange', () => {
setTimeout(positionAllDoors, 300);
});
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'visible') {
setTimeout(positionAllDoors, 200);
}
});