Skip to content

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

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
    Hide whitespace changes
    Inline Side-by-side
    Showing with 40 additions and 50 deletions
    css/notification.css
    View file @ b0bfafd5
    ......@@ -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;
    }
    ......
    examples/badge.html
    View file @ b0bfafd5
    ......@@ -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;
    ......
    examples/notifications-format-date.html
    View file @ b0bfafd5
    ......@@ -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>
    ......
    examples/notifications-routing.html
    View file @ b0bfafd5
    ......@@ -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>
    examples/notifications.html
    View file @ b0bfafd5
    ......@@ -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>
    ......
    index.html
    View file @ b0bfafd5
    ......@@ -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>
    ......
    package.json
    View file @ b0bfafd5
    ......@@ -41,6 +41,6 @@
    "access": "public"
    },
    "dependencies": {
    "@startinblox/core": "^0.5.0"
    "@startinblox/core": "^0.8.0"
    }
    }
    sib-badge.js
    View file @ b0bfafd5
    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}"
    ......
    sib-notifications.js
    View file @ b0bfafd5
    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