Use flag images for widget language select

This commit is contained in:
rajchales-monito
2026-07-30 09:47:33 +02:00
parent 3cc980debd
commit b4ec4e3757
2 changed files with 16 additions and 5 deletions
+5 -2
View File
@@ -252,12 +252,15 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
z-index: 1;
left: 12px;
top: 50%;
width: 22px;
width: 18px;
height: 13px;
transform: translateY(-50%);
font-size: 17px;
line-height: 1;
pointer-events: none;
}
.selected-language-flag .flag-image {
display: block;
}
.effect-settings .full-row {
display: grid;
align-items: stretch;
+11 -3
View File
@@ -461,7 +461,7 @@ function renderSite() {
function renderWidgetLanguageOptions(form, settings) {
const language = settings.widgetLanguage || {};
const options = WIDGET_LANGUAGES
.map(([code, label]) => `<option value="${code}">${languageFlag(code)} ${code.toUpperCase()} - ${escapeHtml(label)}</option>`)
.map(([code, label]) => `<option value="${code}">${code.toUpperCase()} - ${escapeHtml(label)}</option>`)
.join("");
form.defaultLanguage.innerHTML = options;
form.widgetLanguageMode.value = language.mode === "fixed" ? "default" : language.mode || "auto";
@@ -470,13 +470,18 @@ function renderWidgetLanguageOptions(form, settings) {
}
function languageFlag(language) {
const countryCode = languageCountryCode(language);
return countryCode ? flagEmoji(countryCode) : "";
}
function languageCountryCode(language) {
const countries = {
cs: "CZ", sk: "SK", en: "GB", de: "DE", pl: "PL", hu: "HU", ro: "RO", bg: "BG", hr: "HR", sl: "SI",
it: "IT", fr: "FR", es: "ES", pt: "PT", nl: "NL", da: "DK", sv: "SE", fi: "FI", no: "NO", et: "EE",
lv: "LV", lt: "LT", el: "GR", uk: "UA", ru: "RU", tr: "TR", sr: "RS", bs: "BA", sq: "AL", mk: "MK",
mt: "MT", ga: "IE", is: "IS", be: "BY", ca: "ES"
};
return flagEmoji(countries[language] || language);
return countries[language] || "";
}
function flagEmoji(countryCode) {
@@ -489,7 +494,10 @@ function updateDefaultLanguageFlag() {
const flag = $("#defaultLanguageFlag");
const select = $("#settingsForm")?.defaultLanguage;
if (!flag || !select) return;
flag.textContent = languageFlag(select.value || "cs");
const countryCode = languageCountryCode(select.value || "cs");
flag.innerHTML = countryCode
? `<span class="flag-image" style="background-image:url('https://flagcdn.com/24x18/${countryCode.toLowerCase()}.png')" aria-hidden="true"></span>`
: "";
}
function renderWidgetCopyFields(language) {