mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-22 07:46:17 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

add translation selector and fix translation of data-attributes

Browse source
This commit is contained in:
schlagmichdoch 2023-08-30 14:57:40 +02:00
parent 19f56a8499
commit 17afa18d84
18 changed files with 312 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

49
public_included_ws_fallback/scripts/localization.js
View file

@ -5,12 +5,19 @@ class Localization {
Localization.translations = {};
Localization.defaultTranslations = {};
const initialLocale = Localization.supportedOrDefault(navigator.languages);
Localization.systemLocale = Localization.supportedOrDefault(navigator.languages);
Localization.setLocale(initialLocale)
let storedLanguageCode = localStorage.getItem("language-code");
Localization.initialLocale = storedLanguageCode && Localization.isSupported(storedLanguageCode)
? storedLanguageCode
: Localization.systemLocale;
Localization.setTranslation(Localization.initialLocale)
.then(_ => {
Localization.translatePage();
})
console.log("Initial translation successful.");
Events.fire("translation-loaded");
});
}
static isSupported(locale) {
@ -21,10 +28,20 @@ class Localization {
return locales.find(Localization.isSupported) || Localization.defaultLocale;
}
static async setTranslation(locale) {
if (!locale) locale = Localization.systemLocale;
await Localization.setLocale(locale)
await Localization.translatePage();
console.log("Page successfully translated",
`System language: ${Localization.systemLocale}`,
`Selected language: ${locale}`
);
}
static async setLocale(newLocale) {
if (newLocale === Localization.locale) return false;
const isFirstTranslation = !Localization.locale
Localization.defaultTranslations = await Localization.fetchTranslationsFor(Localization.defaultLocale);
@ -34,10 +51,14 @@ class Localization {
Localization.locale = newLocale;
Localization.translations = newTranslations;
}
if (isFirstTranslation) {
Events.fire("translation-loaded");
}
static getLocale() {
return Localization.locale;
}
static isSystemLocale() {
return !localStorage.getItem('language-code');
}
static async fetchTranslationsFor(newLocale) {
@ -48,7 +69,7 @@ class Localization {
return await response.json();
}
static translatePage() {
static async translatePage() {
document
.querySelectorAll("[data-i18n-key]")
.forEach(element => Localization.translateElement(element));
@ -63,10 +84,14 @@ class Localization {
if (attr === "text") {
element.innerText = Localization.getTranslation(key);
} else {
element.setAttribute(attr, Localization.getTranslation(key, attr));
if (attr.startsWith("data-")) {
let dataAttr = attr.substring(5);
element.dataset.dataAttr = Localization.getTranslation(key, attr);
} {
element.setAttribute(attr, Localization.getTranslation(key, attr));
}
}
}
}
static getTranslation(key, attr, data, useDefault=false) {

55
public_included_ws_fallback/scripts/ui.js
View file

@ -45,6 +45,8 @@ class PeersUI {
this.$displayName = $('display-name');
this.$displayName.setAttribute("placeholder", this.$displayName.dataset.placeholder);
this.$displayName.addEventListener('keydown', e => this._onKeyDownDisplayName(e));
this.$displayName.addEventListener('keyup', e => this._onKeyUpDisplayName(e));
this.$displayName.addEventListener('blur', e => this._saveDisplayName(e.target.innerText));
@ -614,6 +616,58 @@ class Dialog {
}
}
class LanguageSelectDialog extends Dialog {
constructor() {
super('language-select-dialog');
this.$languageSelectBtn = $('language-selector');
this.$languageSelectBtn.addEventListener('click', _ => this.show());
this.$languageButtons = this.$el.querySelectorAll(".language-buttons button");
this.$languageButtons.forEach($btn => {
$btn.addEventListener("click", e => this.selectLanguage(e));
})
Events.on('keydown', e => this._onKeyDown(e));
}
_onKeyDown(e) {
if (this.isShown() && e.code === "Escape") {
this.hide();
}
}
show() {
if (Localization.isSystemLocale()) {
this.$languageButtons[0].focus();
} else {
let locale = Localization.getLocale();
for (let i=0; i<this.$languageButtons.length; i++) {
const $btn = this.$languageButtons[i];
if ($btn.value === locale) {
$btn.focus();
break;
}
}
}
super.show();
}
selectLanguage(e) {
e.preventDefault()
let languageCode = e.target.value;
if (languageCode) {
localStorage.setItem('language-code', languageCode);
} else {
localStorage.removeItem('language-code');
}
Localization.setTranslation(languageCode)
.then(_ => this.hide());
}
}
class ReceiveDialog extends Dialog {
constructor(id) {
super(id);
@ -2256,6 +2310,7 @@ class PairDrop {
const server = new ServerConnection();
const peers = new PeersManager(server);
const peersUI = new PeersUI();
const languageSelectDialog = new LanguageSelectDialog();
const receiveFileDialog = new ReceiveFileDialog();
const receiveRequestDialog = new ReceiveRequestDialog();
const sendTextDialog = new SendTextDialog();