Commit 2eb4c0a4 authored by Matthieu Fesselier's avatar Matthieu Fesselier

update: listen on read events

parent 525f5f3c
Pipeline #4245 passed with stage
in 32 seconds
...@@ -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>
...@@ -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>
......
...@@ -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>
......
...@@ -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>
......
...@@ -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>
......
...@@ -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>"
......
...@@ -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