Fixed multiple windows communication between closed banners

68publishers · Sep 3, 2024 · 0369889 · 0369889
1 parent 9007298
commit 0369889
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/src/banner/closing/closed-banner-store.mjs b/src/banner/closing/closed-banner-store.mjs
@@ -4,7 +4,7 @@ export class ClosedBannerStore {
     #maxItems;
     #loadedItems = null;
 
-    constructor({ storage, key, maxItems }) {
+    constructor({ storage, key, maxItems, onExternalChange }) {
         switch (storage) {
             case 'localStorage':
                 if (!('localStorage' in window)) {
@@ -34,13 +34,23 @@ export class ClosedBannerStore {
         this.#key = key;
         this.#maxItems = maxItems;
 
-        /*if (this.#storage instanceof Storage) {
+        if (onExternalChange && this.#storage instanceof Storage) {
             window.addEventListener('storage', event => {
-                if (null === event.key || this.#key === event.key) {
-                    this.#loadedItems = null !== event.newValue && '' !== event.newValue ? event.newValue.split(',') : [];
+                if (!(null === event.key || this.#key === event.key)) {
+                    return;
+                }
+
+                const currentItems = this.#loadedItems || [];
+                const newItems = null !== event.newValue && '' !== event.newValue ? event.newValue.split(',') : [];
+                const diff = newItems.filter(id => !currentItems.includes(id));
+
+                this.#loadedItems = newItems;
+
+                if (0 < diff.length) {
+                    onExternalChange(diff);
                 }
             });
-        }*/
+        }
     }
 
     persist(bannerId, closed) {

diff --git a/src/banner/closing/closing-manager.mjs b/src/banner/closing/closing-manager.mjs
@@ -23,7 +23,14 @@ export class ClosingManager {
         this.#frameMessenger = frameMessenger;
 
         const { storage, key, maxItems } = config;
-        this.#store = new ClosedBannerStore({ storage, key, maxItems });
+        this.#store = new ClosedBannerStore({
+            storage,
+            key,
+            maxItems,
+            onExternalChange: ids => {
+                ids.forEach(id => this.closeBanner(id));
+            },
+        });
 
         if (this.#frameMessenger) {
             this.#frameMessenger.on('bannerClosed', ({ data }) => {