/* ===== FTAPI HC – Sprachumschalter (HEADER) & EN-Linkübersetzung ===== */ (function () { 'use strict'; if (window.__ftapiLangBooted) return; // PF führt das Feld pro SPA-Nav neu aus window.__ftapiLangBooted = true; var LANG_KEY = 'ftapi_hc_lang'; function seg() { return location.pathname.split('/')[1] || 'de'; } function swapPath(to) { return '/' + to + location.pathname.slice(3) + location.search + location.hash; } /* 1. Einmalige Auto-Spracherkennung */ function autoRedirect() { if (localStorage.getItem(LANG_KEY)) return; // manuelle Wahl hat Vorrang var bl = (navigator.language || 'de').toLowerCase(); if (bl.indexOf('en') === 0 && seg() === 'de') { localStorage.setItem(LANG_KEY, 'en'); location.replace(swapPath('en')); } } /* 2. "Zur FTAPI Webseite" <-> "To the FTAPI website" (Icon/URL bleiben) */ function translateChrome() { var lang = seg(); var target = lang === 'en' ? 'To the FTAPI website' : 'Zur FTAPI Webseite'; document.querySelectorAll('a[href="https://www.ftapi.com"]').forEach(function (a) { var tn = null; a.childNodes.forEach(function (n) { if (n.nodeType === 3 && n.textContent.trim()) tn = n; }); if (tn) { if (tn.textContent.trim() !== target) tn.textContent = target; } else if (lang === 'en') { a.appendChild(document.createTextNode(target)); } // EN: PF lässt Text weg }); } /* 3. Switcher im Header (Dropdown öffnet nach unten) */ function injectStyles() { if (document.getElementById('ftapi-lang-css')) return; var s = document.createElement('style'); s.id = 'ftapi-lang-css'; s.textContent = '.ftapi-pf-hide{display:none!important}#ftapi-lang-wrap{position:relative;display:inline-flex;align-items:center;align-self:center}#ftapi-lang-trigger{display:flex;align-items:center;gap:7px;padding:7px 14px;background:#1C9045;color:#fff;border-radius:5px;cursor:pointer;font-size:13px;font-weight:500;line-height:1;user-select:none;transition:background .15s;white-space:nowrap}#ftapi-lang-trigger:hover{background:#157a38}#ftapi-lang-chev{font-size:9px;transition:transform .2s}#ftapi-lang-trigger.open #ftapi-lang-chev{transform:rotate(180deg)}#ftapi-lang-menu{display:none;position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);background:#fff;border:1px solid #d1d5db;border-radius:5px;box-shadow:0 6px 20px rgba(0,0,0,.13);min-width:155px;list-style:none;padding:5px 0;margin:0;z-index:9999}#ftapi-lang-menu.open{display:block}#ftapi-lang-menu li{padding:9px 16px;cursor:pointer;color:#374151;font-size:13px;white-space:nowrap}#ftapi-lang-menu li:hover{background:#f3f4f6}#ftapi-lang-menu li.active{font-weight:600;color:#1C9045}#ftapi-lang-menu li.active::after{content:"\\2713";margin-left:auto;color:#1C9045}'; (document.head || document.documentElement).appendChild(s); } function buildNode() { var lang = seg(); var wrap = document.createElement('div'); wrap.id = 'ftapi-lang-wrap'; var menu = document.createElement('ul'); menu.id = 'ftapi-lang-menu'; menu.innerHTML = '

Deutsch

' + '

English

'; var trigger = document.createElement('div'); trigger.id = 'ftapi-lang-trigger'; trigger.innerHTML = '' + '' + (lang === 'en' ? 'English' : 'Deutsch') + '' + ''; wrap.appendChild(trigger); wrap.appendChild(menu); trigger.addEventListener('click', function (e) { e.stopPropagation(); var o = menu.classList.toggle('open'); trigger.classList.toggle('open', o); }); menu.addEventListener('click', function (e) { var li = e.target.closest('li[data-lang]'); if (!li) return; var to = li.dataset.lang; menu.classList.remove('open'); trigger.classList.remove('open'); if (to !== seg()) { localStorage.setItem(LANG_KEY, to); location.href = swapPath(to); } }); return wrap; } // direktes Nav-Kind finden, das einen bestimmten Selektor enthält function navChildContaining(nav, sel) { var el = nav.querySelector(sel); while (el && el.parentElement !== nav) el = el.parentElement; return el; } /* Platzierung: direkt VOR den Homepage-/App-Link -> Switcher ist vorletztes Element, der Link bleibt ganz rechts. Fallback: vor das letzte Nav-Element. */ function place(nav, wrap) { var anchor = navChildContaining(nav, 'a[href="https://www.ftapi.com"]'); if (!anchor || anchor === wrap) { var items = [].slice.call(nav.children).filter(function (c) { return c !== wrap; }); anchor = items[items.length - 1]; } if (!anchor) { nav.appendChild(wrap); return; } if (wrap.parentElement !== nav || wrap.nextElementSibling !== anchor) nav.insertBefore(wrap, anchor); } function injectSwitcher() { var nav = document.querySelector('.desktop-area > div:last-child'); if (!nav) return; // PF-eigenen Footer-Switcher ausblenden (Switcher ist jetzt oben) var pf = document.querySelector('.footer.kb-footer .bg-primary-text'); if (pf && !pf.classList.contains('ftapi-pf-hide')) pf.classList.add('ftapi-pf-hide'); var wrap = document.getElementById('ftapi-lang-wrap'); if (wrap) { // schon da -> ggf. umplatzieren + syncen place(nav, wrap); var lang = seg(), label = document.getElementById('ftapi-lang-label'); if (label) label.textContent = lang === 'en' ? 'English' : 'Deutsch'; document.querySelectorAll('#ftapi-lang-menu li').forEach(function (li) { li.classList.toggle('active', li.dataset.lang === lang); }); return; } place(nav, buildNode()); } function applyAll() { translateChrome(); injectStyles(); injectSwitcher(); } function startObserver() { if (!document.body) return; // im ist body noch null var raf = false; new MutationObserver(function () { if (raf) return; raf = true; requestAnimationFrame(function () { raf = false; applyAll(); }); }).observe(document.body, { childList: true, subtree: true }); } function boot() { applyAll(); startObserver(); } // Schließen bei Klick außerhalb / Esc document.addEventListener('click', function () { var m = document.getElementById('ftapi-lang-menu'), t = document.getElementById('ftapi-lang-trigger'); if (m) m.classList.remove('open'); if (t) t.classList.remove('open'); }); document.addEventListener('keydown', function (e) { if (e.key === 'Escape') { var m = document.getElementById('ftapi-lang-menu'), t = document.getElementById('ftapi-lang-trigger'); if (m) m.classList.remove('open'); if (t) t.classList.remove('open'); } }); autoRedirect(); if (document.body) boot(); else document.addEventListener('DOMContentLoaded', boot); })();

📋 Maintenance template

Was this article helpful?