Language: ENCN

Messages

Messages component will help you with visualisation of comments and messaging system in your App.

Messages Layout

...   
<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

Messages Auto Layout

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

Initialize Messages with JavaScript

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

  • messagesContainer - HTMLElement or string (with CSS Selector) of Messages container HTML element. Required.
  • parameters - object - object with Messages parameters. Optional.
  • Method returns initialized Messages instance

For example:

var myMessages = app.messages('.messages', {
    autoLayout: true
});   
Note that Messages container should be in DOM on a moment of initialization. So if you use it not on home page, you need to initialize it within page:init event or callback

Messages Parameters

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

Message 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>

Messages Methods & Properties

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

  • messageParameters - object parameters of message to add. Required.
  • method - string - ('append' or 'prepend') dictates to add new message in the end or in the beginning of messages container. Optional, if not specified, then it will add message depending on newMessagesFirst parameter
  • animate - boolean - (by default true) You may pass here false and message will be added immediately without any transiton and scrolling animation. Optional.
  • Method returns HTMLElement of added messsage
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.
  • messages - array with messages to add. Each message in array should be presented as object with message parameters Required.
  • Method returns array of HTMLElements with added messsages
myMessages.removeMessage(message); Remove message
  • message - HTMLElement or string (with CSS Selector) of message element to remove. Required
  • Method returns true if specified message was removed
myMessages.removeMessages(messages); Remove multiple messages
  • messages - array (with HTMLElements) or string (with CSS Selector) of messages to remove. Required
  • Method returns true if specified messages was removed
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

Single Message Parameters

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

Initialize Messages with HTML

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();

Example

<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;
});