@startinblox/component-notifications
v1.0.1
Published
Notifications component for startinblox
Downloads
27
Keywords
Readme
Solid Notifications
solid-notifications
is a component that displays all elements of an inbox, i.e. a notification container.
When the user clicks one of the notifications, a 'navigate' event is triggered with the object of the notification given as the resource parameter.
The component listens to 'read' events. These events details contain a resource. When such an event is triggered, it sets all notifications with that resource as read, and saves these notifications back to the container. To send an event, you can dispatch it like this:
window.dispatchEvent(new CustomEvent('read', {detail: {resource: resource}}))
Usage
In your template, insert the following line where you want to display the component.
<solid-notifications bind-user nested-field="inbox"></solid-notifications>
If you want to use the bind-user
attribute, do not forget to use sib-oidc
for authentication.
Parameters
| Name | Default | Description |
| --------------- | ---------------------- | :----------------------------------------------------------- |
| data-src
| undefined
| URL of the inbox to display. |
| nested-field
| ""
| String added at the end of the data source URL. Useful if you are using bind-user
to get the current user URL. |
| extra-context
| {}
| Context to add to let the router know where to navigate after a click on a notification. |
| date-format
| "DD/MM/YYYY - kk:mm"
| Format of the date displayed in the notifications box. For more informations about available formats, look at the moment.js doc. |
Routing
To redirect to specific pages when you click on a notification, you should:
- Choose a route to be the default view for a resource type. To do this, add the attribute
rdf-type
to asolid-route
(ex:<solid-route name="project" rdf-type="doap:project"></solid-route>
) - Add an
extra-context
to the sib-conversation component, so it can understands therdf_type
you used before.
For more informations, please see the example at index.html
Template
You can customize the template of a notification based on its object type. To do this, use the solid-notifications-template
component, and set the data-rdf-type
attribute:
<solid-notifications-template
data-rdf-type="hd:circle"
>
<template>
<!-- your template -->
</template>
</solid-notifications-template>
For each notification with an object of type hd:circle
, this template will be used.
The following variables are available in your template:
summary
: summary of the notificationdate
: formatted date of the notificationobject
: Proxy of the object of the notification (needsawait
keyword to access its properties)author
: Proxy of the author of the notification (needsawait
keyword to access its properties)unread
: boolean which indicates if the notification is unread/read
For example, your template can look like this:
<solid-notifications-template
data-rdf-type="hd:circle"
>
<template>
<div class="solid-notification__avatar">
<img src="${await author['account.picture']}">
</div>
<div class="solid-notification__content">
<div class="solid-notification__title">${await author.name} in the circle #${await object.name}</div>
<p class="solid-notification__summary">${summary}</p>
<div class="solid-notification__date">${date}</div>
</div>
</template>
</solid-notifications-template>
The default notification template is:
<div class="solid-notification__avatar">
<img src="[author.account.picture]">
</div>
<div class="solid-notification__content">
<solid-display class="solid-notification__title">[notification.object.name]</solid-display>
<p class="solid-notification__summary">[notification.summary]</p>
<div class="solid-notification__date">[notification.date]</div>
</div>
Design
To customize your component, you can set the css variable --solid-notifications-theme
anywhere in your stylesheet to the color you want.
For example:
:root{
--solid-notifications-theme: #ffd759;
}
Solid Badge
solid-badge is a component that displays the number of unread notifications in the inbox of the logged in user related to a resource or a container.
As it uses the bind-user
, you have to make sure to include a valid sib-auth
configuration.
Usage
In your template, insert the following line where you want to display the component.
<solid-badge data-src="http://server/resourceId"></solid-badge>
Parameters
| Name | Default | Description |
| ----------- | ----------- | :----------------------------------------------------------- |
| data-src
| undefined
| URL of the resource or container of which you want to get the unread count. |
| data-type
| ''
| Type of the notifications of which you want to get the unread count. |
| data-rdf-type
| ''
| RDF type of the notification object of which you want to get the unread count. |
| nested-field
| ""
| String added at the end of the data source URL. Useful if you are using bind-resource
to get the current displayed resource. |
You can combine the data-src
, data-type
and data-rdf-type
attributes to filter a specific kind of notification. For example, this will count the unread notification of the circle-1, for user additions:
<solid-badge data-src="http://server/circle/1" data-type="New User"></solid-badge>
Design
To customize your component, you can set the css variable --solid-badge-theme
anywhere in your stylesheet to the color you want.
For example:
:root{
--solid-badge-theme: #ffd759;
}