forked from XimeX/usrspace-browser-addon
155 lines
5.0 KiB
JavaScript
155 lines
5.0 KiB
JavaScript
import { QUICK_LINKS } from './config.js';
|
|
|
|
const dateTimeFormat = Intl.DateTimeFormat([], { dateStyle: 'medium', timeStyle: 'short' });
|
|
|
|
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('#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');
|
|
}
|
|
|
|
function setLinks() {
|
|
const listElement = document.getElementById('link-list');
|
|
|
|
QUICK_LINKS.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
|
|
*/
|
|
async function linkElementClickListener(event) {
|
|
try {
|
|
await browser.tabs.create({ url: event.currentTarget.dataset.url });
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
async function init() {
|
|
setL10n();
|
|
setLinks();
|
|
|
|
const linkElements = Array.from(document.getElementsByClassName('link'));
|
|
linkElements.forEach((linkElement) => {
|
|
linkElement.addEventListener('click', linkElementClickListener);
|
|
});
|
|
|
|
const { calendar, spaceApi } = await browser.storage.local.get(['calendar', 'spaceApi']);
|
|
|
|
if (calendar) {
|
|
updateNextEvent(calendar);
|
|
}
|
|
if (spaceApi) {
|
|
updateSpaceApiJson(spaceApi);
|
|
updateState(spaceApi);
|
|
}
|
|
}
|
|
await init();
|
|
|
|
/**
|
|
* @param {Array<object>} nextEvents
|
|
*/
|
|
function updateNextEvent(nextEvents) {
|
|
const calendarElement = document.getElementById('calendar');
|
|
calendarElement.innerText = '';
|
|
|
|
if (nextEvents.length === 0) {
|
|
const strongElement = document.createElement('strong');
|
|
strongElement.textContent = browser.i18n.getMessage('noEventsInNext4Weeks');
|
|
calendarElement.append(strongElement);
|
|
} else {
|
|
const nextEventDate = nextEvents[0].begin.substr(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);
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* @param {object} spaceApi
|
|
*/
|
|
function updateSpaceApiJson(spaceApi) {
|
|
const spaceApiElement = document.querySelector('#space-api > code');
|
|
spaceApiElement.textContent = JSON.stringify(spaceApi, null, 2);
|
|
}
|
|
|
|
/**
|
|
* @param {object} spaceApi
|
|
*/
|
|
function updateState(spaceApi) {
|
|
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);
|
|
timeElement.dateTime = since.toISOString();
|
|
timeElement.textContent = dateTimeFormat.format(since);
|
|
|
|
const stateElement = document.getElementById('state');
|
|
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;
|
|
}
|