rajch_ales/MaalFlows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use flag images for widget language select

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+5 -2
View File
@@ -252,12 +252,15 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
z-index: 1; z-index: 1;
left: 12px; left: 12px;
top: 50%; top: 50%;
width: 22px; width: 18px;
height: 13px;
transform: translateY(-50%); transform: translateY(-50%);
font-size: 17px;
line-height: 1; line-height: 1;
pointer-events: none; pointer-events: none;
} }
.selected-language-flag .flag-image {
display: block;
}
.effect-settings .full-row { .effect-settings .full-row {
display: grid; display: grid;
align-items: stretch; align-items: stretch;
public/admin.js
+11 -3
View File
@@ -461,7 +461,7 @@ function renderSite() {
function renderWidgetLanguageOptions(form, settings) { function renderWidgetLanguageOptions(form, settings) {
const language = settings.widgetLanguage || {}; const language = settings.widgetLanguage || {};
const options = WIDGET_LANGUAGES 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(""); .join("");
form.defaultLanguage.innerHTML = options; form.defaultLanguage.innerHTML = options;
form.widgetLanguageMode.value = language.mode === "fixed" ? "default" : language.mode || "auto"; form.widgetLanguageMode.value = language.mode === "fixed" ? "default" : language.mode || "auto";
@@ -470,13 +470,18 @@ function renderWidgetLanguageOptions(form, settings) {
} }
function languageFlag(language) { function languageFlag(language) {
const countryCode = languageCountryCode(language);
return countryCode ? flagEmoji(countryCode) : "";
}
function languageCountryCode(language) {
const countries = { const countries = {
cs: "CZ", sk: "SK", en: "GB", de: "DE", pl: "PL", hu: "HU", ro: "RO", bg: "BG", hr: "HR", sl: "SI", 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", 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", 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" mt: "MT", ga: "IE", is: "IS", be: "BY", ca: "ES"
}; };
return flagEmoji(countries[language] || language); return countries[language] || "";
} }
function flagEmoji(countryCode) { function flagEmoji(countryCode) {
@@ -489,7 +494,10 @@ function updateDefaultLanguageFlag() {
const flag = $("#defaultLanguageFlag"); const flag = $("#defaultLanguageFlag");
const select = $("#settingsForm")?.defaultLanguage; const select = $("#settingsForm")?.defaultLanguage;
if (!flag || !select) return; 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) { function renderWidgetCopyFields(language) {