studiocms
Version:
Astro Native CMS for AstroDB. Built from the ground up by the Astro community.
146 lines (145 loc) • 4.57 kB
JavaScript
import {
browser,
createI18n,
formatter,
localeFrom
} from "@nanostores/i18n";
import { persistentAtom } from "@nanostores/persistent";
import {
baseServerTranslations,
clientUiTranslations,
defaultLang,
uiTranslationsAvailable
} from "./config.js";
const baseTranslation = baseServerTranslations.translations;
const localeMap = clientUiTranslations;
const $localeSettings = persistentAtom(
"studiocms-i18n-locale",
defaultLang
);
const $locale = localeFrom(
$localeSettings,
// User’s locale from localStorage
browser({
// or browser’s locale auto-detect
available: uiTranslationsAvailable,
fallback: defaultLang
})
);
const format = formatter($locale);
const $i18n = createI18n($locale, {
baseLocale: defaultLang,
/* v8 ignore start */
get: async (code) => {
return localeMap[code] ?? localeMap[defaultLang];
}
/* v8 ignore stop */
});
const documentUpdater = (comp, lang) => {
document.title = comp.title;
document.querySelector('meta[name="description"]')?.setAttribute("content", comp.description);
document.documentElement.lang = lang;
};
const makeTranslation = (currentPage, i18n) => {
const currentTranslations = currentPage;
return class Translation extends HTMLElement {
connectedCallback() {
const key = this.getAttribute("key");
if (key) {
i18n.subscribe((comp) => {
this.innerText = comp[key];
});
}
}
};
};
const requiredLabelRegex = /.*?<span class="req-star.*?>\*<\/span>/;
const updateElmLabel = (el, translation) => {
const label = document.querySelector(`label[for="${el}"]`)?.querySelector(".label");
if (requiredLabelRegex.test(label.innerHTML)) {
label.innerHTML = `${translation} <span class="req-star">*</span>`;
return;
}
label.textContent = translation;
};
const updateElmPlaceholder = (el, translation) => {
const input = document.querySelector(`#${el}`);
input.placeholder = translation;
};
const updateSelectElmLabel = (el, translation) => {
const label = document.querySelector(
`label[for="${el}-select-btn"]`
);
if (requiredLabelRegex.test(label.innerHTML)) {
label.innerHTML = `${translation} <span class="req-star">*</span>`;
return;
}
label.textContent = translation;
};
const updateTrueFalseSelectOptions = (el, t) => {
const ul = document.querySelector(`#${el}-dropdown`);
if (!ul) return;
const trueOption = ul.querySelector('li[value="true"]');
const falseOption = ul.querySelector('li[value="false"]');
if (trueOption) trueOption.textContent = t.true;
if (falseOption) falseOption.textContent = t.false;
const selected = ul.querySelector("li.selected");
const currentValueSpan = document.querySelector(`#${el}-value-span`);
const selectedValue = selected?.getAttribute("value");
if (currentValueSpan && selectedValue) {
currentValueSpan.textContent = selectedValue === "true" ? t.true : t.false;
}
};
const updateSelectOptions = (el, t) => {
const ul = document.querySelector(`#${el}-dropdown`);
if (!ul) return;
for (const key in t) {
const option = ul.querySelector(`li[value="${key}"]`);
if (option) option.textContent = t[key];
}
const selected = ul.querySelector("li.selected");
const currentValueSpan = document.querySelector(`#${el}-value-span`);
const selectedValue = selected?.getAttribute("value");
if (currentValueSpan && selectedValue) {
currentValueSpan.textContent = t[selectedValue];
}
};
function updateTabLabel(id, label) {
const tab = document.querySelector(`button[data-tab-child="${id}"]`);
if (!tab) return;
const tabSpan = tab.querySelector("span");
if (tabSpan) tabSpan.textContent = label;
}
const updateToggleElmLabel = (el, translation) => {
const label = document.querySelector(`label[for="${el}"]`);
const span = label.querySelector(`#label-${el}`);
if (requiredLabelRegex.test(span.innerHTML)) {
span.innerHTML = `${translation} <span class="req-star">*</span>`;
return;
}
span.textContent = translation;
};
const pageHeaderUpdater = (translation) => {
const pageHeader = document.querySelector(".page-header");
const header = pageHeader.querySelector(".page-title");
header.textContent = translation;
};
export {
$i18n,
$locale,
$localeSettings,
baseTranslation,
defaultLang,
documentUpdater,
format,
makeTranslation,
pageHeaderUpdater,
uiTranslationsAvailable,
updateElmLabel,
updateElmPlaceholder,
updateSelectElmLabel,
updateSelectOptions,
updateTabLabel,
updateToggleElmLabel,
updateTrueFalseSelectOptions
};