adventskalender/shared/js/position.js aktualisiert
This commit is contained in:
@@ -5,30 +5,29 @@
|
||||
* und positioniert die Elemente exakt auf dem sichtbaren Bild.
|
||||
*/
|
||||
|
||||
const SCALE_FACTOR = 0.9; // 0.9 = etwas kleiner, 1.0 = originalgröße
|
||||
|
||||
function positionAllDoors() {
|
||||
const container = document.querySelector('.kalenderbild');
|
||||
const img = container?.querySelector('img');
|
||||
if (!container || !img) return;
|
||||
const cont = document.querySelector('.kalenderbild');
|
||||
const img = cont?.querySelector('img');
|
||||
if (!cont || !img) return;
|
||||
|
||||
const imgRect = img.getBoundingClientRect();
|
||||
const contRect = container.getBoundingClientRect();
|
||||
const contRect = cont.getBoundingClientRect();
|
||||
|
||||
// alle Türen neu berechnen
|
||||
document.querySelectorAll('.door').forEach(door => {
|
||||
const topPct = parseFloat(door.dataset.top) || 0;
|
||||
const leftPct = parseFloat(door.dataset.left) || 0;
|
||||
const widthPct = parseFloat(door.dataset.width) || 10;
|
||||
|
||||
const doorWidth = imgRect.width * (widthPct / 100);
|
||||
const widthPct = (parseFloat(door.dataset.width) || 10) * SCALE_FACTOR;
|
||||
|
||||
const w = imgRect.width * (widthPct / 100);
|
||||
door.style.position = 'absolute';
|
||||
door.style.width = doorWidth + 'px';
|
||||
door.style.height = doorWidth + 'px';
|
||||
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.left - contRect.left + imgRect.width * (leftPct / 100)) + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
// Positionierung bei Start und Fensteränderung
|
||||
window.addEventListener('load', positionAllDoors);
|
||||
window.addEventListener('resize', positionAllDoors);
|
||||
Reference in New Issue
Block a user