Compare commits
4 Commits
Author | SHA1 | Date |
---|---|---|
Thomas Rupprecht | 0e67431550 | |
Thomas Rupprecht | d72359e9a5 | |
Thomas Rupprecht | c2cc850e1f | |
Thomas Rupprecht | 4de8c9c1cb |
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"name": "usrspace-browser-addon",
|
||||
"version": "0.8.1",
|
||||
"version": "0.8.2",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "usrspace-browser-addon",
|
||||
"version": "0.8.1",
|
||||
"version": "0.8.2",
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "usrspace-browser-addon",
|
||||
"description": "WebExtension for the Hacker-/Maker-Space /usr/space",
|
||||
"version": "0.8.1",
|
||||
"version": "0.8.2",
|
||||
"dependencies": {
|
||||
"webextension-polyfill": "^0.10.0"
|
||||
},
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
import Config from './config.js';
|
||||
|
||||
document.querySelector('html').setAttribute('lang', browser.i18n.getUILanguage());
|
||||
|
||||
/**
|
||||
* @param {string} url
|
||||
* @returns {Promise<any>}
|
||||
|
|
|
@ -2,13 +2,14 @@
|
|||
"manifest_version": 2,
|
||||
"name": "__MSG_extensionName__",
|
||||
"description": "__MSG_extensionDescription__",
|
||||
"version": "0.8.1",
|
||||
"version": "0.8.2",
|
||||
"icons": {
|
||||
"48": "icons/favicon.svg",
|
||||
"96": "icons/favicon.svg"
|
||||
},
|
||||
"background": {
|
||||
"page": "background.html"
|
||||
"page": "background.html",
|
||||
"persistent": true
|
||||
},
|
||||
"browser_action": {
|
||||
"browser_style": true,
|
||||
|
@ -30,5 +31,10 @@
|
|||
"developer": {
|
||||
"name": "Thomas Rupprecht",
|
||||
"url": "https://blog.ximex.at/"
|
||||
},
|
||||
"browser_specific_settings": {
|
||||
"gecko": {
|
||||
"strict_min_version": "48.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -75,8 +75,14 @@ svg {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#calendar > div > svg, #state > svg {
|
||||
margin-right: 4px;
|
||||
#state > svg, #calendar > .calendar-entry > svg, #calendar > .calendar-entry strong {
|
||||
margin-right: 8px;
|
||||
}
|
||||
#calendar > .calendar-entry {
|
||||
display: flex;
|
||||
}
|
||||
#calendar address {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#space-api {
|
||||
|
|
54
src/popup.js
54
src/popup.js
|
@ -1,25 +1,27 @@
|
|||
const calendarSVG = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Kalender">
|
||||
const calendarSVG =
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Kalender">
|
||||
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
|
||||
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
|
||||
</svg>
|
||||
`;
|
||||
const doorClosedSVG = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Geschlossen">
|
||||
</svg>`
|
||||
;
|
||||
const doorClosedSVG =
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Geschlossen">
|
||||
<path d="M3 2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v13h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V2zm1 13h8V2H4v13z"/>
|
||||
<path d="M9 9a1 1 0 1 0 2 0 1 1 0 0 0-2 0z"/>
|
||||
</svg>
|
||||
`;
|
||||
const doorOpenSVG = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Offen">
|
||||
</svg>`
|
||||
;
|
||||
const doorOpenSVG =
|
||||
`<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 16 16" role="img" aria-label="Offen">
|
||||
<path d="M8.5 10c-.276 0-.5-.448-.5-1s.224-1 .5-1 .5.448.5 1-.224 1-.5 1z"/>
|
||||
<path d="M10.828.122A.5.5 0 0 1 11 .5V1h.5A1.5 1.5 0 0 1 13 2.5V15h1.5a.5.5 0 0 1 0 1h-13a.5.5 0 0 1 0-1H3V1.5a.5.5 0 0 1 .43-.495l7-1a.5.5 0 0 1 .398.117zM11.5 2H11v13h1V2.5a.5.5 0 0 0-.5-.5zM4 1.934V15h6V1.077l-6 .857z"/>
|
||||
</svg>
|
||||
`;
|
||||
</svg>`
|
||||
;
|
||||
|
||||
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;
|
||||
|
@ -77,6 +79,13 @@ 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 containerElement = document.createElement('div');
|
||||
calenderEntryElement.append(containerElement);
|
||||
|
||||
const strongElement = document.createElement('strong');
|
||||
strongElement.textContent = nextEventDateEvent.name;
|
||||
|
||||
|
@ -85,14 +94,23 @@ function updateNextEvent(nextEvents) {
|
|||
timeElement.dateTime = beginDate.toISOString();
|
||||
timeElement.textContent = dateTimeFormat.format(beginDate);
|
||||
|
||||
const divElement = document.createElement('div');
|
||||
divElement.innerHTML = calendarSVG;
|
||||
divElement.append(strongElement, ' ', timeElement);
|
||||
const titleElement = document.createElement('div');
|
||||
titleElement.append(strongElement, timeElement);
|
||||
containerElement.append(titleElement);
|
||||
|
||||
if (nextEventDateEvent.location) {
|
||||
const locationNode = document.createTextNode(` (${nextEventDateEvent.location})`);
|
||||
divElement.append(locationNode);
|
||||
const locationElement = document.createElement('div');
|
||||
|
||||
const addressElement = document.createElement('address');
|
||||
addressElement.textContent = nextEventDateEvent.location;
|
||||
|
||||
const parenthesesOpenNode = document.createTextNode('(');
|
||||
const parenthesesCloseNode = document.createTextNode(')');
|
||||
|
||||
locationElement.append(parenthesesOpenNode, addressElement, parenthesesCloseNode);
|
||||
containerElement.append(locationElement);
|
||||
}
|
||||
calendarElement.append(divElement);
|
||||
calendarElement.append(calenderEntryElement);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue