Messages

Examples

<div class="page">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="title">Messages</div>
    </div>
  </div>
  <div class="toolbar messagebar">
    <div class="toolbar-inner">
      <div class="messagebar-area">
        <textarea class="resizable" placeholder="Message"></textarea>
      </div><a class="link send-link" href="#">Send</a>
    </div>
  </div>
  <div class="page-content messages-content">
    <div class="messages">
      <!-- Messages title -->
      <div class="messages-title"><b>Sunday, Feb 9,</b> 12:58</div>
      <!-- Full layout sent message -->
      <div class="message message-sent">
        <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-7.jpg);"></div>
        <div class="message-content">
          <div class="message-name">John Doe</div>
          <div class="message-header">Message header</div>
          <div class="message-bubble">
            <div class="message-text-header">Text header</div>
            <div class="message-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            <div class="message-text-footer">Text footer</div>
          </div>
          <div class="message-footer">Message footer</div>
        </div>
      </div>
      <!-- Full layout received message -->
      <div class="message message-received">
        <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-7.jpg);"></div>
        <div class="message-content">
          <div class="message-name">John Doe</div>
          <div class="message-header">Message header</div>
          <div class="message-bubble">
            <div class="message-text-header">Text header</div>
            <div class="message-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            <div class="message-text-footer">Text footer</div>
          </div>
          <div class="message-footer">Message footer</div>
        </div>
      </div>
      <!-- Messages -->
      <div class="message message-sent">
        <div class="message-content">
          <div class="message-bubble">
            <div class="message-text">Hi, Kate</div>
          </div>
        </div>
      </div>
      <div class="message message-sent">
        <div class="message-content">
          <div class="message-bubble">
            <div class="message-text">How are you?</div>
          </div>
        </div>
      </div>
      <div class="message message-received">
        <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-9.jpg);"></div>
        <div class="message-content">
          <div class="message-name">Kate</div>
          <div class="message-bubble">
            <div class="message-text">Hi, I am good!</div>
          </div>
        </div>
      </div>
      <div class="message message-received">
        <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-7.jpg);"></div>
        <div class="message-content">
          <div class="message-name">Blue Ninja</div>
          <div class="message-bubble">
            <div class="message-text">Hi there, I am also fine, thanks! And how are you?</div>
          </div>
        </div>
      </div>
      <div class="message message-sent">
        <div class="message-content">
          <div class="message-bubble">
            <div class="message-text">Hey, Blue Ninja! Glad to see you ;)</div>
          </div>
        </div>
      </div>
      <div class="message message-sent">
        <div class="message-content">
          <div class="message-bubble">
            <div class="message-text">Hey, look, cutest kitten ever!</div>
          </div>
        </div>
      </div>
      <div class="message message-sent">
        <div class="message-content">
          <div class="message-bubble">
            <div class="message-image"><img src="https://cdn.framework7.io/placeholder/cats-200x260-4.jpg" style="width:200px; height: 260px;"></div>
          </div>
        </div>
      </div>
      <div class="message message-received">
        <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-9.jpg);"></div>
        <div class="message-content">
          <div class="message-name">Kate</div>
          <div class="message-bubble">
            <div class="message-text">Nice!</div>
          </div>
        </div>
      </div>
      <div class="message message-received">
        <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-9.jpg);"></div>
        <div class="message-content">
          <div class="message-name">Kate</div>
          <div class="message-bubble">
            <div class="message-text">Like it very much!</div>
          </div>
        </div>
      </div>
      <div class="message message-received">
        <div class="message-avatar" style="background-image:url(https://cdn.framework7.io/placeholder/people-100x100-7.jpg);"></div>
        <div class="message-content">
          <div class="message-name">Blue Ninja</div>
          <div class="message-bubble">
            <div class="message-text">Awesome!</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

var app = new Framework7();

var $$ = Dom7;

// Init Messages
var messages = app.messages.create({
  el: '.messages',

  // First message rule
  firstMessageRule: function (message, previousMessage, nextMessage) {
    // Skip if title
    if (message.isTitle) return false;
    /* if:
      - there is no previous message
      - or previous message type (send/received) is different
      - or previous message sender name is different
    */
    if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
    return false;
  },
  // Last message rule
  lastMessageRule: function (message, previousMessage, nextMessage) {
    // Skip if title
    if (message.isTitle) return false;
    /* if:
      - there is no next message
      - or next message type (send/received) is different
      - or next message sender name is different
    */
    if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
    return false;
  },
  // Last message rule
  tailMessageRule: function (message, previousMessage, nextMessage) {
    // Skip if title
    if (message.isTitle) return false;
      /* if (bascially same as lastMessageRule):
      - there is no next message
      - or next message type (send/received) is different
      - or next message sender name is different
    */
    if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
    return false;
  }
});

// Init Messagebar
var messagebar = app.messagebar.create({
  el: '.messagebar'
});

// Response flag
var responseInProgress = false;

// Send Message
$$('.send-link').on('click', function () {
  var text = messagebar.getValue().replace(/\n/g, '<br>').trim();
  // return if empty message
  if (!text.length) return;

  // Clear area
  messagebar.clear();

  // Return focus to area
  messagebar.focus();

  // Add message to messages
  messages.addMessage({
    text: text,
  });

  if (responseInProgress) return;
  // Receive dummy message
  receiveMessage();
});

// Dummy response
var answers = [
  'Yes!',
  'No',
  'Hm...',
  'I am not sure',
  'And what about you?',
  'May be ;)',
  'Lorem ipsum dolor sit amet, consectetur',
  'What?',
  'Are you sure?',
  'Of course',
  'Need to think about it',
  'Amazing!!!'
]
var people = [
  {
    name: 'Kate Johnson',
    avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg'
  },
  {
    name: 'Blue Ninja',
    avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg'
  }
];
function receiveMessage() {
  responseInProgress = true;
  setTimeout(function () {
    // Get random answer and random person
    var answer = answers[Math.floor(Math.random() * answers.length)];
    var person = people[Math.floor(Math.random() * people.length)];

    // Show typing indicator
    messages.showTyping({
      header: person.name + ' is typing',
      avatar: person.avatar
    });

    setTimeout(function () {
      // Add received dummy message
      messages.addMessage({
        text: answer,
        type: 'received',
        name: person.name,
        avatar: person.avatar
      });
      // Hide typing indicator
      messages.hideTyping();
      responseInProgress = false;
    }, 4000);
  }, 1000);
}