summaryrefslogtreecommitdiff
path: root/web-ui/app
diff options
context:
space:
mode:
authorNavaL <mnandri@thoughtworks.com>2016-01-05 15:10:33 +0100
committerNavaL <mnandri@thoughtworks.com>2016-01-05 19:45:38 +0100
commit0ca01a8a8e2cd9201f43fa840a30a0822215bfef (patch)
tree2cb37ab0055f39a2d3ef384cceb6a75f5b47e977 /web-ui/app
parent29bfdd509d88aef16873207683302bec22bfe5a9 (diff)
separated attachment list UI as a component and the corresponding attachment list payload as a mixin
Issue #548
Diffstat (limited to 'web-ui/app')
-rw-r--r--web-ui/app/js/mail_view/data/attachment_list.js53
-rw-r--r--web-ui/app/js/mail_view/ui/attachment_list.js87
-rw-r--r--web-ui/app/js/mail_view/ui/compose_box.js7
-rw-r--r--web-ui/app/js/mixins/with_mail_edit_base.js449
-rw-r--r--web-ui/app/js/page/events.js3
5 files changed, 322 insertions, 277 deletions
diff --git a/web-ui/app/js/mail_view/data/attachment_list.js b/web-ui/app/js/mail_view/data/attachment_list.js
index 7ea2f9d9..9193e37a 100644
--- a/web-ui/app/js/mail_view/data/attachment_list.js
+++ b/web-ui/app/js/mail_view/data/attachment_list.js
@@ -17,72 +17,25 @@
define(
[
- 'flight/lib/component',
'page/events'
],
- function (defineComponent, events) {
+ function (events) {
'use strict';
function attachmentList() {
this.defaultAttrs({
- inputFileUpload: '#fileupload',
- attachmentListItem: '#attachment-list-item',
- progressBar: '#progress .progress-bar',
- attachmentBaseUrl: '/attachment',
attachments: []
});
this.addAttachment = function (event, data) {
this.attr.attachments.push(data);
- this.renderAttachmentListView(data);
- };
-
- this.renderAttachmentListView = function (data) {
- var item = this.buildAttachmentListItem(data);
- this.select('attachmentListItem').html(item);
- };
-
- function humanReadable(bytes) {
- var e = Math.floor(Math.log(bytes) / Math.log(1024));
- return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'b';
- }
-
- this.buildAttachmentListItem = function (data) {
- return '<a href="' + this.attr.attachmentBaseUrl + '/' + data.attachment_id + '?filename=' +
- data.filename + '&encoding=base64">' + data.filename + ' (' + humanReadable(data.filesize) + ')' +
- '</a>';
- };
-
- function addJqueryFileUploadConfig(self) {
- self.select('inputFileUpload').fileupload({
- url: self.attr.attachmentBaseUrl,
- dataType: 'json',
- done: function (e, response) {
- var data = response.result;
- self.trigger(document, events.mail.uploadedAttachment, data);
- },
- progressall: function (e, data) {
- var progressRate = parseInt(data.loaded / data.total * 100, 10);
- self.select('progressBar').css('width', progressRate + '%');
- }
- }).bind('fileuploadstart', function (e) {
- self.trigger(document, events.mail.uploadingAttachment);
- }).bind('fileuploadadd', function (e) {
- $('.attachmentsAreaWrap').show();
- });
- }
-
- this.startUpload = function () {
- addJqueryFileUploadConfig(this);
- this.select('inputFileUpload').click();
};
this.after('initialize', function () {
- this.on(document, events.mail.uploadedAttachment, this.addAttachment);
- this.on(document, events.mail.startUploadAttachment, this.startUpload);
+ this.on(document, events.mail.appendAttachment, this.addAttachment);
});
}
- return defineComponent(attachmentList);
+ return attachmentList;
}); \ No newline at end of file
diff --git a/web-ui/app/js/mail_view/ui/attachment_list.js b/web-ui/app/js/mail_view/ui/attachment_list.js
new file mode 100644
index 00000000..36899056
--- /dev/null
+++ b/web-ui/app/js/mail_view/ui/attachment_list.js
@@ -0,0 +1,87 @@
+/*
+ * Copyright (c) 2015 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+define(
+ [
+ 'flight/lib/component',
+ 'page/events'
+ ],
+
+ function (defineComponent, events) {
+ 'use strict';
+
+ function attachmentList() {
+ this.defaultAttrs({
+ inputFileUpload: '#fileupload',
+ attachmentListItem: '#attachment-list-item',
+ progressBar: '#progress .progress-bar',
+ attachmentBaseUrl: '/attachment'
+ });
+
+ this.addAttachment = function (event, data) {
+ this.trigger(document, events.mail.appendAttachment, data);
+ this.renderAttachmentListView(data);
+ };
+
+ this.renderAttachmentListView = function (data) {
+ var item = this.buildAttachmentListItem(data);
+ this.select('attachmentListItem').html(item);
+ };
+
+ function humanReadable(bytes) {
+ var e = Math.floor(Math.log(bytes) / Math.log(1024));
+ return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'b';
+ }
+
+ this.buildAttachmentListItem = function (data) {
+ return '<a href="' + this.attr.attachmentBaseUrl + '/' + data.attachment_id + '?filename=' +
+ data.filename + '&encoding=base64">' + data.filename + ' (' + humanReadable(data.filesize) + ')' +
+ '</a>';
+ };
+
+ function addJqueryFileUploadConfig(self) {
+ self.select('inputFileUpload').fileupload({
+ url: self.attr.attachmentBaseUrl,
+ dataType: 'json',
+ done: function (e, response) {
+ var data = response.result;
+ self.trigger(document, events.mail.uploadedAttachment, data);
+ },
+ progressall: function (e, data) {
+ var progressRate = parseInt(data.loaded / data.total * 100, 10);
+ self.select('progressBar').css('width', progressRate + '%');
+ }
+ }).bind('fileuploadstart', function (e) {
+ self.trigger(document, events.mail.uploadingAttachment);
+ }).bind('fileuploadadd', function (e) {
+ $('.attachmentsAreaWrap').show();
+ });
+ }
+
+ this.startUpload = function () {
+ addJqueryFileUploadConfig(this);
+ this.select('inputFileUpload').click();
+ };
+
+ this.after('initialize', function () {
+ this.on(document, events.mail.uploadedAttachment, this.addAttachment);
+ this.on(document, events.mail.startUploadAttachment, this.startUpload);
+ });
+ }
+
+ return defineComponent(attachmentList);
+ }); \ No newline at end of file
diff --git a/web-ui/app/js/mail_view/ui/compose_box.js b/web-ui/app/js/mail_view/ui/compose_box.js
index 8e03c081..993cf880 100644
--- a/web-ui/app/js/mail_view/ui/compose_box.js
+++ b/web-ui/app/js/mail_view/ui/compose_box.js
@@ -20,13 +20,14 @@ define(
'views/templates',
'mixins/with_mail_edit_base',
'page/events',
- 'mail_view/data/mail_builder'
+ 'mail_view/data/mail_builder',
+ 'mail_view/data/attachment_list'
],
- function (defineComponent, templates, withMailEditBase, events, mailBuilder) {
+ function (defineComponent, templates, withMailEditBase, events, mailBuilder, attachmentList) {
'use strict';
- return defineComponent(composeBox, withMailEditBase);
+ return defineComponent(composeBox, withMailEditBase, attachmentList);
function composeBox() {
diff --git a/web-ui/app/js/mixins/with_mail_edit_base.js b/web-ui/app/js/mixins/with_mail_edit_base.js
index f00ad5a3..0aaa6628 100644
--- a/web-ui/app/js/mixins/with_mail_edit_base.js
+++ b/web-ui/app/js/mixins/with_mail_edit_base.js
@@ -16,230 +16,233 @@
*/
define(
- [
- 'helpers/view_helper',
- 'mail_view/ui/recipients/recipients',
- 'mail_view/ui/draft_save_status',
- 'page/events',
- 'views/i18n',
- 'mail_view/ui/send_button',
- 'mail_view/ui/attachment_icon',
- 'mail_view/data/attachment_list',
- 'flight/lib/utils'
- ],
- function(viewHelper, Recipients, DraftSaveStatus, events, i18n, SendButton, AttachmentIcon, AttachmentList, utils) {
- 'use strict';
-
- function withMailEditBase() {
-
- this.defaultAttrs({
- bodyBox: '#text-box',
- sendButton: '#send-button',
- attachmentButton: '#attachment-button',
- attachmentList: '#attachment-list',
- cancelButton: '#cancel-button',
- trashButton: '#trash-button',
- toArea: '#recipients-to-area',
- toBox: '#recipients-to-box',
- ccArea: '#recipients-cc-area',
- bccArea: '#recipients-bcc-area',
- ccsTrigger: '#ccs-trigger',
- bccsTrigger: '#bccs-trigger',
- toTrigger: '#to-trigger',
- subjectBox: '#subject',
- tipMsg: '.tip-msg',
- draftSaveStatus: '#draft-save-status',
- recipientsFields: '#recipients-fields',
- currentTag: '',
- recipientValues: {to: [], cc: [], bcc: []},
- saveDraftInterval: 3000
- });
-
- this.attachRecipients = function (context) {
- Recipients.attachTo(this.select('toArea'), { name: 'to', addresses: context.recipients.to });
- Recipients.attachTo(this.select('ccArea'), { name: 'cc', addresses: context.recipients.cc || []});
- Recipients.attachTo(this.select('bccArea'), { name: 'bcc', addresses: context.recipients.bcc || []});
- };
-
- function thereAreRecipientsToDisplay() {
-
- var allRecipients = _.chain(this.attr.recipientValues).
- values().
- flatten().
- remove(undefined).
- value();
-
- return !_.isEmpty(allRecipients);
- }
-
- this.warnSendButtonOfRecipients = function () {
- if (thereAreRecipientsToDisplay.call(this)) {
- _.forOwn(this.attr.recipientValues, function (recipients, recipientsType) {
- if (!_.isUndefined(recipients) && !_.isEmpty(recipients)) {
- var recipientsUpdatedData = {
- newRecipients: recipients,
- recipientsName: recipientsType
- };
- this.trigger(document, events.ui.recipients.updated, recipientsUpdatedData);
+ [
+ 'helpers/view_helper',
+ 'mail_view/ui/recipients/recipients',
+ 'mail_view/ui/draft_save_status',
+ 'page/events',
+ 'views/i18n',
+ 'mail_view/ui/send_button',
+ 'mail_view/ui/attachment_icon',
+ 'mail_view/ui/attachment_list',
+ 'flight/lib/utils'
+ ],
+ function (viewHelper, Recipients, DraftSaveStatus, events, i18n, SendButton, AttachmentIcon, AttachmentListUI, utils) {
+ 'use strict';
+
+ function withMailEditBase() {
+
+ this.defaultAttrs({
+ bodyBox: '#text-box',
+ sendButton: '#send-button',
+ attachmentButton: '#attachment-button',
+ attachmentList: '#attachment-list',
+ cancelButton: '#cancel-button',
+ trashButton: '#trash-button',
+ toArea: '#recipients-to-area',
+ toBox: '#recipients-to-box',
+ ccArea: '#recipients-cc-area',
+ bccArea: '#recipients-bcc-area',
+ ccsTrigger: '#ccs-trigger',
+ bccsTrigger: '#bccs-trigger',
+ toTrigger: '#to-trigger',
+ subjectBox: '#subject',
+ tipMsg: '.tip-msg',
+ draftSaveStatus: '#draft-save-status',
+ recipientsFields: '#recipients-fields',
+ currentTag: '',
+ recipientValues: {to: [], cc: [], bcc: []},
+ saveDraftInterval: 3000
+ });
+
+ this.attachRecipients = function (context) {
+ Recipients.attachTo(this.select('toArea'), {name: 'to', addresses: context.recipients.to});
+ Recipients.attachTo(this.select('ccArea'), {name: 'cc', addresses: context.recipients.cc || []});
+ Recipients.attachTo(this.select('bccArea'), {name: 'bcc', addresses: context.recipients.bcc || []});
+ };
+
+ function thereAreRecipientsToDisplay() {
+
+ var allRecipients = _.chain(this.attr.recipientValues).
+ values().
+ flatten().
+ remove(undefined).
+ value();
+
+ return !_.isEmpty(allRecipients);
}
- }.bind(this));
- }
- };
- this.render = function(template, context) {
- this.$node.html(template(context));
+ this.warnSendButtonOfRecipients = function () {
+ if (thereAreRecipientsToDisplay.call(this)) {
+ _.forOwn(this.attr.recipientValues, function (recipients, recipientsType) {
+ if (!_.isUndefined(recipients) && !_.isEmpty(recipients)) {
+ var recipientsUpdatedData = {
+ newRecipients: recipients,
+ recipientsName: recipientsType
+ };
+ this.trigger(document, events.ui.recipients.updated, recipientsUpdatedData);
+ }
+ }.bind(this));
+ }
+ };
+
+ this.render = function (template, context) {
+ this.$node.html(template(context));
+
+ if (!context || _.isEmpty(context)) {
+ context.recipients = {to: [], cc: [], bcc: []};
+ }
+ this.attr.recipientValues = context.recipients;
+ this.attachRecipients(context);
+
+ this.on(this.select('trashButton'), 'click', this.discardMail);
+ SendButton.attachTo(this.select('sendButton'));
+ AttachmentIcon.attachTo(this.select('attachmentButton'));
+ AttachmentListUI.attachTo(this.select('attachmentList'));
+
+ this.warnSendButtonOfRecipients();
+ };
+
+ this.enableAutoSave = function () {
+ this.select('bodyBox').on('input', this.monitorInput.bind(this));
+ this.select('subjectBox').on('input', this.monitorInput.bind(this));
+ DraftSaveStatus.attachTo(this.select('draftSaveStatus'));
+ };
+
+ this.monitorInput = function () {
+ this.trigger(events.ui.mail.changedSinceLastSave);
+ this.cancelPostponedSaveDraft();
+ var mail = this.buildMail();
+ this.postponeSaveDraft(mail);
+ };
+
+ this.discardMail = function () {
+ this.cancelPostponedSaveDraft();
+ if (this.attr.ident) {
+ var mail = this.buildMail();
+ this.trigger(document, events.ui.mail.delete, {mail: mail});
+ } else {
+ this.trigger(document, events.ui.mail.discard);
+ }
+ };
+
+ this.trim_recipient = function (recipients) {
+ return recipients.map(function (recipient) {
+ return recipient.trim();
+ });
+ };
+
+ this.sendMail = function () {
+ this.cancelPostponedSaveDraft();
+ var mail = this.buildMail('sent');
+
+ if (allRecipientsAreEmails(mail)) {
+ mail.header.to = this.trim_recipient(mail.header.to);
+ mail.header.cc = this.trim_recipient(mail.header.cc);
+ mail.header.bcc = this.trim_recipient(mail.header.bcc);
+ this.trigger(events.mail.send, mail);
+ } else {
+ this.trigger(
+ events.ui.userAlerts.displayMessage,
+ {message: i18n('One or more of the recipients are not valid emails')}
+ );
+ this.trigger(events.mail.send_failed);
+ }
+ };
+
+ this.buildAndSaveDraft = function () {
+ var mail = this.buildMail();
+ this.saveDraft(mail);
+ };
+
+ this.recipientsUpdated = function (ev, data) {
+ this.attr.recipientValues[data.recipientsName] = data.newRecipients;
+ this.trigger(document, events.ui.mail.recipientsUpdated);
+ if (data.skipSaveDraft) {
+ return;
+ }
+
+ var mail = this.buildMail();
+ this.postponeSaveDraft(mail);
+ };
+
+ this.saveDraft = function (mail) {
+ this.cancelPostponedSaveDraft();
+ this.trigger(document, events.mail.saveDraft, mail);
+ };
+
+ this.cancelPostponedSaveDraft = function () {
+ clearTimeout(this.attr.timeout);
+ };
+
+ this.postponeSaveDraft = function (mail) {
+ this.cancelPostponedSaveDraft();
+
+ this.attr.timeout = window.setTimeout(_.bind(function () {
+ this.saveDraft(mail);
+ }, this), this.attr.saveDraftInterval);
+ };
+
+ this.draftSaved = function (event, data) {
+ this.attr.ident = data.ident;
+ };
+
+ this.validateAnyRecipient = function () {
+ return !_.isEmpty(_.flatten(_.values(this.attr.recipientValues)));
+ };
+
+ function allRecipientsAreEmails(mail) {
+ var allRecipients = mail.header.to.concat(mail.header.cc).concat(mail.header.bcc);
+ return _.isEmpty(allRecipients) ? false : _.all(allRecipients, emailFormatChecker);
+ }
- if(!context || _.isEmpty(context)){
- context.recipients = {to: [], cc: [], bcc: []};
- }
- this.attr.recipientValues = context.recipients;
- this.attachRecipients(context);
-
- this.on(this.select('trashButton'), 'click', this.discardMail);
- SendButton.attachTo(this.select('sendButton'));
- AttachmentIcon.attachTo(this.select('attachmentButton'));
- AttachmentList.attachTo(this.select('attachmentList'));
-
- this.warnSendButtonOfRecipients();
- };
-
- this.enableAutoSave = function () {
- this.select('bodyBox').on('input', this.monitorInput.bind(this));
- this.select('subjectBox').on('input', this.monitorInput.bind(this));
- DraftSaveStatus.attachTo(this.select('draftSaveStatus'));
- };
-
- this.monitorInput = function() {
- this.trigger(events.ui.mail.changedSinceLastSave);
- this.cancelPostponedSaveDraft();
- var mail = this.buildMail();
- this.postponeSaveDraft(mail);
- };
-
- this.discardMail = function() {
- this.cancelPostponedSaveDraft();
- if (this.attr.ident) {
- var mail = this.buildMail();
- this.trigger(document, events.ui.mail.delete, { mail: mail });
- } else {
- this.trigger(document, events.ui.mail.discard);
- }
- };
-
- this.trim_recipient = function(recipients) {
- return recipients.map(function(recipient) {
- return recipient.trim();
- });
- };
-
- this.sendMail = function () {
- this.cancelPostponedSaveDraft();
- var mail = this.buildMail('sent');
-
- if (allRecipientsAreEmails(mail)) {
- mail.header.to = this.trim_recipient(mail.header.to);
- mail.header.cc = this.trim_recipient(mail.header.cc);
- mail.header.bcc = this.trim_recipient(mail.header.bcc);
- this.trigger(events.mail.send, mail);
- } else {
- this.trigger(
- events.ui.userAlerts.displayMessage,
- {message: i18n('One or more of the recipients are not valid emails')}
- );
- this.trigger(events.mail.send_failed);
+ function emailFormatChecker(email) {
+ var emailFormat = /[^\s@]+@[^\s@]+\.[^\s@]+$/;
+ return emailFormat.test(email);
+ }
+
+ this.saveTag = function (ev, data) {
+ this.attr.currentTag = data.tag;
+ };
+
+ this.mailSent = function () {
+ this.trigger(document, events.ui.userAlerts.displayMessage, {message: 'Your message was sent!'});
+ };
+
+ this.enableFloatlabel = function (element) {
+ var showClass = 'showfloatlabel';
+ $(element).bind('keyup', function () {
+ var label = $(this).prev('label');
+ if (this.value !== '') {
+ label.addClass(showClass);
+ $(this).addClass(showClass);
+ } else {
+ label.removeClass(showClass);
+ $(this).removeClass(showClass);
+ }
+ });
+ };
+
+ this.before('initialize', function () {
+ if (!this.discardDraft) {
+ this.discardDraft = function () {
+ };
+ }
+ });
+
+ this.after('initialize', function () {
+ this.on(document, events.dispatchers.rightPane.clear, this.teardown);
+ this.on(document, events.ui.recipients.updated, this.recipientsUpdated);
+ this.on(document, events.mail.draftSaved, this.draftSaved);
+ this.on(document, events.mail.sent, this.mailSent);
+
+ this.on(document, events.ui.mail.send, this.sendMail);
+
+ this.on(document, events.ui.mail.discard, this.discardDraft);
+ this.on(document, events.ui.tag.selected, this.saveTag);
+ this.on(document, events.ui.tag.select, this.saveTag);
+ });
}
- };
-
- this.buildAndSaveDraft = function () {
- var mail = this.buildMail();
- this.saveDraft(mail);
- };
-
- this.recipientsUpdated = function (ev, data) {
- this.attr.recipientValues[data.recipientsName] = data.newRecipients;
- this.trigger(document, events.ui.mail.recipientsUpdated);
- if (data.skipSaveDraft) { return; }
-
- var mail = this.buildMail();
- this.postponeSaveDraft(mail);
- };
-
- this.saveDraft = function (mail) {
- this.cancelPostponedSaveDraft();
- this.trigger(document, events.mail.saveDraft, mail);
- };
-
- this.cancelPostponedSaveDraft = function() {
- clearTimeout(this.attr.timeout);
- };
-
- this.postponeSaveDraft = function (mail) {
- this.cancelPostponedSaveDraft();
-
- this.attr.timeout = window.setTimeout(_.bind(function() {
- this.saveDraft(mail);
- }, this), this.attr.saveDraftInterval);
- };
-
- this.draftSaved = function(event, data) {
- this.attr.ident = data.ident;
- };
-
- this.validateAnyRecipient = function () {
- return !_.isEmpty(_.flatten(_.values(this.attr.recipientValues)));
- };
-
- function allRecipientsAreEmails(mail) {
- var allRecipients = mail.header.to.concat(mail.header.cc).concat(mail.header.bcc);
- return _.isEmpty(allRecipients) ? false : _.all(allRecipients, emailFormatChecker);
- }
-
- function emailFormatChecker(email) {
- var emailFormat = /[^\s@]+@[^\s@]+\.[^\s@]+$/;
- return emailFormat.test(email);
- }
-
- this.saveTag = function(ev, data) {
- this.attr.currentTag = data.tag;
- };
-
- this.mailSent = function() {
- this.trigger(document, events.ui.userAlerts.displayMessage, { message: 'Your message was sent!' });
- };
-
- this.enableFloatlabel = function(element) {
- var showClass = 'showfloatlabel';
- $(element).bind('keyup', function() {
- var label = $(this).prev('label');
- if (this.value !== '') {
- label.addClass(showClass);
- $(this).addClass(showClass);
- } else {
- label.removeClass(showClass);
- $(this).removeClass(showClass);
- }
- });
- };
-
- this.before('initialize', function () {
- if (!this.discardDraft){
- this.discardDraft = function () {};
- }
- });
-
- this.after('initialize', function () {
- this.on(document, events.dispatchers.rightPane.clear, this.teardown);
- this.on(document, events.ui.recipients.updated, this.recipientsUpdated);
- this.on(document, events.mail.draftSaved, this.draftSaved);
- this.on(document, events.mail.sent, this.mailSent);
-
- this.on(document, events.ui.mail.send, this.sendMail);
-
- this.on(document, events.ui.mail.discard, this.discardDraft);
- this.on(document, events.ui.tag.selected, this.saveTag);
- this.on(document, events.ui.tag.select, this.saveTag);
- });
- }
-
- return withMailEditBase;
- });
+
+ return withMailEditBase;
+ });
diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js
index 406c3b23..c85a322d 100644
--- a/web-ui/app/js/page/events.js
+++ b/web-ui/app/js/page/events.js
@@ -145,7 +145,8 @@ define(function () {
},
uploadedAttachment: 'mail:uploaded:attachment',
uploadingAttachment: 'mail:uploading:attachment',
- startUploadAttachment: 'mail:start:upload:attachment'
+ startUploadAttachment: 'mail:start:upload:attachment',
+ appendAttachment: 'mail:append:attachment'
},
mails: {
available: 'mails:available',