javascript updates. I'm starting to <3 JS

assets/public/js/application.js

@@ -9,32 +9,36 @@ Array.prototype.removeElement = function(element) {
     }
 }
 
-var viewEvent = function(event) {
+Document.prototype.sendCostumEvent = function(text) {
-  var cookie = getCookie("view-list");
+    document.dispatchEvent(new CustomEvent(text));
-  var listing = document.getElementById("listing");
-
-  if (cookie != "true") {
-    document.cookie = "view-list=true";
-  } else {
-    document.cookie = "view-list=false";
 }
 
-  handleViewType(getCookie("view-list"));
+var viewEvent = function(event) {
+    let cookie = getCookie('view-list');
+    let listing = document.getElementById('listing');
+
+    if (cookie != 'true') {
+        document.cookie = 'view-list=true';
+    } else {
+        document.cookie = 'view-list=false';
+    }
+
+    handleViewType(getCookie('view-list'));
     return false;
 }
 
 var handleViewType = function(viewList) {
-  var listing = document.getElementById("listing");
+    let listing = document.getElementById('listing');
-  var button = document.getElementById("view");
+    let button = document.getElementById('view');
 
     if (viewList == "true") {
-    listing.classList.add("list");
+        listing.classList.add('list');
-    button.innerHTML = "<i class=\"material-icons\">view_module</i>";
+        button.innerHTML = '<i class="material-icons">view_module</i>';
         return false;
     }
 
-  button.innerHTML = "<i class=\"material-icons\">view_list</i>";
+    button.innerHTML = '<i class="material-icons">view_list</i>';
-  listing.classList.remove("list");
+    listing.classList.remove('list');
     return false;
 }
 
@@ -47,7 +51,7 @@ var changeToLoading = function(element) {
     var originalText = element.innerHTML;
     element.style.opacity = 0;
     setTimeout(function() {
-        element.innerHTML = "<i class=\"material-icons spin\">autorenew</i>";
+        element.innerHTML = '<i class="material-icons spin">autorenew</i>';
         element.style.opacity = 1;
     }, 200);
 
@@ -56,29 +60,34 @@ var changeToLoading = function(element) {
 
 var changeToDone = function(element, error, html) {
     element.style.opacity = 0;
-    setTimeout(function() {
-        if (error) {
-            element.innerHTML = "<i class=\"material-icons\">close</i>";
-        } else {
-            element.innerHTML = "<i class=\"material-icons\">done</i>";
-        }
 
-        element.style.opacity = 1;
+    let thirdStep = () => {
-
-        setTimeout(function() {
-            element.style.opacity = 0;
-
-            setTimeout(function() {
         element.innerHTML = html;
         element.style.opacity = 1;
 
         if (selectedItems.length == 0) {
-                    var event = new CustomEvent('changed-selected');
+            document.sendCostumEvent('changed-selected');
-                    document.dispatchEvent(event);
         }
-            }, 200);
+    }
-        }, 1000);
+
-    }, 200);
+    let secondStep = () => {
+        element.style.opacity = 0;
+        setTimeout(thirdStep, 200);
+    }
+
+    let firstStep = () => {
+        if (error) {
+            element.innerHTML = '<i class="material-icons">close</i>';
+        } else {
+            element.innerHTML = '<i class="material-icons">done</i>';
+        }
+
+        element.style.opacity = 1;
+
+        setTimeout(secondStep, 1000);
+    }
+
+    setTimeout(firstStep, 200);
     return false;
 }
 
@@ -107,14 +116,15 @@ var backEvent = function(event) {
 var deleteEvent = function(event) {
     if (selectedItems.length) {
         Array.from(selectedItems).forEach(item => {
-        var html = changeToLoading(document.getElementById("delete"));
+            let html = changeToLoading(document.getElementById("delete"));
-        var request = new XMLHttpRequest();
+            let request = new XMLHttpRequest();
             request.open("DELETE", item);
             request.send();
             request.onreadystatechange = function() {
                 if (request.readyState == 4) {
                     if (request.status == 200) {
                         document.getElementById(item).remove();
+                        console.log(selectedItems);
                         selectedItems.removeElement(item);
                     }
 
@@ -126,7 +136,7 @@ var deleteEvent = function(event) {
         return false;
     }
 
-  var request = new XMLHttpRequest();
+    let request = new XMLHttpRequest();
     request.open("DELETE", window.location);
     request.send();
     request.onreadystatechange = function() {
@@ -142,6 +152,71 @@ var deleteEvent = function(event) {
     return false;
 }
 
+var preventDefault = function(event) {
+    event.preventDefault();
+}
+
+var renameEvent = function(event) {
+    if (selectedItems.length) {
+        Array.from(selectedItems).forEach(link => {
+            let item = document.getElementById(link);
+            let span = item.getElementsByTagName('span')[0];
+            let name = span.innerHTML;
+
+            item.addEventListener('click', preventDefault);
+            item.removeEventListener('click', itemClickEvent);
+            span.setAttribute('contenteditable', 'true');
+            span.focus();
+
+            let keyDownEvent = (event) => {
+                if (event.keyCode == 13) {
+                    let newName = span.innerHTML;
+                    let html = changeToLoading(document.getElementById('rename'));
+                    let request = new XMLHttpRequest();
+                    request.open('PATCH', link);
+                    request.setRequestHeader('Rename-To', newName);
+                    request.send();
+                    request.onreadystatechange = function() {
+                        if (request.readyState == 4) {
+                            if (request.status != 200) {
+                                span.innerHTML = name;
+                            } else {
+                                span.innerHTML = newName;
+                            }
+
+                            changeToDone(document.getElementById('rename'), (request.status != 200), html);
+                        }
+                    }
+                }
+
+                if (event.KeyCode == 27) {
+                    span.innerHTML = name;
+                }
+
+                if (event.keyCode == 13 || event.keyCode == 27) {
+                    span.setAttribute('contenteditable', 'false');
+                    span.removeEventListener('keydown', keyDownEvent);
+                    item.removeEventListener('click', preventDefault);
+                    item.addEventListener('click', itemClickEvent);
+                    event.preventDefault();
+                }
+            }
+
+            span.addEventListener('keydown', keyDownEvent);
+            span.addEventListener('blur', (event) => {
+                span.innerHTML = name;
+                span.setAttribute('contenteditable', 'false');
+                span.removeEventListener('keydown', keyDownEvent);
+                item.removeEventListener('click', preventDefault);
+            });
+        });
+
+        return false;
+    }
+
+    return false;
+}
+
 var downloadEvent = function(event) {
     if (selectedItems.length) {
         Array.from(selectedItems).forEach(item => {
@@ -186,25 +261,27 @@ document.addEventListener("changed-selected", function(event) {
     return false;
 });
 
-document.addEventListener("DOMContentLoaded", function(event) {
+var itemClickEvent = function(event) {
-    var items = document.getElementsByClassName('item');
+  var url = this.getElementsByTagName('a')[0].getAttribute('href');
-    Array.from(items).forEach(link => {
-        link.addEventListener('click', function(event) {
-            var url = link.getElementsByTagName('a')[0].getAttribute('href');
 
   if (selectedItems.length != 0) event.preventDefault();
   if (selectedItems.indexOf(url) == -1) {
-                link.classList.add('selected');
+      this.classList.add('selected');
       selectedItems.push(url);
   } else {
-                link.classList.remove('selected');
+      this.classList.remove('selected');
       selectedItems.removeElement(url);
   }
 
   var event = new CustomEvent('changed-selected');
   document.dispatchEvent(event);
   return false;
-        });
+}
+
+document.addEventListener("DOMContentLoaded", function(event) {
+    var items = document.getElementsByClassName('item');
+    Array.from(items).forEach(link => {
+        link.addEventListener('click', itemClickEvent);
     });
 
     document.getElementById("open").addEventListener("click", openEvent);
@@ -216,6 +293,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
         document.getElementById("view").addEventListener("click", viewEvent)
     };
     document.getElementById("delete").addEventListener("click", deleteEvent);
+    document.getElementById("rename").addEventListener("click", renameEvent);
     document.getElementById("download").addEventListener("click", downloadEvent);
 
     /* var drop = document.getElementById("listing");

fileinfo.go

@@ -135,8 +135,7 @@ func (fi FileInfo) Rename(w http.ResponseWriter, r *http.Request) (int, error) {
 		return ErrorToHTTPCode(err), err
 	}
 
-	http.Redirect(w, r, strings.Replace(r.URL.Path, fi.Name, newname, 1), http.StatusTemporaryRedirect)
+	return http.StatusOK, nil
-	return 0, nil
 }
 
 // ServeAsHTML is used to serve single file pages