Fixed the multilanguage support for the fileupload plugin. On the new entry page a new attachment drop box is added. Users can now drag&drop files into this drop box to be uploadad asynchronously and displayed as attachments on the page without reloading the entire page.

This commit is contained in:
Dario Milicic
2014-08-14 13:59:07 +02:00
parent 228262bf70
commit 74a2bb2705
7 changed files with 238 additions and 15 deletions
Submodule scripts/ckeditor/plugins/dndfiles updated: e339fdcd88...41551357b1
@@ -9,11 +9,14 @@
CKEDITOR.dialog.add( 'fileuploadDialog', function( editor ) {
var lang = editor.lang.image2;
4
var commonLang = editor.lang.common
console.log(commonLang);
return {
// Basic properties of the dialog window: title, minimum size.
title: 'Upload file',
title: commonLang.upload + ' file',
minWidth: 200,
minHeight: 150,
@@ -108,17 +111,17 @@ CKEDITOR.dialog.add( 'fileuploadDialog', function( editor ) {
// URL of the file
type: 'text',
id: 'src',
label: "URL",
label: commonLang.url,
// Validation checking whether the field is not empty.
validate: CKEDITOR.dialog.validate.notEmpty( "URL cannot be empty!" )
},
{
// Original name of the file, this field is hidden and only used to
// capture and display the original filename in the editor
// Original name of the file
type: 'text',
id: 'name',
hidden: true
label: commonLang.name,
validate: CKEDITOR.dialog.validate.notEmpty( "Name cannot be empty!" )
}
]
}
+181
View File
@@ -24,6 +24,7 @@ $(document).ready(function() {
// There is a default listener on the submit button that we
// need to get rid off in order to get custom upload working
// without also firing an empty POST request
CKEDITOR.on('dialogDefinition', function (ev) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
@@ -43,5 +44,185 @@ $(document).ready(function() {
}
});
// Replace the textarea with the CKeditor
CKEDITOR.replace('Text');
// Workaround function for the drag and drop events, it disallows
// dragstart and dragend events firing for each child elements of a specific elements.
// In other words, events are only going to fire when an element is dragged over an element
// and its children and when the item is dragged away from the element and its children
$.fn.dndhover = function(options) {
return this.each(function() {
var self = $(this);
var collection = $();
self.on('dragenter', function(event) {
if (collection.size() === 0) {
self.trigger('dndHoverStart');
}
collection = collection.add(event.target);
});
self.on('dragleave', function(event) {
/*
* Firefox 3.6 fires the dragleave event on the previous element
* before firing dragenter on the next one so we introduce a delay
*/
setTimeout(function() {
collection = collection.not(event.target);
if (collection.size() === 0) {
self.trigger('dndHoverEnd');
}
}, 1);
});
// self.on('drop', function(event) {
// collection = $();
// self.trigger('dndHoverEnd');
// });
});
};
var uploading_dropped_files = false;
// We should check if the browser supports these events
var tests = {
filereader: typeof FileReader != 'undefined',
dnd: 'draggable' in document.createElement('span'),
formdata: !!window.FormData,
progress: "upload" in new XMLHttpRequest
}
function upload(files) {
// debugger;
var formData = tests.formdata ? new FormData() : null;
// add all the other attachments that were previously added
$( "input[name^='attachment']" ).each(function(idx, el) {
formData.append($(el).attr('name'), $(el).attr('value'));
// console.log(el);
});
formData.append('drop-count', files.length); // number of files dropped that should be sent
for (var i = 0; i < files.length; i++) {
if (tests.formdata) {
formData.append('next_attachment', parent.next_attachment);
formData.append('encoding', "HTML");
formData.append('attfile', files[i]);
parent.next_attachment += 1;
}
}
formData.append('cmd', "Upload"); // Command for server to recognize this as an file upload
if (tests.formdata) {
var URL = '/' + parent.logbook + '/upload.html?next_attachment=' + parent.next_attachment;
// set the flag so the chkupload validator doesn't trigger
uploading_dropped_files = true;
var submiter = $("input[value='Upload']");
var fileinput = $("input[type='File']");
// If we are uploading drag&drop files then ignore the validator
submiter.on("click", function(e) {
if(uploading_dropped_files == false) {
return chkupload();
}
return true;
});
// Start the POST request with dropped files
// submiter.click();
// We have finished uploading drag&drop files
uploading_dropped_files = false;
$.ajax({
xhr: function()
{
var xhr = new window.XMLHttpRequest();
//Upload progress
xhr.upload.addEventListener("progress", function(evt){
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
//Do something with upload progress
console.log(percentComplete);
}
}, false);
//Download progress
// xhr.addEventListener("progress", function(evt){
// if (evt.lengthComputable) {
// var percentComplete = evt.loaded / evt.total;
// //Do something with download progress
// console.log(percentComplete);
// }
// }, false);
return xhr;
},
contentType: false,
processData: false,
type: 'POST',
url: URL,
data: formData,
success: function(data) {
console.log(data);
var attch = $(".attachment", $(data));
var attch_upload = $("#attachment_upload", $(data));
// attch.each(function(idx, element) {
// $("#attachment_upload").before(element);
// console.log(element);
// });
// add the new attachments to the current page
$("#attachment_upload").before(attch.slice(-files.length));
// replace the attachment upload section
$("#attachment_upload").replaceWith(attch_upload);
// console.log(attch.last());
},
fail: function() {
console.log("Error uploading files...");
}
});
}
}
var holder = $("#holder");
holder.dndhover().on({
'dndHoverStart' : function(event) {
event.stopPropagation();
event.preventDefault();
console.log("holder-enter")
holder.css("border", "10px dashed #0c0");
return false;
},
'dragover' : function(event) {
event.stopPropagation();
event.preventDefault();
return false;
},
'dndHoverEnd' : function(event) {
event.stopPropagation();
event.preventDefault();
console.log("holder-leave");
holder.css("border", "10px dashed #ccc");
return false;
},
'drop' : function(e) {
e.preventDefault();
console.log("holder-drop");
holder.css("border", "10px dashed #ccc");
upload(e.originalEvent.dataTransfer.files);
}
});
});
+11 -4
View File
@@ -11321,7 +11321,7 @@ void show_edit_form(LOGBOOK * lbs, int message_id, BOOL breply, BOOL bedit, BOOL
/* show existing attachments */
for (index = 0; index < MAX_ATTACHMENTS; index++)
if (att[index][0]) {
rsprintf("<tr><td nowrap class=\"attribname\">%s %d:</td>\n", loc("Attachment"), index + 1);
rsprintf("<tr class=\"attachment\"><td nowrap class=\"attribname\">%s %d:</td>\n", loc("Attachment"), index + 1);
sprintf(str, "attachment%d", index);
rsprintf("<td class=\"attribvalue\">\n");
rsprintf("<input type=hidden name=\"%s\" value=\"%s\">\n", str, att[index]);
@@ -11507,13 +11507,20 @@ void show_edit_form(LOGBOOK * lbs, int message_id, BOOL breply, BOOL bedit, BOOL
loc("Maximum number of attachments reached"));
rsprintf("</td></tr>\n");
} else {
rsprintf("<tr><td nowrap class=\"attribname\">%s %d:</td>\n", loc("Attachment"), index + 1);
rsprintf("<tr id=\"attachment_upload\"><td nowrap class=\"attribname\">%s %d:</td>\n", loc("Attachment"), index + 1);
rsprintf
("<td class=\"attribvalue\"><input type=\"file\" size=\"60\" maxlength=\"200\" name=\"attfile\" accept=\"filetype/*\">\n");
("<td class=\"attribvalue\"><input type=\"file\" size=\"60\" maxlength=\"200\" name=\"attfile\" accept=\"filetype/*\" multiple>\n");
rsprintf
("&nbsp;&nbsp;<input type=\"submit\" name=\"cmd\" value=\"%s\" onClick=\"return chkupload();\">\n",
("&nbsp;&nbsp;<input type=\"submit\" name=\"cmd\" value=\"%s\">\n",
loc("Upload"));
rsprintf("</td></tr>\n");
// print the holder for dropping attachments
rsprintf("<tr>\n");
rsprintf("<td style=\"background: white;\" colspan=2>\n");
rsprintf("<div id=\"holder\" style=\"background: white; border: 10px dashed #ccc; min-height: 200px; margin: 10px\" >");
rsprintf("<p class=\"info\" style=\"color: #999; font-size: 2em; text-align: center; margin-top: 40px;\">Drop attachments here...</p></div>");
rsprintf("</td></tr>");
}
}
+1 -1
View File
@@ -1 +1 @@
#define GIT_REVISION "Thu Aug 7 16:56:23 2014 +0200 - 25ed901"
#define GIT_REVISION "Mon Aug 11 11:19:47 2014 +0200 - 228262b"
@@ -26,11 +26,43 @@
ignoreCount = "0"
continueAfterRunningActions = "No"
filePath = "../src/elogd.c"
timestampString = "429197800.364771"
timestampString = "429458497.630275"
startingColumnNumber = "9223372036854775807"
endingColumnNumber = "9223372036854775807"
startingLineNumber = "26433"
endingLineNumber = "26433"
startingLineNumber = "26963"
endingLineNumber = "26963"
landmarkName = "load_password_file()"
landmarkType = "7">
</BreakpointContent>
</BreakpointProxy>
<BreakpointProxy
BreakpointExtensionID = "Xcode.Breakpoint.FileBreakpoint">
<BreakpointContent
shouldBeEnabled = "Yes"
ignoreCount = "0"
continueAfterRunningActions = "No"
filePath = "../src/elogd.c"
timestampString = "429458522.650716"
startingColumnNumber = "9223372036854775807"
endingColumnNumber = "9223372036854775807"
startingLineNumber = "26274"
endingLineNumber = "26274"
landmarkName = "load_password_file()"
landmarkType = "7">
</BreakpointContent>
</BreakpointProxy>
<BreakpointProxy
BreakpointExtensionID = "Xcode.Breakpoint.FileBreakpoint">
<BreakpointContent
shouldBeEnabled = "Yes"
ignoreCount = "0"
continueAfterRunningActions = "No"
filePath = "../src/elogd.c"
timestampString = "429459039.676428"
startingColumnNumber = "9223372036854775807"
endingColumnNumber = "9223372036854775807"
startingLineNumber = "27587"
endingLineNumber = "27587"
landmarkName = "load_password_file()"
landmarkType = "7">
</BreakpointContent>