coop-cloud-chaos-patchs/calibre-web
0
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

Fix #766

Browse Source 
Update pdf upload
Translation of uploadprogress dialog
This commit is contained in:
Ozzieisaacs
2019-02-23 18:28:25 +01:00
parent 17b7333992
commit f6fbe2e135
10 changed files with 471 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
cps/static/js/uploadprogress.js
View File

@ -6,41 +6,41 @@
* Version 1.0.0
* Licensed under the MIT license.
*/
(function($){
(function($) {
"use strict";
$.support.xhrFileUpload = !!(window.FileReader && window.ProgressEvent);
$.support.xhrFormData = !!window.FormData;
if(!$.support.xhrFileUpload || !$.support.xhrFormData){
if (!$.support.xhrFileUpload || !$.support.xhrFormData) {
// skip decorating form
return;
}
var template = '<div class="modal fade" id="file-progress-modal">\
<div class="modal-dialog">\
<div class="modal-content">\
<div class="modal-header">\
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>\
<h4 class="modal-title">Uploading</h4>\
</div>\
<div class="modal-body">\
<div class="modal-message"></div>\
<div class="progress">\
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0"\
aria-valuemax="100" style="width: 0%;min-width: 2em;">\
0%\
</div>\
</div>\
</div>\
<div class="modal-footer" style="display:none">\
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\
</div>\
</div>\
</div>\
</div>';
var template = "<div class=\"modal fade\" id=\"file-progress-modal\">" +
"<div class=\"modal-dialog\">" +
" <div class=\"modal-content\">" +
" <div class=\"modal-header\">" +
" <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>" +
" <h4 class=\"modal-title\">Uploading</h4>" +
" </div>" +
" <div class=\"modal-body\">" +
" <div class=\"modal-message\"></div>" +
" <div class=\"progress\">" +
" <div class=\"progress-bar progress-bar-striped active\" role=\"progressbar\" aria-valuenow=\"0\" aria-valuemin=\"0\"" +
" aria-valuemax=\"100\" style=\"width: 0%;min-width: 2em;\">" +
" 0%" +
" </div>" +
" </div>" +
" </div>" +
" <div class=\"modal-footer\" style=\"display:none\">" +
" <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\">Close</button>" +
" </div>" +
" </div>" +
" </div>" +
"</div>";
var UploadProgress = function(element, options){
var UploadProgress = function(element, options) {
this.options = options;
this.$element = $(element);
};
@ -49,22 +49,25 @@
constructor: function() {
this.$form = this.$element;
this.$form.on('submit', $.proxy(this.submit, this));
this.$form.on("submit", $.proxy(this.submit, this));
this.$modal = $(this.options.template);
this.$modal_message = this.$modal.find('.modal-message');
this.$modal_title = this.$modal.find('.modal-title');
this.$modal_footer = this.$modal.find('.modal-footer');
this.$modal_bar = this.$modal.find('.progress-bar');
this.$modalTitle = this.$modal.find(".modal-title");
this.$modalFooter = this.$modal.find(".modal-footer");
this.$modalBar = this.$modal.find(".progress-bar");
this.$modal.on('hidden.bs.modal', $.proxy(this.reset, this));
// Translate texts
this.$modalTitle.text(this.options.modalTitle)
this.$modalFooter.children("button").text(this.options.modalFooter)
this.$modal.on("hidden.bs.modal", $.proxy(this.reset, this));
},
reset: function(){
this.$modal_title = this.$modal_title.text('Uploading');
this.$modal_footer.hide();
this.$modal_bar.addClass('progress-bar-success');
this.$modal_bar.removeClass('progress-bar-danger');
if(this.xhr){
reset: function() {
this.$modalTitle.text(this.options.modalTitle)
this.$modalFooter.hide();
this.$modalBar.addClass("progress-bar-success");
this.$modalBar.removeClass("progress-bar-danger");
if (this.xhr) {
this.xhr.abort();
}
},
@ -73,7 +76,7 @@
e.preventDefault();
this.$modal.modal({
backdrop: 'static',
backdrop: "static",
keyboard: false
});
@ -81,35 +84,33 @@
var xhr = new XMLHttpRequest();
this.xhr = xhr;
xhr.addEventListener('load', $.proxy(this.success, this, xhr));
xhr.addEventListener('error', $.proxy(this.error, this, xhr));
//xhr.addEventListener('abort', function(){});
xhr.addEventListener("load", $.proxy(this.success, this, xhr));
xhr.addEventListener("error", $.proxy(this.error, this, xhr));
xhr.upload.addEventListener('progress', $.proxy(this.progress, this));
xhr.upload.addEventListener("progress", $.proxy(this.progress, this));
var form = this.$form;
xhr.open(form.attr('method'), form.attr("action"));
xhr.setRequestHeader('X-REQUESTED-WITH', 'XMLHttpRequest');
xhr.open(form.attr("method"), form.attr("action"));
xhr.setRequestHeader("X-REQUESTED-WITH", "XMLHttpRequest");
var data = new FormData(form.get(0));
xhr.send(data);
},
success: function(xhr) {
if(xhr.status == 0 || xhr.status >= 400){
if (xhr.status === 0 || xhr.status >= 400) {
// HTTP 500 ends up here!?!
return this.error(xhr);
}
this.set_progress(100);
var url;
var content_type = xhr.getResponseHeader('Content-Type');
var contentType = xhr.getResponseHeader("Content-Type");
// make it possible to return the redirect URL in
// a JSON response
if(content_type.indexOf('application/json') !== -1){
if (contentType.indexOf("application/json") !== -1) {
var response = $.parseJSON(xhr.responseText);
console.log(response);
url = response.location;
}
else{
@ -120,39 +121,41 @@
// handle form error
// we replace the form with the returned one
error: function(xhr){
this.$modal_title.text('Upload failed');
error: function(xhr) {
this.$modalTitle.text(this.options.modalTitleFailed);
this.$modal_bar.removeClass('progress-bar-success');
this.$modal_bar.addClass('progress-bar-danger');
this.$modal_footer.show();
var content_type = xhr.getResponseHeader('Content-Type');
this.$modalBar.removeClass("progress-bar-success");
this.$modalBar.addClass("progress-bar-danger");
this.$modalFooter.show();
var contentType = xhr.getResponseHeader("Content-Type");
// Replace the contents of the form, with the returned html
if(xhr.status === 422){
var new_html = $.parseHTML(xhr.responseText);
this.replace_form(new_html);
this.$modal.modal('hide');
if (xhr.status === 422) {
var newHtml = $.parseHTML(xhr.responseText);
this.replace_form(newHtml);
this.$modal.modal("hide");
}
// Write the error response to the document.
else{
var response_text = xhr.responseText;
if(content_type.indexOf('text/plain') !== -1){
response_text = '<pre>' + response_text + '</pre>';
var responseText = xhr.responseText;
// Handle no response error
if (contentType) {
if (contentType.indexOf("text/plain") !== -1) {
responseText = "<pre>" + responseText + "</pre>";
}
document.write(xhr.responseText);
}
document.write(xhr.responseText);
}
},
set_progress: function(percent){
var txt = percent + '%';
var txt = percent + "%";
if (percent == 100) {
txt = this.options.uploaded_msg;
txt = this.options.uploadedMsg;
}
this.$modal_bar.attr('aria-valuenow', percent);
this.$modal_bar.text(txt);
this.$modal_bar.css('width', percent + '%');
this.$modalBar.attr("aria-valuenow", percent);
this.$modalBar.text(txt);
this.$modalBar.css("width", percent + "%");
},
progress: function(/*ProgressEvent*/e){
@ -163,24 +166,23 @@
// replace_form replaces the contents of the current form
// with the form in the html argument.
// We use the id of the current form to find the new form in the html
replace_form: function(html){
var new_form;
var form_id = this.$form.attr('id');
if(form_id !== undefined){
new_form = $(html).find('#' + form_id);
replace_form: function(html) {
var newForm;
var formId = this.$form.attr("id");
if(formId !== undefined){
newForm = $(html).find("#" + formId);
}
else{
new_form = $(html).find('form');
newForm = $(html).find("form");
}
// add the filestyle again
new_form.find(':file').filestyle({buttonBefore: true});
this.$form.html(new_form.children());
newForm.find(":file").filestyle({buttonBefore: true});
this.$form.html(newForm.children());
}
};
$.fn.uploadprogress = function(options, value){
return this.each(function(){
return this.each(function() {
var _options = $.extend({}, $.fn.uploadprogress.defaults, options);
var file_progress = new UploadProgress(this, _options);
file_progress.constructor();
@ -189,9 +191,11 @@
$.fn.uploadprogress.defaults = {
template: template,
uploaded_msg: "Upload done, processing, please wait..."
uploadedMsg: "Upload done, processing, please wait...",
modalTitle: "Uploading",
modalFooter: "Close",
modalTitleFailed: "Upload failed"
//redirect_url: ...
// need to customize stuff? Add here, and change code accordingly.
};