XimeX/usrspace-browser-addon
3
3
Fork 2
Code Issues 4 Pull requests Releases 14 Activity

refactor(popup): general code improvements by linter hints

Browse source
This commit is contained in:
Thomas Rupprecht 2023-09-08 00:26:59 +02:00
parent ea43a4cd9d
commit 2c7230fdc9
2 changed files with 54 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
CHANGELOG.md
View file

@ -11,6 +11,11 @@ All notable changes to this project will be documented in this file.
### 🚜 Refactor ### 🚜 Refactor
- Inline `fetch` and use `URLSearchParams` - Inline `fetch` and use `URLSearchParams`
- General code improvements by linter hints
### ⚙️ Miscellaneous Tasks
- Make `Calendar` types readonly
## \[[0.9.3](https://gitea.usrspace.at/XimeX/usrspace-browser-addon/releases/tag/v0.9.3)] - 2023-09-06 ## \[[0.9.3](https://gitea.usrspace.at/XimeX/usrspace-browser-addon/releases/tag/v0.9.3)] - 2023-09-06

90
src/popup.js
View file

@ -7,19 +7,19 @@ function setL10n() {
document.querySelector('html').setAttribute('lang', browser.i18n.getUILanguage()); document.querySelector('html').setAttribute('lang', browser.i18n.getUILanguage());
const loadingText = browser.i18n.getMessage('loading'); const loadingText = browser.i18n.getMessage('loading');
document.getElementById('state').textContent = loadingText; document.querySelector('#state').textContent = loadingText;
document.getElementById('calendar').textContent = loadingText; document.querySelector('#calendar').textContent = loadingText;
document.querySelector('#space-api > code').textContent = loadingText; document.querySelector('#space-api > code').textContent = loadingText;
document.getElementById('currentState').textContent = browser.i18n.getMessage('currentState'); document.querySelector('#currentState').textContent = browser.i18n.getMessage('currentState');
document.getElementById('links').textContent = browser.i18n.getMessage('links'); document.querySelector('#links').textContent = browser.i18n.getMessage('links');
document.getElementById('nextEvent').textContent = browser.i18n.getMessage('nextEvent'); document.querySelector('#nextEvent').textContent = browser.i18n.getMessage('nextEvent');
document.getElementById('spaceApiJson').textContent = browser.i18n.getMessage('spaceApiJson'); document.querySelector('#spaceApiJson').textContent = browser.i18n.getMessage('spaceApiJson');
} }
function setLinks() { function setLinks() {
const listElement = document.getElementById('link-list'); const listElement = document.querySelector('#link-list');
QUICK_LINKS.forEach((quickLink) => { for (const quickLink of QUICK_LINKS) {
const template = getCleanTemplateById('template-link-item'); const template = getCleanTemplateById('template-link-item');
template.querySelector('.link').dataset.url = quickLink.url; template.querySelector('.link').dataset.url = quickLink.url;
@ -31,7 +31,7 @@ function setLinks() {
template.querySelector('.text').textContent = quickLink.text; template.querySelector('.text').textContent = quickLink.text;
listElement.append(template); listElement.append(template);
}); }
} }
/** /**
@ -49,10 +49,10 @@ async function init() {
setL10n(); setL10n();
setLinks(); setLinks();
const linkElements = Array.from(document.getElementsByClassName('link')); const linkElements = document.querySelectorAll('.link');
linkElements.forEach((linkElement) => { for (const linkElement of linkElements) {
linkElement.addEventListener('click', linkElementClickListener); linkElement.addEventListener('click', linkElementClickListener);
}); }
/** /**
* @type {import("../types").Storage} * @type {import("../types").Storage}
@ -73,42 +73,50 @@ await init();
* @param {import("../types").Calendar} nextEvents * @param {import("../types").Calendar} nextEvents
*/ */
function updateNextEvent(nextEvents) { function updateNextEvent(nextEvents) {
const calendarElement = document.getElementById('calendar'); const calendarElement = document.querySelector('#calendar');
calendarElement.innerText = ''; calendarElement.textContent = '';
if (nextEvents.length === 0) { if (nextEvents.length === 0) {
const strongElement = document.createElement('strong'); const strongElement = document.createElement('strong');
strongElement.textContent = browser.i18n.getMessage('noEventsInNext4Weeks'); strongElement.textContent = browser.i18n.getMessage('noEventsInNext4Weeks');
calendarElement.append(strongElement); calendarElement.append(strongElement);
} else { } else {
const nextEventDate = nextEvents[0].begin.substring(0, 10); const nextEventDate = nextEvents[0].begin.slice(0, 10);
const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate))); const nextEventDateEvents = nextEvents.filter((nextEvent) => (nextEvent.begin.startsWith(nextEventDate)));
nextEventDateEvents.forEach((nextEventDateEvent) => { for (const nextEventDateEvent of nextEventDateEvents) {
const calendarEntryElement = getCleanTemplateById('template-calendar-entry'); calendarElement.append(buildCalendarEntryElement(nextEventDateEvent));
}
calendarEntryElement.querySelector('svg').setAttribute('aria-label', browser.i18n.getMessage('event'));
calendarEntryElement.querySelector('strong').textContent = nextEventDateEvent.name;
const timeElement = calendarEntryElement.querySelector('time');
const beginDate = new Date(nextEventDateEvent.begin);
timeElement.dateTime = beginDate.toISOString();
timeElement.textContent = dateTimeFormat.format(beginDate);
if (nextEventDateEvent.location) {
const locationElement = getCleanTemplateById('template-calendar-entry-location');
locationElement.querySelector('address').textContent = nextEventDateEvent.location;
calendarEntryElement.querySelector('.calendar-entry > div').append(locationElement);
}
calendarElement.append(calendarEntryElement);
});
} }
} }
/**
* @param {import("../types").CalendarEntry} nextEventDateEvent
* @returns {DocumentFragment}
*/
function buildCalendarEntryElement(nextEventDateEvent) {
const calendarEntryElement = getCleanTemplateById('template-calendar-entry');
calendarEntryElement.querySelector('svg').setAttribute('aria-label', browser.i18n.getMessage('event'));
calendarEntryElement.querySelector('strong').textContent = nextEventDateEvent.name;
const timeElement = calendarEntryElement.querySelector('time');
const beginDate = new Date(nextEventDateEvent.begin);
timeElement.dateTime = beginDate.toISOString();
timeElement.textContent = dateTimeFormat.format(beginDate);
if (nextEventDateEvent.location) {
const locationElement = getCleanTemplateById('template-calendar-entry-location');
locationElement.querySelector('address').textContent = nextEventDateEvent.location;
calendarEntryElement.querySelector('.calendar-entry > div').append(locationElement);
}
return calendarEntryElement;
}
/** /**
* @param {import("../types").SpaceApi} spaceApi * @param {import("../types").SpaceApi} spaceApi
*/ */
@ -136,8 +144,8 @@ function updateState(spaceApi) {
timeElement.dateTime = since.toISOString(); timeElement.dateTime = since.toISOString();
timeElement.textContent = dateTimeFormat.format(since); timeElement.textContent = dateTimeFormat.format(since);
const stateElement = document.getElementById('state'); const stateElement = document.querySelector('#state');
stateElement.innerText = ''; stateElement.textContent = '';
stateElement.append(stateElements); stateElement.append(stateElements);
} }
@ -146,11 +154,11 @@ function updateState(spaceApi) {
* @returns {DocumentFragment} * @returns {DocumentFragment}
*/ */
function getCleanTemplateById(templateId) { function getCleanTemplateById(templateId) {
const template = document.getElementById(templateId).content.cloneNode(true); const template = document.querySelector(`#${templateId}`).content.cloneNode(true);
if (template.hasChildNodes()) { if (template.hasChildNodes()) {
for (const childNode of template.childNodes) { for (const childNode of template.childNodes) {
if (childNode.nodeType !== Node.ELEMENT_NODE) { if (childNode.nodeType !== Node.ELEMENT_NODE) {
template.removeChild(childNode); childNode.remove();
} }
} }
} }