Commit 9aa6ccee authored by Matthieu Fesselier's avatar Matthieu Fesselier

bugfix: fix new store

parent 170093e8
Pipeline #6486 passed with stage
in 2 minutes and 58 seconds
......@@ -2,7 +2,7 @@ import { SIBTemplateElement, Helpers } from 'https://unpkg.com/@startinblox/core
// Dev Mode
//const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
const base_url = "https://unpkg.com/@startinblox/component-notifications@0.2";
const base_url = "https://unpkg.com/@startinblox/component-notifications@0.3";
Helpers.importCSS(`${base_url}/css/badge.css`);
class SIBBadge extends SIBTemplateElement {
......
......@@ -9,7 +9,7 @@ Helpers.importJS('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment
class SIBNotifications extends SIBTemplateElement {
constructor() {
super()
super();
this.favicon = new Favico({ animation: 'none' });
this.title = "";
......@@ -17,38 +17,38 @@ class SIBNotifications extends SIBTemplateElement {
// On read event, mark notification as read
window.addEventListener('read', event => {
if (event.detail && event.detail.resource && event.detail.resource['@id']) {
this._onReadResource(event.detail.resource['@id'])
this._onReadResource(event.detail.resource['@id']);
} else {
this._printError('Resource parameter is missing. Check the documentation: https://git.happy-dev.fr/startinblox/framework/sib-notifications')
this._printError('Resource parameter is missing. Check the documentation: https://git.happy-dev.fr/startinblox/framework/sib-notifications');
}
})
// On click events, ...
this.addEventListener("click", event => {
// unread button -> dispatch read event
let unreadButton = event.target.closest('button[data-unread=unread]')
let unreadButton = event.target.closest('button[data-unread=unread]');
if (unreadButton) {
window.dispatchEvent(new CustomEvent('read', {
detail: {
resource: unreadButton.closest('sib-display').component.resource // get resource from sib display
}
}));
unreadButton.disabled = true
return
unreadButton.disabled = true;
return;
}
// notif item -> navigate to resource
let notifItem = event.target.closest('sib-display')
let notifItem = event.target.closest('sib-display');
if (notifItem && notifItem.hasAttribute('data-notification')) {
this._onClickNotification(notifItem)
return
this._onClickNotification(notifItem);
return;
}
})
// Document -> close menu
document.addEventListener("click", event => {
if (!event.target.closest('.sib-notifications')) {
let notificationsMenu = this.querySelector('details');
const notificationsMenu = this.querySelector('details');
if (notificationsMenu) notificationsMenu.removeAttribute("open")
}
});
......@@ -56,7 +56,7 @@ class SIBNotifications extends SIBTemplateElement {
// Refresh every 30 seconds
window.setInterval(() => {
if (this.querySelector('details') && !this.querySelector('details').hasAttribute("open")) { // prevent menu from closing on refresh
this.refresh()
this.refresh();
}
}, 30000);
}
......@@ -71,34 +71,37 @@ class SIBNotifications extends SIBTemplateElement {
}
render() {
super.render()
super.render();
// Add event listener on populate
let unreadFilter = this.querySelector('#unread-filter')
let unreadFilter = this.querySelector('#unread-filter');
if (unreadFilter) {
unreadFilter.addEventListener("populate", () => this._updateUnread());
}
let notificationsList = this.querySelector('#notifications-list')
let notificationsList = this.querySelector('#notifications-list');
if (notificationsList) {
notificationsList.addEventListener("populate", () => this._updateUI());
}
}
async refresh() {
const notificationsListElement = document.querySelector('#notifications-list');
if (notificationsListElement) await notificationsListElement.component.resource.clearCache();
const notifications = this._getNotificationsList();
if (notifications) notifications.clearCache(); // clear container cache
this.render();
}
/* Events listeners */
async _onReadResource(resourceId) {
let promises = [];
for await(const notification of this._getNotificationsList()['ldp:contains']){
const unread = (await notification.unread).toString() == 'true';
if (unread && ((await notification.object).toString() === resourceId || notification['@id'] === resourceId)) {
promises.push(store.patch({ "http://happy-dev.fr/owl/#unread": false }, notification['@id']))
const notifications = this._getNotificationsList();
if (!notifications) return;
for await(const notification of notifications['ldp:contains']){
const unread = await notification.unread;
if (unread && ((await notification.object)['@id'] === resourceId || notification['@id'] === resourceId)) {
promises.push(store.patch({ "http://happy-dev.fr/owl/#unread": false }, notification['@id']));
notification.clearCache(); // clear cache for the notification marked as read
}
}
......@@ -110,29 +113,29 @@ class SIBNotifications extends SIBTemplateElement {
}
async _onClickNotification(target) {
const object = await target.component.resource.object
const object = await target.component.resource.object;
if (!object) return;
window.dispatchEvent(new CustomEvent('requestNavigation', { detail: { resource: object } }))
this.querySelector('details').removeAttribute("open")
window.dispatchEvent(new CustomEvent('requestNavigation', { detail: { resource: object } }));
this.querySelector('details').removeAttribute("open");
}
_updateUnread() {
let unread = this.querySelector('#badge-unread')
let unread = this.querySelector('#badge-unread');
if (unread) {
let unreadCount = Number(unread.innerText)
if (this.favicon) this.favicon.badge(unreadCount)
let unreadCount = Number(unread.innerText);
if (this.favicon) this.favicon.badge(unreadCount);
if (this.title == "") {
this.title = document.title;
}
if (unreadCount > 0) document.title = "(" + unreadCount + ") " + this.title
else document.title = this.title
if (unreadCount > 0) document.title = "(" + unreadCount + ") " + this.title;
else document.title = this.title;
}
}
_updateUI() {
const notifications = this.querySelectorAll('#notifications-list sib-display')
const notifications = this.querySelectorAll('#notifications-list sib-display');
notifications.forEach(async notif => {
if (!((await notif.component.resource.unread).toString() == 'true')) notif.setAttribute('data-read', 'true') // opacity unread
if (!(await notif.component.resource.unread)) notif.setAttribute('data-read', 'true'); // opacity unread
});
}
......@@ -142,7 +145,7 @@ class SIBNotifications extends SIBTemplateElement {
}
_printError(error) {
console.error(error)
console.error(error);
}
get dateFormat() {
......@@ -191,7 +194,7 @@ class SIBNotifications extends SIBTemplateElement {
<sib-widget name="read-badge">
<template>
<button data-unread="\${ (await value == 'true') ?'unread':'read'}"></button>
<button data-unread="\${(await value) ?'unread':'read'}"></button>
</template>
</sib-widget>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment