Add a custom event to update the counter of a user menu item

diff --git a/ts/WoltLabSuite/Core/Notification/Handler.ts b/ts/WoltLabSuite/Core/Notification/Handler.ts
index b571e4590663a4fcf9bec653e94597650e3f0398..ab787195f4573f8a8df96841063a291b26126f17 100644 (file)
--- a/ts/WoltLabSuite/Core/Notification/Handler.ts
+++ b/ts/WoltLabSuite/Core/Notification/Handler.ts
@@ -12,6 +12,7 @@ import * as Ajax from "../Ajax";
 import { AjaxCallbackSetup } from "../Ajax/Data";
 import * as Core from "../Core";
 import * as EventHandler from "../Event/Handler";
+import { updateCounter } from "WoltLabSuite/Core/Ui/User/Menu/Manager";
 
 interface NotificationHandlerOptions {
   icon: string;
@@ -27,7 +28,9 @@ interface PollingResult {
 
 interface AjaxResponse {
   returnValues: {
-    keepAliveData: unknown;
+    keepAliveData: {
+      userNotificationCount: number;
+    };
     lastRequestTimestamp: number;
     pollData: PollingResult;
   };
@@ -174,7 +177,7 @@ class NotificationHandler {
     const pollData = data.returnValues.pollData;
 
     // forward keep alive data
-    window.WCF.System.PushNotification.executeCallbacks({ returnValues: keepAliveData });
+    updateCounter("com.woltlab.wcf.notifications", keepAliveData.userNotificationCount);
 
     // store response data in local storage
     let abort = false;

diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.ts
index cf3fa16455daed5e5beaf5d40d7973179a9b1de8..c70d491caa08a8b96dd057de0c53f026d436ec1a 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.ts
@@ -9,7 +9,7 @@
 
 import { dboAction } from "../../../../Ajax";
 import UserMenuView from "../View";
-import { UserMenuButton, UserMenuData, UserMenuFooter, UserMenuProvider } from "./Provider";
+import { EventUpdateCounter, UserMenuButton, UserMenuData, UserMenuFooter, UserMenuProvider } from "./Provider";
 import { registerProvider } from "../Manager";
 
 type Options = {
@@ -49,6 +49,11 @@ class UserMenuDataModerationQueue implements UserMenuProvider {
         this.counter = counter;
       }
     }
+    this.button.addEventListener("updateCounter", (event: CustomEvent<EventUpdateCounter>) => {
+      this.updateCounter(event.detail.counter);
+
+      this.stale = true;
+    });
   }
 
   getPanelButton(): HTMLElement {

diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.ts
index 07ce0532071635967dbafb4a07aa73220ef8de08..dea9ceb2c5240a4c232c88de5f432e2cd797f5c4 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Notification.ts
@@ -9,7 +9,7 @@
 
 import { dboAction } from "../../../../Ajax";
 import UserMenuView from "../View";
-import { UserMenuButton, UserMenuData, UserMenuFooter, UserMenuProvider } from "./Provider";
+import { EventUpdateCounter, UserMenuButton, UserMenuData, UserMenuFooter, UserMenuProvider } from "./Provider";
 import { registerProvider } from "../Manager";
 import * as Language from "../../../../Language";
 import { enableNotifications } from "../../../../Notification/Handler";
@@ -146,8 +146,8 @@ class UserMenuDataNotification implements DesktopNotifications, UserMenuProvider
       setFaviconCounter(this.counter);
     }
 
-    window.WCF.System.PushNotification.addCallback("userNotificationCount", (count: number) => {
-      this.updateCounter(count);
+    this.button.addEventListener("updateCounter", (event: CustomEvent<EventUpdateCounter>) => {
+      this.updateCounter(event.detail.counter);
 
       this.stale = true;
     });

diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Provider.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Provider.ts
index 6e14bf926bad36bcb381a4fc492da28a2fa3a5f7..55770705d7f1b688319c1e43350b1ce331f6fe2e 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Provider.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/Menu/Data/Provider.ts
@@ -59,3 +59,7 @@ export type UserMenuData = {
   time: number;
   usernames: string[];
 };
+
+export type EventUpdateCounter = {
+  counter: number;
+};

diff --git a/ts/WoltLabSuite/Core/Ui/User/Menu/Manager.ts b/ts/WoltLabSuite/Core/Ui/User/Menu/Manager.ts
index 5be50334e576eec8fb2966b76f743ce840335e00..675afa386aa765a61e49504559caf61988872519 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/User/Menu/Manager.ts
+++ b/ts/WoltLabSuite/Core/Ui/User/Menu/Manager.ts
@@ -7,7 +7,7 @@
  * @woltlabExcludeBundle tiny
  */
 
-import { UserMenuProvider } from "./Data/Provider";
+import { EventUpdateCounter, UserMenuProvider } from "./Data/Provider";
 import UserMenuView from "./View";
 import * as Alignment from "../../Alignment";
 import CloseOverlay from "../../CloseOverlay";
@@ -99,6 +99,18 @@ export function getUserMenuProviders(): ReadonlySet<UserMenuProvider> {
   return providers;
 }
 
+export function updateCounter(identifier: string, counter: number) {
+  Array.from(providers)
+    .filter((provider) => provider.getIdentifier() === identifier)
+    .forEach((provider) => {
+      provider.getPanelButton().dispatchEvent(
+        new CustomEvent<EventUpdateCounter>("updateCounter", {
+          detail: { counter: counter },
+        }),
+      );
+    });
+}
+
 export function getContainer(): HTMLElement {
   if (container === undefined) {
     container = document.createElement("div");

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Notification/Handler.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Notification/Handler.js
index c5e0d11deddbb19b6962b4b735cd705baed87a52..b27d38c5c370c70fe31b78e926aa29d5d0eac16d 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Notification/Handler.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Notification/Handler.js
@@ -7,7 +7,7 @@
  * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @woltlabExcludeBundle tiny
  */
-define(["require", "exports", "tslib", "../Ajax", "../Core", "../Event/Handler"], function (require, exports, tslib_1, Ajax, Core, EventHandler) {
+define(["require", "exports", "tslib", "../Ajax", "../Core", "../Event/Handler", "WoltLabSuite/Core/Ui/User/Menu/Manager"], function (require, exports, tslib_1, Ajax, Core, EventHandler, Manager_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.poll = exports.enableNotifications = exports.setup = void 0;
@@ -129,7 +129,7 @@ define(["require", "exports", "tslib", "../Ajax", "../Core", "../Event/Handler"]
             const keepAliveData = data.returnValues.keepAliveData;
             const pollData = data.returnValues.pollData;
             // forward keep alive data
-            window.WCF.System.PushNotification.executeCallbacks({ returnValues: keepAliveData });
+            (0, Manager_1.updateCounter)("com.woltlab.wcf.notifications", keepAliveData.userNotificationCount);
             // store response data in local storage
             let abort = false;
             try {

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.js
index f4718c5cefb47f3a11a5c71c55a8af5552d7446a..a135c0fc5e92f59820b374b3eff499eba442d45f 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Data/ModerationQueue.js
@@ -27,6 +27,10 @@ define(["require", "exports", "tslib", "../../../../Ajax", "../View", "../Manage
                     this.counter = counter;
                 }
             }
+            this.button.addEventListener("updateCounter", (event) => {
+                this.updateCounter(event.detail.counter);
+                this.stale = true;
+            });
         }
         getPanelButton() {
             return this.button;

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 f1b688d58abe0c3edac325ed8590cb15b3f7bb12..f7accb9d3551e67456db72e3e81bdcff88072d8e 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
@@ -105,8 +105,8 @@ define(["require", "exports", "tslib", "../../../../Ajax", "../View", "../Manage
             if (this.counter > 0) {
                 setFaviconCounter(this.counter);
             }
-            window.WCF.System.PushNotification.addCallback("userNotificationCount", (count) => {
-                this.updateCounter(count);
+            this.button.addEventListener("updateCounter", (event) => {
+                this.updateCounter(event.detail.counter);
                 this.stale = true;
             });
         }

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Manager.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Manager.js
index 3689d5bae9f59b5f7ff05e6c3a9ee8fa12139b56..2118a9a24e24a661c5e9cc2cf7fb945ac8c2a606 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Manager.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/User/Menu/Manager.js
@@ -9,7 +9,7 @@
 define(["require", "exports", "tslib", "../../Alignment", "../../CloseOverlay", "../../../Event/Handler", "../../../Dom/Util", "../../Screen", "../../../Helper/PageOverlay"], function (require, exports, tslib_1, Alignment, CloseOverlay_1, EventHandler, Util_1, UiScreen, PageOverlay_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
-    exports.registerProvider = exports.getContainer = exports.getUserMenuProviders = void 0;
+    exports.registerProvider = exports.getContainer = exports.updateCounter = exports.getUserMenuProviders = void 0;
     Alignment = tslib_1.__importStar(Alignment);
     CloseOverlay_1 = tslib_1.__importDefault(CloseOverlay_1);
     EventHandler = tslib_1.__importStar(EventHandler);
@@ -79,6 +79,16 @@ define(["require", "exports", "tslib", "../../Alignment", "../../CloseOverlay",
         return providers;
     }
     exports.getUserMenuProviders = getUserMenuProviders;
+    function updateCounter(identifier, counter) {
+        Array.from(providers)
+            .filter((provider) => provider.getIdentifier() === identifier)
+            .forEach((provider) => {
+            provider.getPanelButton().dispatchEvent(new CustomEvent("updateCounter", {
+                detail: { counter: counter },
+            }));
+        });
+    }
+    exports.updateCounter = updateCounter;
     function getContainer() {
         if (container === undefined) {
             container = document.createElement("div");