Skip to content

S
SiB Notifications
Commit 2eb4c0a4 authored by Matthieu Fesselier's avatar Matthieu Fesselier
Browse files
Options

update: listen on read events

parent 525f5f3c
Pipeline #4245 passed with stage
    in 32 seconds
    Hide whitespace changes
    Inline Side-by-side
    Showing with 38 additions and 17 deletions
    examples/badge.html
    View file @ 2eb4c0a4
    ...@@ -5,6 +5,18 @@ ...@@ -5,6 +5,18 @@
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
    <title>SIB Badge - Demo</title> <title>SIB Badge - Demo</title>
    <script type="module" src="../index.js"></script> <script type="module" src="../index.js"></script>
    <script type="module" src="https://unpkg.com/@startinblox/oidc@latest"></script>
    <sib-auth>
    <sib-auth-provider
    class="sib-auth-provider"
    data-authority="http://127.0.0.1:8000/"
    data-client_id="268937"
    data-id="paris"
    >
    </sib-auth-provider>
    </sib-auth>
    <script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script> <script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script>
    <style> <style>
    :root{ :root{
    ...@@ -16,6 +28,6 @@ ...@@ -16,6 +28,6 @@
    <body> <body>
    <h1>SIB Badge - demo</h1> <h1>SIB Badge - demo</h1>
    <p>Number of notifications related to conversation 7</p> <p>Number of notifications related to conversation 7</p>
    <sib-badge data-src="http://127.0.0.1:8000/conversations/7/"></sib-badge> <sib-badge data-src="http://localhost:8000/conversations/1/"></sib-badge>
    </body> </body>
    </html> </html>
    examples/notifications-format-date.html
    View file @ 2eb4c0a4
    ...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
    <sib-auth> <sib-auth>
    <sib-auth-provider <sib-auth-provider
    class="sib-auth-provider" class="sib-auth-provider"
    data-authority="http://127.0.0.1:8000/openid/" data-authority="http://127.0.0.1:8000/"
    data-client_id="464079" data-client_id="268937"
    data-id="paris" data-id="paris"
    > >
    </sib-auth-provider> </sib-auth-provider>
    ......
    examples/notifications-routing.html
    View file @ 2eb4c0a4
    ...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
    <sib-auth> <sib-auth>
    <sib-auth-provider <sib-auth-provider
    class="sib-auth-provider" class="sib-auth-provider"
    data-authority="http://127.0.0.1:8000/openid/" data-authority="http://127.0.0.1:8000/"
    data-client_id="464079" data-client_id="268937"
    data-id="paris" data-id="paris"
    > >
    </sib-auth-provider> </sib-auth-provider>
    ......
    examples/notifications.html
    View file @ 2eb4c0a4
    ...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
    <sib-auth> <sib-auth>
    <sib-auth-provider <sib-auth-provider
    class="sib-auth-provider" class="sib-auth-provider"
    data-authority="http://127.0.0.1:8000/openid/" data-authority="http://127.0.0.1:8000/"
    data-client_id="464079" data-client_id="268937"
    data-id="paris" data-id="paris"
    > >
    </sib-auth-provider> </sib-auth-provider>
    ......
    index.html
    View file @ 2eb4c0a4
    ...@@ -8,8 +8,8 @@ ...@@ -8,8 +8,8 @@
    <sib-auth> <sib-auth>
    <sib-auth-provider <sib-auth-provider
    class="sib-auth-provider" class="sib-auth-provider"
    data-authority="http://127.0.0.1:8000/openid/" data-authority="http://127.0.0.1:8000/"
    data-client_id="464079" data-client_id="268937"
    data-id="paris" data-id="paris"
    > >
    </sib-auth-provider> </sib-auth-provider>
    ......
    sib-badge.js
    View file @ 2eb4c0a4
    ...@@ -6,7 +6,20 @@ Helpers.importCSS(`${base_url}/css/badge.css`) ...@@ -6,7 +6,20 @@ Helpers.importCSS(`${base_url}/css/badge.css`)
    class SIBBadge extends SIBTemplateElement { class SIBBadge extends SIBTemplateElement {
    constructor() { constructor() {
    super() super()
    window.addEventListener('notificationsUpdated', () => this.render());
    // 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() { static get propsDefinition() {
    ...@@ -16,9 +29,8 @@ class SIBBadge extends SIBTemplateElement { ...@@ -16,9 +29,8 @@ class SIBBadge extends SIBTemplateElement {
    } }
    } }
    template({ dataSrc, idSuffix }) { template({dataSrc}) {
    if (dataSrc) { if (dataSrc) {
    let sourceUrl = dataSrc + (idSuffix ? idSuffix + '/' : '')
    return ` return `
    <sib-display <sib-display
    bind-user bind-user
    ...@@ -26,7 +38,7 @@ class SIBBadge extends SIBTemplateElement { ...@@ -26,7 +38,7 @@ class SIBBadge extends SIBTemplateElement {
    data-fields data-fields
    search-fields="unread, object" search-fields="unread, object"
    search-value-unread="true" search-value-unread="true"
    search-value-object="${sourceUrl}" search-value-object="${this.resourceId}"
    search-widget-unread="sib-form-hidden" search-widget-unread="sib-form-hidden"
    search-widget-object="sib-form-hidden" search-widget-object="sib-form-hidden"
    counter-template="<div class='counter' data-nb-unread='\${counter}'>\${counter}</div>" counter-template="<div class='counter' data-nb-unread='\${counter}'>\${counter}</div>"
    ......
    sib-notifications.js
    View file @ 2eb4c0a4
    ...@@ -83,10 +83,7 @@ class SIBNotifications extends SIBTemplateElement { ...@@ -83,10 +83,7 @@ class SIBNotifications extends SIBTemplateElement {
    .map((notification) => store.patch(notification['@id'], { unread: false })) .map((notification) => store.patch(notification['@id'], { unread: false }))
    Promise.all(edits) Promise.all(edits)
    .then(() => { .then(() => this.render())
    this.render();
    window.dispatchEvent(new CustomEvent('notificationsUpdated'));
    })
    .catch((error) => this._printError(error)); .catch((error) => this._printError(error));
    } }
    ......
    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