diff --git a/app/assets/javascripts/app/views/publisher/uploader.js b/app/assets/javascripts/app/views/publisher/uploader.js
new file mode 100644
index 000000000..ef221a802
--- /dev/null
+++ b/app/assets/javascripts/app/views/publisher/uploader.js
@@ -0,0 +1,122 @@
+
+// Uploader view for the publisher.
+// Initializes the file uploader plugin and handles callbacks for the upload
+// progress. Attaches previews of finished uploads to the publisher.
+
+app.views.PublisherUploader = Backbone.View.extend({
+
+ allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'tif', 'tiff'],
+ sizeLimit: 4194304, // bytes
+
+ initialize: function() {
+ this.uploader = new qq.FileUploaderBasic({
+ element: this.el,
+ button: this.el,
+
+ //debug: true,
+
+ action: '/photos',
+ params: { photo: { pending: true }},
+ allowedExtensions: this.allowedExtensions,
+ sizeLimit: this.sizeLimit,
+ messages: {
+ typeError: Diaspora.I18n.t('photo_uploader.invalid_ext'),
+ sizeError: Diaspora.I18n.t('photo_uploader.size_error'),
+ emptyError: Diaspora.I18n.t('photo_uploader.empty')
+ },
+ onProgress: _.bind(this.progressHandler, this),
+ onSubmit: _.bind(this.submitHandler, this),
+ onComplete: _.bind(this.uploadCompleteHandler, this)
+
+ });
+
+ this.options.publisher.el_photozone.on('click', '.x', _.bind(this._removePhoto, this));
+ },
+
+ progressHandler: function(id, fileName, loaded, total) {
+ var progress = Math.round(loaded / total * 100);
+ this.options.el_info.text(fileName + ' ' + progress + '%').fadeTo(200, 1);
+ },
+
+ submitHandler: function(id, fileName) {
+ this.$el.addClass('loading');
+ this._addPhotoPlaceholder();
+ },
+
+ // add photo placeholders to the publisher to indicate an upload in progress
+ _addPhotoPlaceholder: function() {
+ var publisher = this.options.publisher;
+ publisher.el_submit.attr('disabled', 'disabled');
+ publisher.el_preview.attr('disabled', 'disabled');
+
+ publisher.el_wrapper.addClass('with_attachments');
+ publisher.el_photozone.append(
+ '
' +
+ '
'+
+ ''
+ );
+ },
+
+ uploadCompleteHandler: function(id, fileName, response) {
+ this.options.el_info.text(Diaspora.I18n.t('photo_uploader.completed', {file: fileName})).fadeTo(2000, 0);
+
+ var id = response.data.photo.id,
+ url = response.data.photo.unprocessed_image.url;
+
+ this._addFinishedPhoto(id, url);
+ },
+
+ // replace the first photo placeholder with the finished uploaded image and
+ // add the id to the publishers form
+ _addFinishedPhoto: function(id, url) {
+ var publisher = this.options.publisher;
+
+ // add form input element
+ publisher.$('.content_creation form').append(
+ ''
+ );
+
+ // replace placeholder
+ var placeholder = publisher.el_photozone.find('li.loading').first();
+ placeholder
+ .removeClass('loading')
+ .append(
+ 'X
'+
+ ''
+ )
+ .find('img').attr({'src': url, 'data-id': id});
+
+ // no more placeholders? enable buttons
+ if( publisher.el_photozone.find('li.loading').length == 0 ) {
+ this.$el.removeClass('loading');
+ publisher.setButtonsEnabled(true);
+ }
+ },
+
+ // remove an already uploaded photo
+ _removePhoto: function(evt) {
+ var self = this;
+ var photo = $(evt.target).parents('.publisher_photo')
+ var img = photo.find('img');
+
+ photo.addClass('dim');
+ $.ajax({
+ url: '/photos/'+img.attr('data-id'),
+ dataType: 'json',
+ type: 'DELETE',
+ success: function() {
+ photo.fadeOut(400, function(){
+ photo.remove();
+
+ if( self.options.publisher.$('.publisher_photo').length == 0 ) {
+ // no more photos left...
+ self.options.publisher.el_wrapper.removeClass('with_attachments');
+ }
+ });
+ }
+ });
+
+ return false;
+ }
+
+});
diff --git a/app/assets/javascripts/app/views/publisher_view.js b/app/assets/javascripts/app/views/publisher_view.js
index cf1f2fda0..b0843becc 100644
--- a/app/assets/javascripts/app/views/publisher_view.js
+++ b/app/assets/javascripts/app/views/publisher_view.js
@@ -6,6 +6,7 @@
//= require ./publisher/services
//= require ./publisher/aspect_selector
//= require ./publisher/getting_started
+//= require ./publisher/uploader
//= require jquery.textchange
app.views.Publisher = Backbone.View.extend(_.extend(
@@ -88,6 +89,13 @@ app.views.Publisher = Backbone.View.extend(_.extend(
el_visibility: this.$('.public_toggle > .dropdown'),
el_stream: $('#gs-shim')
});
+
+ this.view_uploader = new app.views.PublisherUploader({
+ el: this.$('#file-upload'),
+ el_info: this.$('#fileInfo'),
+ publisher: this
+ });
+
},
// set the selected aspects in the dropdown by their ids
@@ -309,14 +317,18 @@ app.views.Publisher = Backbone.View.extend(_.extend(
checkSubmitAvailability: function() {
if( this._submittable() ) {
- this.el_submit.removeAttr('disabled');
- this.el_preview.removeAttr('disabled');
+ this.setButtonsEnabled(true);
} else {
- this.el_submit.attr('disabled','disabled');
- this.el_preview.attr('disabled','disabled');
+ this.setButtonsEnabled(false);
}
},
+ setButtonsEnabled: function(bool) {
+ bool = !bool;
+ this.el_submit.prop({disabled: bool});
+ this.el_preview.prop({disabled: bool});
+ },
+
// determine submit availability
_submittable: function() {
var onlyWhitespaces = ($.trim(this.el_input.val()) === ''),
diff --git a/app/views/photos/_new_photo.haml b/app/views/photos/_new_photo.haml
index 8aa2996ed..b3c2cc201 100644
--- a/app/views/photos/_new_photo.haml
+++ b/app/views/photos/_new_photo.haml
@@ -8,84 +8,11 @@
var aspectIds = "#{aspect_ids}".split(',');
var uploader = new qq.FileUploaderBasic({
- element: document.getElementById('file-upload'),
+
params: {'photo' : {'pending' : 'true', 'aspect_ids' : aspectIds}, 'set_profile_image' : "#{set_profile_image if defined?(set_profile_image)}"},
- allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'tiff'],
- action: "#{photos_path}",
- debug: true,
- button: document.getElementById('file-upload'),
- sizeLimit: 4194304,
- onProgress: function(id, fileName, loaded, total){
- var progress = Math.round(loaded / total * 100 );
- $('#fileInfo').text(fileName + ' ' + progress + '%').fadeTo(200, 1);
- },
-
- messages: {
- typeError: "#{t('.invalid_ext')}",
- sizeError: "#{t('.size_error')}",
- emptyError: "#{t('.empty')}"
- },
-
- onSubmit: function(id, fileName){
- $('#file-upload').addClass("loading");
- $('#publisher').find("input[type='submit']").attr('disabled','disabled');
- $('#publisher').find("button.post_preview_button").attr('disabled','disabled');
-
- app.publisher.el_wrapper.addClass("with_attachments");
- $('#photodropzone').append(
- "" +
- "#{escape_javascript(image_tag('ajax-loader2.gif'))}" +
- ""
- );
- },
-
- onComplete: function(id, fileName, responseJSON) {
- $('#fileInfo').text(Diaspora.I18n.t("photo_uploader.completed", file=fileName)).fadeTo(2000, 0);
- var id = responseJSON.data.photo.id,
- url = responseJSON.data.photo.unprocessed_image.url,
- currentPlaceholder = $('li.loading').first();
-
- app.publisher.el_wrapper.addClass("with_attachments");
- $('#new_status_message').append("");
-
- // replace image placeholders
- var img = currentPlaceholder.find('img');
- img.attr('src', url);
- img.attr('data-id', id);
- currentPlaceholder.removeClass('loading');
- currentPlaceholder.append("X
" +
- "");
- ////
-
- var publisher = $('#publisher'),
- textarea = publisher.find('textarea');
-
- publisher.find("input[type='submit']").removeAttr('disabled');
- publisher.find("button.post_preview_button").removeAttr('disabled');
-
- $('.x').bind('click', function(){
- var photo = $(this).closest('.publisher_photo');
- photo.addClass("dim");
- $.ajax({url: "/photos/" + photo.children('img').attr('data-id'),
- dataType: 'json',
- type: 'DELETE',
- success: function() {
- photo.fadeOut(400, function(){
- photo.remove();
- if ( $('.publisher_photo').length == 0){
- app.publisher.el_wrapper.removeClass("with_attachments");
- }
- });
- }
- });
- });
- },
-
- onAllComplete: function(completed_files){
- }
});
}
- createUploader();
+ // createUploader();