capto
Version:
Mail catcher for NodeJs
139 lines (137 loc) • 5.8 kB
JavaScript
Ext.define('FeedViewer.Message', {
extend: 'Ext.panel.Panel',
alias: 'widget.message',
autoScroll: false,
border: false,
cls: 'preview',
listeners: {
'afterrender': function (panel) {
/**
* Putting an iframe in the xtemplate does not work correctly.
* The iframe height is not set correctly (its too large)
* so I've put this ugly code here to solve this issue.
*/
var id = Ext.get(panel.id),
body = id.select('.x-panel-body').first();
window.setInterval(function () {
var messageDetails = id.select('.message-details').first(),
htmlBody = id.select('.message-content').first();
if (htmlBody) {
htmlBody.setHeight(body.getHeight() - messageDetails.getHeight());
}
}, 500);
panel.el.on('click', function (e, t) {
if (t.id === 'html') {
panel.data.viewMode = 1;
panel.update(panel.data);
} else if (t.id === 'plain') {
panel.data.viewMode = 2;
panel.update(panel.data);
} else if (t.id === 'source') {
panel.data.viewMode = 3;
panel.update(panel.data);
} else if (t.id === 'headers') {
panel.data.viewMode = 4;
panel.update(panel.data);
}
});
},
scope: this
},
tpl: [
'<div class="message-details">',
'<span class="date">{received:this.formatDate}</span>',
'<h4 class="meta"><b>From:</b> {[this.formatFrom(values.from.address, values.from.name)]}</h4>',
'<h4 class="meta"><b>Subject:</b> {subject}</h4>',
'<h4 class="meta"><b>To:</b> {recipients:this.formatRecipients} </h4>',
'<h4 class="meta"><b>CC:</b> {ccs:this.formatRecipients} </h4>',
'<tpl if="attachments.length > 0">',
'<h4 class="meta"><b>Attachments: {[this.formatAttachments(values.attachments, values._id)]}</b></h4>',
'</tpl>',
'<ul class="tabs">',
'<tpl if="viewMode == 1">',
'<li id="html" class="active-tab">HTML</li>',
'<tpl else>',
'<li id="html">HTML</li>',
'</tpl>',
'<tpl if="viewMode == 2">',
'<li id="html" class="active-tab">Plain</li>',
'<tpl else>',
'<li id="plain">Plain</li>',
'</tpl>',
'<tpl if="viewMode == 3">',
'<li id="source" class="active-tab">Source</li>',
'<tpl else>',
'<li id="source">Source</li>',
'</tpl>',
'<tpl if="viewMode == 4">',
'<li id="headers" class="active-tab">Headers</li>',
'<tpl else>',
'<li id="headers">Headers</li>',
'</tpl>',
'<li class="actions">',
'<a class="download-button" href="/messages/{_id}/source.eml" id="download-message"><i class="fa fa-download"></i> Download message</a>',
'</li>',
'</ul>',
'</div>',
'<tpl if="viewMode == 1">',
'<iframe class="message-content" src="/messages/{_id}/html" scrolling="yes"></iframe>',
'</tpl>',
'<tpl if="viewMode == 2">',
'<iframe class="message-content" src="/messages/{_id}/plain" scrolling="yes"></iframe>',
'</tpl>',
'<tpl if="viewMode == 3">',
'<iframe class="message-content" src="/messages/{_id}/source" scrolling="yes"></iframe>',
'</tpl>',
'<tpl if="viewMode == 4">',
'<iframe class="message-content" src="/messages/{_id}/headers?html" scrolling="yes"></iframe>',
'</tpl>',
{
defaultValue: function (v) {
return v ? v : 'Unknown';
},
formatDate: function (value) {
var date = new Date(value);
return Ext.Date.format(date, 'M j, Y, g:i a');
},
formatFrom: function (fromAddress, fromName) {
if (fromName) {
return Ext.String.format('{0} <{1}>', fromName, fromAddress);
}
return fromAddress;
},
formatRecipients: function (value, p, record) {
var recipients = new Array();
value.forEach(function (recipient) {
if (recipient.name) {
recipients.push(Ext.String.format('{0} <{1}>',
recipient.name,
recipient.address));
} else {
recipients.push(recipient.address);
}
});
return recipients.join(', ');
},
formatAttachments: function (attachments, id) {
var html = '';
attachments.forEach(function (attachment) {
if (/image\/jpeg|image\/png|image\/gif/.test(attachment.contentType)) {
html += Ext.String.format('<a class="attachment-image" href="/messages/{0}/attachments/{1}?download">{2}</a>', id, attachment._id, attachment.name);
} else {
html += Ext.String.format('<a target="_blank" href="/messages/{0}/attachments/{1}?download">{2}</a>', id, attachment._id, attachment.name);
}
});
return html;
}
}],
initComponent: function () {
this.callParent(arguments);
},
setActive: function (rec) {
var me = this;
me.active = rec;
rec.data.viewMode = (rec.data.hasHtml) ? 1 : 2;
me.update(rec.data);
}
});