make updates

assets/public/css/styles.css

@@ -681,7 +681,7 @@ header, #toolbar {
 .action i {
     padding: .5em;
     border-radius: 50%;
-    transition: .5s ease-in-out all;
+    transition: .2s ease-in-out all;
 }
 .action:hover i {
     background-color: rgba(0, 0, 0, 0.1);
@@ -728,3 +728,9 @@ header, #toolbar {
     font-size: 4em;
     margin-right: .1em;
 }
+
+/* ANIMATIONS */
+i.spin {
+    animation: 1s spin linear infinite;
+}
+@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }

assets/public/js/application.js

@@ -37,10 +37,48 @@ document.addEventListener("DOMContentLoaded", function(event) {
     return false;
 });
 
+var changeToLoading = function(element) {
+    var originalText = element.innerHTML;
+    element.style.opacity = 0;
+    setTimeout(function() {
+        element.innerHTML = "<i class=\"material-icons spin\">autorenew</i>";
+        element.style.opacity = 1;
+    }, 200);
+
+    return originalText;
+}
+
+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;
+
+        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.dispatchEvent(event);
+                }
+            }, 200);
+        }, 1000);
+    }, 200);
+    return false;
+}
+
 var openEvent = function(event) {
     if (selectedItems.length) {
-
+        window.open(selectedItems[0] + "?raw=true");
-
         return false;
     }
 
@@ -62,22 +100,22 @@ var backEvent = function(event) {
 
 var deleteEvent = function(event) {
     Array.from(selectedItems).forEach(item => {
+        var html = changeToLoading(document.getElementById("delete"));
         var request = new XMLHttpRequest();
         request.open("DELETE", item);
         request.send();
         request.onreadystatechange = function() {
             if (request.readyState == 4) {
-                if (request.status != 200) {
+                if (request.status == 200) {
-                    alert("something wrong happened!");
+                    document.getElementById(item).remove();
-                    return false;
+                    selectedItems.removeElement(item);
                 }
 
-                selectedItems.removeElement(item);
+                changeToDone(document.getElementById("delete"), (request.status != 200), html);
-                alert(item + " deleted");
-                // Add removing animation
             }
         }
     });
+
     return false;
 }
 

assets/templates/listing.tmpl

@@ -2,7 +2,7 @@
 <div class="listing">
 	<div class="container" id="listing">
 		{{- range .Items}}
-		<div class="item">
+		<div class="item" id="{{.URL}}">
 			<div>
 				<a href="{{.URL}}">
 					{{- if .IsDir}}