Files
landingpage-haus-schleusingen/app/Controllers/LocaleSwitcher.php
Hermes 391985cd42 fix(flags): replace hand-coded inline SVGs with official flag-icons assets
The previous inline flag SVGs were visually broken — most notably the
'en' Union Jack, which was reduced to a single X plus a cross and did
not resemble the real flag at all. The 'de' and 'ru' stripes also had
slight off-by-pixel rounding errors.

Switched to lipis/flag-icons (CC-BY 4.0) shipped as static files under
public/img/flags/. These are the canonical, professionally-designed
flag icons with correct proportions and all the details of the real
flags. Loaded via plain <img> tags (no JS, no external CDN at
runtime, no FOUC, no extra request after the page is cached).

Locale code mapping: en -> gb (per ADR-002, en = en-GB). Unknown
locales fall back to a 1x1 transparent gif so the layout stays
intact.
2026-06-04 19:43:23 +00:00

151 lines
5.2 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?php
declare(strict_types=1);
namespace App\Controllers;
use App\Core\I18n;
use App\Core\Locale;
/**
* Renders the language switcher widget. Pure HTML generation — no
* side effects, no header writing.
*
* Single <details>-based dropdown shown at every viewport. The
* trigger is a flag-sized button (24×16 SVG + tiny caret) that
* opens to a menu of all 4 supported locales.
*
* Each menu option gets:
* - an inline 24×16 SVG flag,
* - `hreflang` and `lang` for SEO and screen readers,
* - `aria-current="true"` on the active option.
*
* The active option is rendered as a <span> (not a link) so it
* cannot be reactivated. The trigger and every menu option are
* ≥44px touch targets via CSS.
*/
final class LocaleSwitcher
{
public function __construct(
private readonly string $currentLocale,
private readonly string $currentPath,
) {
}
public function render(): string
{
$path = $this->sanitisePath($this->currentPath);
$ariaLabel = htmlspecialchars(
I18n::t('locale.switcher.aria', [], $this->currentLocale),
ENT_QUOTES,
'UTF-8',
);
$currentName = htmlspecialchars(
I18n::t('locale.' . $this->currentLocale, [], $this->currentLocale),
ENT_QUOTES,
'UTF-8',
);
$currentCode = htmlspecialchars($this->currentLocale, ENT_QUOTES, 'UTF-8');
$currentFlag = self::flagImg($this->currentLocale);
$html = '<details class="locale-switcher">';
$html .= '<summary class="locale-switcher__trigger"'
. ' aria-label="' . $ariaLabel . '"'
. ' title="' . $currentName . '"'
. '>';
$html .= '<span class="locale-switcher__current" lang="' . $currentCode . '">';
$html .= $currentFlag;
$html .= '</span>';
$html .= '<span class="locale-switcher__caret" aria-hidden="true">▾</span>';
$html .= '</summary>';
$html .= '<ul class="locale-switcher__menu" role="list">';
foreach (Locale::SUPPORTED as $code) {
$isCurrent = $code === $this->currentLocale;
$name = htmlspecialchars(
I18n::t('locale.' . $code, [], $this->currentLocale),
ENT_QUOTES,
'UTF-8',
);
$codeAttr = htmlspecialchars($code, ENT_QUOTES, 'UTF-8');
$flag = self::flagImg($code);
$html .= '<li>';
if ($isCurrent) {
$html .= '<span class="locale-switcher__option is-current"'
. ' aria-current="true"'
. ' lang="' . $codeAttr . '">'
. $flag
. '<span class="locale-switcher__label">' . $name . '</span>'
. '</span>';
} else {
$url = '/locale?set=' . rawurlencode($code) . '&amp;return=' . rawurlencode($path);
$html .= '<a class="locale-switcher__option"'
. ' href="' . $url . '"'
. ' hreflang="' . $codeAttr . '"'
. ' lang="' . $codeAttr . '"'
. ' rel="alternate"'
. '>'
. $flag
. '<span class="locale-switcher__label">' . $name . '</span>'
. '</a>';
}
$html .= '</li>';
}
$html .= '</ul>';
$html .= '</details>';
return $html;
}
/**
* Country flag for the given locale. Renders a 24×18 <img>
* pointing at the official flag-icons SVG asset shipped under
* public/img/flags/. 4:3 aspect (de/gb/ua/ru), crisp at any DPI,
* no external CDN dependency.
*
* Decorative: `alt=""` (the visible locale-switcher label and
* the <a>'s `hreflang`/`lang` carry the accessible name).
*/
public static function flagImg(string $locale): string
{
$src = self::flagSource($locale);
return '<img class="flag" src="' . $src . '" alt="" width="24" height="18" loading="lazy" decoding="async">';
}
/**
* Map our locale codes to flag-icons file names. Locale "en"
* is en-GB per ADR-002, so the asset is "gb.svg". Anything we
* do not know falls back to a transparent 1×1 gif so the layout
* stays intact and the alt text (from the surrounding <a>) is
* the only signal.
*/
private static function flagSource(string $locale): string
{
$file = match ($locale) {
'de' => 'de',
'en' => 'gb',
'uk' => 'ua',
'ru' => 'ru',
default => null,
};
if ($file === null) {
return 'data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAACAkQBADs=';
}
return '/img/flags/' . $file . '.svg';
}
/**
* Make sure the path is safe to embed as a query string value and
* a redirect target. Drops query/fragment, keeps only the path.
*/
private function sanitisePath(string $path): string
{
$path = parse_url($path, PHP_URL_PATH) ?: '/';
if ($path === '' || $path[0] !== '/') {
return '/';
}
return $path;
}
}