ntfy/server/static/js/app.js

431 lines
15 KiB
JavaScript
Raw Normal View History

2021-10-24 20:22:53 +02:00
/**
* Hello, dear curious visitor. I am not a web-guy, so please don't judge my horrible JS code.
* In fact, please do tell me about all the things I did wrong and that I could improve. I've been trying
* to read up on modern JS, but it's just a little much.
*
* Feel free to open tickets at https://github.com/binwiederhier/ntfy/issues. Thank you!
*/
/* All the things */
let topics = {};
2021-11-08 15:24:34 +01:00
let currentTopic = "";
let currentTopicUnsubscribeOnClose = false;
2021-11-22 14:30:09 +01:00
let currentUrl = window.location.hostname;
if (window.location.port) {
currentUrl += ':' + window.location.port
}
2021-10-24 20:22:53 +02:00
2021-11-08 15:24:34 +01:00
/* Main view */
const main = document.getElementById("main");
2021-10-24 20:22:53 +02:00
const topicsHeader = document.getElementById("topicsHeader");
const topicsList = document.getElementById("topicsList");
const topicField = document.getElementById("topicField");
2021-10-24 20:51:49 +02:00
const notifySound = document.getElementById("notifySound");
2021-10-24 20:22:53 +02:00
const subscribeButton = document.getElementById("subscribeButton");
const errorField = document.getElementById("error");
2021-11-08 15:24:34 +01:00
const originalTitle = document.title;
/* Detail view */
const detailView = document.getElementById("detail");
const detailTitle = document.getElementById("detailTitle");
const detailEventsList = document.getElementById("detailEventsList");
const detailTopicUrl = document.getElementById("detailTopicUrl");
const detailNoNotifications = document.getElementById("detailNoNotifications");
const detailCloseButton = document.getElementById("detailCloseButton");
const detailNotificationsDisallowed = document.getElementById("detailNotificationsDisallowed");
2021-10-24 20:22:53 +02:00
2021-11-09 16:46:47 +01:00
/* Screenshots */
const lightbox = document.getElementById("lightbox");
2021-10-24 20:22:53 +02:00
const subscribe = (topic) => {
if (Notification.permission !== "granted") {
Notification.requestPermission().then((permission) => {
if (permission === "granted") {
2021-11-08 15:24:34 +01:00
subscribeInternal(topic, true, 0);
2021-10-24 20:22:53 +02:00
} else {
showNotificationDeniedError();
}
});
} else {
2021-11-08 15:24:34 +01:00
subscribeInternal(topic, true,0);
2021-10-24 20:22:53 +02:00
}
};
2021-11-08 15:24:34 +01:00
const subscribeInternal = (topic, persist, delaySec) => {
2021-10-24 20:22:53 +02:00
setTimeout(() => {
// Render list entry
let topicEntry = document.getElementById(`topic-${topic}`);
if (!topicEntry) {
topicEntry = document.createElement('li');
topicEntry.id = `topic-${topic}`;
2021-11-29 01:03:15 +01:00
topicEntry.innerHTML = `<a href="/${topic}" onclick="return showDetail('${topic}')">${topic}</a> <button onclick="test('${topic}'); return false;"> <img src="static/img/send.svg"> Test</button> <button onclick="unsubscribe('${topic}'); return false;"> <img src="static/img/unsubscribe.svg"> Unsubscribe</button>`;
2021-10-24 20:22:53 +02:00
topicsList.appendChild(topicEntry);
}
topicsHeader.style.display = '';
// Open event source
let eventSource = new EventSource(`${topic}/sse`);
eventSource.onopen = () => {
2021-11-29 01:03:15 +01:00
topicEntry.innerHTML = `<a href="/${topic}" onclick="return showDetail('${topic}')">${topic}</a> <button onclick="test('${topic}'); return false;"> <img src="static/img/send.svg"> Test</button> <button onclick="unsubscribe('${topic}'); return false;"> <img src="static/img/unsubscribe.svg"> Unsubscribe</button>`;
2021-10-24 20:22:53 +02:00
delaySec = 0; // Reset on successful connection
};
eventSource.onerror = (e) => {
2021-11-08 15:24:34 +01:00
topicEntry.innerHTML = `<a href="/${topic}" onclick="return showDetail('${topic}')">${topic}</a> <i>(Reconnecting)</i> <button disabled="disabled">Test</button> <button onclick="unsubscribe('${topic}'); return false;">Unsubscribe</button>`;
2021-11-05 03:32:17 +01:00
eventSource.close();
2021-10-24 20:22:53 +02:00
const newDelaySec = (delaySec + 5 <= 15) ? delaySec + 5 : 15;
2021-11-08 15:24:34 +01:00
subscribeInternal(topic, persist, newDelaySec);
2021-10-24 20:22:53 +02:00
};
eventSource.onmessage = (e) => {
const event = JSON.parse(e.data);
2021-11-08 15:24:34 +01:00
topics[topic]['messages'].push(event);
topics[topic]['messages'].sort((a, b) => { return a.time < b.time ? 1 : -1; }); // Newest first
2021-11-08 15:24:34 +01:00
if (currentTopic === topic) {
rerenderDetailView();
}
if (Notification.permission === "granted") {
notifySound.play();
const title = (event.title) ? event.title : `${location.host}/${topic}`;
const notification = new Notification(title, {
2021-11-08 15:24:34 +01:00
body: event.message,
icon: '/static/img/favicon.png'
});
notification.onclick = (e) => {
showDetail(event.topic);
};
2021-11-08 15:24:34 +01:00
}
2021-10-24 20:22:53 +02:00
};
2021-11-08 15:24:34 +01:00
topics[topic] = {
'eventSource': eventSource,
'messages': [],
'persist': persist
};
fetchCachedMessages(topic).then(() => {
if (currentTopic === topic) {
rerenderDetailView();
}
})
let persistedTopicKeys = Object.keys(topics).filter(t => topics[t].persist);
localStorage.setItem('topics', JSON.stringify(persistedTopicKeys));
2021-10-24 20:22:53 +02:00
}, delaySec * 1000);
};
const unsubscribe = (topic) => {
2021-11-08 15:24:34 +01:00
topics[topic]['eventSource'].close();
2021-10-24 20:22:53 +02:00
delete topics[topic];
localStorage.setItem('topics', JSON.stringify(Object.keys(topics)));
document.getElementById(`topic-${topic}`).remove();
if (Object.keys(topics).length === 0) {
topicsHeader.style.display = 'none';
}
};
const test = (topic) => {
fetch(`/${topic}`, {
method: 'PUT',
2021-11-05 03:32:17 +01:00
body: `This is a test notification sent by the ntfy.sh Web UI at ${new Date().toString()}.`
2021-11-08 15:24:34 +01:00
});
};
const fetchCachedMessages = async (topic) => {
const topicJsonUrl = `/${topic}/json?poll=1`; // Poll!
2021-11-08 15:24:34 +01:00
for await (let line of makeTextFileLineIterator(topicJsonUrl)) {
const message = JSON.parse(line);
topics[topic]['messages'].push(message);
}
topics[topic]['messages'].sort((a, b) => { return a.time < b.time ? 1 : -1; }); // Newest first
2021-11-08 15:24:34 +01:00
};
const showDetail = (topic) => {
currentTopic = topic;
2021-11-22 14:30:09 +01:00
history.replaceState(topic, `${currentUrl}/${topic}`, `/${topic}`);
2021-11-08 15:24:34 +01:00
window.scrollTo(0, 0);
rerenderDetailView();
return false;
};
const rerenderDetailView = () => {
2021-11-22 14:30:09 +01:00
detailTitle.innerHTML = `${currentUrl}/${currentTopic}`; // document.location.replaceAll(..)
detailTopicUrl.innerHTML = `${currentUrl}/${currentTopic}`;
2021-11-08 15:24:34 +01:00
while (detailEventsList.firstChild) {
detailEventsList.removeChild(detailEventsList.firstChild);
}
topics[currentTopic]['messages'].forEach(m => {
2021-11-29 01:03:15 +01:00
const entryDiv = document.createElement('div');
const dateDiv = document.createElement('div');
const titleDiv = document.createElement('div');
const messageDiv = document.createElement('div');
const tagsDiv = document.createElement('div');
2021-11-29 01:58:49 +01:00
// Figure out mapped emojis (and unmapped tags)
let mappedEmojiTags = '';
let unmappedTags = '';
if (m.tags) {
mappedEmojiTags = m.tags
.filter(tag => tag in emojis)
.map(tag => emojis[tag])
.join("");
unmappedTags = m.tags
.filter(tag => !(tag in emojis))
.join(", ");
}
// Figure out title and message
let title = '';
let message = m.message;
if (m.title) {
if (mappedEmojiTags) {
title = `${mappedEmojiTags} ${m.title}`;
} else {
title = m.title;
}
} else {
if (mappedEmojiTags) {
message = `${mappedEmojiTags} ${m.message}`;
} else {
message = m.message;
}
}
2021-11-29 01:03:15 +01:00
entryDiv.classList.add('detailEntry');
2021-11-08 15:24:34 +01:00
dateDiv.classList.add('detailDate');
2021-11-29 01:03:15 +01:00
const dateStr = new Date(m.time * 1000).toLocaleString();
if (m.priority && [1,2,4,5].includes(m.priority)) {
dateDiv.innerHTML = `${dateStr} <img src="static/img/priority-${m.priority}.svg"/>`;
} else {
dateDiv.innerHTML = `${dateStr}`;
}
2021-11-08 15:24:34 +01:00
messageDiv.classList.add('detailMessage');
2021-11-29 01:58:49 +01:00
messageDiv.innerText = message;
2021-11-29 01:03:15 +01:00
entryDiv.appendChild(dateDiv);
if (m.title) {
titleDiv.classList.add('detailTitle');
2021-11-29 01:58:49 +01:00
titleDiv.innerText = title;
2021-11-29 01:03:15 +01:00
entryDiv.appendChild(titleDiv);
}
entryDiv.appendChild(messageDiv);
2021-11-29 01:58:49 +01:00
if (unmappedTags) {
2021-11-29 01:03:15 +01:00
tagsDiv.classList.add('detailTags');
2021-11-29 01:58:49 +01:00
tagsDiv.innerText = `Tags: ${unmappedTags}`;
2021-11-29 01:03:15 +01:00
entryDiv.appendChild(tagsDiv);
}
2021-11-29 01:03:15 +01:00
detailEventsList.appendChild(entryDiv);
2021-10-24 20:22:53 +02:00
})
2021-11-08 15:24:34 +01:00
if (topics[currentTopic]['messages'].length === 0) {
detailNoNotifications.style.display = '';
} else {
detailNoNotifications.style.display = 'none';
}
if (Notification.permission === "granted") {
detailNotificationsDisallowed.style.display = 'none';
} else {
detailNotificationsDisallowed.style.display = 'block';
}
detailView.style.display = 'block';
main.style.display = 'none';
};
const hideDetailView = () => {
if (currentTopicUnsubscribeOnClose) {
unsubscribe(currentTopic);
currentTopicUnsubscribeOnClose = false;
}
currentTopic = "";
history.replaceState('', originalTitle, '/');
detailView.style.display = 'none';
2021-11-24 02:22:09 +01:00
main.style.display = 'block';
2021-11-08 15:24:34 +01:00
return false;
};
const requestPermission = () => {
if (Notification.permission !== "granted") {
Notification.requestPermission().then((permission) => {
if (permission === "granted") {
detailNotificationsDisallowed.style.display = 'none';
}
});
}
return false;
2021-10-24 20:22:53 +02:00
};
const showError = (msg) => {
errorField.innerHTML = msg;
topicField.disabled = true;
subscribeButton.disabled = true;
};
const showBrowserIncompatibleError = () => {
showError("Your browser is not compatible to use the web-based desktop notifications.");
};
const showNotificationDeniedError = () => {
showError("You have blocked desktop notifications for this website. Please unblock them and refresh to use the web-based desktop notifications.");
};
2021-11-09 16:46:47 +01:00
const showScreenshotOverlay = (e, el, index) => {
lightbox.classList.add('show');
document.addEventListener('keydown', nextScreenshotKeyboardListener);
return showScreenshot(e, index);
};
const showScreenshot = (e, index) => {
const actualIndex = resolveScreenshotIndex(index);
lightbox.innerHTML = '<div class="close-lightbox"></div>' + screenshots[actualIndex].innerHTML;
lightbox.querySelector('img').onclick = (e) => { return showScreenshot(e,actualIndex+1); };
currentScreenshotIndex = actualIndex;
e.stopPropagation();
return false;
};
const nextScreenshot = (e) => {
return showScreenshot(e, currentScreenshotIndex+1);
};
const previousScreenshot = (e) => {
return showScreenshot(e, currentScreenshotIndex-1);
};
const resolveScreenshotIndex = (index) => {
if (index < 0) {
return screenshots.length - 1;
} else if (index > screenshots.length - 1) {
return 0;
}
return index;
};
const hideScreenshotOverlay = (e) => {
lightbox.classList.remove('show');
document.removeEventListener('keydown', nextScreenshotKeyboardListener);
};
const nextScreenshotKeyboardListener = (e) => {
switch (e.keyCode) {
case 37:
previousScreenshot(e);
break;
case 39:
nextScreenshot(e);
break;
}
};
2021-11-29 01:58:49 +01:00
const toEmoji = (tag) => {
emojis
};
2021-11-08 15:24:34 +01:00
// From: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
async function* makeTextFileLineIterator(fileURL) {
const utf8Decoder = new TextDecoder('utf-8');
const response = await fetch(fileURL);
const reader = response.body.getReader();
let { value: chunk, done: readerDone } = await reader.read();
chunk = chunk ? utf8Decoder.decode(chunk) : '';
const re = /\n|\r|\r\n/gm;
let startIndex = 0;
let result;
for (;;) {
let result = re.exec(chunk);
if (!result) {
if (readerDone) {
break;
}
let remainder = chunk.substr(startIndex);
({ value: chunk, done: readerDone } = await reader.read());
chunk = remainder + (chunk ? utf8Decoder.decode(chunk) : '');
startIndex = re.lastIndex = 0;
continue;
}
yield chunk.substring(startIndex, result.index);
startIndex = re.lastIndex;
}
if (startIndex < chunk.length) {
yield chunk.substr(startIndex); // last line didn't end in a newline char
}
}
subscribeButton.onclick = () => {
2021-10-24 20:22:53 +02:00
if (!topicField.value) {
return false;
}
subscribe(topicField.value);
topicField.value = "";
return false;
};
2021-11-08 15:24:34 +01:00
detailCloseButton.onclick = () => {
hideDetailView();
};
2021-11-09 16:46:47 +01:00
let currentScreenshotIndex = 0;
const screenshots = [...document.querySelectorAll("#screenshots a")];
screenshots.forEach((el, index) => {
el.onclick = (e) => { return showScreenshotOverlay(e, el, index); };
});
lightbox.onclick = hideScreenshotOverlay;
2021-10-24 20:22:53 +02:00
// Disable Web UI if notifications of EventSource are not available
if (!window["Notification"] || !window["EventSource"]) {
showBrowserIncompatibleError();
} else if (Notification.permission === "denied") {
showNotificationDeniedError();
}
// Reset UI
topicField.value = "";
// Restore topics
const storedTopics = JSON.parse(localStorage.getItem('topics') || "[]");
2021-11-08 15:24:34 +01:00
if (storedTopics) {
storedTopics.forEach((topic) => { subscribeInternal(topic, true, 0); });
if (storedTopics.length === 0) {
2021-10-24 20:22:53 +02:00
topicsHeader.style.display = 'none';
}
} else {
topicsHeader.style.display = 'none';
}
// (Temporarily) subscribe topic if we navigated to /sometopic URL
const match = location.pathname.match(/^\/([-_a-zA-Z0-9]{1,64})$/) // Regex must match Go & Android app!
if (match) {
currentTopic = match[1];
if (!storedTopics.includes(currentTopic)) {
subscribeInternal(currentTopic, false,0);
2021-11-08 15:24:34 +01:00
currentTopicUnsubscribeOnClose = true;
}
2021-10-24 20:22:53 +02:00
}
2021-11-18 02:50:47 +01:00
2021-11-18 15:22:33 +01:00
// Add anchor links
2021-11-18 02:50:47 +01:00
document.querySelectorAll('.anchor').forEach((el) => {
if (el.hasAttribute('id')) {
const id = el.getAttribute('id');
const anchor = document.createElement('a');
anchor.innerHTML = `<a href="#${id}" class="anchorLink">#</a>`;
el.appendChild(anchor);
}
});
2021-11-22 14:30:09 +01:00
// Change ntfy.sh url and protocol to match self-hosted one
document.querySelectorAll('.ntfyUrl').forEach((el) => {
el.innerHTML = currentUrl;
});
document.querySelectorAll('.ntfyProtocol').forEach((el) => {
el.innerHTML = window.location.protocol + "//";
});
2021-11-29 01:58:49 +01:00
// Fetch emojis
const emojis = {};
fetch('static/js/emoji.json')
.then(response => response.json())
.then(data => {
data.forEach(emoji => {
emoji.aliases.forEach(alias => {
emojis[alias] = emoji.emoji;
});
});
});