Extract profile photo uploader to file
This commit is contained in:
parent
07a4925f3b
commit
14304f3620
8 changed files with 66 additions and 60 deletions
|
|
@ -8,6 +8,7 @@ app.pages.Settings = Backbone.View.extend({
|
||||||
new Diaspora.TagsAutocomplete("#profile_tag_string", {
|
new Diaspora.TagsAutocomplete("#profile_tag_string", {
|
||||||
preFill: gon.preloads.tagsArray
|
preFill: gon.preloads.tagsArray
|
||||||
});
|
});
|
||||||
|
new Diaspora.ProfilePhotoUploader();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// @license-end
|
// @license-end
|
||||||
|
|
|
||||||
61
app/assets/javascripts/helpers/profile_photo_uploader.js
Normal file
61
app/assets/javascripts/helpers/profile_photo_uploader.js
Normal file
|
|
@ -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("<input type='hidden' value='" + id + "' id='photo_id' name='photo_id'/>");
|
||||||
|
} else {
|
||||||
|
oldPhoto.val(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#profile_photo_upload").find(".avatar").removeClass("loading");
|
||||||
|
$("#profile_photo_upload").find(".avatar").attr("src", url);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// @license-end
|
||||||
|
|
@ -16,6 +16,7 @@
|
||||||
//= require bootstrap
|
//= require bootstrap
|
||||||
//= require diaspora
|
//= require diaspora
|
||||||
//= require helpers/i18n
|
//= require helpers/i18n
|
||||||
|
//= require helpers/profile_photo_uploader
|
||||||
//= require helpers/tags_autocomplete
|
//= require helpers/tags_autocomplete
|
||||||
//= require widgets/timeago
|
//= require widgets/timeago
|
||||||
//= require mobile/mobile_application
|
//= require mobile/mobile_application
|
||||||
|
|
|
||||||
|
|
@ -58,6 +58,7 @@ Diaspora.Pages.UsersGettingStarted = function() {
|
||||||
elem.remove();
|
elem.remove();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
new Diaspora.ProfilePhotoUploader();
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
// @license-end
|
// @license-end
|
||||||
|
|
|
||||||
|
|
@ -2,62 +2,6 @@
|
||||||
-# licensed under the Affero General Public License version 3 or later. See
|
-# licensed under the Affero General Public License version 3 or later. See
|
||||||
-# the COPYRIGHT file.
|
-# 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("<input type='hidden' value='" + id + "' id='photo_id' name='photo_id'/>");
|
|
||||||
} 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
|
.profile-photo-upload#profile_photo_upload
|
||||||
= owner_image_tag(:thumb_large)
|
= owner_image_tag(:thumb_large)
|
||||||
.small-horizontal-spacer
|
.small-horizontal-spacer
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
:javascript
|
:javascript
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
new Diaspora.TagsAutocomplete("#profile_tag_string", {preFill: gon.preloads.tagsArray});
|
new Diaspora.TagsAutocomplete("#profile_tag_string", {preFill: gon.preloads.tagsArray});
|
||||||
|
new Diaspora.ProfilePhotoUploader();
|
||||||
});
|
});
|
||||||
|
|
||||||
.settings_container.container-fluid
|
.settings_container.container-fluid
|
||||||
|
|
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
:javascript
|
:javascript
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
new Diaspora.TagsAutocomplete("#follow_tags");
|
new Diaspora.TagsAutocomplete("#follow_tags");
|
||||||
|
new Diaspora.ProfilePhotoUploader();
|
||||||
});
|
});
|
||||||
|
|
||||||
:css
|
:css
|
||||||
|
|
|
||||||
|
|
@ -901,10 +901,6 @@ en:
|
||||||
type_error: "Photo upload failed. Are you sure an image was added?"
|
type_error: "Photo upload failed. Are you sure an image was added?"
|
||||||
destroy:
|
destroy:
|
||||||
notice: "Photo deleted."
|
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:
|
new_profile_photo:
|
||||||
upload: "Upload a new profile photo!"
|
upload: "Upload a new profile photo!"
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue