SIB Conversation
<sib-conversation> displays a conversation similar to what can be found within Facebook groups.
To associate the conversation to a containing resource, for instance an ActionGroup that would contain Conversations, one can do :
<sib-conversation
id-suffix="conversations"
bind-resources
></sib-conversation>Installation
In your django project, add the djangoldp_conversation package:
# settings.py
DJANGOLDP_PACKAGES = [
'djangoldp_conversation',
]##Changes needed on deployment You must change the value of site_url within packages.yml.
How to use
Once the package is installed, you can use the sib-conversation component:
<html>
<head>
<!-- import the module in the head of the page -->
<script type="module" src="https://unpkg.com/@startinblox/component-conversation"></script>
</head>
<body>
<!-- use the component -->
<sib-conversation
data-src="[url]"
id-suffix="conversations">
</sib-conversation>
</body>
</html>Parameters
| Name | Default | Description |
|---|---|---|
data-src |
undefined |
URL of the LDP conversation(s) to display. |
id-suffix |
"" |
String added at the end of the data source URL. If you use the djangoldp_conversation package, leave it to conversations. |
extra-context |
{} |
Custom extra context |
date-format |
"DD/MM/YYYY - kk:mm" |
Format of the date displayed. For more informations about available formats, look at the moment.js doc. |
Design
To customize your component, you can set the css variable --sib-conversation-theme anywhere in your stylesheet to the color you want.
For example:
:root{
--sib-conversation-theme: #1abba6;
}Output
- On the top, a textarea to create a conversation
- Then, a list of conversations, or main posts, ordered anti chronologically
- Each conversation is directly followed by a list of messages related to that conversation. These messages are also ordered chronologically
- At the bottom of each list of comments, a textarea allows one to add a comment and participate to the discussion
- For each conversation and message, sib-conversation displays the avatar of this author, her name as well as the amount of time since the info was posted