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.

2014-08-14 13:59:07 +02:00
parent 228262bf70
commit 74a2bb2705
7 changed files with 238 additions and 15 deletions
@@ -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!" )
 					}
 				]
 			}
@@ -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);
+        }
+    });
 });