From 241715e7accdf28472429e483592130afa523157 Mon Sep 17 00:00:00 2001 From: Thomas Rupprecht Date: Sat, 24 Dec 2022 21:23:31 +0100 Subject: [PATCH] add l10n --- _locales/de/messages.json | 43 ++++++++++++++++++++++++++++++ _locales/en/messages.json | 43 ++++++++++++++++++++++++++++++ manifest.json | 1 + src/background.js | 5 ++-- src/popup.html | 14 +++++----- src/popup.js | 55 +++++++++++++++++++++++++-------------- 6 files changed, 133 insertions(+), 28 deletions(-) create mode 100644 _locales/de/messages.json create mode 100644 _locales/en/messages.json diff --git a/_locales/de/messages.json b/_locales/de/messages.json new file mode 100644 index 0000000..6d8dc6c --- /dev/null +++ b/_locales/de/messages.json @@ -0,0 +1,43 @@ +{ + "loading": { + "message": "Lädt…" + }, + "currentState": { + "message": "Akuteller Status" + }, + "links": { + "message": "Links" + }, + "nextEvent": { + "message": "Nächstes Event" + }, + "spaceApiJson": { + "message": "Space-API JSON" + }, + "noEventsInNext4Weeks": { + "message": "Keine Termine in den nächsten 4 Wochen!" + }, + "openSince": { + "message": "Offen seit " + }, + "closedSince": { + "message": "Geschlossen seit " + }, + "stateNotificationTitle": { + "message": "Space Status" + }, + "stateNotificationMessage": { + "message": "Space ist jetzt $STATE$.", + "placeholders": { + "STATE" : { + "content" : "$1" + } + } + }, + "open": { + "message": "offen" + }, + "closed": { + "message": "geschlossen" + } +} diff --git a/_locales/en/messages.json b/_locales/en/messages.json new file mode 100644 index 0000000..81b5a70 --- /dev/null +++ b/_locales/en/messages.json @@ -0,0 +1,43 @@ +{ + "loading": { + "message": "Loading…" + }, + "currentState": { + "message": "Current State" + }, + "links": { + "message": "Links" + }, + "nextEvent": { + "message": "Next Event" + }, + "spaceApiJson": { + "message": "Space-API JSON" + }, + "noEventsInNext4Weeks": { + "message": "No Events in the next 4 weeks!" + }, + "openSince": { + "message": "Open since " + }, + "closedSince": { + "message": "Closed since " + }, + "stateNotificationTitle": { + "message": "Space State" + }, + "stateNotificationMessage": { + "message": "Space is now $STATE$.", + "placeholders": { + "STATE" : { + "content" : "$1" + } + } + }, + "open": { + "message": "open" + }, + "closed": { + "message": "closed" + } +} diff --git a/manifest.json b/manifest.json index 678c1d0..e44403d 100644 --- a/manifest.json +++ b/manifest.json @@ -22,6 +22,7 @@ "default_area": "navbar", "default_popup": "src/popup.html" }, + "default_locale": "de", "permissions": [ "https://www.usrspace.at/*", "webRequest", diff --git a/src/background.js b/src/background.js index e4aa7a3..1b55f1f 100644 --- a/src/background.js +++ b/src/background.js @@ -43,10 +43,11 @@ async function fetchNewData() { await browser.browserAction.setBadgeText({text: spaceApiJson.state.open ? 'open' : ''}); if (window.spaceApi && window.spaceApi.state.open !== spaceApiJson.state.open) { + const state = browser.i18n.getMessage(spaceApiJson.state.open ? 'open' : 'closed'); await browser.notifications.create('status-change', { type: 'basic', - title: 'Space Status', - message: `Space ist jetzt ${spaceApiJson.state.open ? 'offen' : 'geschlossen'}.`, + title: browser.i18n.getMessage('stateNotificationTitle'), + message: browser.i18n.getMessage('stateNotificationMessage', state), iconUrl: browser.runtime.getURL('src/icons/favicon.svg') }); } diff --git a/src/popup.html b/src/popup.html index 808cbac..8327f74 100644 --- a/src/popup.html +++ b/src/popup.html @@ -7,11 +7,11 @@
-

Aktueller Status

-
loading...
+

+
-

Links

+
-

Nächster Termin

-
loading...
+

+
-

SpaceApi JSON

 - 
loading...
+

+
diff --git a/src/popup.js b/src/popup.js index ff369a9..7ba5d6d 100644 --- a/src/popup.js +++ b/src/popup.js @@ -19,6 +19,17 @@ const doorOpenSVG = ` const dateTimeFormat = Intl.DateTimeFormat([], {dateStyle: "medium", timeStyle: "short"}); +function setL10n() { + const loadingText = browser.i18n.getMessage('loading'); + document.getElementById('state').textContent = loadingText; + document.getElementById('calendar').textContent = loadingText; + document.querySelector('#space-api > code').textContent = loadingText; + document.getElementById('currentState').textContent = browser.i18n.getMessage('currentState'); + document.getElementById('links').textContent = browser.i18n.getMessage('links'); + document.getElementById('nextEvent').textContent = browser.i18n.getMessage('nextEvent'); + document.getElementById('spaceApiJson').textContent = browser.i18n.getMessage('spaceApiJson'); +} + /** * @param {Event} event */ @@ -31,6 +42,8 @@ async function linkElementClickListener(event) { } async function init() { + setL10n(); + const linkElements = Array.from(document.getElementsByClassName('link')); linkElements.forEach((linkElement) => { linkElement.addEventListener('click', linkElementClickListener); @@ -56,26 +69,25 @@ function updateNextEvent(nextEvents) { calendarElement.innerText = ''; if (nextEvents.length === 0) { - const hintNode = document.createTextNode('Keine Termine in den nächsten 4 Wochen!'); const strongElement = document.createElement('strong'); - strongElement.append(hintNode); + strongElement.textContent = browser.i18n.getMessage('noEventsInNext4Weeks'); calendarElement.append(strongElement); } else { const nextEventDate = nextEvents[0].begin.substr(0, 10); const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate))); nextEventDateEvents.forEach((nextEventDateEvent) => { + const strongElement = document.createElement('strong'); + strongElement.textContent = nextEventDateEvent.name; + + const beginDate = new Date(nextEventDateEvent.begin); + const timeElement = document.createElement('time'); + timeElement.dateTime = beginDate.toISOString(); + timeElement.textContent = dateTimeFormat.format(beginDate); + const divElement = document.createElement('div'); divElement.innerHTML = calendarSVG; - const beginDate = new Date(nextEventDateEvent.begin); - const strongElement = document.createElement('strong'); - const timeElement = document.createElement('time'); - strongElement.textContent = nextEventDateEvent.name; - timeElement.datetime = beginDate.toISOString(); - const dateNode = document.createTextNode(dateTimeFormat.format(beginDate)); - // divElement.innerText = ''; divElement.append(strongElement, ' ', timeElement); - timeElement.append(dateNode); if (nextEventDateEvent.location) { const locationNode = document.createTextNode(` (${nextEventDateEvent.location})`); divElement.append(locationNode); @@ -89,8 +101,10 @@ function updateNextEvent(nextEvents) { * @param {object} spaceApi */ function updateSpaceApiJson(spaceApi) { - const spaceApiElement = document.querySelector('#space-api code'); - const json = JSON.stringify(spaceApi, null, 2).replace(/ /g, ' ').replace(/\n/g, '
'); + const json = JSON.stringify(spaceApi, null, 2) + .replace(/ /g, ' ') + .replace(/\n/g, '
'); + const spaceApiElement = document.querySelector('#space-api > code'); spaceApiElement.innerHTML = json; // const jsonNode = document.createTextNode(json); // spaceApiElement.innerText = ''; @@ -101,12 +115,15 @@ function updateSpaceApiJson(spaceApi) { * @param {object} spaceApi */ function updateState(spaceApi) { - const stateElement = document.getElementById('state'); + const stateIcon = spaceApi.state.open ? doorOpenSVG : doorClosedSVG; + const stateTextNode = document.createTextNode(browser.i18n.getMessage(spaceApi.state.open ? 'openSince' : 'closedSince')); + const since = new Date(spaceApi.state.lastchange * 1000); - const sinceStr = ` seit `; - if (spaceApi.state.open) { - stateElement.innerHTML = `${doorOpenSVG}Offen ${sinceStr}`; - } else { - stateElement.innerHTML = `${doorClosedSVG}Geschlossen ${sinceStr}`; - } + const timeElement = document.createElement('time'); + timeElement.dateTime = since.toISOString(); + timeElement.textContent = dateTimeFormat.format(since); + + const stateElement = document.getElementById('state'); + stateElement.innerHTML = stateIcon; + stateElement.append(stateTextNode, timeElement); }