README.md 3.68 KB
Newer Older
Sylvain Le Bon's avatar
Sylvain Le Bon committed
1 2
# SiB Notifications

Sylvain Le Bon's avatar
Sylvain Le Bon committed
3 4 5 6
sib-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.

Matthieu Fesselier's avatar
Matthieu Fesselier committed
7 8 9 10 11 12 13
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:
```javascript
window.dispatchEvent(new CustomEvent('read', {detail: {resource: resource}}))
```

## Usage
14 15 16 17 18 19
First, you need to import `moment.js` library in your template, to display the dates properly.
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
```
Then, in your template, insert the following line where you want to display the component.

Matthieu Fesselier's avatar
Matthieu Fesselier committed
20 21 22 23 24 25
```html
<sib-notifications bind-user id-suffix="inbox"></sib-notifications>
```

If you want to use the `bind-user` attribute, do not forget to use `sib-oidc` for authentication.

26 27 28 29 30 31 32 33 34
### Parameters

| Name            | Default                | Description                                                  |
| --------------- | ---------------------- | :----------------------------------------------------------- |
| `data-src`      | `undefined`            | URL of the inbox to display.                         |
| `id-suffix`     | `""`                   | 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](https://momentjs.com/docs/#/displaying/format/). |

Matthieu Fesselier's avatar
Matthieu Fesselier committed
35
### Routing
36
To redirect to specific pages when you click on a notification, you should:
Matthieu Fesselier's avatar
Matthieu Fesselier committed
37 38 39 40 41
1. Choose a route to be the default view for a resource type. To do this, add the attribute `rdf-type` to a `sib-route` (ex: `<sib-route name="project" rdf-type="doap:project"></sib-route>`)
2. Add an `extra-context` to the sib-conversation component, so it can understands the `rdf_type` you used before.

For more informations, please see the example at `index.html`

Matthieu Fesselier's avatar
Matthieu Fesselier committed
42

Matthieu Fesselier's avatar
Matthieu Fesselier committed
43 44 45 46 47 48 49 50
### Design
To customize your component, you can set the css variable `--sib-notifications-theme` anywhere in your stylesheet to the color you want.
For example:

```css
:root{
  --sib-notifications-theme: #ffd759;
}
Matthieu Fesselier's avatar
Matthieu Fesselier committed
51 52 53 54 55 56 57 58 59 60 61 62 63 64
```

# SiB Badge

sib-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.
```html
<sib-badge data-src="http://server/resourceId"></sib-badge>
```

65 66 67 68 69 70 71
### Parameters

| Name        | Default     | Description                                                  |
| ----------- | ----------- | :----------------------------------------------------------- |
| `data-src`  | `undefined` | URL of the resource or container of which you want to get the unread notifications. |
| `id-suffix` | `""`        | String added at the end of the data source URL. Useful if you are using `bind-resource` to get the current displayed resource. |

Matthieu Fesselier's avatar
Matthieu Fesselier committed
72 73 74 75 76 77 78 79
### Design
To customize your component, you can set the css variable `--sib-badge-theme` anywhere in your stylesheet to the color you want.
For example:

```css
:root{
  --sib-badge-theme: #ffd759;
}
Matthieu Fesselier's avatar
Matthieu Fesselier committed
80
```