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.

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:

For example:

var myMessages = app.messages('.messages', {
    autoLayout: true
});   

Messages Parameters

Let's look on list of all available parameters:

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:

Single Message Parameters

Let's look on single message parameters object that we should use to addMessage, appendMessage and prependMessage methods:

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

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