diff --git a/src/menu-left.pug b/src/menu-left.pug index 3996f24..232b737 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -1,6 +1,6 @@ sib-widget(name='hd-counter') template - sib-badge(data-src="${value == 'badge' ? src : value}") + sib-fix-badge(data-src="${value == 'badge' ? src : value}") sib-widget(name='hd-create') template diff --git a/src/scripts/index.js b/src/scripts/index.js index 8a86883..bded18f 100644 --- a/src/scripts/index.js +++ b/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"; + } + }); + }); diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index c1a38a8..57bf2be 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -225,3 +225,20 @@ } } } + +// Temporary fix for badges +sib-fix-badge { + display: none; + box-sizing: border-box; + font-family: sans-serif; + font-size: 12px; + background-color: var(--sib-notifications-theme, gray); + color: #36383a; + border-radius: 50%; + line-height: 20px; + width: 20px; + height: 20px; + text-align: center; + font-weight: bold; + padding-bottom: 0; +} \ No newline at end of file