Use the DOM attribute as notification counter

diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.ts
index ccfbd6d7184ae67883f8ee8191c012002898a824..494a128ea292e8bd00af27c2abc136459c628fa6 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.ts
@@ -130,7 +130,6 @@ type ResponseMarkAsRead = {
 
 class UserMenuDataNotification implements DesktopNotifications, UserMenuProvider {
   private readonly button: HTMLElement;
-  private counter = 0;
   private readonly options: Options;
   private stale = true;
   private view: UserMenuView | undefined = undefined;
@@ -139,22 +138,25 @@ class UserMenuDataNotification implements DesktopNotifications, UserMenuProvider
     this.button = button;
     this.options = options;
 
-    const badge = button.querySelector<HTMLElement>(".badge");
-    if (badge) {
-      const counter = parseInt(badge.textContent!.trim());
-      if (counter) {
-        setFaviconCounter(counter);
-        this.counter = counter;
-      }
+    if (this.counter > 0) {
+      setFaviconCounter(this.counter);
     }
 
-    window.WCF.System.PushNotification.addCallback("userNotificationCount", (counter: number) => {
-      this.updateCounter(counter);
+    window.WCF.System.PushNotification.addCallback("userNotificationCount", (count: number) => {
+      this.updateCounter(count);
 
       this.stale = true;
     });
   }
 
+  private get counter(): number {
+    return parseInt(this.button.dataset.count!, 10);
+  }
+
+  private set counter(count: number) {
+    this.button.dataset.count = count.toString();
+  }
+
   getPanelButton(): HTMLElement {
     return this.button;
   }
@@ -283,9 +285,11 @@ class UserMenuDataNotification implements DesktopNotifications, UserMenuProvider
     this.updateCounter(0);
   }
 
-  private updateCounter(counter: number): void {
+  private updateCounter(count: number): void {
+    this.counter = count;
+
     let badge = this.button.querySelector<HTMLElement>(".badge");
-    if (badge === null && counter > 0) {
+    if (badge === null && count > 0) {
       badge = document.createElement("span");
       badge.classList.add("badge", "badgeUpdate");
 
@@ -293,16 +297,14 @@ class UserMenuDataNotification implements DesktopNotifications, UserMenuProvider
     }
 
     if (badge) {
-      if (counter === 0) {
+      if (count === 0) {
         badge.remove();
       } else {
-        badge.textContent = counter.toString();
+        badge.textContent = count.toString();
       }
     }
 
-    setFaviconCounter(counter);
-
-    this.counter = counter;
+    setFaviconCounter(count);
   }
 }
 

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.js
index db41c807b8c37d7b9560868a656326dff05e2f32..b216b9e008303d47dbe570ffc4be817945ee8988 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.js
@@ -97,24 +97,24 @@ define(["require", "exports", "tslib", "../../../../Ajax", "../View", "../Manage
     }
     class UserMenuDataNotification {
         constructor(button, options) {
-            this.counter = 0;
             this.stale = true;
             this.view = undefined;
             this.button = button;
             this.options = options;
-            const badge = button.querySelector(".badge");
-            if (badge) {
-                const counter = parseInt(badge.textContent.trim());
-                if (counter) {
-                    setFaviconCounter(counter);
-                    this.counter = counter;
-                }
+            if (this.counter > 0) {
+                setFaviconCounter(this.counter);
             }
-            window.WCF.System.PushNotification.addCallback("userNotificationCount", (counter) => {
-                this.updateCounter(counter);
+            window.WCF.System.PushNotification.addCallback("userNotificationCount", (count) => {
+                this.updateCounter(count);
                 this.stale = true;
             });
         }
+        get counter() {
+            return parseInt(this.button.dataset.count, 10);
+        }
+        set counter(count) {
+            this.button.dataset.count = count.toString();
+        }
         getPanelButton() {
             return this.button;
         }
@@ -211,23 +211,23 @@ define(["require", "exports", "tslib", "../../../../Ajax", "../View", "../Manage
             await (0, Ajax_1.dboAction)("markAllAsConfirmed", "wcf\\data\\user\\notification\\UserNotificationAction").dispatch();
             this.updateCounter(0);
         }
-        updateCounter(counter) {
+        updateCounter(count) {
+            this.counter = count;
             let badge = this.button.querySelector(".badge");
-            if (badge === null && counter > 0) {
+            if (badge === null && count > 0) {
                 badge = document.createElement("span");
                 badge.classList.add("badge", "badgeUpdate");
                 this.button.querySelector("a").append(badge);
             }
             if (badge) {
-                if (counter === 0) {
+                if (count === 0) {
                     badge.remove();
                 }
                 else {
-                    badge.textContent = counter.toString();
+                    badge.textContent = count.toString();
                 }
             }
-            setFaviconCounter(counter);
-            this.counter = counter;
+            setFaviconCounter(count);
         }
     }
     let isInitialized = false;