language-management-lib
Version:
A TypeScript library for managing language translations in applications with URL parameter support.
118 lines (117 loc) • 4.55 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.languageManager = void 0;
exports.createLanguageSelector = createLanguageSelector;
exports.updateContent = updateContent;
const SetLanguage_1 = __importDefault(require("../core/SetLanguage"));
const types_1 = require("../core/types");
const languageManager = new SetLanguage_1.default(types_1.lng, "en");
exports.languageManager = languageManager;
function createLanguageSelector() {
const container = document.createElement("div");
container.style.margin = "20px";
const title = document.createElement("h3");
title.textContent = "Language Selector";
container.appendChild(title);
const buttonsContainer = document.createElement("div");
buttonsContainer.style.marginBottom = "20px";
languageManager.getAvailableLanguages().forEach((lang) => {
const button = document.createElement("button");
button.textContent = lang.toUpperCase();
button.style.margin = "5px";
button.style.padding = "8px 16px";
button.style.borderRadius = "4px";
button.style.border = "1px solid #ccc";
button.style.cursor = "pointer";
const updateButtonStyle = () => {
if (languageManager.getCurrentLanguage() === lang) {
button.style.backgroundColor = "#007bff";
button.style.color = "white";
}
else {
button.style.backgroundColor = "#f8f9fa";
button.style.color = "black";
}
};
updateButtonStyle();
button.addEventListener("click", () => {
languageManager.setLanguage(lang, true);
updateButtonStyle();
updateContent();
buttonsContainer.querySelectorAll("button").forEach((btn) => {
var _a;
const btnLang = (_a = btn.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase();
if (btnLang === languageManager.getCurrentLanguage()) {
btn.style.backgroundColor = "#007bff";
btn.style.color = "white";
}
else {
btn.style.backgroundColor = "#f8f9fa";
btn.style.color = "black";
}
});
});
buttonsContainer.appendChild(button);
});
container.appendChild(buttonsContainer);
return container;
}
function createContentArea() {
const container = document.createElement("div");
container.id = "content-area";
container.style.margin = "20px";
container.style.padding = "20px";
container.style.border = "1px solid #ddd";
container.style.borderRadius = "8px";
return container;
}
function updateContent() {
const contentArea = document.getElementById("content-area");
if (!contentArea)
return;
contentArea.innerHTML = `
<h1>${languageManager.translate("welcome")}</h1>
<p>${languageManager.translate("description")}</p>
<button style="
background-color: #28a745;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
">${languageManager.translate("login")}</button>
<button style="
background-color: #dc3545;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
">${languageManager.translate("logout")}</button>
<hr style="margin: 20px 0;">
<p><strong>Current Language:</strong> ${languageManager.getCurrentLanguage()}</p>
<p><strong>Available Languages:</strong> ${languageManager
.getAvailableLanguages()
.join(", ")}</p>
`;
}
if (typeof document !== "undefined") {
document.addEventListener("DOMContentLoaded", () => {
const appContainer = document.getElementById("app") || document.body;
const title = document.createElement("h1");
title.textContent = "Language Management Library Demo";
title.style.textAlign = "center";
title.style.color = "#333";
appContainer.appendChild(title);
appContainer.appendChild(createLanguageSelector());
appContainer.appendChild(createContentArea());
updateContent();
window.addEventListener("popstate", () => {
updateContent();
});
});
}