update

_embed/public/js/common.js

@@ -61,7 +61,7 @@ Element.prototype.changeToDone = function(error, html) {
     let firstStep = () => {
         this.innerHTML = '<i class="material-icons">done</i>';
         if (error) {
-          this.innerHTML = '<i class="material-icons">close</i>';
+            this.innerHTML = '<i class="material-icons">close</i>';
         }
 
         this.style.opacity = 1;

_embed/public/js/listing.js

@@ -9,7 +9,6 @@ var reloadListing = function(callback) {
         if (request.readyState == 4) {
             if (request.status == 200) {
                 document.querySelector('body main').innerHTML = request.responseText;
-                addNewDirEvents();
 
                 if (typeof callback == 'function') {
                     callback();
@@ -120,16 +119,15 @@ var handleFiles = function(files, base) {
     return false;
 }
 
-// Handles the back button event
+function unselectAll() {
-var backEvent = function(event) {
     var items = document.getElementsByClassName('item');
     Array.from(items).forEach(link => {
         link.setAttribute("aria-selected", false);
     });
+    
     selectedItems = [];
     
-    var event = new CustomEvent('changed-selected');
+    document.sendCostumEvent('changed-selected');
-    document.dispatchEvent(event);
     return false;
 }
 
@@ -164,20 +162,6 @@ var handleViewType = function(viewList) {
     return false;
 }
 
-var addNewDirEvents = function() {
-    document.getElementById('new').addEventListener('click', event => {
-        let newdir = document.getElementById('newdir');
-        newdir.classList.add('enabled');
-        newdir.focus();
-    });
-
-    document.getElementById('newdir').addEventListener('blur', event => {
-        document.getElementById('newdir').classList.remove('enabled');
-    });
-
-    document.getElementById('newdir').addEventListener('keydown', newDirEvent);
-}
-
 // Handles the new directory event
 var newDirEvent = function(event) {
     // TODO: create new dir button and new file button
@@ -202,9 +186,7 @@ var newDirEvent = function(event) {
         request.onreadystatechange = function() {
             if (request.readyState == 4) {
                 button.changeToDone((request.status != 201), html);
-                reloadListing(() => {
+                reloadListing();
-                    addNewDirEvents();
-                });
             }
         }
     }
@@ -277,12 +259,10 @@ document.addEventListener('DOMContentLoaded', event => {
     // Add event to back button and executes back event on ESC
     document.addEventListener('keydown', (event) => {
         if (event.keyCode == 27) {
-            backEvent(event);
+            unselectAll();
         }
     });
 
-
-
     if (user.AllowEdit) {
         // Enables rename button
         document.getElementById("rename").addEventListener("click", renameEvent);
@@ -294,7 +274,17 @@ document.addEventListener('DOMContentLoaded', event => {
             document.getElementById("upload-input").click();
         });
 
-        addNewDirEvents();
+        document.getElementById('new').addEventListener('click', event => {
+            let newdir = document.getElementById('newdir');
+            newdir.classList.add('enabled');
+            newdir.focus();
+        });
+    
+        document.getElementById('newdir').addEventListener('blur', event => {
+            document.getElementById('newdir').classList.remove('enabled');
+        });
+    
+        document.getElementById('newdir').addEventListener('keydown', newDirEvent);
 
         // Drag and Drop
         let items = document.getElementsByClassName('item');
@@ -403,16 +393,16 @@ function itemDrop(e) {
     }
 }
 
-function openItem(event) {
+function openItemEvent(event) {
     window.location = event.currentTarget.dataset.url;
 }
 
-function selectItem(event) {
+function selectItemEvent(event) {
     let el = event.currentTarget;
 
     if (selectedItems.length != 0) event.preventDefault();
     if (selectedItems.indexOf(el.id) == -1) {
-        if (!event.ctrlKey) backEvent(event);
+        if (!event.ctrlKey) unselectAll();
 
         el.setAttribute("aria-selected", true);
         selectedItems.push(el.id);

_embed/templates/base.tmpl

@@ -115,6 +115,15 @@
 
     <main>
         {{ template "content" . }}
+        
+        {{ if and (.User.AllowNew) (.IsDir) }}
+        <input id="newdir" type="text" placeholder="Name. End with a trailing slash to create a dir.">
+        <div class="floating">
+            <div class="action" id="new">
+                <i class="material-icons" title="New file or directory. End name with a trailing slash to create a directory.">add</i>
+            </div>
+        </div>
+        {{ end }}
     </main>
 
     <footer>Served with <a rel="noopener noreferrer" href="https://caddyserver.com">Caddy</a> and <a rel="noopener noreferrer" href="https://github.com/hacdias/caddy-filemanager">File Manager</a>.</footer>

_embed/templates/listing.tmpl

@@ -8,8 +8,8 @@
             {{ if .IsDir}}ondragover="itemDragOver(event)" ondrop="itemDrop(event)"{{ end }} 
             draggable="true" 
             class="item" 
-            onclick="selectItem(event)"
+            onclick="selectItemEvent(event)"
-            ondblclick="openItem(event)"
+            ondblclick="openItemEvent(event)"
             data-dir="{{ .IsDir }}" 
             data-url="{{ .URL }}"
             id="{{ EncodeBase64 .Name }}">
@@ -39,13 +39,4 @@
 
 <input style="display:none" type="file" id="upload-input" onchange="handleFiles(this.files, '')" value="Upload" multiple>
 {{ end }}
-
-{{ if .User.AllowNew }}
-<input id="newdir" type="text" placeholder="Name. End with a trailing slash to create a dir.">
-<div class="floating">
-    <div class="action" id="new">
-        <i class="material-icons" title="New file or directory. End name with a trailing slash to create a directory.">add</i>
-    </div>
-</div>
-{{ end }}
 {{ end }}