diff options
| -rw-r--r-- | web-ui/app/js/mail_view/data/attachment_list.js | 52 | ||||
| -rw-r--r-- | web-ui/app/js/mail_view/ui/attachment.js | 74 | ||||
| -rw-r--r-- | web-ui/app/js/mail_view/ui/attachment_icon.js | 46 | ||||
| -rw-r--r-- | web-ui/app/js/mail_view/ui/compose_box.js | 7 | ||||
| -rw-r--r-- | web-ui/app/js/mixins/with_mail_edit_base.js | 9 | ||||
| -rw-r--r-- | web-ui/app/js/page/events.js | 3 | ||||
| -rw-r--r-- | web-ui/app/templates/compose/compose_box.hbs | 2 | ||||
| -rw-r--r-- | web-ui/test/spec/mail_view/data/attachment_list.spec.js | 34 | ||||
| -rw-r--r-- | web-ui/test/spec/mail_view/ui/attachment.spec.js | 10 |
9 files changed, 142 insertions, 95 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 af48b059..7ea2f9d9 100644 --- a/web-ui/app/js/mail_view/data/attachment_list.js +++ b/web-ui/app/js/mail_view/data/attachment_list.js @@ -17,24 +17,72 @@ define( [ + 'flight/lib/component', 'page/events' ], - function (events) { + function (defineComponent, 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); }); } - return attachmentList; + + return defineComponent(attachmentList); });
\ No newline at end of file diff --git a/web-ui/app/js/mail_view/ui/attachment.js b/web-ui/app/js/mail_view/ui/attachment.js deleted file mode 100644 index fcb0fe68..00000000 --- a/web-ui/app/js/mail_view/ui/attachment.js +++ /dev/null @@ -1,74 +0,0 @@ -/* - * 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', - 'features' - ], - - function (defineComponent, events, features) { - 'use strict'; - - return defineComponent(function () { - this.render = function () { - this.$node.html('<i class="fa fa-paperclip fa-2x"></i>'); - }; - - 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'; - } - - function addJqueryFileUploadConfig(on) { - var url = '/attachment'; - $('#fileupload').fileupload({ - url: url, - dataType: 'json', - done: function (e, response) { - var data = response.result; - var link = '<a href="/attachment/'+ data.attachment_id + '?filename='+ data.filename +'&encoding=base64">' + data.filename + ' (' + humanReadable(data.filesize) + ')' + '</a>'; - $('#attachment-list-item').html(link); - on.trigger(document, events.mail.uploadedAttachment, data); - }, - progressall: function (e, data) { - var progress = parseInt(data.loaded / data.total * 100, 10); - $('#progress .progress-bar').css('width', progress + '%'); - } - }).bind('fileuploadstart', function(e) { - on.trigger(document, events.mail.uploadingAttachment); - }).bind('fileuploadadd', function(e) { - $('.attachmentsAreaWrap').show(); - }); - } - - this.upload = function () { - addJqueryFileUploadConfig(this); - $('#fileupload').click(); - }; - - this.after('initialize', function () { - if (features.isEnabled('attachment')) { - this.render(); - $('.attachmentsAreaWrap').hide(); - } - this.on(this.$node, 'click', this.upload); - }); - - }); - }); diff --git a/web-ui/app/js/mail_view/ui/attachment_icon.js b/web-ui/app/js/mail_view/ui/attachment_icon.js new file mode 100644 index 00000000..802087f8 --- /dev/null +++ b/web-ui/app/js/mail_view/ui/attachment_icon.js @@ -0,0 +1,46 @@ +/* + * 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', + 'features' + ], + + function (defineComponent, events, features) { + 'use strict'; + + return defineComponent(function () { + this.render = function () { + this.$node.html('<i class="fa fa-paperclip fa-2x"></i>'); + }; + + this.triggerUploadAttachment = function () { + this.trigger(document, events.mail.startUploadAttachment); + }; + + this.after('initialize', function () { + if (features.isEnabled('attachment')) { + this.render(); + $('.attachmentsAreaWrap').hide(); + } + this.on(this.$node, 'click', this.triggerUploadAttachment); + }); + + }); + }); 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 993cf880..8e03c081 100644 --- a/web-ui/app/js/mail_view/ui/compose_box.js +++ b/web-ui/app/js/mail_view/ui/compose_box.js @@ -20,14 +20,13 @@ define( 'views/templates', 'mixins/with_mail_edit_base', 'page/events', - 'mail_view/data/mail_builder', - 'mail_view/data/attachment_list' + 'mail_view/data/mail_builder' ], - function (defineComponent, templates, withMailEditBase, events, mailBuilder, attachmentList) { + function (defineComponent, templates, withMailEditBase, events, mailBuilder) { 'use strict'; - return defineComponent(composeBox, withMailEditBase, attachmentList); + return defineComponent(composeBox, withMailEditBase); 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 1b5e8c52..f00ad5a3 100644 --- a/web-ui/app/js/mixins/with_mail_edit_base.js +++ b/web-ui/app/js/mixins/with_mail_edit_base.js @@ -23,10 +23,11 @@ define( 'page/events', 'views/i18n', 'mail_view/ui/send_button', - 'mail_view/ui/attachment', + 'mail_view/ui/attachment_icon', + 'mail_view/data/attachment_list', 'flight/lib/utils' ], - function(viewHelper, Recipients, DraftSaveStatus, events, i18n, SendButton, Attachment, utils) { + function(viewHelper, Recipients, DraftSaveStatus, events, i18n, SendButton, AttachmentIcon, AttachmentList, utils) { 'use strict'; function withMailEditBase() { @@ -35,6 +36,7 @@ define( bodyBox: '#text-box', sendButton: '#send-button', attachmentButton: '#attachment-button', + attachmentList: '#attachment-list', cancelButton: '#cancel-button', trashButton: '#trash-button', toArea: '#recipients-to-area', @@ -95,7 +97,8 @@ define( this.on(this.select('trashButton'), 'click', this.discardMail); SendButton.attachTo(this.select('sendButton')); - Attachment.attachTo(this.select('attachmentButton')); + AttachmentIcon.attachTo(this.select('attachmentButton')); + AttachmentList.attachTo(this.select('attachmentList')); this.warnSendButtonOfRecipients(); }; diff --git a/web-ui/app/js/page/events.js b/web-ui/app/js/page/events.js index 85c190bb..406c3b23 100644 --- a/web-ui/app/js/page/events.js +++ b/web-ui/app/js/page/events.js @@ -144,7 +144,8 @@ define(function () { updated: 'mail:tags:updated' }, uploadedAttachment: 'mail:uploaded:attachment', - uploadingAttachment: 'mail:uploading:attachment' + uploadingAttachment: 'mail:uploading:attachment', + startUploadAttachment: 'mail:start:upload:attachment' }, mails: { available: 'mails:available', diff --git a/web-ui/app/templates/compose/compose_box.hbs b/web-ui/app/templates/compose/compose_box.hbs index d985ed52..c9695c6f 100644 --- a/web-ui/app/templates/compose/compose_box.hbs +++ b/web-ui/app/templates/compose/compose_box.hbs @@ -19,7 +19,7 @@ <textarea class="floatlabel" name="body" id="text-box" placeholder="{{t 'Body'}}" tabindex="5">{{body}}</textarea> </div> -<div class="buttons-group columns"> +<div id="attachment-list" class="buttons-group columns"> <span class="btn btn-success fileinput-button"> <!-- The file input field used as target for the file upload widget --> <input id="fileupload" type="file" name="attachment"> diff --git a/web-ui/test/spec/mail_view/data/attachment_list.spec.js b/web-ui/test/spec/mail_view/data/attachment_list.spec.js index 74c1dea7..f1fa0e76 100644 --- a/web-ui/test/spec/mail_view/data/attachment_list.spec.js +++ b/web-ui/test/spec/mail_view/data/attachment_list.spec.js @@ -1,9 +1,11 @@ -describeMixin('mail_view/data/attachment_list', function () { - 'use strict'; +describeComponent('mail_view/data/attachment_list', function () { + 'use strict'; - describe('initialization', function() { - beforeEach(function(){ - this.setupComponent(); + describe('initialization', function () { + beforeEach(function () { + this.setupComponent('<div id="attachment-list">' + + '<ul><li id="attachment-list-item"> </li></ul>' + + '</div>'); }); it('should add attachment to the list based on uploadedAttachment event', function () { @@ -16,6 +18,28 @@ describeMixin('mail_view/data/attachment_list', function () { expect(this.component.attr.attachments).toEqual([stubAttachment, anotherStubAttachment]); }); + it('should render attachment list view based on uploadedAttachment event', function () { + var stubAttachment = {attachment_id: 'faked', filename: 'haha.txt', filesize: 4500}; + + $(document).trigger(Pixelated.events.mail.uploadedAttachment, stubAttachment); + + var expected_li = '<a href="/attachment/faked?filename=haha.txt&encoding=base64">haha.txt (4.39 Kb)</a>'; + expect(this.component.select('attachmentListItem').html()).toEqual(expected_li); + }); + + xit('should start uploading attachments', function () { + var stubAttachment = {attachment_id: 'faked', filename: 'haha.txt', filesize: 4500}; + var mockAjax = spyOn($, 'ajax').and.callFake(function (params) {params.success(stubAttachment);}); + var uploadedAttachment = spyOnEvent(document, Pixelated.events.mail.uploadedAttachment); + var uploading = spyOnEvent(document, Pixelated.events.mail.uploadingAttachment); + + $(document).trigger(Pixelated.events.mail.startUploadAttachment); + + expect(mockAjax).toHaveBeenCalled(); + expect(uploadedAttachment).toHaveBeenTriggeredOnAndWith(document, stubAttachment); + expect(uploading).toHaveBeenTriggeredOn(document); + }); + }); }); diff --git a/web-ui/test/spec/mail_view/ui/attachment.spec.js b/web-ui/test/spec/mail_view/ui/attachment.spec.js index bbea2f55..d29660b9 100644 --- a/web-ui/test/spec/mail_view/ui/attachment.spec.js +++ b/web-ui/test/spec/mail_view/ui/attachment.spec.js @@ -1,4 +1,4 @@ -describeComponent('mail_view/ui/attachment', function () { +describeComponent('mail_view/ui/attachment_icon', function () { 'use strict'; describe('attachment', function () { @@ -7,14 +7,14 @@ describeComponent('mail_view/ui/attachment', function () { this.setupComponent(); }); - it('render attachment button if feature enabled', function () { + it('should render attachment button if feature enabled', function () { expect(this.$node.html()).toMatch('<i class="fa fa-paperclip fa-2x"></i>'); }); - xit('uploads attachment on click', function () { - var fileUploads = spyOn($, 'fileupload'); + it('should trigger starts of attachment upload process', function () { + var triggerUploadAttachment = spyOnEvent(document, Pixelated.events.mail.startUploadAttachment); this.$node.click(); - expect(fileUploads).toHaveBeenCalled(); + expect(triggerUploadAttachment).toHaveBeenTriggeredOn(document); }); }); |