Commit 3b27eb1a authored by Matthieu Fesselier's avatar Matthieu Fesselier

minor: update to core@0.9

parent 3afcde92
Pipeline #6016 passed with stage
in 27 seconds
...@@ -5,11 +5,12 @@ ...@@ -5,11 +5,12 @@
<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> <script type="module" src="https://unpkg.com/@startinblox/oidc@0.8"></script>
<sib-auth> <sib-auth>
<sib-auth-provider <sib-auth-provider
data-authority="http://127.0.0.1:8000" data-authority="http://127.0.0.1:8000/openid/"
data-id="paris" data-id="paris"
data-client_id="548637"
> >
</sib-auth-provider> </sib-auth-provider>
</sib-auth> </sib-auth>
...@@ -19,11 +20,22 @@ ...@@ -19,11 +20,22 @@
--sib-badge-theme: #ffd759; --sib-badge-theme: #ffd759;
} }
</style> </style>
<script data-default-context type="application/ld+json">
{
"inbox": "http://happy-dev.fr/owl/#inbox",
"object": "http://happy-dev.fr/owl/#object"
}
</script>
</head> </head>
<body> <body>
<h1>SIB Badge - demo</h1> <h1>SIB Badge - demo <button id="login">Login</button></h1>
<p>Number of notifications related to conversation 1</p> <p>Number of notifications related to conversation 1</p>
<sib-badge data-src="http://localhost:8000/conversations/1/"></sib-badge> <sib-badge data-src="http://localhost:8000/conversations/1/"></sib-badge>
<script>
login.onclick = () => document.querySelector('sib-auth').login()
</script>
</body> </body>
</html> </html>
...@@ -5,32 +5,41 @@ ...@@ -5,32 +5,41 @@
<title>SIB Notifications - Demo</title> <title>SIB Notifications - 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> <script type="module" src="https://unpkg.com/@startinblox/oidc@0.8"></script>
<sib-auth> <sib-auth>
<sib-auth-provider <sib-auth-provider
data-authority="http://127.0.0.1:8000" data-authority="http://127.0.0.1:8000/openid/"
data-id="paris" data-id="paris"
data-client_id="548637"
> >
</sib-auth-provider> </sib-auth-provider>
</sib-auth> </sib-auth>
<script type="module" src="https://unpkg.com/@startinblox/router"></script>
<style> <style>
:root{ :root{
--sib-notifications-theme: #ffd759; --sib-notifications-theme: #ffd759;
} }
</style> </style>
<script data-default-context type="application/ld+json">
{
"inbox": "http://happy-dev.fr/owl/#inbox",
"object": "http://happy-dev.fr/owl/#object"
}
</script>
</head> </head>
<body> <body>
<h1>SIB Notifications - Demo</h1> <h1>SIB Notifications - Demo <button id="login">Login</button></h1>
<sib-notifications <sib-notifications
bind-user bind-user
nested-field="inbox" nested-field="inbox"
date-format="dddd Do, MMMM" date-format="dddd Do, MMMM"
> ></sib-notifications>
</sib-notifications>
<script>
login.onclick = () => document.querySelector('sib-auth').login()
</script>
</body> </body>
</html> </html>
...@@ -5,32 +5,40 @@ ...@@ -5,32 +5,40 @@
<title>SIB Notifications - Demo</title> <title>SIB Notifications - 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> <script type="module" src="https://unpkg.com/@startinblox/oidc@0.8"></script>
<sib-auth> <sib-auth>
<sib-auth-provider <sib-auth-provider
data-authority="http://127.0.0.1:8000" data-authority="http://127.0.0.1:8000/openid/"
data-id="paris" data-id="paris"
data-client_id="548637"
> >
</sib-auth-provider> </sib-auth-provider>
</sib-auth> </sib-auth>
<script type="module" src="https://unpkg.com/@startinblox/router"></script> <script type="module" src="https://unpkg.com/@startinblox/router@0.7"></script>
<style> <style>
:root{ :root{
--sib-notifications-theme: #ffd759; --sib-notifications-theme: #ffd759;
} }
</style> </style>
<script data-default-context type="application/ld+json">
{
"inbox": "http://happy-dev.fr/owl/#inbox",
"object": "http://happy-dev.fr/owl/#object"
}
</script>
</head> </head>
<body> <body>
<h1>SIB Notifications and routing - Demo</h1> <h1>SIB Notifications and routing - Demo <button id="login">Login</button></h1>
<sib-notifications <sib-notifications
bind-user bind-user
nested-field="inbox" nested-field="inbox"
extra-context='{"hd": "http://happy-dev.fr/owl/#"}' extra-context='{"hd": "http://happy-dev.fr/owl/#"}'
></sib-notifications> ></sib-notifications>
<sib-router default-route="home" route-prefix="examples/notifications-routing.html"> <sib-router default-route="home" route-prefix="examples/notifications-routing.html">
<sib-route name="home"></sib-route> <sib-route name="home"></sib-route>
...@@ -45,5 +53,9 @@ ...@@ -45,5 +53,9 @@
<h1>Conversations</h1> <h1>Conversations</h1>
<sib-display bind-resources fields="title"></sib-display> <sib-display bind-resources fields="title"></sib-display>
</div> </div>
<script>
login.onclick = () => document.querySelector('sib-auth').login()
</script>
</body> </body>
</html> </html>
...@@ -2,35 +2,43 @@ ...@@ -2,35 +2,43 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<title>SIB Notifications - Demo</title> <title>SIB Notifications - 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> <script type="module" src="https://unpkg.com/@startinblox/oidc@0.8"></script>
<sib-auth> <sib-auth>
<sib-auth-provider <sib-auth-provider
data-authority="http://127.0.0.1:8000" data-authority="http://127.0.0.1:8000/openid/"
data-id="paris" data-id="paris"
data-client_id="548637"
> >
</sib-auth-provider> </sib-auth-provider>
</sib-auth> </sib-auth>
<script type="module" src="https://unpkg.com/@startinblox/router"></script>
<style> <style>
:root{ :root{
--sib-notifications-theme: #ffd759; --sib-notifications-theme: #ffd759;
} }
</style> </style>
<script data-default-context type="application/ld+json">
{
"inbox": "http://happy-dev.fr/owl/#inbox",
"object": "http://happy-dev.fr/owl/#object"
}
</script>
</head> </head>
<body> <body>
<h1>SIB Notifications - Demo</h1> <h1>SIB Notifications - Demo <button id="login">Login</button></h1>
<sib-notifications <sib-notifications
bind-user bind-user
id-suffix="inbox" nested-field="inbox"
> ></sib-notifications>
</sib-notifications>
<script>
login.onclick = () => document.querySelector('sib-auth').login()
</script>
</body> </body>
</html> </html>
import { SIBTemplateElement, Helpers } from 'https://unpkg.com/@startinblox/core@0.8'; import { SIBTemplateElement, Helpers } from 'https://unpkg.com/@startinblox/core@0.9';
// Dev Mode // Dev Mode
//const base_url = import.meta.url.replace(/\/[^\/]*$/, ''); //const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
......
import { SIBTemplateElement, store, Helpers } from 'https://unpkg.com/@startinblox/core@0.8'; import { SIBTemplateElement, store, Helpers } from 'https://unpkg.com/@startinblox/core@0.9';
import Favico from 'https://dev.jspm.io/favico.js-slevomat'; import Favico from 'https://dev.jspm.io/favico.js-slevomat';
// Dev Mode // Dev Mode
...@@ -12,12 +12,11 @@ class SIBNotifications extends SIBTemplateElement { ...@@ -12,12 +12,11 @@ class SIBNotifications extends SIBTemplateElement {
super() super()
this.favicon = new Favico({animation:'none'}) this.favicon = new Favico({animation:'none'})
this.title = "" this.title = ""
// On read event, mark notification as read // On read event, mark notification as read
window.addEventListener('read', event => { window.addEventListener('read', event => {
if(event.detail && event.detail.resource && event.detail.resource['@id']) { if (event.detail && event.detail.resource && event.detail.resource['@id']) {
this._onReadResource(event.detail.resource['@id']) this._onReadResource(event.detail.resource['@id'])
} else { } 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')
...@@ -86,34 +85,33 @@ class SIBNotifications extends SIBTemplateElement { ...@@ -86,34 +85,33 @@ class SIBNotifications extends SIBTemplateElement {
} }
} }
refresh() { async refresh() {
const context = document.querySelector('#notifications-list').component.context; const notificationsListElement = document.querySelector('#notifications-list');
store.get(this.resourceId, context, true).then(() => this.render()) if (notificationsListElement) await notificationsListElement.component.resource.clearCache();
this.render();
} }
/* Events listeners */ /* Events listeners */
_onReadResource(resourceId) { async _onReadResource(resourceId) {
const edits = this._getNotificationsList() let promises = [];
.filter((notification) => notification.unread &&
(notification.object['@id'] === resourceId || notification['@id'] === resourceId)) // compare id with objects id or notifications id for await(const notification of this._getNotificationsList()['ldp:contains']){
.map((notification) => store.patch(notification['@id'], { unread: false })) const unread = (await notification.unread).toString() == 'true';
if (unread && ((await notification.object).toString() === resourceId || notification['@id'] === resourceId)) {
Promise.all(edits) promises.push(store.patch({ "http://happy-dev.fr/owl/#unread": false }, notification['@id']))
.then(() => this.render()) }
}
Promise.all(promises)
.then(() => this.refresh())
.catch((error) => this._printError(error)); .catch((error) => this._printError(error));
} }
_onClickNotification(target) { async _onClickNotification(target) {
let extraContext = {} const object = await target.component.resource.object
if (this.props.extraContext) { if (!object) return;
extraContext = JSON.parse(this.props.extraContext) window.dispatchEvent(new CustomEvent('requestNavigation', { detail: { resource: object } }))
} this.querySelector('details').removeAttribute("open")
const context = { ...target.component.context, ...extraContext }
store.get(target.component.resource.object, context).then((resource) => {
if (!resource) return;
window.dispatchEvent(new CustomEvent('requestNavigation', { detail: { resource: resource } }))
this.querySelector('details').removeAttribute("open")
})
} }
_updateUnread() { _updateUnread() {
...@@ -131,14 +129,14 @@ class SIBNotifications extends SIBTemplateElement { ...@@ -131,14 +129,14 @@ class SIBNotifications extends SIBTemplateElement {
_updateUI() { _updateUI() {
const notifications = this.querySelectorAll('#notifications-list sib-display') const notifications = this.querySelectorAll('#notifications-list sib-display')
notifications.forEach(notif => { notifications.forEach(async notif => {
if (!notif.component.resource.unread) notif.setAttribute('data-read', 'true') // opacity unread if (!(await notif.component.resource.unread == 'true')) notif.setAttribute('data-read', 'true') // opacity unread
}); });
} }
_getNotificationsList() { _getNotificationsList() {
const notificationsList = this.querySelector('#notifications-list'); const notificationsList = this.querySelector('#notifications-list');
return notificationsList ? notificationsList.component.resources : null; return notificationsList ? notificationsList.component.resource : null;
} }
_printError(error) { _printError(error) {
...@@ -149,16 +147,12 @@ class SIBNotifications extends SIBTemplateElement { ...@@ -149,16 +147,12 @@ class SIBNotifications extends SIBTemplateElement {
return this.props.dateFormat ? this.props.dateFormat : 'DD/MM/YYYY - kk:mm'; return this.props.dateFormat ? this.props.dateFormat : 'DD/MM/YYYY - kk:mm';
} }
get resourceId() { template({ dataSrc, nestedField }) {
return this.props.dataSrc + (this.props.nestedField ? this.props.nestedField + '/' : '')
}
template({ dataSrc }) {
if (dataSrc) { if (dataSrc) {
return ` return `
<div class="sib-notifications"> <div class="sib-notifications">
<sib-widget name="custom-date"> <sib-widget name="custom-date">
<template>\${moment(value).format("${this.dateFormat}")}</template> <template>\${(await value) ? moment((await value).toString()).format("${this.dateFormat}") : ""}</template>
</sib-widget> </sib-widget>
<details class="sib-notifications__container"> <details class="sib-notifications__container">
<summary class="sib-notifications__button"> <summary class="sib-notifications__button">
...@@ -166,7 +160,8 @@ class SIBNotifications extends SIBTemplateElement { ...@@ -166,7 +160,8 @@ class SIBNotifications extends SIBTemplateElement {
<div class="sib-notifications__counter"> <div class="sib-notifications__counter">
<sib-display <sib-display
id="unread-filter" id="unread-filter"
data-src="${this.resourceId}" data-src="${dataSrc}"
${nestedField ? 'nested-field="' + nestedField + '"' : ``}
fields="none" fields="none"
search-fields="unread" search-fields="unread"
search-value-unread="true" search-value-unread="true"
...@@ -179,7 +174,8 @@ class SIBNotifications extends SIBTemplateElement { ...@@ -179,7 +174,8 @@ class SIBNotifications extends SIBTemplateElement {
<sib-display <sib-display
id="notifications-list" id="notifications-list"
class="sib-notifications__items" class="sib-notifications__items"
data-src="${this.resourceId}" data-src="${dataSrc}"
${nestedField ? 'nested-field="' + nestedField + '"' : ``}
fields="unread, content(author.avatar, wrapper(author.name, source(type, object.name), date))" fields="unread, content(author.avatar, wrapper(author.name, source(type, object.name), date))"
widget-unread="read-badge" widget-unread="read-badge"
widget-object.name="sib-display-labelled-div" widget-object.name="sib-display-labelled-div"
...@@ -193,7 +189,7 @@ class SIBNotifications extends SIBTemplateElement { ...@@ -193,7 +189,7 @@ class SIBNotifications extends SIBTemplateElement {
<sib-widget name="read-badge"> <sib-widget name="read-badge">
<template> <template>
<button data-unread="\${value?'unread':'read'}"></button> <button data-unread="\${ (await value == 'true') ?'unread':'read'}"></button>
</template> </template>
</sib-widget> </sib-widget>
</div> </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