elog/scripts/dnd.js

/********************************************************************\
 
 Name:         dnd.js
 Created by:   Stefan Ritt
 
 Contents:     JavaScript code for Drag & Drop interface
 
 \********************************************************************/

function XMLHttpRequestGeneric()
{
   var request;
   try {
      request = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
   }
   catch (e) {
      try {
         request = new ActiveXObject('Msxml2.XMLHTTP'); // Internet Explorer
      }
      catch (e) {
         try {
            request = new ActiveXObject('Microsoft.XMLHTTP');
         }
         catch (e) {
            alert('Your browser does not support AJAX!');
            return undefined;
         }
      }
   }
   return request;
}

// asend does an AJAX call to send current form data to server
function asend() {
   var f = document.form1;
   var r = XMLHttpRequestGeneric();
   r.onreadystatechange = function()
     {
       if (r.readyState==4)
          in_asend = false;
     
       // after successful completion ...
       if (r.readyState==4 && r.status==200) {
          // restore original title
          document.title = page_title;
       
          // set "saved" message
          d = new Date();
          e1 = document.getElementById('saved1');
          e1.style.display = 'inline';
          s = e1.innerHTML.substring(0, e1.innerHTML.length-8);
          e1.innerHTML = s+d.toTimeString().substring(0, 8);
          e2 = document.getElementById('saved2');
          e2.innerHTML = e1.innerHTML;
          e2.style.display = 'inline';
          
          // append edit_id (to prevent creation of new messages)
          if (r.responseText.substring(0,2) == 'OK') {
             if (document.getElementById('edit_id') == null) {
                var id = r.responseText.substring(3);
                var input = document.createElement('input');
                input.type  = 'hidden';
                input.name  = 'edit_id';
                input.id    = 'edit_id';
                input.value = parseInt(id);
                document.form1.appendChild(input);
             }
          }
       }
     }

   r.open("Post", ".");
   
   // get all form fields
   var f = new FormData(document.form1);
   var t;

   // append text for CKEDITOR and textarea, respectively
   if (typeof f.delete == 'function') // not avalable in all browsers
      f.delete("Text");
   if (typeof(CKEDITOR) != 'undefined')
      t = CKEDITOR.instances.Text.getData();
   else if (document.form1.Text != undefined)
      t = document.form1.Text.value;
   
   if (t != undefined)
      f.append("Text", t);
   
   // add jcmd
   f.append("jcmd", "Save");
   in_asend = true;
   r.send(f);
}

// getElementById
function $id(id) {
   return document.getElementById(id);
}

var uploading_dropped_files = false;

// upload file(s) after thei have been dropped
function upload(files) {
   var formData = (!!window.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'));
                                         });
   
   formData.append('drop-count', files.length);        // number of files dropped that should be sent
   for (var i = 0; i < files.length; i++) {
      if (!!window.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
   
   formData.append('Author', $("input[name^='Author']").attr('value')); // Other attributes missing should be fine, but author is needed 

   if (!!window.FormData) {
      var URL = '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;
                  });
      
      // We have finished uploading drag&drop files
      uploading_dropped_files = false;
      
      $.ajax({
             xhr: function()
             {
             var xhr = new window.XMLHttpRequest();
             
             // Start the progress bar
             progressJs().start();
             
             //Upload progress
             xhr.upload.addEventListener("progress", function(evt){
                                         if (evt.lengthComputable) {
                                         var percentComplete = evt.loaded / evt.total;
                                         //Update the progress bar
                                         progressJs().set(percentComplete);
                                         }
                                         }, false);
             
             return xhr;
             },
             contentType: false,
             processData: false,
             type: 'POST',
             url: URL,
             data: formData,
             success: function(data) {
             // End the progress bar
             progressJs().end();
             
             var attch = $(".attachment", $(data));
             var attch_upload = $("#attachment_upload", $(data));
             
             // 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);
             },
             fail: function() {
             // End the progress bar
             progressJs().end();
             console.log("Error uploading files...");
             }
             });
   }
}

function dragover(e)
{
   e.dataTransfer.dropEffect = 'copy';
   e.preventDefault();
}

function dragenter(e)
{
   e.stopPropagation();
   e.preventDefault();
   $id('holder').style.border = '6px dashed #0c0';
}

function dragleave(e)
{
   e.stopPropagation();
   e.preventDefault();
   $id('holder').style.border = '6px dashed #ccc';
}

function drop(e)
{
   e.stopPropagation();
   e.preventDefault();
   $id('holder').style.border = '6px dashed #ccc';
   upload(e.dataTransfer.files);
}

function dndInit()
{
   document.body.addEventListener('dragover', function(e) {
                                  e.preventDefault();
                                  });
   document.body.addEventListener('drop', function(e) {
                                  e.preventDefault();
                                  });
   
   d = $id('holder');
   d.addEventListener('dragover', dragover);
   d.addEventListener('dragenter', dragenter);
   d.addEventListener('dragleave', dragleave);
   d.addEventListener('drop', drop);
}