Commit b0bfafd5 authored by Matthieu Fesselier's avatar Matthieu Fesselier

Merge branch 'update/upgrade-core-0.8' into 'master'

minor: upgrade to core 0.8

See merge request !16
parents 0864a99b a21405b0
Pipeline #4484 passed with stage
in 27 seconds
......@@ -7,8 +7,6 @@ sib-display-value{
font-size: 14px;
}
.sib-notifications__container{ }
/* Counter */
.sib-notifications__counter{
position: absolute;
......@@ -81,7 +79,7 @@ sib-display-value{
}
/* Read / unread */
.sib-notifications__items [data-read] [name=content]{
.sib-notifications__items [data-read] [name=content] > div{
opacity: .3;
}
......@@ -124,19 +122,19 @@ sib-display-value{
/* Fields */
.sib-notifications__items [name=content]{
.sib-notifications__items [name=content] > div{
padding: 0.8rem 0;
position: relative;
display: flex;
}
.sib-notifications__items [name="wrapper"]{
.sib-notifications__items [name="wrapper"] > div{
flex-grow: 1;
padding-right: 2rem;
}
.sib-notifications__items [name="author.username"]{
font-weight: bold;
}
.sib-notifications__items [name="source"]{
.sib-notifications__items [name="source"] > div{
margin-top: 0.15rem;
margin-bottom: 0.5rem;
}
......
......@@ -2,7 +2,6 @@
<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 Badge - Demo</title>
<script type="module" src="../index.js"></script>
......@@ -11,13 +10,12 @@
<sib-auth-provider
class="sib-auth-provider"
data-authority="http://127.0.0.1:8000"
data-client_id="268937"
data-client_id="409289"
data-id="paris"
>
</sib-auth-provider>
</sib-auth>
<script type="module" src="https://unpkg.com/@startinblox/core@0.7"></script>
<style>
:root{
--sib-badge-theme: #ffd759;
......
......@@ -2,7 +2,6 @@
<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>
......@@ -11,13 +10,12 @@
<sib-auth-provider
class="sib-auth-provider"
data-authority="http://127.0.0.1:8000"
data-client_id="268937"
data-client_id="409289"
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/router"></script>
<style>
......
......@@ -2,7 +2,6 @@
<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>
......@@ -11,13 +10,12 @@
<sib-auth-provider
class="sib-auth-provider"
data-authority="http://127.0.0.1:8000"
data-client_id="268937"
data-client_id="409289"
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/router"></script>
<style>
......@@ -33,21 +31,21 @@
<sib-notifications
bind-user
id-suffix="inbox"
extra-context='{"doap": "http://usefulinc.com/ns/doap#"}'
extra-context='{"hd": "http://happy-dev.fr/owl/#"}'
></sib-notifications>
<sib-router default-route="home" route-prefix="examples/notifications-routing.html">
<sib-route name="home"></sib-route>
<sib-route name="project" rdf-type="doap:project" use-id></sib-route>
<sib-route name="conversations" rdf-type="hd:conversation" use-id></sib-route>
</sib-router>
<div id="home">
<h1>Home</h1>
</div>
<div id="project">
<h1>Project</h1>
<sib-display bind-resources data-fields="name"></sib-display>
<div id="conversations">
<h1>Conversations</h1>
<sib-display bind-resources fields="title"></sib-display>
</div>
</body>
</html>
......@@ -11,13 +11,12 @@
<sib-auth-provider
class="sib-auth-provider"
data-authority="http://127.0.0.1:8000"
data-client_id="268937"
data-client_id="409289"
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/router"></script>
<style>
......
......@@ -9,7 +9,7 @@
<sib-auth-provider
class="sib-auth-provider"
data-authority="http://127.0.0.1:8000"
data-client_id="268937"
data-client_id="409289"
data-id="paris"
>
</sib-auth-provider>
......
......@@ -41,6 +41,6 @@
"access": "public"
},
"dependencies": {
"@startinblox/core": "^0.5.0"
"@startinblox/core": "^0.8.0"
}
}
import { SIBTemplateElement, Helpers } from 'https://unpkg.com/@startinblox/core@0.7';
import { SIBTemplateElement, Helpers } from 'https://unpkg.com/@startinblox/core@0.8';
const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
Helpers.importCSS(`${base_url}/css/badge.css`)
// Dev Mode
//const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
const base_url = "https://unpkg.com/@startinblox/component-notifications";
Helpers.importCSS(`${base_url}/css/badge.css`);
class SIBBadge extends SIBTemplateElement {
constructor() {
......@@ -34,8 +36,8 @@ class SIBBadge extends SIBTemplateElement {
return `
<sib-display
bind-user
id-suffix="inbox"
data-fields
nested-field="inbox"
fields="none"
search-fields="unread, object"
search-value-unread="true"
search-value-object="${this.resourceId}"
......
import { SIBTemplateElement, store, Helpers } from 'https://unpkg.com/@startinblox/core@0.7';
import { SIBTemplateElement, store, Helpers } from 'https://unpkg.com/@startinblox/core@0.8';
import Favico from 'https://dev.jspm.io/favico.js-slevomat';
const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
// Dev Mode
// const base_url = import.meta.url.replace(/\/[^\/]*$/, '');
const base_url = "https://unpkg.com/@startinblox/component-notifications";
Helpers.importCSS(`${base_url}/css/notification.css`);
Helpers.importJS('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js');
......@@ -11,7 +13,7 @@ class SIBNotifications extends SIBTemplateElement {
this.favicon = new Favico({animation:'none'})
// On read notification, mark it as read
// On read event, mark notification as read
window.addEventListener('read', event => {
if(event.detail && event.detail.resource && event.detail.resource['@id']) {
this._onReadResource(event.detail.resource['@id'])
......@@ -27,7 +29,7 @@ class SIBNotifications extends SIBTemplateElement {
if (unreadButton) {
window.dispatchEvent(new CustomEvent('read', {
detail: {
resource: unreadButton.closest('sib-display').resource // get resource from sib display
resource: unreadButton.closest('sib-display').component.resource // get resource from sib display
}
}));
unreadButton.disabled = true
......@@ -36,7 +38,7 @@ class SIBNotifications extends SIBTemplateElement {
// notif item -> navigate to resource
let notifItem = event.target.closest('sib-display')
if (notifItem && notifItem.classList.length === 0) { // TODO: classList can be improved
if (notifItem && notifItem.hasAttribute('data-notification')) {
this._onClickNotification(notifItem)
return
}
......@@ -83,7 +85,7 @@ class SIBNotifications extends SIBTemplateElement {
}
refresh() {
const context = document.querySelector('#notifications-list').context;
const context = document.querySelector('#notifications-list').component.context;
store.get(this.resourceId, context, true).then(() => this.render())
}
......@@ -104,8 +106,8 @@ class SIBNotifications extends SIBTemplateElement {
if (this.props.extraContext) {
extraContext = JSON.parse(this.props.extraContext)
}
const context = { ...target.context, ...extraContext }
store.get(target.resource.object, context).then((resource) => {
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")
......@@ -113,23 +115,20 @@ class SIBNotifications extends SIBTemplateElement {
}
_updateUnread() {
let unread = Number(document.querySelector('#badge-unread').innerText)
this.favicon.badge(unread)
let unread = this.querySelector('#badge-unread')
if(unread) this.favicon.badge(Number(unread.innerText))
}
_updateUI() {
const notifications = this.querySelectorAll('#notifications-list sib-display')
notifications.forEach(notif => {
if (!notif.resource.unread) notif.setAttribute('data-read', 'true') // opacity unread
if (!notif.component.resource.unread) notif.setAttribute('data-read', 'true') // opacity unread
});
}
_getNotificationsList() {
const notificationsList = this.querySelector('#notifications-list');
if (!notificationsList) return null;
if (Array.isArray(notificationsList.resource['ldp:contains']))
return notificationsList.resource['ldp:contains'];
return [notificationsList.resource['ldp:contains']];
return notificationsList ? notificationsList.component.resources : null;
}
_printError(error) {
......@@ -158,7 +157,7 @@ class SIBNotifications extends SIBTemplateElement {
<sib-display
id="unread-filter"
data-src="${this.resourceId}"
data-fields="none"
fields="none"
search-fields="unread"
search-value-unread="true"
search-widget-unread="sib-form-hidden"
......@@ -171,15 +170,13 @@ class SIBNotifications extends SIBTemplateElement {
id="notifications-list"
class="sib-notifications__items"
data-src="${this.resourceId}"
fields="unread, content(author.avatar, wrapper(author.username, source(type, object.name), date))"
widget-unread="read-badge"
set-source="type, object.name"
widget-object.name="sib-display-labelled-div"
label-object.name="·"
set-wrapper="author.username, source, date"
set-content="author.avatar, wrapper"
data-fields="unread, content"
widget-author.avatar="sib-display-img"
widget-date="custom-date"
label-object.name="·"
child-data-notification=""
paginate-by="10"></sib-display>
</div>
</details>
......
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