Implemented drag handler

scripts/dnd.js

@@ -1,31 +1,87 @@
 /********************************************************************\
  
-   Name:         dnd.js
+ Name:         dnd.js
-   Created by:   Stefan Ritt
+ Created by:   Stefan Ritt
  
-   Contents:     JavaScript code for Drag & Drop interface
+ Contents:     JavaScript code for Drag & Drop interface
  
-\********************************************************************/
+ \********************************************************************/
 
 function XMLHttpRequestGeneric()
 {
-  var request;
+   var request;
-  try {
+   try {
-    request = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
+      request = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
-  }
+   }
-  catch (e) {
+   catch (e) {
-  try {
-      request = new ActiveXObject('Msxml2.XMLHTTP'); // Internet Explorer
-    }
-    catch (e) {
       try {
-        request = new ActiveXObject('Microsoft.XMLHTTP');
+         request = new ActiveXObject('Msxml2.XMLHTTP'); // Internet Explorer
       }
       catch (e) {
-        alert('Your browser does not support AJAX!');
+         try {
-        return undefined;
+            request = new ActiveXObject('Microsoft.XMLHTTP');
+         }
+         catch (e) {
+            alert('Your browser does not support AJAX!');
+            return undefined;
+         }
       }
-    }
+   }
-  }
+   return request;
-  return request;
+}
+
+// getElementById
+function $id(id) {
+   return document.getElementById(id);
+}
+
+function drag(e)
+{
+   console.log('drag');
+}
+
+function dragover(e)
+{
+   e.dataTransfer.dropEffect = 'copy';
+   e.preventDefault();
+}
+
+function dragenter(e)
+{
+   e.stopPropagation();
+   e.preventDefault();
+   $id('holder').style.border = '6px dashed #0c0';
+   console.log('dragenter');
+}
+
+function dragleave(e)
+{
+   e.stopPropagation();
+   e.preventDefault();
+   $id('holder').style.border = '6px dashed #ccc';
+   console.log('dragleave');
+}
+
+function drop(e)
+{
+   e.stopPropagation();
+   e.preventDefault();
+   console.log('drop');
+}
+
+function dndInit()
+{
+   document.body.addEventListener('dragover', function(e) {
+                                  e.preventDefault();
+                                  });
+   document.body.addEventListener('drop', function(e) {
+                                  e.preventDefault();
+                                  });
+   
+   d = $id('holder');
+   d.addEventListener('drag', drag);
+   d.addEventListener('dragover', dragover);
+   d.addEventListener('dragenter', dragenter);
+   d.addEventListener('dragleave', dragleave);
+   d.addEventListener('drop', drop);
 }

src/elogd.c

@@ -10383,7 +10383,7 @@ void show_edit_form(LOGBOOK * lbs, int message_id, BOOL breply, BOOL bedit, BOOL
           !getcfg(lbs->name, "Message width", str, sizeof(str)))
          strcat(script_onload, "init_resize();");
    }
-   strcat(script_onload, "checkText();");
+   strcat(script_onload, "checkText();dndInit();");
 
    script_onunload[0] = 0;
    if (getcfg(lbs->name, "Use Lock", str, sizeof(str)) && atoi(str) == 1)
@@ -11936,8 +11936,7 @@ void show_edit_form(LOGBOOK * lbs, int message_id, BOOL breply, BOOL bedit, BOOL
          // 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: 6px dashed #ccc; min-height: 50px; margin: 10px\" >");
+         rsprintf("<div id=\"holder\" class=\"holder\">%s</div>", loc("Drop attachments here..."));
-         rsprintf("<p class=\"info\" style=\"color: #999; font-size: 2em; text-align: center; margin-top: 20px;\">%s</p></div>", loc("Drop attachments here..."));
          rsprintf("</td></tr>");
       }
    }

themes/default/default.css

@@ -688,6 +688,17 @@ td {
   padding:10px;
 }
 
+.holder {
+   background-color: white;
+   border:6px dashed #ccc;
+   height:50px;
+   line-height:50px;
+   margin:5px;
+   color:#999;
+   font-size:2em;
+   text-align:center;
+}
+
 /* ELOG home page link at bottom of page */
 .bottomlink {
   font-family:sans-serif; 

xcode/elogd.xcodeproj/project.pbxproj

@@ -46,6 +46,7 @@
 		D548630A1ACA9A9F00BA8C69 /* im.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; name = im.js; path = ../scripts/im.js; sourceTree = "<group>"; };
 		D548630B1ACA9AAB00BA8C69 /* load-ckeditor.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; name = "load-ckeditor.js"; path = "../scripts/load-ckeditor.js"; sourceTree = "<group>"; };
 		D548630C1ACA9AC600BA8C69 /* elcode.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; name = elcode.js; path = ../scripts/elcode.js; sourceTree = "<group>"; };
+		D548630D1ACAEF5400BA8C69 /* default.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; name = default.css; path = ../themes/default/default.css; sourceTree = "<group>"; };
 		D58A366615AF103300682DC0 /* elog-version.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = "elog-version.h"; path = "../src/elog-version.h"; sourceTree = SOURCE_ROOT; };
 		D5AC5BF9154AC7200018DD90 /* config.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; name = config.html; path = ../doc/config.html; sourceTree = SOURCE_ROOT; };
 		D5F11B9113AFA164002CE8BF /* elogd.cfg */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; name = elogd.cfg; path = ../elogd.cfg; sourceTree = SOURCE_ROOT; };
@@ -112,6 +113,7 @@
 		D5F11B9013AFA146002CE8BF /* Resources */ = {
 			isa = PBXGroup;
 			children = (
+				D548630D1ACAEF5400BA8C69 /* default.css */,
 				D5AC5BF9154AC7200018DD90 /* config.html */,
 				D51F4A9214F27F3C00CB29E9 /* index.html */,
 				D528A7C514F278DA00D33974 /* checklist.txt */,