updates

_embed/public/js/common.js

@@ -180,19 +180,28 @@ function deleteEvent(event) {
     return false;
 }
 
-var searchEvent = function(event) {
+function resetSearchText() {
-    let value = this.value,
+    let box = document.querySelector('#search > div div');
-        search = document.getElementById('search'),
-        scrollable = document.querySelector('#search > div'),
-        box = document.querySelector('#search > div div');
 
-    if (value.length == 0) {
+    if (user.AllowCommands) {
-        box.innerHTML = "Search or use one of your supported commands: " + user.Commands.join(", ") + ".";
+        box.innerHTML = `Search or use one of your supported commands: ${user.Commands.join(", ")} `;
+    } else {
+        box.innerHTML = "Type and press enter to search.";
+    }
+}
+
+function searchEvent(event) {
+    if (this.value.length == 0) {
+        resetSearchText();
         return;
     }
 
-    let pieces = value.split(' ');
+    let value = this.value,
-    let supported = false;
+        search = document.getElementById('search'),
+        scrollable = document.querySelector('#search > div'),
+        box = document.querySelector('#search > div div'),
+        pieces = value.split(' '),
+        supported = false;
 
     user.Commands.forEach(function(cmd) {
         if (cmd == pieces[0]) {
@@ -200,7 +209,7 @@ var searchEvent = function(event) {
         }
     });
 
-    if (!supported) {
+    if (!supported || !user.AllowCommands) {
         box.innerHTML = "Press enter to search."
     } else {
         box.innerHTML = "Press enter to execute."
@@ -210,8 +219,9 @@ var searchEvent = function(event) {
         box.innerHTML = '';
         search.classList.add('ongoing');
 
-        if (supported) {
+        if (supported && user.AllowCommands) {
-            var conn = new WebSocket('ws://' + window.location.host + window.location.pathname + '?command=true');
+            let conn = new WebSocket('ws://' + window.location.host + window.location.pathname + '?command=true');
+
             conn.onopen = function() {
                 conn.send(value);
             };
@@ -225,11 +235,15 @@ var searchEvent = function(event) {
                 search.classList.remove('ongoing');
                 reloadListing();
             }
-        } else {
-            box.innerHTML = '<ul></ul>';
-            let ul = box.querySelector('ul');
 
-            var conn = new WebSocket('ws://' + window.location.host + window.location.pathname + '?search=true');
+            return;
+        }
+
+        box.innerHTML = '<ul></ul>';
+
+        let ul = box.querySelector('ul'),
+            conn = new WebSocket('ws://' + window.location.host + window.location.pathname + '?search=true');
+
         conn.onopen = function() {
             conn.send(value);
         };
@@ -244,6 +258,44 @@ var searchEvent = function(event) {
         }
     }
 }
+
+function setupSearch() {
+    let search = document.getElementById("search"),
+        searchInput = search.querySelector("input"),
+        searchDiv = search.querySelector("div"),
+        hover = false,
+        focus = false;
+
+    resetSearchText();
+
+    searchInput.addEventListener('focus', event => {
+        focus = true;
+        search.classList.add('active');
+    });
+
+    searchDiv.addEventListener('mouseover', event => {
+        hover = true;
+        search.classList.add('active');
+    });
+
+    searchInput.addEventListener('blur', event => {
+        focus = false;
+        if (hover) return;
+        search.classList.remove('active');
+    });
+
+    search.addEventListener('mouseleave', event => {
+        hover = false;
+        if (focus) return;
+        search.classList.remove('active');
+    });
+
+    search.addEventListener("click", event => {
+        search.classList.add("active");
+        search.querySelector("input").focus();
+    });
+
+    searchInput.addEventListener('keyup', searchEvent);
 }
 
 /* * * * * * * * * * * * * * * *
@@ -265,5 +317,6 @@ document.addEventListener("DOMContentLoaded", function(event) {
         buttons.delete.addEventListener("click", deleteEvent);
     }
 
+    setupSearch();
     return false;
 });

_embed/public/js/listing.js

@@ -259,7 +259,7 @@ var redefineDownloadURLs = function() {
 }
 
 
-document.addEventListener('listing', event => {
+document.addEventListener('DOMContentLoaded', event => {
     // Handles the current view mode and adds the event to the button
     handleViewType(document.getCookie("view-list"));
     document.getElementById("view").addEventListener("click", viewEvent);
@@ -283,43 +283,7 @@ document.addEventListener('listing', event => {
         }
     });
 
-    if (user.AllowCommands) {
-        let search = document.getElementById("search"),
-            searchInput = search.querySelector("input"),
-            searchDiv = search.querySelector("div"),
-            hover = false,
-            focus = false;
     
-        searchInput.addEventListener('focus', event => {
-            focus = true;
-            search.classList.add('active');
-        });
-
-        searchDiv.addEventListener('mouseover', event => {
-            hover = true;
-            search.classList.add('active');
-        });
-
-        searchInput.addEventListener('blur', event => {
-            focus = false;
-            if (hover) return;
-            search.classList.remove('active');
-        });
-
-        search.addEventListener('mouseleave', event => {
-            hover = false;
-            if (focus) return;
-            search.classList.remove('active');
-        });
-
-        search.addEventListener("click", event => {
-            search.classList.add("active");
-            search.querySelector("input").focus();
-        });
-
-        document.querySelector('#search > div div').innerHTML = "Search or use one of your supported commands: " + user.Commands.join(", ") + ".";
-        document.querySelector('#search input').addEventListener('keyup', searchEvent);
-    }
 
     if (user.AllowEdit) {
         // Enables rename button

_embed/templates/base.tmpl

@@ -32,16 +32,14 @@
         <!-- TOP BAR -->
         <div>
             <div><p>File Manager</p></div>
-            {{ if .User.AllowCommands }}
             <div id="search">
                 <i class="material-icons" title="Storage">storage</i>
                 <input type="text" placeholder="Search or execute a command...">
                 <div>
-                    <div>Write your git, mercurial or svn command and press enter.</div>
+                    <div>Loading...</div>
                     <p><i class="material-icons spin">autorenew</i></p>
                 </div>
             </div>
-            {{ end }}
 
             <div class="action" id="logout">
                 <i class="material-icons" title="Logout">exit_to_app</i> <span>Logout</span>