diff --git a/index.html b/index.html index ce1db83b..61a299a9 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,7 @@
+
+ + @@ -168,6 +191,7 @@ + diff --git a/js/views/file_input_view.js b/js/views/file_input_view.js index 079d334d..742ef07b 100644 --- a/js/views/file_input_view.js +++ b/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( - $('').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('
').parent('form').trigger('reset'); + this.$input.unwrap(); + } }); })(); diff --git a/js/views/file_modal_view.js b/js/views/file_modal_view.js new file mode 100644 index 00000000..838862e9 --- /dev/null +++ b/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 . + */ +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(); + } + }); +})(); diff --git a/stylesheets/index.css b/stylesheets/index.css index 260ef896..c682e58c 100644 --- a/stylesheets/index.css +++ b/stylesheets/index.css @@ -73,9 +73,37 @@ li.entry img { margin-top: 5px; } +div.imageAttachment { + height: 30px; + width: 30px; + float: left; + margin: 6px; + position: relative; +} + img.preview { width: 30px; height: 30px; + overflow: hidden; + position: relative; +} + +.close { + font-family: sans-serif; + color: white; + position: absolute; + top: -10px; + left: 20px; + text-align: center; + cursor: default; + border-radius: 50%; + width: 20px; + height: 20px; + padding: 0px; + + background: #666; + color: #fff; + text-align: center; } .bootstrap-tagsinput .tag { @@ -86,4 +114,101 @@ img.preview { ul.country-list { min-width: 197px !important; +} + +div.attachments { + width: 95% !important; +} + +input.file-input { + float: left !important; +} + +.modal-wrapper { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + z-index: 10000 !important; + display: none; +} + +.modal-content { + position: absolute; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + overflow-y: scroll; +} + +.modal-container { + background-color: #FFFFFF; + width: 450px; + -webkit-box-shadow: 0 0 7px 0 #000000; + moz-box-shadow: 0 0 7px 0 #000000; + box-shadow: 0 0 7px 0 #000000; + display: block; + z-index: 10000 !important; + margin: 45px auto; + position: relative; + border: 1px solid #666; +} + +.modal-banner { + background-color: #00badd; + color: #ffffff; + height: 45px; + line-height: 45px; + vertical-align: middle; + text-align: center; + font-wight: bold; + font-size: 1.5em; + position: relative; +} +.modal-banner span { + padding: 0 20px; +} + +.modal-close { + position: absolute; + top: 0; + right: 12px; + bottom: 0; +} +.modal-close a.modal-close-button { + color: #FFFFFF; + text-decoration: none; + font-size: .8em; +} + +.modal-inner { + overflow: hidden; +} + +.modal-inner>p { + color: black !important; +} + +.modal-padding { + padding: 16px 18px; +} + +@media only screen and (max-width: 450px) { + .modal-container { + width: 100%; + margin: 0 auto; + } + + .modal-banner { + height: 32px; + line-height: 32px; + vertical-align: middle; + text-align: center; + font-wight: bold; + font-size: 1em; + position: relative; + } } \ No newline at end of file