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

Use custom flag language picker

Browse Source
This commit is contained in:
rajchales-monito
2026-07-30 09:52:16 +02:00
parent 67fb0e6fc4
commit a479a3c08d
3 changed files with 143 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.js
+63 -17
View File
@@ -114,9 +114,26 @@ $("#settingsForm").brandHex.addEventListener("input", (event) => {
if (color) $("#settingsForm").brand.value = color;
});
$("#settingsForm").defaultLanguage.addEventListener("change", () => {
updateDefaultLanguageFlag();
updateDefaultLanguagePicker();
renderWidgetCopyFields($("#settingsForm").defaultLanguage.value);
});
$("#defaultLanguagePicker").addEventListener("click", (event) => {
event.stopPropagation();
toggleDefaultLanguageMenu();
});
$("#defaultLanguageMenu").addEventListener("click", (event) => {
const option = event.target.closest("[data-language-option]");
if (!option) return;
$("#settingsForm").defaultLanguage.value = option.dataset.languageOption;
$("#settingsForm").defaultLanguage.dispatchEvent(new Event("change", { bubbles: true }));
closeDefaultLanguageMenu();
});
document.addEventListener("click", (event) => {
if (!event.target.closest(".language-select")) closeDefaultLanguageMenu();
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") closeDefaultLanguageMenu();
});
window.addEventListener("focus", syncAttentionWithUnread);
document.addEventListener("visibilitychange", () => {
@@ -464,14 +481,12 @@ function renderWidgetLanguageOptions(form, settings) {
.map(([code, label]) => `<option value="${code}">${code.toUpperCase()} - ${escapeHtml(label)}</option>`)
.join("");
form.defaultLanguage.innerHTML = options;
$("#defaultLanguageMenu").innerHTML = WIDGET_LANGUAGES
.map(([code, label]) => languageOptionHtml(code, label))
.join("");
form.widgetLanguageMode.value = language.mode === "fixed" ? "default" : language.mode || "auto";
form.defaultLanguage.value = language.defaultLanguage || "cs";
updateDefaultLanguageFlag();
}
function languageFlag(language) {
const countryCode = languageCountryCode(language);
return countryCode ? flagEmoji(countryCode) : "";
updateDefaultLanguagePicker();
}
function languageCountryCode(language) {
@@ -484,20 +499,51 @@ function languageCountryCode(language) {
return countries[language] || "";
}
function flagEmoji(countryCode) {
function flagImageHtml(countryCode) {
const code = String(countryCode || "").toUpperCase();
if (!/^[A-Z]{2}$/.test(code)) return "";
return [...code].map((letter) => String.fromCodePoint(127397 + letter.charCodeAt(0))).join("");
if (!/^[A-Z]{2}$/.test(code)) return `<span class="flag-image">?</span>`;
return `<span class="flag-image" style="background-image:url('https://flagcdn.com/24x18/${code.toLowerCase()}.png')" aria-hidden="true"></span>`;
}
function updateDefaultLanguageFlag() {
const flag = $("#defaultLanguageFlag");
function languageOptionHtml(language, label) {
const countryCode = languageCountryCode(language);
return `
<button class="language-option" type="button" role="option" data-language-option="${language}">
${flagImageHtml(countryCode)}
<span>${language.toUpperCase()} - ${escapeHtml(label)}</span>
</button>
`;
}
function updateDefaultLanguagePicker() {
const picker = $("#defaultLanguagePicker");
const menu = $("#defaultLanguageMenu");
const select = $("#settingsForm")?.defaultLanguage;
if (!flag || !select) return;
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>`
: "";
if (!picker || !select) return;
const language = select.value || "cs";
const item = WIDGET_LANGUAGES.find(([code]) => code === language) || WIDGET_LANGUAGES[0];
picker.innerHTML = `${flagImageHtml(languageCountryCode(language))}<span>${item[0].toUpperCase()} - ${escapeHtml(item[1])}</span>`;
if (menu) {
menu.querySelectorAll("[data-language-option]").forEach((option) => {
option.classList.toggle("active", option.dataset.languageOption === language);
});
}
}
function toggleDefaultLanguageMenu() {
const menu = $("#defaultLanguageMenu");
const picker = $("#defaultLanguagePicker");
const isOpen = menu && !menu.classList.contains("hidden");
if (isOpen) closeDefaultLanguageMenu();
else {
menu?.classList.remove("hidden");
picker?.setAttribute("aria-expanded", "true");
}
}
function closeDefaultLanguageMenu() {
$("#defaultLanguageMenu")?.classList.add("hidden");
$("#defaultLanguagePicker")?.setAttribute("aria-expanded", "false");
}
function renderWidgetCopyFields(language) {