Skip to content

S
SiB Notifications
Commit 44dfb9b0 authored by Matthieu Fesselier's avatar Matthieu Fesselier
Browse files
Options

Merge branch 'update/23-make-badge-disappear' into 'master' 

update: render badge on read #23

Closes #23

See merge request !14
parents a64b4e09 043a3f64
Pipeline #4248 passed with stage
    in 27 seconds
    Hide whitespace changes
    Inline Side-by-side
    Showing with 29 additions and 11 deletions
    examples/badge.html
    View file @ 44dfb9b0
    ......@@ -28,6 +28,6 @@
    <body>
    <h1>SIB Badge - demo</h1>
    <p>Number of notifications related to conversation 1</p>
    <sib-badge data-src="http://127.0.0.1:8000/conversations/1/"></sib-badge>
    <sib-badge data-src="http://localhost:8000/conversations/1/"></sib-badge>
    </body>
    </html>
    sib-badge.js
    View file @ 44dfb9b0
    ......@@ -4,6 +4,24 @@ const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
    Helpers.importCSS(`${base_url}/css/badge.css`)
    class SIBBadge extends SIBTemplateElement {
    constructor() {
    super()
    // On read events, remove badge
    window.addEventListener('read', event => {
    if (event.detail &&
    event.detail.resource &&
    event.detail.resource['@id'] &&
    event.detail.resource['@id'] == this.resourceId) {
    this.querySelector('.counter').remove();
    }
    })
    }
    get resourceId() {
    return this.props.dataSrc + (this.props.idSuffix ? this.props.idSuffix + '/' : '')
    }
    static get propsDefinition() {
    return {
    dataSrc: 'data-src',
    ......@@ -11,9 +29,8 @@ class SIBBadge extends SIBTemplateElement {
    }
    }
    template({ dataSrc, idSuffix }) {
    template({dataSrc}) {
    if (dataSrc) {
    let sourceUrl = dataSrc + (idSuffix ? idSuffix + '/' : '')
    return `
    <sib-display
    bind-user
    ......@@ -21,7 +38,7 @@ class SIBBadge extends SIBTemplateElement {
    data-fields
    search-fields="unread, object"
    search-value-unread="true"
    search-value-object="${sourceUrl}"
    search-value-object="${this.resourceId}"
    search-widget-unread="sib-form-hidden"
    search-widget-object="sib-form-hidden"
    counter-template="<div class='counter' data-nb-unread='\${counter}'>\${counter}</div>"
    ......
    sib-notifications.js
    View file @ 44dfb9b0
    ......@@ -22,10 +22,15 @@ class SIBNotifications extends SIBTemplateElement {
    // On click events, ...
    this.addEventListener("click", event => {
    // unread button -> mark as read
    // unread button -> dispatch read event
    let unreadButton = event.target.closest('button[data-unread=unread]')
    if (unreadButton) {
    this._onClickUnreadButton(unreadButton)
    window.dispatchEvent(new CustomEvent('read', {
    detail: {
    resource: unreadButton.closest('sib-display').resource // get resource from sib display
    }
    }));
    unreadButton.disabled = true
    return
    }
    ......@@ -74,7 +79,7 @@ class SIBNotifications extends SIBTemplateElement {
    _onReadResource(resourceId) {
    const edits = this._getNotificationsList()
    .filter((notification) => notification.unread &&
    (notification.object['@id'] === resourceId || notification['@id'] === resourceId))
    (notification.object['@id'] === resourceId || notification['@id'] === resourceId)) // compare id with objects id or notifications id
    .map((notification) => store.patch(notification['@id'], { unread: false }))
    Promise.all(edits)
    ......@@ -94,10 +99,6 @@ class SIBNotifications extends SIBTemplateElement {
    this.querySelector('details').removeAttribute("open")
    })
    }
    _onClickUnreadButton(target) {
    this._onReadResource(target.closest('sib-display').resource['@id'])
    target.disabled = true
    }
    _updateUnread() {
    let unread = Number(document.querySelector('#badge-unread').innerText)
    ......
    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