From 0ca01a8a8e2cd9201f43fa840a30a0822215bfef Mon Sep 17 00:00:00 2001 From: NavaL Date: Tue, 5 Jan 2016 15:10:33 +0100 Subject: separated attachment list UI as a component and the corresponding attachment list payload as a mixin Issue #548 --- web-ui/app/js/mail_view/data/attachment_list.js | 53 +-------------- web-ui/app/js/mail_view/ui/attachment_list.js | 87 +++++++++++++++++++++++++ web-ui/app/js/mail_view/ui/compose_box.js | 7 +- 3 files changed, 94 insertions(+), 53 deletions(-) create mode 100644 web-ui/app/js/mail_view/ui/attachment_list.js (limited to 'web-ui/app/js/mail_view') 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 '' + data.filename + ' (' + humanReadable(data.filesize) + ')' + - ''; - }; - - 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 . + */ + +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 '' + data.filename + ' (' + humanReadable(data.filesize) + ')' + + ''; + }; + + 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() { -- cgit v1.2.3