Commit 4c9e104c authored by Matthieu Fesselier's avatar Matthieu Fesselier

Merge branch 'update-to-0.9' into 'master'

minor: update to core@0.9

See merge request !18
parents 3afcde92 3b27eb1a
Pipeline #6017 passed with stage
in 1 minute and 37 seconds
......@@ -5,11 +5,12 @@
<title>SIB Badge - Demo</title>
<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-provider
data-authority="http://127.0.0.1:8000"
data-authority="http://127.0.0.1:8000/openid/"
data-id="paris"
data-client_id="548637"
>
</sib-auth-provider>
</sib-auth>
......@@ -19,11 +20,22 @@
--sib-badge-theme: #ffd759;
}
</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>
<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>
<sib-badge data-src="http://localhost:8000/conversations/1/"></sib-badge>
<script>
login.onclick = () => document.querySelector('sib-auth').login()
</script>
</body>
</html>
......@@ -5,32 +5,41 @@
<title>SIB Notifications - Demo</title>
<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-provider
data-authority="http://127.0.0.1:8000"
data-authority="http://127.0.0.1:8000/openid/"
data-id="paris"
data-client_id="548637"
>
</sib-auth-provider>
</sib-auth>
<script type="module" src="https://unpkg.com/@startinblox/router"></script>
<style>
:root{
--sib-notifications-theme: #ffd759;
}
</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>
<body>
<h1>SIB Notifications - Demo</h1>
<h1>SIB Notifications - Demo <button id="login">Login</button></h1>
<sib-notifications
bind-user
nested-field="inbox"
date-format="dddd Do, MMMM"
>
</sib-notifications>
bind-user
nested-field="inbox"
date-format="dddd Do, MMMM"
></sib-notifications>
<script>
login.onclick = () => document.querySelector('sib-auth').login()
</script>
</body>
</html>
......@@ -5,32 +5,40 @@
<title>SIB Notifications - Demo</title>
<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-provider
data-authority="http://127.0.0.1:8000"
data-authority="http://127.0.0.1:8000/openid/"
data-id="paris"
data-client_id="548637"
>
</sib-auth-provider>
</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>
:root{
--sib-notifications-theme: #ffd759;
}
</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>
<body>
<h1>SIB Notifications and routing - Demo</h1>
<h1>SIB Notifications and routing - Demo <button id="login">Login</button></h1>
<sib-notifications
bind-user
nested-field="inbox"
extra-context='{"hd": "http://happy-dev.fr/owl/#"}'
></sib-notifications>
></sib-notifications>
<sib-router default-route="home" route-prefix="examples/notifications-routing.html">
<sib-route name="home"></sib-route>
......@@ -45,5 +53,9 @@
<h1>Conversations</h1>
<sib-display bind-resources fields="title"></sib-display>
</div>
<script>
login.onclick = () => document.querySelector('sib-auth').login()
</script>
</body>
</html>
......@@ -2,35 +2,43 @@
<html>
<head>
<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>
<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-provider
data-authority="http://127.0.0.1:8000"
data-authority="http://127.0.0.1:8000/openid/"
data-id="paris"
data-client_id="548637"
>
</sib-auth-provider>
</sib-auth>
<script type="module" src="https://unpkg.com/@startinblox/router"></script>
<style>
:root{
--sib-notifications-theme: #ffd759;
}
</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>
<body>
<h1>SIB Notifications - Demo</h1>
<h1>SIB Notifications - Demo <button id="login">Login</button></h1>
<sib-notifications
bind-user
id-suffix="inbox"
>
</sib-notifications>
bind-user
nested-field="inbox"
></sib-notifications>
<script>
login.onclick = () => document.querySelector('sib-auth').login()
</script>
</body>
</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
//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';
// Dev Mode
......@@ -12,12 +12,11 @@ class SIBNotifications extends SIBTemplateElement {
super()
this.favicon = new Favico({animation:'none'})
this.title = ""
// On read event, mark notification as read
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'])
} else {
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 {
}
}
refresh() {
const context = document.querySelector('#notifications-list').component.context;
store.get(this.resourceId, context, true).then(() => this.render())
async refresh() {
const notificationsListElement = document.querySelector('#notifications-list');
if (notificationsListElement) await notificationsListElement.component.resource.clearCache();
this.render();
}
/* Events listeners */
_onReadResource(resourceId) {
const edits = this._getNotificationsList()
.filter((notification) => notification.unread &&
(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)
.then(() => this.render())
async _onReadResource(resourceId) {
let promises = [];
for await(const notification of this._getNotificationsList()['ldp:contains']){
const unread = (await notification.unread).toString() == 'true';
if (unread && ((await notification.object).toString() === resourceId || notification['@id'] === resourceId)) {
promises.push(store.patch({ "http://happy-dev.fr/owl/#unread": false }, notification['@id']))
}
}
Promise.all(promises)
.then(() => this.refresh())
.catch((error) => this._printError(error));
}
_onClickNotification(target) {
let extraContext = {}
if (this.props.extraContext) {
extraContext = JSON.parse(this.props.extraContext)
}
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")
})
async _onClickNotification(target) {
const object = await target.component.resource.object
if (!object) return;
window.dispatchEvent(new CustomEvent('requestNavigation', { detail: { resource: object } }))
this.querySelector('details').removeAttribute("open")
}
_updateUnread() {
......@@ -131,14 +129,14 @@ class SIBNotifications extends SIBTemplateElement {
_updateUI() {
const notifications = this.querySelectorAll('#notifications-list sib-display')
notifications.forEach(notif => {
if (!notif.component.resource.unread) notif.setAttribute('data-read', 'true') // opacity unread
notifications.forEach(async notif => {
if (!(await notif.component.resource.unread == 'true')) notif.setAttribute('data-read', 'true') // opacity unread
});
}
_getNotificationsList() {
const notificationsList = this.querySelector('#notifications-list');
return notificationsList ? notificationsList.component.resources : null;
return notificationsList ? notificationsList.component.resource : null;
}
_printError(error) {
......@@ -149,16 +147,12 @@ class SIBNotifications extends SIBTemplateElement {
return this.props.dateFormat ? this.props.dateFormat : 'DD/MM/YYYY - kk:mm';
}
get resourceId() {
return this.props.dataSrc + (this.props.nestedField ? this.props.nestedField + '/' : '')
}
template({ dataSrc }) {
template({ dataSrc, nestedField }) {
if (dataSrc) {
return `
<div class="sib-notifications">
<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>
<details class="sib-notifications__container">
<summary class="sib-notifications__button">
......@@ -166,7 +160,8 @@ class SIBNotifications extends SIBTemplateElement {
<div class="sib-notifications__counter">
<sib-display
id="unread-filter"
data-src="${this.resourceId}"
data-src="${dataSrc}"
${nestedField ? 'nested-field="' + nestedField + '"' : ``}
fields="none"
search-fields="unread"
search-value-unread="true"
......@@ -179,7 +174,8 @@ class SIBNotifications extends SIBTemplateElement {
<sib-display
id="notifications-list"
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))"
widget-unread="read-badge"
widget-object.name="sib-display-labelled-div"
......@@ -193,7 +189,7 @@ class SIBNotifications extends SIBTemplateElement {
<sib-widget name="read-badge">
<template>
<button data-unread="\${value?'unread':'read'}"></button>
<button data-unread="\${ (await value == 'true') ?'unread':'read'}"></button>
</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