diff --git a/src/_locales/de/messages.json b/src/_locales/de/messages.json
index 8f93d62..6bb20c7 100644
--- a/src/_locales/de/messages.json
+++ b/src/_locales/de/messages.json
@@ -20,6 +20,9 @@
"nextEvent": {
"message": "Nächstes Event"
},
+ "event": {
+ "message": "Event"
+ },
"spaceApiJson": {
"message": "Space-API JSON"
},
diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index f1f29b4..73c4a01 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -20,6 +20,9 @@
"nextEvent": {
"message": "Next Event"
},
+ "event": {
+ "message": "Event"
+ },
"spaceApiJson": {
"message": "Space-API JSON"
},
diff --git a/src/config.js b/src/config.js
index 4f2a62c..09647e4 100644
--- a/src/config.js
+++ b/src/config.js
@@ -7,18 +7,22 @@ export default {
eventColor: '#9933cc',
quickLinks: [
{
+ iconTemplateId: 'template-icon-homepage',
url: 'https://www.usrspace.at/',
text: 'Homepage',
},
{
+ iconTemplateId: 'template-icon-wiki',
url: 'https://wiki.usrspace.at/',
text: 'Wiki',
},
{
+ iconTemplateId: 'template-icon-gitea',
url: 'https://gitea.usrspace.at/',
text: 'Gitea',
},
{
+ iconTemplateId: 'template-icon-nextcloud',
url: 'https://cloud.usrspace.at/',
text: 'Nextcloud',
},
diff --git a/src/popup.html b/src/popup.html
index 8327f74..416b77f 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -4,6 +4,69 @@
/usr/space
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- -
-
-
Homepage
-
-
- -
-
-
Wiki
-
-
- -
-
-
Gitea
-
-
- -
-
-
Nextcloud
-
-
-
+
diff --git a/src/popup.js b/src/popup.js
index b1561ad..a2f05d7 100644
--- a/src/popup.js
+++ b/src/popup.js
@@ -1,21 +1,4 @@
-const calendarSVG =
- ``
-;
-const doorClosedSVG =
- ``
-;
-const doorOpenSVG =
- ``
-;
+import Config from './config.js';
const dateTimeFormat = Intl.DateTimeFormat([], {dateStyle: 'medium', timeStyle: 'short'});
@@ -32,6 +15,24 @@ function setL10n() {
document.getElementById('spaceApiJson').textContent = browser.i18n.getMessage('spaceApiJson');
}
+function setLinks() {
+ const listElement = document.getElementById('link-list');
+
+ Config.quickLinks.forEach((quickLink) => {
+ const template = getCleanTemplateById('template-link-item');
+
+ template.querySelector('.link').dataset.url = quickLink.url;
+
+ const svgIcon = getCleanTemplateById(quickLink.iconTemplateId);
+ svgIcon.querySelector('svg').setAttribute('aria-label', quickLink.text);
+ template.querySelector('.icon').append(svgIcon);
+
+ template.querySelector('.text').textContent = quickLink.text;
+
+ listElement.append(template);
+ });
+}
+
/**
* @param {Event} event
*/
@@ -45,6 +46,7 @@ async function linkElementClickListener(event) {
async function init() {
setL10n();
+ setLinks();
const linkElements = Array.from(document.getElementsByClassName('link'));
linkElements.forEach((linkElement) => {
@@ -79,38 +81,26 @@ function updateNextEvent(nextEvents) {
const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate)));
nextEventDateEvents.forEach((nextEventDateEvent) => {
- const calenderEntryElement = document.createElement('div');
- calenderEntryElement.classList.add('calendar-entry');
- calenderEntryElement.innerHTML = calendarSVG;
+ const calendarEntryElement = getCleanTemplateById('template-calendar-entry');
- const containerElement = document.createElement('div');
- calenderEntryElement.append(containerElement);
+ calendarEntryElement.querySelector('svg').setAttribute('aria-label', browser.i18n.getMessage('event'));
- const strongElement = document.createElement('strong');
- strongElement.textContent = nextEventDateEvent.name;
+ calendarEntryElement.querySelector('strong').textContent = nextEventDateEvent.name;
+ const timeElement = calendarEntryElement.querySelector('time');
const beginDate = new Date(nextEventDateEvent.begin);
- const timeElement = document.createElement('time');
timeElement.dateTime = beginDate.toISOString();
timeElement.textContent = dateTimeFormat.format(beginDate);
- const titleElement = document.createElement('div');
- titleElement.append(strongElement, timeElement);
- containerElement.append(titleElement);
-
if (nextEventDateEvent.location) {
- const locationElement = document.createElement('div');
+ const locationElement = getCleanTemplateById('template-calendar-entry-location');
- const addressElement = document.createElement('address');
- addressElement.textContent = nextEventDateEvent.location;
+ locationElement.querySelector('address').textContent = nextEventDateEvent.location;
- const parenthesesOpenNode = document.createTextNode('(');
- const parenthesesCloseNode = document.createTextNode(')');
-
- locationElement.append(parenthesesOpenNode, addressElement, parenthesesCloseNode);
- containerElement.append(locationElement);
+ calendarEntryElement.querySelector('.calendar-entry > div').append(locationElement);
}
- calendarElement.append(calenderEntryElement);
+
+ calendarElement.append(calendarEntryElement);
});
}
}
@@ -133,15 +123,38 @@ function updateSpaceApiJson(spaceApi) {
* @param {object} spaceApi
*/
function updateState(spaceApi) {
- const stateIcon = spaceApi.state.open ? doorOpenSVG : doorClosedSVG;
- const stateTextNode = document.createTextNode(browser.i18n.getMessage(spaceApi.state.open ? 'openSince' : 'closedSince'));
+ const state = spaceApi.state.open ? 'open' : 'closed';
+ const stateElements = getCleanTemplateById('template-state');
+
+ const svgIconState = getCleanTemplateById(`template-icon-${state}`);
+ svgIconState.querySelector('svg').setAttribute('aria-label', browser.i18n.getMessage(state));
+ stateElements.querySelector('svg').replaceWith(svgIconState);
+
+ stateElements.querySelector('span').textContent = browser.i18n.getMessage(spaceApi.state.open ? 'openSince' : 'closedSince');
+
+ const timeElement = stateElements.querySelector('time');
const since = new Date(spaceApi.state.lastchange * 1000);
- 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);
+ stateElement.innerText = '';
+ stateElement.append(stateElements);
+}
+
+/**
+ * @param {string} templateId
+ * @returns {DocumentFragment}
+ */
+function getCleanTemplateById(templateId) {
+ const template = document.getElementById(templateId).content.cloneNode(true);
+ if (template.hasChildNodes()) {
+ for (const childNode of template.childNodes) {
+ if (childNode.nodeType !== Node.ELEMENT_NODE) {
+ template.removeChild(childNode);
+ }
+ }
+ }
+ return template;
}