update

2026-04-01 20:15:45 +02:00
parent 92b7a2a95e
commit 9b36f8fec3
35 changed files with 2371 additions and 31 deletions
--- a/wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
+++ b/wp-content/plugins/carei-reservation/assets/js/carei-reservation.js
@@ -1265,6 +1265,110 @@
        initClearErrors();
        initAbroad();
        initSubmit();
+        initMap();
+    }
+
+    /* ═══════════════════════════════════════════
+       Carei Map — dynamic pins & tooltips
+       ═══════════════════════════════════════════ */
+
+    function initMap() {
+        var mapEl = document.querySelector('.carei-map');
+        if (!mapEl) return;
+
+        var pins;
+        try {
+            pins = JSON.parse(mapEl.getAttribute('data-pins') || '[]');
+        } catch (e) {
+            return;
+        }
+        if (!pins.length) return;
+
+        var svg = mapEl.querySelector('.carei-map__svg');
+        var pinsGroup = svg.querySelector('.carei-map__pins');
+        var tooltip = mapEl.querySelector('.carei-map__tooltip');
+        var tooltipContent = mapEl.querySelector('.carei-map__tooltip-content');
+        if (!svg || !pinsGroup || !tooltip || !tooltipContent) return;
+
+        var activePin = null;
+        var SVG_NS = 'http://www.w3.org/2000/svg';
+
+        pins.forEach(function (pin) {
+            var circle = document.createElementNS(SVG_NS, 'circle');
+            circle.setAttribute('cx', pin.x);
+            circle.setAttribute('cy', pin.y);
+            circle.setAttribute('r', '6');
+            circle.setAttribute('fill', '#FF0000');
+            circle.setAttribute('class', 'carei-map__pin');
+            circle.setAttribute('data-city', pin.city);
+            circle.setAttribute('data-address', pin.address || '');
+
+            circle.addEventListener('mouseenter', function () {
+                showTooltip(pin, circle);
+            });
+            circle.addEventListener('mouseleave', function () {
+                if (activePin !== circle) {
+                    hideTooltip();
+                }
+            });
+            circle.addEventListener('click', function (e) {
+                e.stopPropagation();
+                if (activePin === circle) {
+                    activePin = null;
+                    circle.classList.remove('carei-map__pin--active');
+                    hideTooltip();
+                } else {
+                    if (activePin) activePin.classList.remove('carei-map__pin--active');
+                    activePin = circle;
+                    circle.classList.add('carei-map__pin--active');
+                    showTooltip(pin, circle);
+                }
+            });
+
+            pinsGroup.appendChild(circle);
+        });
+
+        // Click outside closes tooltip
+        document.addEventListener('click', function () {
+            if (activePin) {
+                activePin.classList.remove('carei-map__pin--active');
+                activePin = null;
+                hideTooltip();
+            }
+        });
+
+        function showTooltip(pin, circle) {
+            // Build tooltip text: address lines + bold city
+            var addr = pin.address || '';
+            var lines = addr ? addr.replace(/\\n/g, '\n') : pin.city;
+            tooltipContent.textContent = '';
+
+            // If address has postal code, format nicely
+            if (addr) {
+                tooltipContent.innerHTML = addr.replace(/\n/g, '<br>');
+            } else {
+                tooltipContent.textContent = pin.city;
+            }
+
+            // Position tooltip relative to map container
+            var svgRect = svg.getBoundingClientRect();
+            var mapRect = mapEl.getBoundingClientRect();
+            var svgWidth = svg.viewBox.baseVal.width || 600;
+            var svgHeight = svg.viewBox.baseVal.height || 570;
+            var scaleX = svgRect.width / svgWidth;
+            var scaleY = svgRect.height / svgHeight;
+
+            var left = (svgRect.left - mapRect.left) + pin.x * scaleX;
+            var top = (svgRect.top - mapRect.top) + pin.y * scaleY;
+
+            tooltip.style.display = 'block';
+            tooltip.style.left = left + 'px';
+            tooltip.style.top = top + 'px';
+        }
+
+        function hideTooltip() {
+            tooltip.style.display = 'none';
+        }
    }

    if (document.readyState === 'loading') {