nocebo/diaspora
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replaced fileuploader-custom with FineUploader

Browse source 
closes #7083
This commit is contained in:
Frédéric Bolvin 2016-09-10 17:06:33 +02:00 committed by Steffen van Bergerem
parent 8e5d2f5c65
commit 7cc4b46d7e
No known key found for this signature in database
GPG key ID: 315C9787D548DC6B
17 changed files with 185 additions and 1396 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
Changelog.md
View file

@ -2,6 +2,7 @@
## Refactor
* Increase the spacing above and below post contents [#7267](https://github.com/diaspora/diaspora/pull/7267)
* Replace fileuploader-custom with FineUploader [#7083](https://github.com/diaspora/diaspora/pull/7083)
## Bug fixes
* Fix background color of year on notifications page with dark theme [#7263](https://github.com/diaspora/diaspora/pull/7263)

1
Gemfile
View file

@ -105,6 +105,7 @@ source "https://rails-assets.org" do
gem "rails-assets-highlightjs", "9.7.0"
gem "rails-assets-bootstrap-markdown", "2.10.0"
gem "rails-assets-corejs-typeahead", "1.0.1"
gem "rails-assets-fineuploader-dist", "5.11.0"
# jQuery plugins

4
Gemfile.lock
View file

@ -657,6 +657,7 @@ GEM
rails-assets-jquery.ui (~> 1.11.4)
rails-assets-emojione (2.0.1)
rails-assets-favico.js (0.3.10)
rails-assets-fineuploader-dist (5.11.0)
rails-assets-highlightjs (9.7.0)
rails-assets-jasmine (2.4.1)
rails-assets-jasmine-ajax (3.2.0)
@ -1001,6 +1002,7 @@ DEPENDENCIES
rails-assets-bootstrap-markdown (= 2.10.0)!
rails-assets-corejs-typeahead (= 1.0.1)!
rails-assets-diaspora_jsxc (= 0.1.5.develop.7)!
rails-assets-fineuploader-dist (= 5.11.0)!
rails-assets-highlightjs (= 9.7.0)!
rails-assets-jasmine-ajax (= 3.2.0)!
rails-assets-jquery (= 2.2.4)!
@ -1052,4 +1054,4 @@ DEPENDENCIES
will_paginate (= 3.1.5)
BUNDLED WITH
1.13.6
1.13.7

43
app/assets/javascripts/app/views/publisher/uploader_view.js
View file

@ -5,32 +5,43 @@
// 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(opts) {
this.publisher = opts.publisher;
this.uploader = new qq.FileUploaderBasic({
this.uploader = new qq.FineUploaderBasic({
element: this.el,
button: this.el,
button: this.el,
//debug: true,
action: "/photos",
params: { photo: { pending: true }},
allowedExtensions: this.allowedExtensions,
sizeLimit: this.sizeLimit,
request: {
endpoint: Routes.photos(),
params: {
/* eslint-disable camelcase */
authenticity_token: $("meta[name='csrf-token']").attr("content"),
/* eslint-enable camelcase */
photo: {
pending: true
}
}
},
validation: {
allowedExtensions: this.allowedExtensions,
sizeLimit: this.sizeLimit
},
messages: {
typeError: Diaspora.I18n.t("photo_uploader.invalid_ext"),
sizeError: Diaspora.I18n.t("photo_uploader.size_error"),
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)
callbacks: {
onProgress: _.bind(this.progressHandler, this),
onSubmit: _.bind(this.submitHandler, this),
onComplete: _.bind(this.uploadCompleteHandler, this),
onError: function(id, name, errorReason) {
if (app.flashMessages) { app.flashMessages.error(errorReason); }
}
}
});
this.info = $("<div id=\"fileInfo\" />");

90
app/assets/javascripts/helpers/profile_photo_uploader.js
View file

@ -8,18 +8,22 @@ Diaspora.ProfilePhotoUploader.prototype = {
constructor: Diaspora.ProfilePhotoUploader,
initialize: function() {
new qq.FileUploaderBasic({
new qq.FineUploaderBasic({
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 + "%");
validation: {
allowedExtensions: ["jpg", "jpeg", "png"],
sizeLimit: 4194304
},
request: {
endpoint: Routes.photos(),
params: {
/* eslint-disable camelcase */
authenticity_token: $("meta[name='csrf-token']").attr("content"),
/* eslint-enable camelcase */
photo: {"pending": true, "aspect_ids": "all", "set_profile_photo": true}
}
},
button: document.getElementById("file-upload"),
messages: {
typeError: Diaspora.I18n.t("photo_uploader.invalid_ext"),
@ -27,33 +31,53 @@ Diaspora.ProfilePhotoUploader.prototype = {
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();
},
callbacks: {
onProgress: function(id, fileName, loaded, total) {
var progress = Math.round(loaded / total * 100);
$("#fileInfo").text(fileName + " " + progress + "%");
},
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");
onComplete: function(_id, fileName, responseJSON) {
$("#file-upload-spinner").addClass("hidden");
$("#fileInfo").text(Diaspora.I18n.t("photo_uploader.completed", {"file": fileName}));
$("#file-upload").removeClass("loading");
if (responseJSON.data !== undefined) {
/* flash message prompt */
var message = Diaspora.I18n.t("photo_uploader.looking_good");
if (app.flashMessages) {
app.flashMessages.success(message);
} else {
alert(message);
}
/* flash message prompt */
var message = Diaspora.I18n.t("photo_uploader.looking_good");
if (app.flashMessages) { app.flashMessages.success(message); }
var photoId = 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='" + photoId + "' id='photo_id' name='photo_id'/>");
} else {
oldPhoto.val(photoId);
}
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").attr("src", url);
$(".avatar[data-person_id=" + gon.user.id + "]").attr("src", url);
}
$("#profile_photo_upload").find(".avatar").removeClass("loading");
},
onError: function(id, name, errorReason) {
if (app.flashMessages) {
app.flashMessages.error(errorReason);
} else {
alert(errorReason);
}
}
$("#profile_photo_upload").find(".avatar").removeClass("loading");
$("#profile_photo_upload").find(".avatar").attr("src", url);
}
});
}

2
app/assets/javascripts/jasmine-load-all.js
View file

@ -2,7 +2,7 @@
//= require handlebars.runtime
//= require templates
//= require main
//= require fileuploader-custom
//= require fineuploader-dist/dist/fine-uploader.core
//= require mobile/mobile
//= require jquery.autoSuggest.custom
//= require contact-list

2
app/assets/javascripts/main.js
View file

@ -18,7 +18,7 @@
//= require jquery-ui/sortable
//= require keycodes
//= require jquery.autoSuggest.custom
//= require fileuploader-custom
//= require fineuploader-dist/dist/fine-uploader.core
//= require handlebars.runtime
//= require posix-bracket-expressions
//= require markdown-it

2
app/assets/javascripts/mobile/mobile.js
View file

@ -10,7 +10,7 @@
//= require autosize
//= require keycodes
//= require jquery.autoSuggest.custom
//= require fileuploader-custom
//= require fineuploader-dist/dist/fine-uploader.core
//= require rails-timeago
//= require underscore
//= require bootstrap

129
app/assets/javascripts/mobile/mobile_file_uploader.js
View file

@ -4,78 +4,93 @@
function createUploader(){
var aspectIds = gon.preloads.aspect_ids;
new qq.FileUploaderBasic({
element: document.getElementById('file-upload-publisher'),
params: {'photo' : {'pending' : 'true', 'aspect_ids' : aspectIds},},
allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'tiff'],
action: "/photos",
debug: false,
button: document.getElementById('file-upload-publisher'),
sizeLimit: 4194304,
new qq.FineUploaderBasic({
element: document.getElementById("file-upload-publisher"),
request: {
endpoint: Routes.photos(),
params: {
/* eslint-disable camelcase */
authenticity_token: $("meta[name='csrf-token']").attr("content"),
photo: {
aspect_ids: aspectIds,
/* eslint-enable camelcase */
pending: true
}
}
},
validation: {
allowedExtensions: ["jpg", "jpeg", "png", "gif", "tif", "tiff"],
sizeLimit: 4194304
},
button: document.getElementById("file-upload-publisher"),
onProgress: function(id, fileName, loaded, total){
var progress = Math.round(loaded / total * 100 );
$('#fileInfo-publisher').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-publisher').addClass("loading");
$('#publisher_textarea_wrapper').addClass("with_attachments");
$('#photodropzone').append(
callbacks: {
onProgress: function(id, fileName, loaded, total) {
var progress = Math.round(loaded / total * 100);
$("#fileInfo-publisher").text(fileName + " " + progress + "%");
},
onSubmit: function() {
$("#file-upload-publisher").addClass("loading");
$("#publisher_textarea_wrapper").addClass("with_attachments");
$("#photodropzone").append(
"<li class='publisher_photo loading' style='position:relative;'>" +
"<img alt='Ajax-loader2' src='"+ImagePaths.get('ajax-loader2.gif')+"' />" +
"<img alt='Ajax-loader2' src='" + ImagePaths.get("ajax-loader2.gif") + "' />" +
"</li>"
);
},
);
},
onComplete: function(_id, fileName, responseJSON) {
if (responseJSON.data === undefined) {
return;
}
onComplete: function(_id, fileName, responseJSON) {
$('#fileInfo-publisher').text(Diaspora.I18n.t("photo_uploader.completed", {'file': fileName}));
$("#fileInfo-publisher").text(Diaspora.I18n.t("photo_uploader.completed", {"file": fileName}));
var id = responseJSON.data.photo.id,
url = responseJSON.data.photo.unprocessed_image.url,
currentPlaceholder = $('li.loading').first();
currentPlaceholder = $("li.loading").first();
$('#publisher_textarea_wrapper').addClass("with_attachments");
$('#new_status_message').append("<input type='hidden' value='" + id + "' name='photos[]' />");
$("#publisher_textarea_wrapper").addClass("with_attachments");
$("#new_status_message").append("<input type='hidden' value='" + id + "' name='photos[]' />");
// replace image placeholders
var img = currentPlaceholder.find('img');
img.attr('src', url);
img.attr('data-id', id);
currentPlaceholder.removeClass('loading');
var img = currentPlaceholder.find("img");
img.attr("src", url);
img.attr("data-id", id);
currentPlaceholder.removeClass("loading");
currentPlaceholder.append("<div class='x'>X</div>" +
"<div class='circle'></div>");
////
"<div class='circle'></div>");
var publisher = $('#publisher');
var publisher = $("#publisher");
publisher.find("input[type='submit']").removeAttr('disabled');
publisher.find("input[type='submit']").removeAttr("disabled");
$('.x').bind('click', function(){
var photo = $(this).closest('.publisher_photo');
$(".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){
$('#publisher_textarea_wrapper').removeClass("with_attachments");
}
});
}
});
$.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) {
$("#publisher_textarea_wrapper").removeClass("with_attachments");
}
});
}
});
});
},
onAllComplete: function(){}
});
},
onError: function(id, name, errorReason) {
alert(errorReason);
}
},
messages: {
typeError: Diaspora.I18n.t("photo_uploader.invalid_ext"),
sizeError: Diaspora.I18n.t("photo_uploader.size_error"),
emptyError: Diaspora.I18n.t("photo_uploader.empty")
}
});
}
window.addEventListener("load", function() {
createUploader();

6
features/desktop/edits_profile.feature
View file

@ -42,8 +42,10 @@ Feature: editing your profile
And I should see "#starwars" within "ul#as-selections-tags"
And the "#profile_public_details" bootstrap-switch should be on
When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "file" within "#file-upload"
And I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload"
When I attach the file "spec/fixtures/bad_urls.txt" to "qqfile" within "#file-upload"
Then I should see a flash message indicating failure
When I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload"
Then I should see "button.png completed"
And I should see a "img" within "#profile_photo_upload"

4
features/mobile/edits_profile.feature
View file

@ -39,8 +39,8 @@ Feature: editing the profile in the mobile view
Then I should see "#kamino" within "ul#as-selections-tags"
And I should see "#starwars" within "ul#as-selections-tags"
When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "file" within "#file-upload"
And I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload"
When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "qqfile" within "#file-upload"
And I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload"
Then I should see "button.png completed"
And I should see a "img" within "#profile_photo_upload"

4
features/mobile/getting_started.feature
View file

@ -17,8 +17,8 @@ Feature: editing the getting started in the mobile view
And I should not see "awesome_button"
Scenario: new user adds a profile photo and tags
When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "file" within "#file-upload"
And I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload"
When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "qqfile" within "#file-upload"
And I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload"
Then I should see a "img" within "#profile_photo_upload"
When I fill in "follow_tags" with "#men"

6
features/mobile/multiphoto.feature
View file

@ -10,7 +10,7 @@ Feature: viewing photos on the mobile main page
Scenario: view full size image
Given I visit the mobile publisher page
When I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"
When I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload-publisher"
Then I should see "button.png completed"
And I should see an uploaded image within the photo drop zone
@ -23,9 +23,9 @@ Feature: viewing photos on the mobile main page
Scenario: view multiphoto post
Given I visit the mobile publisher page
When I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"
When I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload-publisher"
Then I should see "button.png completed"
When I attach the file "spec/fixtures/button.gif" to hidden "file" within "#file-upload-publisher"
When I attach the file "spec/fixtures/button.gif" to hidden "qqfile" within "#file-upload-publisher"
Then I should see "button.gif completed"
When I press "Share"

10
features/mobile/posts_from_main_page.feature
View file

@ -30,7 +30,7 @@ Feature: posting from the mobile main page
Scenario: post a photo without text
Given I visit the mobile publisher page
When I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"
When I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload-publisher"
Then I should see "button.png completed"
And I should see an uploaded image within the photo drop zone
When I press "Share"
@ -43,9 +43,9 @@ Feature: posting from the mobile main page
Scenario: back out of posting a photo-only post
Given I visit the mobile publisher page
When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "file" within "#file-upload-publisher"
When I confirm the alert after I attach the file "spec/fixtures/bad_urls.txt" to "qqfile" within "#file-upload-publisher"
Then I should not see an uploaded image within the photo drop zone
When I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"
When I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload-publisher"
And I should see "button.png completed"
And I click to delete the first uploaded photo
Then I should not see an uploaded image within the photo drop zone
@ -53,8 +53,8 @@ Feature: posting from the mobile main page
Scenario: back out of uploading a picture when another has been attached
Given I visit the mobile publisher page
And I append "I am eating yogurt" to the mobile publisher
And I attach the file "spec/fixtures/button.gif" to hidden "file" within "#file-upload-publisher"
And I attach the file "spec/fixtures/button.png" to hidden "file" within "#file-upload-publisher"
And I attach the file "spec/fixtures/button.gif" to hidden "qqfile" within "#file-upload-publisher"
And I attach the file "spec/fixtures/button.png" to hidden "qqfile" within "#file-upload-publisher"
And I click to delete the first uploaded photo
Then I should see an uploaded image within the photo drop zone
And the text area wrapper mobile should be with attachments

4
features/support/publishing_cuke_helpers.rb
View file

@ -19,9 +19,9 @@ module PublishingCukeHelpers
end
def upload_file_with_publisher(path)
page.execute_script(%q{$("input[name='file']").css("opacity", '1');})
page.execute_script(%q{$("input[name='qqfile']").css("opacity", '1');})
with_scope("#publisher_textarea_wrapper") do
attach_file("file", Rails.root.join(path).to_s)
attach_file("qqfile", Rails.root.join(path).to_s)
# wait for the image to be ready
page.assert_selector(".publisher_photo.loading", count: 0)
end

1267
lib/assets/javascripts/fileuploader-custom.js
View file

File diff suppressed because it is too large Load diff

6
spec/javascripts/app/views/publisher_view_spec.js
View file

@ -512,11 +512,11 @@ describe("app.views.Publisher", function() {
);
});
it('initializes the file uploader plugin', function() {
spyOn(qq, 'FileUploaderBasic');
it("initializes the FineUploader plugin", function() {
spyOn(qq, "FineUploaderBasic");
new app.views.Publisher();
expect(qq.FileUploaderBasic).toHaveBeenCalled();
expect(qq.FineUploaderBasic).toHaveBeenCalled();
});
context('event handlers', function() {