
(function () { var open = false; var movingIds = [ "about", "tiktok", "instagram", "youtube" ]; var optionIds = [ "tip-option-1", "tip-option-2" ]; var baseTransforms = {}; var optionBaseTransforms = {}; function get(id) { return document.getElementById(id); } function isInside(element, target) { return element === target || element.contains(target); } function getCssVar(name, fallback) { var value = getComputedStyle(document.documentElement).getPropertyValue(name); return value.trim() || fallback; } function isMobile() { return window.matchMedia("(max-width: 600px)").matches; } function getShiftAmount() { return isMobile() ? getCssVar("--tip-shift-mobile", "55px") : getCssVar("--tip-shift-desktop", "55px"); } function getDropdownGap() { return isMobile() ? getCssVar("--tip-dropdown-mobile-gap", "30px") : getCssVar("--tip-dropdown-desktop-gap", "35px"); } function saveBaseTransforms() { movingIds.forEach(function (id) { var el = get(id); if (!el) return; if (!(id in baseTransforms)) { var current = getComputedStyle(el).transform; baseTransforms[id] = current && current !== "none" ? current : ""; } }); optionIds.forEach(function (id) { var el = get(id); if (!el) return; if (!(id in optionBaseTransforms)) { var current = getComputedStyle(el).transform; optionBaseTransforms[id] = current && current !== "none" ? current : ""; } }); } function moveLowerButtonsDown() { var shift = getShiftAmount(); movingIds.forEach(function (id) { var el = get(id); if (!el) return; var base = baseTransforms[id] || ""; el.style.transform = base + " translateY(" + shift + ")"; }); } function moveLowerButtonsBack() { movingIds.forEach(function (id) { var el = get(id); if (!el) return; el.style.transform = baseTransforms[id] || ""; }); } function moveDropdownOptionsToOpenPosition() { var gap = getDropdownGap(); optionIds.forEach(function (id) { var el = get(id); if (!el) return; var base = optionBaseTransforms[id] || ""; el.style.transform = base + " translateY(" + gap + ")"; el.style.opacity = "1"; }); } function moveDropdownOptionsToClosedPosition() { var gap = getDropdownGap(); optionIds.forEach(function (id) { var el = get(id); if (!el) return; var base = optionBaseTransforms[id] || ""; el.style.transform = base + " translateY(calc(" + gap + " - 10px))"; el.style.opacity = "0"; }); } function openTips() { var option1 = get("tip-option-1"); var option2 = get("tip-option-2"); if (!option1 || !option2) return; saveBaseTransforms(); option1.classList.add("tip-open"); option2.classList.add("tip-open"); moveDropdownOptionsToClosedPosition(); setTimeout(function () { moveDropdownOptionsToOpenPosition(); moveLowerButtonsDown(); }, 20); open = true; } function closeTips() { var option1 = get("tip-option-1"); var option2 = get("tip-option-2"); if (!option1 || !option2) return; moveDropdownOptionsToClosedPosition(); moveLowerButtonsBack(); setTimeout(function () { option1.classList.remove("tip-open"); option2.classList.remove("tip-open"); option1.style.transform = optionBaseTransforms["tip-option-1"] || ""; option2.style.transform = optionBaseTransforms["tip-option-2"] || ""; }, 180); open = false; } document.addEventListener("click", function (event) { var toggle = get("tip-toggle"); var option1 = get("tip-option-1"); var option2 = get("tip-option-2"); if (!toggle) return; if (isInside(toggle, event.target)) { event.preventDefault(); event.stopPropagation(); if (open) { closeTips(); } else { openTips(); } return; } if ( (option1 && isInside(option1, event.target)) || (option2 && isInside(option2, event.target)) ) { return; } if (open) { closeTips(); } }, true); window.addEventListener("resize", function () { if (open) { moveDropdownOptionsToOpenPosition(); moveLowerButtonsDown(); } }); })();