framework7-messages.js

myApp.onPageInit('conversations-chat', function (page) {

	var myMessages = myApp.messages('.messages', {
		autoLayout: true //adds all required additional classes (like "message-pic", "message-with-avatar", "message-with-tail", etc)
	});

	//initialize message bar
	var myMessagebar = myApp.messagebar('.messagebar');

	var conversationStarted = false;

	//triggered when message is sent
	$$('.messagebar .app-send-message-icon').on('click', function () {

		//message content
		var messageText = myMessagebar.value().trim();

		//exit if empy message
		if (messageText.length === 0) return;

		//empty messagebar
		//myMessagebar.clear()

		//random message type for simulation purpose only - use real messaging through sockets
		var messageType = (['sent', 'received'])[Math.round(Math.random())];

		//avatar and name for received message
		var avatar, name;

		if(messageType === 'received') {
			avatar = 'img/sample-profile-pic-3.jpg';
			name = 'Kate';
		}

		//add message in UI
		myMessages.addMessage({
			text: messageText, //message text
			type: messageType, //random message type
			avatar: avatar, //avatar
			name: name, //name
			day: !conversationStarted ? 'Today' : false, //day
			time: !conversationStarted ? (new Date()).getHours() + ':' + (new Date()).getMinutes() : false
		}, 'append');

		//update conversation flag
		conversationStarted = true;
	});
});