Use custom flag language picker
This commit is contained in:
rajchales-monito
+77
-13
@@ -247,22 +247,86 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.language-select select {
|
||||
padding-left: 42px;
|
||||
}
|
||||
.selected-language-flag {
|
||||
.native-language-select {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
width: 18px;
|
||||
height: 13px;
|
||||
transform: translateY(-50%);
|
||||
line-height: 1;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.selected-language-flag .flag-image {
|
||||
display: block;
|
||||
.language-picker {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
padding: 0 30px 0 11px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 7px;
|
||||
background: white;
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
}
|
||||
.language-picker::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 11px;
|
||||
top: 50%;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-right: 1px solid var(--muted);
|
||||
border-bottom: 1px solid var(--muted);
|
||||
transform: translateY(-50%);
|
||||
rotate: 45deg;
|
||||
}
|
||||
.language-picker span:last-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.language-menu {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
top: calc(100% + 5px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
max-height: 230px;
|
||||
overflow: auto;
|
||||
padding: 5px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
box-shadow: 0 14px 30px rgb(23 33 29 / 14%);
|
||||
}
|
||||
.language-option {
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
padding: 6px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
border: 0;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
}
|
||||
.language-option:hover,
|
||||
.language-option.active {
|
||||
background: #eaf6f1;
|
||||
color: var(--brand);
|
||||
}
|
||||
.language-option span:last-child {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.language-picker .flag-image,
|
||||
.language-option .flag-image {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.effect-settings .full-row {
|
||||
display: grid;
|
||||
|
||||
+3
-2
@@ -124,8 +124,9 @@
|
||||
</label>
|
||||
<label>Default
|
||||
<span class="language-select">
|
||||
<span id="defaultLanguageFlag" class="selected-language-flag" aria-hidden="true"></span>
|
||||
<select name="defaultLanguage"></select>
|
||||
<select name="defaultLanguage" class="native-language-select" tabindex="-1" aria-hidden="true"></select>
|
||||
<button id="defaultLanguagePicker" class="language-picker" type="button" aria-haspopup="listbox" aria-expanded="false"></button>
|
||||
<span id="defaultLanguageMenu" class="language-menu hidden" role="listbox"></span>
|
||||
</span>
|
||||
</label>
|
||||
<small>Auto pouzije jazyk ze stranky. Default je vychozi jazyk i zaloha.</small>
|
||||
|
||||
+63
-17
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user