https://brotdeslebens.net/wp-content/themes/bdl/js/frontpage.js?ver=1.0

1// ######################################################
2// Filter beim Hovern über Interviewkachel
3// ######################################################
4
5let interviewKacheln = document.querySelectorAll('.interview-kacheln-item');
6
7interviewKacheln.forEach(interviewKachel => {
8    let image = interviewKachel.querySelector('img');
9    let hover = interviewKachel.querySelector('.image-overlay')
10    hover.addEventListener('mouseenter', e => {
11        image.style.filter = "grayscale(100%) brightness(0.3)"
12    })
13    hover.addEventListener('mouseleave', e => {
14        image.style.filter = ''
15    })
16})
17
18
19// #######################################################
20// JS für die Weltkarte
21// #######################################################
22
23function findParentSVG(element) {
24    if (element.tagName === 'svg' || element.tagName === 'SVG') {
25        return element;
26    } else if (element.parentNode) {
27        return findParentSVG(element.parentNode);
28    } else {
29        return null; // Kein übergeordnetes SVG-Element gefunden
30    }
31}
32
33const scaleLaender = document.querySelectorAll('.bdl-land')
34// const scaleLaender = document.querySelectorAll('.land')
35const worldmap = document.querySelector("#svg-weltkarte #layer6")
36
37scaleLaender.forEach(land => {
38    // land.style.fill = "blue";
39    
40    // Get the scale factors for width and height
41    let scaleX = 1.1; // You can adjust the scale factor for width as needed
42    let scaleY = 1.1; // You can adjust the scale factor for height as needed
43    
44    // Get the original path data
45    let originalPathData = land.getAttribute("d");
46
47    // Update the 'd' attribute of the path element with the scaled dimensions
48    let scaledPathData = originalPathData.replace(/(?<=\s)(-?\d+(\.\d+))?(?=\s*,|\s|$)/g, function(match, p1) {
49        return p1 * scaleX + ' ';
50    }).replace(/(?<=\s*,\s*)(-?\d+(\.\d+)?)(?=\s*,|\s|$)/g, function(match, p1) {
51        return p1 * scaleY;
52    });
53
54    // Calculate the vector that the country has to be moved back in order to keep its origin centered
55    // 1. Calc the vector that a country has relativ to the map
56    let worldmapXCoordinate = worldmap.getBoundingClientRect().left;
57    let worldmapYCoordinate = worldmap.getBoundingClientRect().top;
58    let landXCoordinate = land.getBoundingClientRect().left;
59    let landYCoordinate = land.getBoundingClientRect().top;
60    
61    
62
63    let landRelX = landXCoordinate - worldmapXCoordinate;
64    let landRelY = landYCoordinate - worldmapYCoordinate;
65
66    // 2. Calc the center Vector of country relative to map before scaling
67    let originalLandCenterX = landRelX + land.getBoundingClientRect().width / 2;
68    let originalLandCenterY = landRelY + land.getBoundingClientRect().height / 2;
69    
70    // 3. Calc the center Vector of country relative to map after scaling
71    let scaledLandCenterX = originalLandCenterX * scaleX;
72    let scaledLandCenterY = originalLandCenterY * scaleY;
73
74    // 4. Calc the ratio of the css coordinate system in contrast to the svg coordinate system
75    // 4.1. the ratio is calculated differently (sometimes based on the width, sometimes on the height). Its based on the widht, if the width is fully expanded, its based on the heigth if the height is fully expanded. (what happens if both are not due to viewbox settings)
76    let svgWidth = 100; //Intern in der SVG gesetzt (spezifisch bei jeder SVG)
77    let svgHeight = 49.345; //Intern in der SVG gesetzt (spezifisch bei jeder SVG)
78    let svgInternalRatio = svgWidth / svgHeight;
79    let svgElementRatio = document.getElementById('svg-weltkarte').clientWidth / document.getElementById('svg-weltkarte').clientHeight;
80    let worldmapSvgScale;
81    let worldmapCssScale;
82    
83    if ( svgElementRatio < svgInternalRatio) {
84        worldmapCssScale = document.getElementById('svg-weltkarte').getBoundingClientRect().width;
85        worldmapSvgScale = svgWidth;
86        // console.log("kleiner")
87    } else {
88        worldmapCssScale = document.getElementById('svg-weltkarte').getBoundingClientRect().height;
89        worldmapSvgScale = svgHeight;
90        // console.log("größer")
91    }
92    let worldmapCssSvgRatio = worldmapSvgScale / worldmapCssScale;
93
94    // 5. Calc the needed moving vector
95    let movingVecX = originalLandCenterX - scaledLandCenterX;
96    let movingVecY = originalLandCenterY - scaledLandCenterY;
97
98    // 6. Calc the translation values
99    let translationValueX = movingVecX * worldmapCssSvgRatio;
100    let translationValueY = movingVecY * worldmapCssSvgRatio;
101
102
103    // Add a mouseenter event listener to the div
104    land.addEventListener("mouseenter", function() {
105        land.setAttribute("d", scaledPathData);
106
107        let beforeTranslation = land.getBoundingClientRect().left;
108
109        land.style.transform = `translateX(-1px)`
110        let afterTranslation = land.getBoundingClientRect().left;
111
112        land.style.transform = `translate(${translationValueX}px, ${translationValueY}px)`
113    
114        const parentSvgGroup = worldmap.querySelector('#bdl-laender')
115        if (parentSvgGroup) {
116            // Verschiebe das gesamte Gruppenelement ans Ende des übergeordneten SVG-Dokuments
117            parentSvgGroup.appendChild(land);
118            land.style.fill = `#873826ff`
119            land.style.cursor =  `pointer`;
120        }
121    });
122
123    // Add a mouseleave event listener to the div
124    land.addEventListener("mouseleave", function() {
125        land.style.transform = `translate(0, 0)`
126        land.setAttribute("d", originalPathData);
127        land.style.fill = ``
128        land.style.cursor =  ``;
129    });
130})
131
132