From c07f82322d7e89f5690b1bbda3fd298b59ed81de Mon Sep 17 00:00:00 2001 From: Thomas Rupprecht Date: Thu, 5 Jan 2023 04:31:19 +0100 Subject: [PATCH] use html template tag --- src/_locales/de/messages.json | 3 + src/_locales/en/messages.json | 3 + src/config.js | 4 ++ src/popup.html | 103 +++++++++++++++++++++------------- src/popup.js | 101 ++++++++++++++++++--------------- 5 files changed, 131 insertions(+), 83 deletions(-) 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 + + + + + + + + + + +
@@ -12,45 +75,7 @@
- +

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; }