Messages component will help you with visualisation of comments and messaging system in your App.
...
<div class="page">
<div class="page-content messages-content">
<div class="messages">
<!-- Date stamp -->
<div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
<!-- Sent message (by default - green and on right side) -->
<div class="message message-sent">
<!-- Bubble with text -->
<div class="message-text">Hello</div>
</div>
<!-- Another sent message -->
<div class="message message-sent">
<!-- Bubble with text -->
<div class="message-text">How are you?</div>
</div>
<!-- Received message (by default - grey on left side) -->
<div class="message message-with-avatar message-received">
<!-- Sender name -->
<div class="message-name">Kate</div>
<!-- Bubble with text -->
<div class="message-text">I am fine, thanks</div>
<!-- Sender avatar -->
<div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
</div>
<!-- Another date stamp -->
<div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
<!-- Sent message with image -->
<div class="message message-pic message-sent">
<!-- Bubble with image -->
<div class="message-text"><img src="http://lorempixel.com/300/300/"></div>
<!-- Message label -->
<div class="message-label">Delivered 2 days ago</div>
</div>
<!-- Sent message with single message date -->
<div class="message message-sent">
<!-- Bubble with text -->
<div class="message-text">
How are you?
<div class="message-date">Nov 11, 2016</div>
</div>
<!-- Message label -->
<div class="message-label">Delivered 2 days ago</div>
</div>
</div>
</div>
</div>
...
Messages page layout:
"messages-content"
- required additional class for messages wrapper. Should be added to "page-content"
"messages"
- required additional wrapper for messages bubbles. Required element.
"messages-date"
- single date stamp container. Contains coversation date and time (in <span>)
"message"
- single message
Single message inner parts:
"message-name"
- sender name
"message-text"
- text bubble
"message-avatar"
- sender avatar
"message-label"
- text label below bubble
"message-date"
- single message date inside of bubble
Additional classes for single message container:
"message-sent"
- additional class for single message which indicates that this message was sent by user. It stays on right side with green background color.
"message-received"
- additional class for single message which indicates that this message was received by user. It stays on left side with grey background color.
"message-pic"
- additional class for single message (received or sent) with <img> Such message shouldn't contain anything except image.
"message-with-avatar"
- additional class for single message (received or sent) that contains avatar
"message-with-tail"
- additional class for single message (received or sent) to add bubble "tail"
Additional available classes for single message
"message-hide-name"
- additional class for single message (received or sent) to hide message name
"message-hide-avatar"
- additional class for single message (received or sent) to hide message avatar
"message-hide-label"
- additional class for single message (received or sent) to hide message label
"message-last"
- additional class for single message (received or sent) to indicate last received or last sent message in current conversation by one sender. Such message' bubble will have "tail", avatar and larger bottom offset.
"message-first"
- additional class for single message (received or sent) to indicate first received or first sent message in current conversation by one sender. Such message' bubble will also have visible sender name and hidden avatar.
In such default layout - new messages will appear on bottom of the page. If you need to have new messages on top of the page you need to use newMessagesFirst:true parameter when initializing Messages
Framework7 may add all required additional classes (like "message-pic", "message-with-avatar", "message-with-tail", etc) to each message automatically. For this case we need to use autoLayout:true parameter when initializing Messages
...
<div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
<div class="message message-sent">
<div class="message-text">Hello</div>
</div>
<div class="message message-sent">
<div class="message-text">How are you?</div>
</div>
<div class="message message-received">
<div class="message-name">Kate</div>
<div class="message-text">I am fine, thanks</div>
<div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
</div>
<div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
<div class="message message-sent">
<div class="message-text"><img src="http://lorempixel.com/300/300/"></div>
<div class="message-label">Delivered 2 days ago</div>
</div>
...
That is all, Framework7 will add all required classes to these messages. You just need to keep "message-sent", "message-received" classes
Now, when we have Messages' HTML, we need to initialize it. We need to use related App's method:
myApp.messages(messagesContainer, parameters) - initialize Messages with options
For example:
var myMessages = app.messages('.messages', {
autoLayout: true
});
Let's look on list of all available parameters:
Parameter | Type | Default | Description |
---|---|---|---|
autoLayout | boolean | true | Enable Auto Layout to add all required additional classes (like "message-pic", "message-with-avatar", "message-with-tail", etc) to each message automatically |
newMessagesFirst | boolean | false | Enable if you want to use new messages on top, instead of having them on bottom |
scrollMessages | boolean | true | Enable/disable messages autoscrolling when adding new message |
scrollMessagesOnlyOnEdge | boolean | false | If enabled then messages autoscrolling will happen only when user is on top/bottom of the messages view |
messages | array | Array with initial messages. Each message in array should be presented as object with message parameters | |
messageTemplate | string | * Look bellow | Single message Template7 template |
You can modify message template by passing your custom Template7-formatted template. By default it is:
{{#if day}}
<div class="messages-date">{{day}} {{#if time}}, <span>{{time}}</span>{{/if}}</div>
{{/if}}
<div class="message message-{{type}} {{#if hasImage}}message-pic{{/if}} {{#if avatar}}message-with-avatar{{/if}} {{#if position}}message-appear-from-{{position}}{{/if}}">
{{#if name}}<div class="message-name">{{name}}</div>{{/if}}
<div class="message-text">{{text}}{{#if date}}<div class="message-date">{{date}}</div>{{/if}}</div>
{{#if avatar}}<div class="message-avatar" style="background-image:url({{avatar}})"></div>{{/if}}
{{#if label}}<div class="message-label">{{label}}</div>{{/if}}
</div>
After we initialize Messages we have its initialized instance in variable (like myMessages
variable in example above) with helpful methods and properties:
Properties | |
---|---|
myMessages.params | Object with passed initialization parameters |
myMessages.container | Dom7 element with messagebar container HTML element. |
Methods | |
myMessages.addMessage(messageParameters, method, animate); |
Add new message to the end or to the beginning depending on method parameter
|
myMessages.appendMessage(messageParameters, animate); | Add new message to the end (to the bottom) |
myMessages.prependMessage(messageParameters, animate); | Add new message to the beginning (to the top) |
myMessages.addMessages(messages, method, animate); | Add multiple messages per once.
|
myMessages.removeMessage(message); | Remove message
|
myMessages.removeMessages(messages); | Remove multiple messages
|
myMessages.scrollMessages(); | Scroll messages to top/bottom depending on newMessagesFirst parameter |
myMessages.layout(); | Apply messages auto layout |
myMessages.clean(); | Clean/remove all the messages |
myMessages.destroy(); | Destroy messages instance |
Let's look on single message parameters object that we should use to addMessage, appendMessage and prependMessage methods:
Parameter | Type | Default | Description |
---|---|---|---|
text | string | Message text. Also could be HTML string. So if you want to add message with picture, you should pass here image's HTML: <img src="..."> . Required |
|
date | string | Single message date. Optional | |
name | string | Sender name. Optional | |
avatar | string | Sender avatar URL string. Optional | |
type | string | 'sent' | Message type - 'sent' or 'received'. Optional |
label | string | Message label. Optional | |
day | string | Day string, for example - 'Today', 'Monday', 'Yesterday', 'Fri', '22.05.2014'. Optional | |
time | string | Time string, for example - '22:45', '10:30 AM'. Optional |
If you don't need to use Messages methods and properties you can initialize it using HTML without JavaScript. You can do that just by adding additional "messages-init" class to .messages
. In this case we may pass required parameters using data- attributes.
...
<div class="page-content messages-content">
<!-- Additional "messages-init" class-->
<div class="messages messages-init" data-auto-layout="true" data-new-messages-first="false">
<div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
<div class="message message-sent">
<div class="message-text">Hello</div>
</div>
...
</div>
</div>
...
Parameters that used in camelCase, for example autoLayout, in data- attributes should be used as hypens-case as data-auto-layout
Access to Messages's Instance
If you initialize Messages using HTML it is still possible to access to Messages's instance. It is "f7Messages" property of messages's container HTML element:
var myMessages = $$('.messages')[0].f7Messages;
// Now you can use it
myMessages.layout();
<div class="page toolbar-fixed">
<div class="page-content messages-content">
<div class="messages">
<div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
<div class="message message-sent">
<div class="message-text">Hello</div>
</div>
<div class="message message-sent">
<div class="message-text">How are you?</div>
</div>
<div class="message message-received">
<div class="message-name">Kate</div>
<div class="message-text">I am fine, thanks</div>
<div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
</div>
<div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
<div class="message message-sent">
<div class="message-text">Nice photo?</div>
</div>
<div class="message message-sent message-pic">
<div class="message-text"><img src="http://lorempixel.com/300/300/"></div>
<div class="message-label">Delivered</div>
</div>
<div class="message message-received">
<div class="message-name">Kate</div>
<div class="message-text">Wow, awesome!</div>
<div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
</div>
</div>
</div>
</div>
var myApp = new Framework7();
var $$ = Dom7;
// Conversation flag
var conversationStarted = false;
// Init Messages
var myMessages = myApp.messages('.messages', {
autoLayout:true
});
// Init Messagebar
var myMessagebar = myApp.messagebar('.messagebar');
// Handle message
$$('.messagebar .link').on('click', function () {
// Message text
var messageText = myMessagebar.value().trim();
// Exit if empy message
if (messageText.length === 0) return;
// Empty messagebar
myMessagebar.clear()
// Random message type
var messageType = (['sent', 'received'])[Math.round(Math.random())];
// Avatar and name for received message
var avatar, name;
if(messageType === 'received') {
avatar = 'http://lorempixel.com/output/people-q-c-100-100-9.jpg';
name = 'Kate';
}
// Add message
myMessages.addMessage({
// Message text
text: messageText,
// Random message type
type: messageType,
// Avatar and name:
avatar: avatar,
name: name,
// Day
day: !conversationStarted ? 'Today' : false,
time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
})
// Update conversation flag
conversationStarted = true;
});