From 4da696253a1354e79cc74c41ecb707254f8edae0 Mon Sep 17 00:00:00 2001 From: Florian Staudacher Date: Fri, 30 Aug 2013 22:07:06 +0200 Subject: [PATCH] implement publisher uploader as backbone view --- .../app/views/publisher/uploader.js | 122 ++++++++++++++++++ .../javascripts/app/views/publisher_view.js | 20 ++- app/views/photos/_new_photo.haml | 77 +---------- 3 files changed, 140 insertions(+), 79 deletions(-) create mode 100644 app/assets/javascripts/app/views/publisher/uploader.js 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();