Hi @nolimits4web,
Thanks for your reply.
I tried with pageMounted in Messages.html instead. Same issue:
<template>
<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">Messsages</div>
</div>
</div>
<div class="toolbar messagebar" @messagebar:attachmentdelete="deleteAttachment">
<div class="toolbar-inner">
<a class="link icon-only" @click="sheetToggle">
<i class="icon f7-icons ios-only">camera_fill</i>
<i class="icon material-icons md-only">camera_alt</i>
</a>
<div class="messagebar-area">
<textarea class="resizable" placeholder="Message"></textarea>
</div>
<a class="link icon-only demo-send-message-link" @click="sendMessage">
<i class="icon f7-icons ios-only">arrow_up_fill</i>
<i class="icon material-icons md-only">send</i>
</a>
</div>
<div class="messagebar-sheet">
{{#each images}}
<label class="checkbox messagebar-sheet-image" style="background-image:url({{this}})" @change="handleAttachment">
<input type="checkbox">
<i class="icon icon-checkbox"></i>
</label>
{{/each}}
</div>
</div>
<div class="page-content messages-content">
<div class="messages">
<div class="messages-title"><b>Sunday, Feb 9,</b> 12:58</div>
<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(http://lorempixel.com/100/100/people/9)"></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(http://lorempixel.com/100/100/people/7)"></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="http://lorempixel.com/200/260/cats/4/" style="width:200px; height: 260px">
</div>
</div>
</div>
</div>
<div class="message message-received">
<div class="message-avatar" style="background-image:url(http://lorempixel.com/100/100/people/9)"></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(http://lorempixel.com/100/100/people/9)"></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(http://lorempixel.com/100/100/people/7)"></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>
</template>
<script>
return {
data: function () {
return {
images: [
'http://lorempixel.com/300/300/cats/1/',
'http://lorempixel.com/200/300/cats/2/',
'http://lorempixel.com/400/300/cats/3/',
'http://lorempixel.com/300/150/cats/4/',
'http://lorempixel.com/150/300/cats/5/',
'http://lorempixel.com/300/300/cats/6/',
'http://lorempixel.com/300/300/cats/7/',
'http://lorempixel.com/200/300/cats/8/',
'http://lorempixel.com/400/300/cats/9/',
'http://lorempixel.com/300/150/cats/10/'
],
people: [
{
name: 'Kate Johnson',
avatar: 'http://lorempixel.com/100/100/people/9'
},
{
name: 'Blue Ninja',
avatar: 'http://lorempixel.com/100/100/people/7'
},
],
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!!!',
],
responseInProgress: false,
}
},
methods: {
sheetToggle: function () {
var self = this;
self.messagebar.sheetToggle();
},
deleteAttachment: function (e, index) {
var self = this;
var image = self.messagebar.attachments.splice(index, 1)[0];
self.messagebar.renderAttachments();
self.checkAttachments();
// Uncheck in sheet
var imageIndex = self.images.indexOf(image);
self.$el.find('.messagebar-sheet .checkbox').eq(imageIndex).find('input').prop('checked', false);
},
handleAttachment: function (e) {
var self = this;
var $$ = self.$$;
var index = $(e.target).parents('label.checkbox').index();
var image = self.images[index];
if (e.target.checked) {
// Add to attachments
self.messagebar.attachments.unshift(image)
} else {
// Remove from attachments
self.messagebar.attachments.splice(self.messagebar.attachments.indexOf(image), 1);
}
self.messagebar.renderAttachments();
self.checkAttachments();
},
checkAttachments: function () {
var self = this;
if (self.messagebar.attachments.length > 0) {
self.messagebar.attachmentsShow();
self.messagebar.setPlaceholder('Add comment or Send');
} else {
self.messagebar.attachmentsHide();
self.messagebar.setPlaceholder('Message');
}
},
sendMessage: function () {
var self = this;
var text = self.messagebar.getValue().replace(/\n/g, '<br>').trim();
var messagesToSend = [];
self.messagebar.attachments.forEach(function (attachment) {
var size = attachment.split('lorempixel.com/')[1].split('/');
messagesToSend.push({
image: '<img src="' + attachment + '" style="width: ' + (size[0]/2) + 'px; height: ' + (size[1]/2) + 'px">'
});
});
if (text.trim().length) {
messagesToSend.push({
text: text
});
}
// Reset attachments
self.messagebar.attachments = [];
self.checkAttachments();
// Hide sheet
self.messagebar.sheetHide();
// Uncheck selected images in sheet
self.messagebar.$sheetEl.find('input').prop('checked', false);
// Clear area
self.messagebar.clear();
// Focus area
if (text.length) self.messagebar.focus();
// Send message
self.messages.addMessages(messagesToSend);
// Mock response
if (self.responseInProgress) return;
self.responseInProgress = true;
setTimeout(function () {
var answer = self.answers[Math.floor(Math.random() * self.answers.length)];
var person = self.people[Math.floor(Math.random() * self.people.length)];
self.messages.showTyping({
header: person.name + ' is typing',
avatar: person.avatar
});
setTimeout(function () {
self.messages.addMessage({
text: answer,
type: 'received',
name: person.name,
avatar: person.avatar
});
self.messages.hideTyping();
self.responseInProgress = false;
}, 4000);
}, 1000);
},
},
on: {
pageBeforeRemove: function (e, page) {
var self = this;
if (self.messagebar) self.messagebar.destroy();
},
pageMounted: function (e, page) {
var self = this;
var app = self.$app;
self.messagebar = app.messagebar.create({
el: page.$el.find('.messagebar'),
attachments: []
});
self.messages = app.messages.create({
el: page.$el.find('.messages'),
firstMessageRule: function (message, previousMessage, nextMessage) {
if (message.isTitle) return false;
if (!previousMessage || previousMessage.type !== message.type || previousMessage.name !== message.name) return true;
return false;
},
lastMessageRule: function (message, previousMessage, nextMessage) {
if (message.isTitle) return false;
if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
return false;
},
tailMessageRule: function (message, previousMessage, nextMessage) {
if (message.isTitle) return false;
if (!nextMessage || nextMessage.type !== message.type || nextMessage.name !== message.name) return true;
return false;
}
});
}
}
}
</script>
Thanks