Messages - 图1

Messages

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

Messages Layout

1. <div class="page">
2. <div class="page-content messages-content">
3. <div class="messages">
4. <!-- Date stamp -->
5. <div class="messages-title"><b>Sunday, Feb 9</b> 12:58</div>

7. <!-- Sent message (by default - green and on right side) -->
8. <div class="message message-sent">
9. <div class="message-content">
10. <!-- Bubble with text -->
11. <div class="message-bubble">
12. <div class="message-text">Hi, Kate</div>
13. </div>
14. </div>
15. </div>

17. <!-- Another sent message -->
18. <div class="message message-sent">
19. <div class="message-content">
20. <div class="message-bubble">
21. <div class="message-text">How are you?</div>
22. </div>
23. </div>
24. </div>

26. <!-- Received message (by default - grey on left side) -->
27. <div class="message message-received">
28. <!-- Sender avatar -->
29. <div class="message-avatar" style="background-image:url(path/to/avatar.jpg)"></div>
30. <div class="message-content">
31. <!-- Sender name -->
32. <div class="message-name">Blue Ninja</div>
33. <!-- Bubble with text -->
34. <div class="message-bubble">
35. <div class="message-text">Hi there, I am also fine, thanks! And how are you?</div>
36. </div>
37. </div>
38. </div>
39. </div>
40. </div>
41. </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-title - messages title
  • message - single message

Single Message Layout

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-text-header - text header inside of bubble, 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-same-footer - additional class for indicating that message has same message-footer 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:
app.messages.create(parameters) Initialize Messages with parameters - parameters - object - object with Messages parameters - Method returns initialized Messages instance
app.messages.destroy(el) Destroy Messages instance - el - HTMLElement or string (with CSS Selector) or object. Messages element or Messages instance to destroy.
app.messages.get(el) Get Messages instance by HTML element - el - HTMLElement or string (with CSS Selector). Messages element. - Method returns Messages’s instance

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 automatically based on passed conditions
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
scrollMessagesOnEdge boolean true 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 an object with single message parameters
on object Object with events handlers. For example: 1. var messages = app.messages.create({ 2. el: ‘.messages’, 3. on: { 4. change: function () { 5. console.log(‘Textarea value changed’) 6. } 7. } 8. })
renderMessage function(message) Function to render single message. Must return full message HTML string
Autolayout Conditions
firstMessageRule function(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
lastMessageRule function(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
tailMessageRule function(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
sameNameMessageRule function(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
sameHeaderMessageRule function(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
sameFooterMessageRule function(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
sameAvatarMessageRule function(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
customClassMessageRule function(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:

Parameter Type Default Description
text string Message text
header string Single message header
footer string Single message footer
name string Sender name
avatar string Sender avatar URL string
type string sent Message type - sent or received
textHeader string Message text header
textFooter string Message text footer
image string Message image HTML string, e.g. <img src=”path/to/image”>. Can be used instead of imageSrc parameter
imageSrc string Message image URL string. Can be used instead of image parameter
isTitle boolean Defines whether it should be rendered as a message or as a messages title
cssClass string Additional CSS class to set on message HTML element
attrs object Object with additional HTML attributes to be set on message HTML element. For example to set extra data attributes it should look like: 1. var message = { 2. text: ‘Hello!’, 3. attrs: { 4. ‘data-id’: 1, 5. ‘data-author-id’: 150 6. } 7. }

Messages Methods & Properties

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.params Object with passed initialization parameters
messages.el Messages container HTML element (<div class=”messages”>)
messages.$el Dom7 element with messages HTML element
messages.messages Array with messages
Methods
messages.showTyping(message) Show typing message indicator - message - object - parameters of message to add
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 - 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 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 - Method returns Messages instance
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:

DOM Events

Event Target Description
messages:beforedestroy Messages Element<div class=”messages”> Event will be triggered right before Messages instance will be destroyed

App and Messages Instance Events

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

Event Target Arguments Description
beforeDestroy messages (messages) Event will be triggered right before Messages instance will be destroyed
messagesBeforeDestroy app

Messages Auto Initialization

If you don’t need to use Messages API and your Messages is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional messages-init class to messages element, and all required parameters can be passed using data- attributes:

1. <div class="messages messages-init" data-new-messages-first="true">
2. ...
3. </div>

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

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

1. :root {
2. --f7-message-text-header-text-color: inherit;
3. --f7-message-text-header-opacity: 0.65;
4. --f7-message-text-header-font-size: 12px;
5. --f7-message-text-footer-text-color: inherit;
6. --f7-message-text-footer-opacity: 0.65;
7. --f7-message-text-footer-font-size: 12px;
8. --f7-message-bubble-line-height: 1.2;
9. --f7-message-header-font-size: 12px;
10. --f7-message-footer-font-size: 11px;
11. --f7-message-name-font-size: 12px;
12. --f7-message-name-font-weight: inherit;
13. --f7-message-avatar-border-radius: 50%;
14. --f7-messages-title-font-weight: inherit;
15. /*
16. --f7-message-sent-bg-color: var(--f7-theme-color);
17. */
18. --f7-message-sent-text-color: #fff;
19. --f7-messages-content-bg-color: #fff;
20. --f7-message-typing-indicator-bg-color: #000;
21. --f7-message-received-bg-color: #e5e5ea;
22. --f7-message-received-text-color: #000;
23. }
24. :root .theme-dark,
25. :root.theme-dark {
26. --f7-messages-title-text-color: rgba(255, 255, 255, 0.54);
27. --f7-message-header-text-color: rgba(255, 255, 255, 0.54);
28. --f7-message-name-text-color: rgba(255, 255, 255, 0.54);
29. --f7-message-footer-text-color: rgba(255, 255, 255, 0.54);
30. --f7-messages-content-bg-color: transparent;
31. --f7-message-received-bg-color: #252525;
32. --f7-message-received-text-color: #fff;
33. --f7-message-typing-indicator-bg-color: #fff;
34. }
35. .ios {
36. --f7-messages-title-text-color: rgba(0, 0, 0, 0.45);
37. --f7-messages-title-font-size: 11px;
38. --f7-message-header-text-color: rgba(0, 0, 0, 0.45);
39. --f7-message-footer-text-color: rgba(0, 0, 0, 0.45);
40. --f7-message-name-text-color: rgba(0, 0, 0, 0.45);
41. --f7-message-avatar-size: 29px;
42. --f7-message-margin: 10px;
43. --f7-message-bubble-min-height: 32px;
44. --f7-message-bubble-font-size: 17px;
45. --f7-message-bubble-border-radius: 16px;
46. --f7-message-bubble-padding-vertical: 6px;
47. --f7-message-bubble-padding-horizontal: 16px;
48. --f7-message-typing-indicator-opacity: 0.35;
49. }
50. .md {
51. --f7-messages-title-font-size: 12px;
52. --f7-message-avatar-size: 32px;
53. --f7-message-margin: 16px;
54. --f7-message-bubble-min-height: 32px;
55. --f7-message-bubble-font-size: 16px;
56. --f7-message-bubble-border-radius: 4px;
57. --f7-message-bubble-padding-vertical: 6px;
58. --f7-message-bubble-padding-horizontal: 8px;
59. --f7-message-typing-indicator-opacity: 0.6;
60. --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
61. --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
62. --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
63. --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
64. }
65. .aurora {
66. --f7-messages-title-font-size: 12px;
67. --f7-message-avatar-size: 24px;
68. --f7-message-margin: 10px;
69. --f7-message-bubble-min-height: 28px;
70. --f7-message-bubble-font-size: 13px;
71. --f7-message-bubble-line-height: 1.4;
72. --f7-message-bubble-border-radius: 14px;
73. --f7-message-bubble-padding-vertical: 5px;
74. --f7-message-bubble-padding-horizontal: 10px;
75. --f7-message-typing-indicator-opacity: 0.5;
76. --f7-messages-title-text-color: rgba(0, 0, 0, 0.51);
77. --f7-message-header-text-color: rgba(0, 0, 0, 0.51);
78. --f7-message-footer-text-color: rgba(0, 0, 0, 0.51);
79. --f7-message-name-text-color: rgba(0, 0, 0, 0.51);
80. }

Examples

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

1. var app = new Framework7();

3. var $$ = Dom7;

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

9. // First message rule
10. firstMessageRule: function (message, previousMessage, nextMessage) {
11. // Skip if title
12. if (message.isTitle) return false;
13. /* if:
14. - there is no previous message
15. - or previous message type (send/received) is different
16. - or previous message sender name is different
17. */
18. if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
19. return false;
20. },
21. // Last message rule
22. lastMessageRule: function (message, previousMessage, nextMessage) {
23. // Skip if title
24. if (message.isTitle) return false;
25. /* if:
26. - there is no next message
27. - or next message type (send/received) is different
28. - or next message sender name is different
29. */
30. if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
31. return false;
32. },
33. // Last message rule
34. tailMessageRule: function (message, previousMessage, nextMessage) {
35. // Skip if title
36. if (message.isTitle) return false;
37. /* if (bascially same as lastMessageRule):
38. - there is no next message
39. - or next message type (send/received) is different
40. - or next message sender name is different
41. */
42. if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
43. return false;
44. }
45. });

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

52. // Response flag
53. var responseInProgress = false;

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

61. // Clear area
62. messagebar.clear();

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

67. // Add message to messages
68. messages.addMessage({
69. text: text,
70. });

72. if (responseInProgress) return;
73. // Receive dummy message
74. receiveMessage();
75. });

77. // Dummy response
78. var answers = [
79. 'Yes!',
80. 'No',
81. 'Hm...',
82. 'I am not sure',
83. 'And what about you?',
84. 'May be ;)',
85. 'Lorem ipsum dolor sit amet, consectetur',
86. 'What?',
87. 'Are you sure?',
88. 'Of course',
89. 'Need to think about it',
90. 'Amazing!!!'
91. ]
92. var people = [
93. {
94. name: 'Kate Johnson',
95. avatar: 'https://cdn.framework7.io/placeholder/people-100x100-9.jpg'
96. },
97. {
98. name: 'Blue Ninja',
99. avatar: 'https://cdn.framework7.io/placeholder/people-100x100-7.jpg'
100. }
101. ];
102. function receiveMessage() {
103. responseInProgress = true;
104. setTimeout(function () {
105. // Get random answer and random person
106. var answer = answers[Math.floor(Math.random() * answers.length)];
107. var person = people[Math.floor(Math.random() * people.length)];

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

115. setTimeout(function () {
116. // Add received dummy message
117. messages.addMessage({
118. text: answer,
119. type: 'received',
120. name: person.name,
121. avatar: person.avatar
122. });
123. // Hide typing indicator
124. messages.hideTyping();
125. responseInProgress = false;
126. }, 4000);
127. }, 1000);
128. }

← Messagebar

Navbar →