Commit a06ef51e authored by Matthieu Fesselier's avatar Matthieu Fesselier

Merge branch 'new-counter' into 'master'

update: component improvements

See merge request !6
parents a0ab66c7 6b195da3
Pipeline #3269 passed with stage
in 28 seconds
sib-display-value{
display: block;
}
.sib-notifications{
box-sizing: border-box;
font-family: sans-serif;
......@@ -22,6 +25,10 @@
line-height: 20px;
}
[data-nb-unread="0"]{
display: none !important;
}
/* Button */
.sib-notifications__button{
display: block;
......@@ -92,7 +99,7 @@
background-color: var(--sib-notifications-theme, gray);
}*/
.sib-notifications__items read-badge [data-read]{
.sib-notifications__items read-badge [data-unread]{
display: block;
width: 4px;
height: 4px;
......@@ -104,7 +111,7 @@
border: 2px solid #DDD;
}
.sib-notifications__items read-badge [data-read=unread]{
.sib-notifications__items read-badge [data-unread=unread]{
border-color: var(--sib-notifications-theme, gray);
background-color: var(--sib-notifications-theme, gray);
}
......
......@@ -40,28 +40,21 @@ class SIBNotifications extends SIBTemplateElement {
super.render()
// Add event listener on populate
let notificationContainer = this.querySelector('#notifications-list')
if (notificationContainer) {
notificationContainer.addEventListener("populate", (event) => {
this._updateUnread(event.detail.resource)
})
let unreadFilter = this.querySelector('#unread-filter')
if (unreadFilter) {
unreadFilter.addEventListener("populate", () => this._updateUnread())
}
}
/* Events listeners */
_onReadResource(resourceId) {
let markedAsRead = 0
this._getNotificationsList().forEach(notification => {
if (notification.object['@id'] === resourceId) {
store.patch(notification['@id'], { read: true })
.then(() => console.log('Notification marked as read'))
.catch((error) => this._printError(error))
markedAsRead++
}
})
if (markedAsRead) {
this.render() // TODO : render after all marked as unread
}
const edits = this._getNotificationsList()
.filter((notification) => notification.unread && notification.object['@id'] === resourceId)
.map((notification) => store.patch(notification['@id'], { unread: false }))
Promise.all(edits)
.then(() => this.render())
.catch((error) => this._printError(error));
}
_onClickNotification(target) {
......@@ -73,18 +66,10 @@ class SIBNotifications extends SIBTemplateElement {
}
}
_updateUnread(resource) {
let unread = 0
const resources = Array.isArray(resource['ldp:contains']) ? resource['ldp:contains'] : [resource['ldp:contains']]
resources.forEach(notification => {
if (!notification.read) unread++
// TODO : read / unread
})
// Update favicon
this.favicon.badge(unread)
this.querySelector('#badge-unread').innerText = unread
}
_updateUnread() {
let unread = document.querySelector('#badge-unread').innerText
if (unread != 0) this.favicon.badge(unread)
}
_getNotificationsList() {
let notificationsList = this.querySelector('#notifications-list')
......@@ -104,7 +89,15 @@ class SIBNotifications extends SIBTemplateElement {
<summary class="sib-notifications__button">
<img src="${base_url}/img/notification-icon.svg" />
<div class="sib-notifications__counter">
<span id="badge-unread"></span>
<sib-display
id="unread-filter"
data-src="${sourceUrl}"
data-fields="none"
search-fields="unread"
search-value-unread="true"
search-widget-unread="sib-form-hidden"
counter-template="<span id='badge-unread' data-nb-unread='\${counter}'>\${counter}</span>"
></sib-display>
</div>
</summary>
<div class="sib-notifications__list">
......@@ -112,11 +105,10 @@ class SIBNotifications extends SIBTemplateElement {
id="notifications-list"
class="sib-notifications__items"
data-src="${sourceUrl}"
widget-read="read-badge"
widget-unread="read-badge"
set-wrapper="author_user.username, type, date"
set-content="author_user.avatar, wrapper"
data-fields="read, content"
data-fields="unread, content"
widget-author_user.avatar="sib-display-img"
paginate-by="10"></sib-display>
</div>
......@@ -124,7 +116,7 @@ class SIBNotifications extends SIBTemplateElement {
<sib-widget name="read-badge">
<template>
<div data-read="\${value?'read':'unread'}"></div>
<div data-unread="\${value?'unread':'read'}"></div>
</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