refactor(popup): general code improvements by linter hints
This commit is contained in:
Thomas Rupprecht
parent
ea43a4cd9d
commit
2c7230fdc9
|
|
@ -11,6 +11,11 @@ All notable changes to this project will be documented in this file.
|
|||
### 🚜 Refactor
|
||||
|
||||
- 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
|
||||
|
||||
|
|
|
|||
90
src/popup.js
90
src/popup.js
|
|
@ -7,19 +7,19 @@ function setL10n() {
|
|||
document.querySelector('html').setAttribute('lang', browser.i18n.getUILanguage());
|
||||
|
||||
const loadingText = browser.i18n.getMessage('loading');
|
||||
document.getElementById('state').textContent = loadingText;
|
||||
document.getElementById('calendar').textContent = loadingText;
|
||||
document.querySelector('#state').textContent = loadingText;
|
||||
document.querySelector('#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');
|
||||
document.querySelector('#currentState').textContent = browser.i18n.getMessage('currentState');
|
||||
document.querySelector('#links').textContent = browser.i18n.getMessage('links');
|
||||
document.querySelector('#nextEvent').textContent = browser.i18n.getMessage('nextEvent');
|
||||
document.querySelector('#spaceApiJson').textContent = browser.i18n.getMessage('spaceApiJson');
|
||||
}
|
||||
|
||||
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');
|
||||
|
||||
template.querySelector('.link').dataset.url = quickLink.url;
|
||||
|
|
@ -31,7 +31,7 @@ function setLinks() {
|
|||
template.querySelector('.text').textContent = quickLink.text;
|
||||
|
||||
listElement.append(template);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -49,10 +49,10 @@ async function init() {
|
|||
setL10n();
|
||||
setLinks();
|
||||
|
||||
const linkElements = Array.from(document.getElementsByClassName('link'));
|
||||
linkElements.forEach((linkElement) => {
|
||||
const linkElements = document.querySelectorAll('.link');
|
||||
for (const linkElement of linkElements) {
|
||||
linkElement.addEventListener('click', linkElementClickListener);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @type {import("../types").Storage}
|
||||
|
|
@ -73,42 +73,50 @@ await init();
|
|||
* @param {import("../types").Calendar} nextEvents
|
||||
*/
|
||||
function updateNextEvent(nextEvents) {
|
||||
const calendarElement = document.getElementById('calendar');
|
||||
calendarElement.innerText = '';
|
||||
const calendarElement = document.querySelector('#calendar');
|
||||
calendarElement.textContent = '';
|
||||
|
||||
if (nextEvents.length === 0) {
|
||||
const strongElement = document.createElement('strong');
|
||||
strongElement.textContent = browser.i18n.getMessage('noEventsInNext4Weeks');
|
||||
calendarElement.append(strongElement);
|
||||
} 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)));
|
||||
|
||||
nextEventDateEvents.forEach((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);
|
||||
}
|
||||
|
||||
calendarElement.append(calendarEntryElement);
|
||||
});
|
||||
for (const nextEventDateEvent of nextEventDateEvents) {
|
||||
calendarElement.append(buildCalendarEntryElement(nextEventDateEvent));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @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
|
||||
*/
|
||||
|
|
@ -136,8 +144,8 @@ function updateState(spaceApi) {
|
|||
timeElement.dateTime = since.toISOString();
|
||||
timeElement.textContent = dateTimeFormat.format(since);
|
||||
|
||||
const stateElement = document.getElementById('state');
|
||||
stateElement.innerText = '';
|
||||
const stateElement = document.querySelector('#state');
|
||||
stateElement.textContent = '';
|
||||
stateElement.append(stateElements);
|
||||
}
|
||||
|
||||
|
|
@ -146,11 +154,11 @@ function updateState(spaceApi) {
|
|||
* @returns {DocumentFragment}
|
||||
*/
|
||||
function getCleanTemplateById(templateId) {
|
||||
const template = document.getElementById(templateId).content.cloneNode(true);
|
||||
const template = document.querySelector(`#${templateId}`).content.cloneNode(true);
|
||||
if (template.hasChildNodes()) {
|
||||
for (const childNode of template.childNodes) {
|
||||
if (childNode.nodeType !== Node.ELEMENT_NODE) {
|
||||
template.removeChild(childNode);
|
||||
childNode.remove();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue