update: test badge removal

src/scripts/index.js

@@ -178,6 +178,28 @@ async function checkForPostLeaveRedirect(event) {
   else if(resourceId.includes('project')) performRedirect('project-left');
 }
 
+//- Update badges from notifications list
+async function updateBadges(element) {
+  const unreadNotifications = new Map();
+  const notifications = element.component.resource;
+  if (!notifications) return;
+  // Generate unread map
+  for (let notification of notifications['ldp:contains']) {
+    if (await notification['unread']) {
+      const object = await notification['object'];
+      unreadNotifications.set(object['@id'], (unreadNotifications.get(object['@id']) || 0) + 1);
+    }
+  }
+  // update badges
+  unreadNotifications.forEach((notifNumber, objectId) => {
+    const badge = document.querySelector(`sib-fix-badge[data-src="${objectId}"]`);
+    if (badge) {
+      badge.innerText = notifNumber || '';
+      badge.style.display = notifNumber ? 'block' : 'none';
+    }
+  })
+}
+
 document.addEventListener("DOMContentLoaded", function(event) {
   const menuWrappers = Array.from(document.querySelectorAll(".menu-wrapper"));
 
@@ -291,4 +313,32 @@ document.addEventListener("DOMContentLoaded", function(event) {
       closeRightMenu();
     }
   };
+
+  //- Fix badges performances
+  // on load time
+  document.getElementById('notifications-list').addEventListener('populate', (event) => {
+    const checkExist = setInterval(function () { // wait for left menus to exist
+      const subMenus = document.querySelectorAll('.sub-menu > sib-display > div');
+      if (subMenus.length >= 2) {
+        updateBadges(event.target);
+        clearInterval(checkExist);
+      }
+    }, 500);
+  }, { once: true });
+
+  // on refresh notification list
+  window.addEventListener('notificationsRefresh', () => {
+    document.getElementById('notifications-list').addEventListener('populate', () => {
+      updateBadges(notificationsList);
+    }, { once: true });
+  });
+
+  // on read notification
+  window.addEventListener('read', (event) => {
+    if (event.detail && event.detail.resource && event.detail.resource['@id']) {
+      const badge = document.querySelector(`sib-fix-badge[data-src="${event.detail.resource['@id']}"]`);
+      if (badge) badge.style.display = "none";
+    }
+  });
+
 });