diff --git a/pages/settings/settings.pixy b/pages/settings/settings.pixy index cba5c1dc..b799417f 100644 --- a/pages/settings/settings.pixy +++ b/pages/settings/settings.pixy @@ -89,19 +89,19 @@ component SettingsNotifications(user *arn.User) .widget.mountable h3.widget-title Icon("bell") - span Push notifications + span Instant notifications #enable-notifications.widget-section - label Enable: + label Instant notifications: button.action(data-action="enableNotifications", data-trigger="click") Icon("toggle-off") - span Enable push notifications + span OFF #disable-notifications.widget-section.hidden - label Disable: + label Instant notifications: button.action(data-action="disableNotifications", data-trigger="click") Icon("toggle-on") - span Disable push notifications + span ON #test-notification.widget-section label Test: diff --git a/scripts/Actions/InfiniteScroller.ts b/scripts/Actions/InfiniteScroller.ts index e24b6b5c..ef02035e 100644 --- a/scripts/Actions/InfiniteScroller.ts +++ b/scripts/Actions/InfiniteScroller.ts @@ -1,7 +1,8 @@ import { AnimeNotifier } from "../AnimeNotifier" +import { Diff } from "../Diff" // Load more -export function loadMore(arn: AnimeNotifier, button: HTMLButtonElement) { +export async function loadMore(arn: AnimeNotifier, button: HTMLButtonElement) { // Prevent firing this event multiple times if(arn.isLoading || button.disabled || button.classList.contains("hidden")) { return @@ -13,10 +14,15 @@ export function loadMore(arn: AnimeNotifier, button: HTMLButtonElement) { let target = arn.app.find("load-more-target") let index = button.dataset.index - fetch("/_" + arn.app.currentPath + "/from/" + index, { - credentials: "same-origin" - }) - .then(response => { + try { + let response = await fetch("/_" + arn.app.currentPath + "/from/" + index, { + credentials: "same-origin" + }) + + if(!response.ok) { + throw response.statusText + } + let newIndex = response.headers.get("X-LoadMore-Index") // End of data? @@ -27,26 +33,24 @@ export function loadMore(arn: AnimeNotifier, button: HTMLButtonElement) { button.dataset.index = newIndex } - return response - }) - .then(response => response.text()) - .then(body => { + let body = await response.text() + let tmp = document.createElement(target.tagName) tmp.innerHTML = body let children = [...tmp.childNodes] - window.requestAnimationFrame(() => { + Diff.mutations.queue(() => { for(let child of children) { target.appendChild(child) } arn.app.emit("DOMContentLoaded") }) - }) - .catch(err => arn.statusMessage.showError(err)) - .then(() => { + } catch(err) { + arn.statusMessage.showError(err) + } finally { arn.loading(false) button.disabled = false - }) + } } \ No newline at end of file diff --git a/scripts/Actions/Notifications.ts b/scripts/Actions/Notifications.ts index 1712eecd..4296f5cd 100644 --- a/scripts/Actions/Notifications.ts +++ b/scripts/Actions/Notifications.ts @@ -2,18 +2,18 @@ import { AnimeNotifier } from "../AnimeNotifier" // Enable notifications export async function enableNotifications(arn: AnimeNotifier, button: HTMLElement) { - arn.statusMessage.showInfo("Enabling push notifications...") + arn.statusMessage.showInfo("Enabling instant notifications...") await arn.pushManager.subscribe(arn.user.dataset.id) arn.updatePushUI() - arn.statusMessage.showInfo("Enabled push notifications for this device.") + arn.statusMessage.showInfo("Enabled instant notifications for this device.") } // Disable notifications export async function disableNotifications(arn: AnimeNotifier, button: HTMLElement) { - arn.statusMessage.showInfo("Disabling push notifications...") + arn.statusMessage.showInfo("Disabling instant notifications...") await arn.pushManager.unsubscribe(arn.user.dataset.id) arn.updatePushUI() - arn.statusMessage.showInfo("Disabled push notifications for this device.") + arn.statusMessage.showInfo("Disabled instant notifications for this device.") } // Test notification diff --git a/scripts/NotificationManager.ts b/scripts/NotificationManager.ts index 4ba23dd0..4ead8aa7 100644 --- a/scripts/NotificationManager.ts +++ b/scripts/NotificationManager.ts @@ -1,5 +1,14 @@ +import { Diff } from "./Diff" + export class NotificationManager { unseen: number + icon: HTMLElement + counter: HTMLElement + + constructor() { + this.icon = document.getElementById("notification-icon") + this.counter = document.getElementById("notification-count") + } async update() { let response = await fetch("/api/count/notifications/unseen", { @@ -17,17 +26,16 @@ export class NotificationManager { } render() { - let notificationIcon = document.getElementById("notification-icon") - let notificationCount = document.getElementById("notification-count") + Diff.mutations.queue(() => { + this.counter.innerText = this.unseen.toString() - notificationCount.innerText = this.unseen.toString() - - if(this.unseen === 0) { - notificationCount.classList.add("hidden") - notificationIcon.classList.remove("hidden") - } else { - notificationIcon.classList.add("hidden") - notificationCount.classList.remove("hidden") - } + if(this.unseen === 0) { + this.counter.classList.add("hidden") + this.icon.classList.remove("hidden") + } else { + this.icon.classList.add("hidden") + this.counter.classList.remove("hidden") + } + }) } } \ No newline at end of file