Restyled message attachments

Added a size limit, added functionality to delete the attachments before sending in a more user-friendly way

js/views/file_input_view.js

@@ -22,25 +22,33 @@ var Whisper = Whisper || {};
         className: 'file-input',
         initialize: function() {
             this.$input = this.$el.find('input[type=file]');
+            this.modal = new Whisper.ModalView({el: $('#file-modal')});
         },
 
         events: {
-            'change': 'previewImages'
+            'change': 'previewImages',
+            'click .close': 'deleteFiles'
         },
 
         addThumb: function(e) {
-          this.$el.append(
-            $('<img>').attr( "src", e.target.result ).addClass('preview')
-          );
+            var attachmentPreview = $('#attachment-preview').html();
+            Mustache.parse(attachmentPreview);
+            this.$el.append($(Mustache.render(attachmentPreview, {source: e.target.result})));
         },
 
         previewImages: function() {
-            this.$el.find('img').remove();
+            this.clearForm();
             var files = this.$input.prop('files');
             for (var i = 0; i < files.length; i++) {
                 var FR = new FileReader();
-                FR.onload = this.addThumb.bind(this);
-                FR.readAsDataURL(files[i]);
+                if ((files[i].size/1024).toFixed(4) >= 420) {
+                    this.modal.open();
+                    this.deleteFiles();
+                }
+                else {
+                    FR.onload = this.addThumb.bind(this);
+                    FR.readAsDataURL(files[i]);
+                }
             }
         },
 
@@ -63,9 +71,18 @@ var Whisper = Whisper || {};
                 }.bind(this));
                 promises.push(p);
             }
-            this.$el.find('img').remove();
+            this.clearForm();
             return Promise.all(promises);
-        }
+        },
 
+        clearForm: function() {
+            this.$el.find('div.imageAttachment').remove();
+        },
+
+        deleteFiles: function() {
+            this.clearForm();
+            this.$input.wrap('<form>').parent('form').trigger('reset');
+            this.$input.unwrap();
+        }
     });
 })();

js/views/file_modal_view.js

@@ -0,0 +1,47 @@
+/* vim: ts=4:sw=4:expandtab
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program 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 Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+var Whisper = Whisper || {};
+
+(function () {
+    'use strict';
+    Whisper.ModalView = Backbone.View.extend({
+        tagName: 'div',
+        className: 'file-overload-modal',
+        initialize: function() {
+            this.template = $('#file-size-modal').html();
+            Mustache.parse(this.template);
+            this.render();
+        },
+
+        render: function() {
+            this.$el.html($(Mustache.render(this.template)));
+            return this;
+        },
+
+        events: {
+            'click .modal-close': 'close',
+            'click #closeModal': 'close'
+        },
+
+        open: function() {
+            this.$el.find('#modal').show();
+        },
+
+        close: function() {
+            this.$el.find('#modal').hide();
+        }
+    });
+})();