zoldar/jenot
1
0
Fork 0
mirror of https://github.com/zoldar/jenot.git synced 2026-01-03 14:32:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Detect availability of Notification API

Browse source
This commit is contained in:
Adrian Gruntkowski 2024-12-01 15:09:06 +01:00
parent 97e5d9171d
commit f33eac82b8
3 changed files with 21 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
priv/static/index.html
View file

@ -53,7 +53,7 @@
<button type="submit">Log out</button> <button type="submit">Log out</button>
</form> </form>
<div class="hidden"> <div id="notifications-pane" class="hidden">
<!-- Hidden for now, until push notifications are implemented --> <!-- Hidden for now, until push notifications are implemented -->
<button id="enable-notifications" class="hidden"> <button id="enable-notifications" class="hidden">
Enable notifications Enable notifications

28
priv/static/js/jenot.js
View file

@ -2,6 +2,7 @@ import "./service-worker-init.js";
import { renderText } from "./dom.js"; import { renderText } from "./dom.js";
import { SyncedNoteStore } from "./synced-store.js"; import { SyncedNoteStore } from "./synced-store.js";
import { import {
notificationsAvailable,
authorizeNotifications, authorizeNotifications,
notificationsEnabled, notificationsEnabled,
sendNotification, sendNotification,
@ -57,22 +58,25 @@ if (!isLoggedIn) {
// Notifications API test - to be reused for push notifications later on // Notifications API test - to be reused for push notifications later on
const notificationsButton = document.querySelector("#enable-notifications"); if (notificationsAvailable()) {
const notificationsTestButton = document.querySelector("#test-notifications"); document.querySelector("#notifications-pane").classList.remove("hidden");
const notificationsButton = document.querySelector("#enable-notifications");
const notificationsTestButton = document.querySelector("#test-notifications");
if (!notificationsEnabled()) { if (!notificationsEnabled()) {
notificationsButton.classList.remove("hidden"); notificationsButton.classList.remove("hidden");
notificationsButton.addEventListener("click", () => { notificationsButton.addEventListener("click", () => {
authorizeNotifications(() => notificationsButton.classList.add("hidden")); authorizeNotifications(() => notificationsButton.classList.add("hidden"));
});
}
notificationsTestButton.addEventListener("click", () => {
setTimeout(() => {
sendNotification("reminder", "This is a test reminder!");
}, 8000);
}); });
} }
notificationsTestButton.addEventListener("click", () => {
setTimeout(() => {
sendNotification("reminder", "This is a test reminder!");
}, 8000);
});
// There are two note-form component instances - one for // There are two note-form component instances - one for
// composing new notes and another one for editing existing notes. // composing new notes and another one for editing existing notes.

5
priv/static/js/notifications.js
View file

@ -1,7 +1,10 @@
const notificationIcon = "/img/android-chrome-192x192.png"; const notificationIcon = "/img/android-chrome-192x192.png";
export function notificationsAvailable() {
return !!window.Notification;
}
export function notificationsEnabled() { export function notificationsEnabled() {
return Notification.permission === "granted"; return window.Notification && Notification.permission === "granted";
} }
export function authorizeNotifications(afterCallback) { export function authorizeNotifications(afterCallback) {