close #2

_embed/public/js/application.js

@@ -200,7 +200,7 @@ var renameEvent = function(event) {
         location.refresh();
     }
 
-    Array.from(selectedItems).forEach(link => {
+    let link = selectedItems[0];
     let item = document.getElementById(link);
     let span = item.getElementsByTagName('span')[0];
     let name = span.innerHTML;
@@ -265,19 +265,18 @@ var renameEvent = function(event) {
         span.removeEventListener('keydown', keyDownEvent);
         item.removeEventListener('click', preventDefault);
     });
-    });
 
     return false;
 }
 
 // Upload files
-var handleFiles = function(files) {
+var handleFiles = function(files, base) {
     let button = document.getElementById("upload");
     let html = button.changeToLoading();
 
     for (let i = 0; i < files.length; i++) {
         let request = new XMLHttpRequest();
-        request.open('PUT', toWebDavURL(window.location.pathname + files[i].name));
+        request.open('PUT', toWebDavURL(window.location.pathname + base + files[i].name));
 
         request.send(files[i]);
         request.onreadystatechange = function() {
@@ -602,13 +601,13 @@ document.addEventListener('listing', event => {
             event.preventDefault();
         }, false);
 
-        document.addEventListener("dragover", (event) => {
+        document.addEventListener("dragenter", (event) => {
             Array.from(items).forEach(file => {
                 file.style.opacity = 0.5;
             });
         }, false);
 
-        document.addEventListener("dragleave", (event) => {
+        document.addEventListener("dragend", (event) => {
             Array.from(items).forEach(file => {
                 file.style.opacity = 1;
             });
@@ -619,11 +618,88 @@ document.addEventListener('listing', event => {
             var dt = event.dataTransfer;
             var files = dt.files;
 
-            handleFiles(files);
+            let el = event.target;
+
+            for (let i = 0; i < 5; i++) {
+                if (el != null && !el.classList.contains('item')) {
+                    el = el.parentElement;
+                }
+            }
+
+            if (files.length > 0) {
+                if (el != null && el.classList.contains('item') && el.dataset.dir == "true") {
+                    handleFiles(files, el.querySelector('.name').innerHTML + "/");
+                    return;
+                }
+
+                handleFiles(files, "");
+            } else {
+                Array.from(items).forEach(file => {
+                    file.style.opacity = 1;
+                });
+            }
+
         }, false);
     }
 });
 
+function itemDragStart(event) {
+    let el = event.target;
+
+    for (let i = 0; i < 5; i++) {
+        if (!el.classList.contains('item')) {
+            el = el.parentElement;
+        }
+    }
+
+    event.dataTransfer.setData("id", el.id);
+    event.dataTransfer.setData("name", el.querySelector('.name').innerHTML);
+}
+
+function itemDragOver(event) {
+    event.preventDefault();
+    let el = event.target;
+
+    for (let i = 0; i < 5; i++) {
+        if (!el.classList.contains('item')) {
+            el = el.parentElement;
+        }
+    }
+
+    el.style.opacity = 1;
+}
+
+function itemDrop(e) {
+    e.preventDefault();
+
+    let el = e.target, id = e.dataTransfer.getData("id"), name = e.dataTransfer.getData("name");
+    if (id == "" || name == "") return;
+
+    for (let i = 0; i < 5; i++) {
+        if (!el.classList.contains('item')) {
+            el = el.parentElement;
+        }
+    }
+
+    if (el.id === id) return;
+
+    let oldLink = toWebDavURL(id);
+    let newLink = toWebDavURL(el.id + name);
+
+    let request = new XMLHttpRequest();
+    request.open('MOVE', oldLink);
+    request.setRequestHeader('Destination', newLink);
+    request.send();
+    request.onreadystatechange = function() {
+        if (request.readyState == 4) {
+            if (request.status == 201 || request.status == 204) {
+                reloadListing();
+            }
+        }
+    }
+}
+
+
 /* * * * * * * * * * * * * * * *
  *                             *
  *  EDITOR SPECIFIC FUNCTIONS  *

_embed/templates/listing.tmpl

@@ -4,7 +4,7 @@
     <div class="container" id="listing">
     {{- range .Items}}
         {{ if .UserAllowed }}
-        <div class="item" data-dir="{{- if .IsDir}}true{{ else }}false{{ end }}" id="{{.URL}}">
+        <div ondragstart="itemDragStart(event)" {{ if .IsDir}}ondragover="itemDragOver(event)" ondrop="itemDrop(event)"{{ end }} draggable="true" class="item" data-dir="{{- if .IsDir}}true{{ else }}false{{ end }}" id="{{.URL}}">
             <div>
                 <a href="{{.URL}}">
                     {{- if .IsDir}}