From 14304f3620f6441353d8c298715431e4fcf74728 Mon Sep 17 00:00:00 2001 From: Benjamin Neff Date: Sun, 18 Sep 2016 03:03:53 +0200 Subject: [PATCH] Extract profile photo uploader to file --- app/assets/javascripts/app/pages/settings.js | 1 + .../helpers/profile_photo_uploader.js | 61 +++++++++++++++++++ app/assets/javascripts/mobile/mobile.js | 1 + .../pages/users-getting-started.js | 1 + app/views/photos/_new_profile_photo.haml | 56 ----------------- app/views/profiles/edit.mobile.haml | 1 + app/views/users/getting_started.mobile.haml | 1 + config/locales/diaspora/en.yml | 4 -- 8 files changed, 66 insertions(+), 60 deletions(-) create mode 100644 app/assets/javascripts/helpers/profile_photo_uploader.js diff --git a/app/assets/javascripts/app/pages/settings.js b/app/assets/javascripts/app/pages/settings.js index 3b1f8f3e0..725abbedc 100644 --- a/app/assets/javascripts/app/pages/settings.js +++ b/app/assets/javascripts/app/pages/settings.js @@ -8,6 +8,7 @@ app.pages.Settings = Backbone.View.extend({ new Diaspora.TagsAutocomplete("#profile_tag_string", { preFill: gon.preloads.tagsArray }); + new Diaspora.ProfilePhotoUploader(); } }); // @license-end diff --git a/app/assets/javascripts/helpers/profile_photo_uploader.js b/app/assets/javascripts/helpers/profile_photo_uploader.js new file mode 100644 index 000000000..c50bc5021 --- /dev/null +++ b/app/assets/javascripts/helpers/profile_photo_uploader.js @@ -0,0 +1,61 @@ +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later + +Diaspora.ProfilePhotoUploader = function() { + this.initialize(); +}; + +Diaspora.ProfilePhotoUploader.prototype = { + constructor: Diaspora.ProfilePhotoUploader, + + initialize: function() { + new qq.FileUploaderBasic({ + element: document.getElementById("file-upload"), + params: {"photo": {"pending": true, "aspect_ids": "all", "set_profile_photo": true}}, + allowedExtensions: ["jpg", "jpeg", "png"], + action: "/photos", + button: document.getElementById("file-upload"), + sizeLimit: 4194304, + + onProgress: function(id, fileName, loaded, total) { + var progress = Math.round(loaded / total * 100); + $("#fileInfo").text(fileName + " " + progress + "%"); + }, + + messages: { + typeError: Diaspora.I18n.t("photo_uploader.invalid_ext"), + sizeError: Diaspora.I18n.t("photo_uploader.size_error"), + emptyError: Diaspora.I18n.t("photo_uploader.empty") + }, + + onSubmit: function() { + $("#file-upload").addClass("loading"); + $("#profile_photo_upload").find(".avatar").addClass("loading"); + $("#file-upload-spinner").removeClass("hidden"); + $("#fileInfo").show(); + }, + + onComplete: function(_id, fileName, responseJSON) { + $("#file-upload-spinner").addClass("hidden"); + $("#fileInfo").text(Diaspora.I18n.t("photo_uploader.completed", {"file": fileName})); + $("#file-upload").removeClass("loading"); + + /* flash message prompt */ + var message = Diaspora.I18n.t("photo_uploader.looking_good"); + if (app.flashMessages) { app.flashMessages.success(message); } + + var id = responseJSON.data.photo.id; + var url = responseJSON.data.photo.unprocessed_image.url; + var oldPhoto = $("#photo_id"); + if (oldPhoto.length === 0) { + $("#update_profile_form").prepend(""); + } else { + oldPhoto.val(id); + } + + $("#profile_photo_upload").find(".avatar").removeClass("loading"); + $("#profile_photo_upload").find(".avatar").attr("src", url); + } + }); + } +}; +// @license-end diff --git a/app/assets/javascripts/mobile/mobile.js b/app/assets/javascripts/mobile/mobile.js index 1cb4b5b2e..46c013538 100644 --- a/app/assets/javascripts/mobile/mobile.js +++ b/app/assets/javascripts/mobile/mobile.js @@ -16,6 +16,7 @@ //= require bootstrap //= require diaspora //= require helpers/i18n +//= require helpers/profile_photo_uploader //= require helpers/tags_autocomplete //= require widgets/timeago //= require mobile/mobile_application diff --git a/app/assets/javascripts/pages/users-getting-started.js b/app/assets/javascripts/pages/users-getting-started.js index 00ec09f05..b70951422 100644 --- a/app/assets/javascripts/pages/users-getting-started.js +++ b/app/assets/javascripts/pages/users-getting-started.js @@ -58,6 +58,7 @@ Diaspora.Pages.UsersGettingStarted = function() { elem.remove(); } }); + new Diaspora.ProfilePhotoUploader(); }); }; // @license-end diff --git a/app/views/photos/_new_profile_photo.haml b/app/views/photos/_new_profile_photo.haml index 585028add..f5cb61659 100644 --- a/app/views/photos/_new_profile_photo.haml +++ b/app/views/photos/_new_profile_photo.haml @@ -2,62 +2,6 @@ -# licensed under the Affero General Public License version 3 or later. See -# the COPYRIGHT file. - -- content_for :head do - :javascript - function createUploader(){ - var uploader = new qq.FileUploaderBasic({ - element: document.getElementById('file-upload'), - params: {'photo' : {'pending' : true, 'aspect_ids' : "all", 'set_profile_photo': true}}, - allowedExtensions: ['jpg', 'jpeg', 'png'], - action: "#{photos_path}", - button: document.getElementById('file-upload'), - sizeLimit: 4194304, - - onProgress: function(id, fileName, loaded, total){ - var progress = Math.round(loaded / total * 100 ); - $('#fileInfo').text(fileName + ' ' + progress + '%'); - }, - - messages: { - typeError: "#{t('photos.new_photo.invalid_ext')}", - sizeError: "#{t('photos.new_photo.size_error')}", - emptyError: "#{t('photos.new_photo.empty')}" - }, - - onSubmit: function(id, fileName){ - $('#file-upload').addClass("loading"); - $("#profile_photo_upload").find(".avatar").addClass('loading'); - $("#file-upload-spinner").removeClass("hidden"); - $("#fileInfo").show(); - }, - - onComplete: function(id, fileName, responseJSON){ - $("#file-upload-spinner").addClass("hidden"); - $("#fileInfo").text(Diaspora.I18n.t("photo_uploader.completed", {"file": fileName})); - $('#file-upload').removeClass("loading"); - - /* flash message prompt */ - var message = Diaspora.I18n.t("photo_uploader.looking_good"); - if(app.flashMessages) { app.flashMessages.success(message); } - - var id = responseJSON.data.photo.id; - var url = responseJSON.data.photo.unprocessed_image.url; - var oldPhoto = $('#photo_id'); - if(oldPhoto.length == 0) { - $('#update_profile_form').prepend(""); - } else { - oldPhoto.val(id); - } - - $("#profile_photo_upload").find(".avatar").removeClass('loading'); - $("#profile_photo_upload").find(".avatar").attr("src",url); - $(".avatar[data-person_id=#{current_user.person.id}]").attr("src",url); - } - }); - } - window.onload = createUploader; - .profile-photo-upload#profile_photo_upload = owner_image_tag(:thumb_large) .small-horizontal-spacer diff --git a/app/views/profiles/edit.mobile.haml b/app/views/profiles/edit.mobile.haml index 98aa81533..eecb0889a 100644 --- a/app/views/profiles/edit.mobile.haml +++ b/app/views/profiles/edit.mobile.haml @@ -6,6 +6,7 @@ :javascript $(document).ready(function () { new Diaspora.TagsAutocomplete("#profile_tag_string", {preFill: gon.preloads.tagsArray}); + new Diaspora.ProfilePhotoUploader(); }); .settings_container.container-fluid diff --git a/app/views/users/getting_started.mobile.haml b/app/views/users/getting_started.mobile.haml index 65c56a70a..e9e372cab 100644 --- a/app/views/users/getting_started.mobile.haml +++ b/app/views/users/getting_started.mobile.haml @@ -6,6 +6,7 @@ :javascript $(document).ready(function () { new Diaspora.TagsAutocomplete("#follow_tags"); + new Diaspora.ProfilePhotoUploader(); }); :css diff --git a/config/locales/diaspora/en.yml b/config/locales/diaspora/en.yml index 0f94fa9fc..f98d9e467 100644 --- a/config/locales/diaspora/en.yml +++ b/config/locales/diaspora/en.yml @@ -901,10 +901,6 @@ en: type_error: "Photo upload failed. Are you sure an image was added?" destroy: notice: "Photo deleted." - new_photo: - invalid_ext: "{file} has invalid extension. Only {extensions} are allowed." - size_error: "{file} is too large, maximum file size is {sizeLimit}." - empty: "{file} is empty, please select files again without it." new_profile_photo: upload: "Upload a new profile photo!"