Non-file Dragging Bug Fix

www/css/app.css

@@ -64,6 +64,10 @@
     padding-left: 1px !important;
 }
 
+.dragging-over * {
+    pointer-events: none !important;
+}
+
 .form-control {
     margin-top: 2px;
 }

www/js/app.js

@@ -1521,17 +1521,11 @@ function displayFileSelect () {
 
     // Set the main drop zone
     if (!params.disableDragAndDrop) {
-        configDropZone.addEventListener('dragover', handleGlobalDragover);
-        configDropZone.addEventListener('dragleave', function () {
-            configDropZone.style.border = '';
-        });
-        // Also set a global drop zone (allows us to ensure Config is always displayed for the file drop)
-        globalDropZone.addEventListener('dragover', function (e) {
-            e.preventDefault();
-            if (configDropZone.style.display === 'none') document.getElementById('btnConfigure').click();
-            e.dataTransfer.dropEffect = 'link';
-        });
+        // do globally, since the whole page functions as a drop zone, so indicate properly
+        globalDropZone.addEventListener('dragover', handleGlobalDragover);
+        globalDropZone.addEventListener('dragleave', handleGlobalDragleave);
         globalDropZone.addEventListener('drop', handleFileDrop);
+        globalDropZone.addEventListener('dragenter', handleGlobalDragenter);
     }
 
     if (isFireFoxOsNativeFileApiAvailable) {
@@ -1635,27 +1629,71 @@ document.getElementById('archiveFilesLbl').addEventListener('keydown', function
     }
 });
 
+/** Drag and Drop handling for ZIM files */
+
+// keep track of entrance event so we only fire the correct leave event 
+var enteredelement;
+
+function handleGlobalDragenter (e) {
+    e.preventDefault();
+    // disable pointer-events on children
+    // so they don't interfere with dragleave events
+    globalDropZone.classList.add('dragging-over');
+    enteredelement = e.target;
+}
+
 function handleGlobalDragover (e) {
     e.preventDefault();
-    e.dataTransfer.dropEffect = 'link';
-    configDropZone.style.border = '3px dotted red';
+
+    if (e.dataTransfer.types.includes('Files') && !hasInvalidType(e.dataTransfer.types)) {
+        e.dataTransfer.dropEffect = 'link';
+        globalDropZone.classList.add('dragging-over');
+        globalDropZone.style.border = '3px dashed red';
+        document.getElementById('btnConfigure').click();
+    }
+}
+
+function handleGlobalDragleave (e) {
+    e.preventDefault();
+    globalDropZone.style.border = '';
+    if (e.dataTransfer.types.includes('Files') && !hasInvalidType(e.dataTransfer.types)) {
+        /** can we somehow check if a page has been loaded? no need to go home if no page loaded yet. just keep on config */
+        if (enteredelement === e.target) {
+            globalDropZone.classList.remove('dragging-over');
+            document.getElementById('btnHome').click();
+        }
+    }
 }
 
 function handleIframeDragover (e) {
     e.preventDefault();
-    e.dataTransfer.dropEffect = 'link';
-    document.getElementById('btnConfigure').click();
+    if (e.dataTransfer.types.includes('Files') && !hasInvalidType(e.dataTransfer.types)) {
+        globalDropZone.classList.add('dragging-over');
+        e.dataTransfer.dropEffect = 'link';
+        document.getElementById('btnConfigure').click();
+    }
 }
 
 function handleIframeDrop (e) {
-    e.stopPropagation();
     e.preventDefault();
+    e.stopPropagation();
+}
+
+// add type check for chromium browsers, since they count images on the same page as files
+function hasInvalidType (typesList) {
+    for (var i = 0; i < typesList.length; i++) {
+        if (typesList[i].startsWith('image') || typesList[i].startsWith('text') || typesList[i].startsWith('video')) {
+            return true;
+        }
+    }
+    return false;
 }
 
 async function handleFileDrop (packet) {
     packet.stopPropagation();
     packet.preventDefault();
-    configDropZone.style.border = '';
+    globalDropZone.style.border = '';
+    globalDropZone.classList.remove('dragging-over');
     var files = packet.dataTransfer.files;
     document.getElementById('selectInstructions').style.display = 'none';
     document.getElementById('fileSelectionButtonContainer').style.display = 'none';