From 2c7230fdc9d19e2ab045314bb741dbb531c5b84c Mon Sep 17 00:00:00 2001 From: Thomas Rupprecht Date: Fri, 8 Sep 2023 00:26:59 +0200 Subject: [PATCH] refactor(popup): general code improvements by linter hints --- CHANGELOG.md | 5 +++ src/popup.js | 90 ++++++++++++++++++++++++++++------------------------ 2 files changed, 54 insertions(+), 41 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ff21ca6..52674a0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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 diff --git a/src/popup.js b/src/popup.js index 5f12b66..c148a5c 100644 --- a/src/popup.js +++ b/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(); } } }