Messages

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

    Messages page layout:

    • - required additional class for messages wrapper. Should be added to page-content

    • messages - required additional wrapper for messages bubbles. Required element.

    • messages-title - messages title

    • message - single message

    Here is a full single message layout:

    1. <div class="message">
    2.   <div class="message-avatar" style="background-image:url(path/to/avatar)"></div>
    3.   <div class="message-content">
    4.     <div class="message-name">John Doe</div>
    5.     <div class="message-header">Message header</div>
    6.     <div class="message-bubble">
    7.       <div class="message-text-header">Text header</div>
    8.       <div class="message-image">
    9.         <img src="path/to/image">
    10.       </div>
    11.       <div class="message-text">Hello world!</div>
    12.       <div class="message-text-footer">Text footer</div>
    13.     </div>
    14.     <div class="message-footer">Message footer</div>
    15.   </div>
    16. </div>

    • message-avatar - sender avatar, optional

    • message-name - sender name, optional

    • message-header - single message header, optional

    • message-image - message image, optional

    • message-text - message text, optional

    • message-text-footer - text footer inside of bubble, optional

    • message-footer - footer text after bubble, optional

    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-tail - additional class for single message (received or sent) to add bubble “tail”

    • message-same-name - additional class for indicating that message has same sender name as previous message

    • message-same-avatar - additional class for indicating that message has same avatar as previous message

    • message-same-header - additional class for indicating that message has same message-header as previous message

    • message-last - additional class for single message (received or sent) to indicate last received or last sent message in current conversation by one sender

    • message-first - additional class for single message (received or sent) to indicate first received or first sent message in current conversation by one sender

    Messages App Methods

    Now, when we have Messages’ HTML, we need to initialize it. We need to use related App’s method:

    Let’s look on list of all available parameters:

    ParameterTypeDefaultDescription
    autoLayoutbooleantrueEnable Auto Layout to add all required additional classes automatically based on passed conditions
    newMessagesFirstbooleanfalseEnable if you want to use new messages on top, instead of having them on bottom
    scrollMessagesbooleantrueEnable/disable messages autoscrolling when adding new message
    scrollMessagesOnEdgebooleantrueIf enabled then messages autoscrolling will happen only when user is on top/bottom of the messages view
    messagesarrayArray with initial messages. Each message in array should be presented as an object with single message parameters
    onobjectObject with events handlers. For example:
    renderMessagefunction(message)Function to render single message. Must return full message HTML string
    Autolayout Conditions
    firstMessageRulefunction(message, previousMessage, nextMessage)Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-first class will be added to message
    lastMessageRulefunction(message, previousMessage, nextMessage)Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-last class will be added to message
    tailMessageRulefunction(message, previousMessage, nextMessage)Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-tail class will be added to message
    sameNameMessageRulefunction(message, previousMessage, nextMessage)Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-same-name class will be added to message
    sameHeaderMessageRulefunction(message, previousMessage, nextMessage)Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-same-header class will be added to message
    sameFooterMessageRulefunction(message, previousMessage, nextMessage)Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-same-footer class will be added to message
    sameAvatarMessageRulefunction(message, previousMessage, nextMessage)Function that must return boolean true or false based on required condition depending on previous and next messages. In case of match then message-same-avatar class will be added to message
    customClassMessageRulefunction(message, previousMessage, nextMessage)Function that must return additional message classes as string, based on required condition depending on previous and next messages.

    Single Message Parameters

    Let’s look on single message parameters object that we should use when we pass messages array:

    So to create Messages we have to call:

    1. var messages = app.messages.create({ /* parameters */ })

    After we initialize Messages we have its initialized instance in variable (like messages variable in example above) with helpful methods and properties:

    Properties
    messages.paramsObject with passed initialization parameters
    messages.elMessages container HTML element (<div class=”messages”>)
    messages.$elDom7 element with messages HTML element
    messages.messagesArray with messages
    Methods
    messages.showTyping(message)Show typing message indicator
    messages.hideTyping()Hide typing message indicator
    messages.addMessage(message, method, animate);

    Add new message to the end or to the beginning depending on method parameter

    • message - object - to add. Required.
    • method - string - ( 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 Messages instance
    messages.addMessages(messages, method, animate);Add multiple messages per once.
    • messages - array with messages to add. Each message in array should be presented as an object with message parameters Required.
    • Method returns Messages instance
    messages.removeMessage(message);Remove message
    • message - HTMLElement or string (with CSS Selector) or number (with index number of message from messages array) of message to remove
    • Method returns Messages instance
    messages.removeMessages(messages);Remove multiple messages
    • messages - array with messages to remove
    messages.scroll(duration, position);Scroll messages to top/bottom depending on newMessagesFirst parameter
    • duration - number scroll duration in ms
    • position - number scroll position in px
    messages.renderMessages()Render messages HTML depending on messages array
    messages.layout();Force messages auto layout
    messages.clear();Clear/remove all the messages
    messages.destroy();Destroy messages instance

    Messages Events

    Messages will fire the following DOM events on messages element and events on app and messages instance:

    Messages instance emits events on both self instance and app instance. App instance events has same names prefixed with messages.

    EventTargetArgumentsDescription
    beforeDestroymessages(messages)Event will be triggered right before Messages instance will be destroyed
    messagesBeforeDestroyapp

    Parameters that used in camelCase, for example newMessagesFirst, in data- attributes should be used in kebab-case as data-new-messages-first

    Examples

    1. <div class="page">
    2.   <div class="navbar">
    3.     <div class="navbar-inner">
    4.       <div class="title">Messages</div>
    5.     </div>
    6.   </div>
    7.   <div class="toolbar messagebar">
    8.     <div class="toolbar-inner">
    9.       <div class="messagebar-area">
    10.         <textarea class="resizable" placeholder="Message"></textarea>
    11.       </div><a class="link send-link" href="#">Send</a>
    12.     </div>
    13.   </div>
    14.   <div class="page-content messages-content">
    15.     <div class="messages">
    16.       <!-- Messages title -->
    17.       <div class="messages-title"><b>Sunday, Feb 9,</b> 12:58</div>
    18.       <!-- Full layout sent message -->
    19.       <div class="message message-sent">
    20.         <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/7);"></div>
    21.         <div class="message-content">
    22.           <div class="message-name">John Doe</div>
    23.           <div class="message-header">Message header</div>
    24.           <div class="message-bubble">
    25.             <div class="message-text-header">Text header</div>
    26.             <div class="message-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    27.             <div class="message-text-footer">Text footer</div>
    28.           </div>
    29.           <div class="message-footer">Message footer</div>
    30.         </div>
    31.       </div>
    32.       <!-- Full layout received message -->
    33.       <div class="message message-received">
    34.         <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/7);"></div>
    35.         <div class="message-content">
    36.           <div class="message-name">John Doe</div>
    37.           <div class="message-header">Message header</div>
    38.           <div class="message-bubble">
    39.             <div class="message-text-header">Text header</div>
    40.             <div class="message-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
    41.             <div class="message-text-footer">Text footer</div>
    42.           </div>
    43.           <div class="message-footer">Message footer</div>
    44.         </div>
    45.       </div>
    46.       <!-- Messages -->
    47.       <div class="message message-sent">
    48.         <div class="message-content">
    49.           <div class="message-bubble">
    50.             <div class="message-text">Hi, Kate</div>
    51.           </div>
    52.         </div>
    53.       </div>
    54.       <div class="message message-sent">
    55.         <div class="message-content">
    56.           <div class="message-bubble">
    57.             <div class="message-text">How are you?</div>
    58.           </div>
    59.         </div>
    61.       <div class="message message-received">
    62.         <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/9);"></div>
    63.         <div class="message-content">
    64.           <div class="message-bubble">
    65.             <div class="message-text">Hi, I am good!</div>
    66.           </div>
    67.         </div>
    68.       </div>
    69.       <div class="message message-received">
    70.         <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/7);"></div>
    71.         <div class="message-content">
    72.           <div class="message-name">Blue Ninja</div>
    73.           <div class="message-bubble">
    74.             <div class="message-text">Hi there, I am also fine, thanks! And how are you?</div>
    75.           </div>
    76.         </div>
    77.       </div>
    78.       <div class="message message-sent">
    79.         <div class="message-content">
    80.           <div class="message-bubble">
    81.             <div class="message-text">Hey, Blue Ninja! Glad to see you ;)</div>
    82.           </div>
    83.         </div>
    84.       </div>
    85.       <div class="message message-sent">
    86.         <div class="message-content">
    87.           <div class="message-bubble">
    88.             <div class="message-text">Hey, look, cutest kitten ever!</div>
    89.           </div>
    90.         </div>
    91.       </div>
    92.       <div class="message message-sent">
    93.         <div class="message-content">
    94.           <div class="message-bubble">
    95.             <div class="message-image"><img src="http://lorempixel.com/200/260/cats/4/" style="width:200px; height: 260px;"></div>
    96.           </div>
    97.         </div>
    98.       </div>
    99.       <div class="message message-received">
    100.         <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/9);"></div>
    101.         <div class="message-content">
    102.           <div class="message-name">Kate</div>
    103.           <div class="message-bubble">
    104.             <div class="message-text">Nice!</div>
    105.           </div>
    106.         </div>
    107.       </div>
    108.       <div class="message message-received">
    109.         <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/9);"></div>
    110.         <div class="message-content">
    111.           <div class="message-name">Kate</div>
    112.           <div class="message-bubble">
    113.             <div class="message-text">Like it very much!</div>
    114.           </div>
    115.         </div>
    116.       </div>
    117.       <div class="message message-received">
    118.         <div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/7);"></div>
    119.         <div class="message-content">
    120.           <div class="message-name">Blue Ninja</div>
    121.           <div class="message-bubble">
    122.             <div class="message-text">Awesome!</div>
    123.           </div>
    124.         </div>
    125.       </div>
    126.     </div>
    128. </div>