Working #1

_embed/public/css/styles.css

@@ -558,7 +558,17 @@ header p i {
     top: 100%;
 }
 
-#search div {
+#search ul {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+#search li {
+    margin-bottom: .5em;
+}
+
+#search>div {
     position: absolute;
     top: 0;
     width: 100%;
@@ -577,6 +587,9 @@ header p i {
     overflow-x: hidden;
     overflow-y: auto;
     max-height: 50vh;
+}
+
+#search>div div {
     white-space: pre-wrap;
     white-space: -moz-pre-wrap;
     white-space: -pre-wrap;
@@ -584,6 +597,18 @@ header p i {
     word-wrap: break-word;
 }
 
+#search>div p {
+    width: 100%;
+    text-align: center;
+    display: none;
+    margin: 0;
+    max-width: none;
+}
+
+#search.ongoing p {
+    display: block;
+}
+
 #search.active div i,
 #sidebar #search.active div i {
     color: #ccc;

_embed/public/js/application.js

@@ -466,10 +466,12 @@ var redefineDownloadURLs = function() {
 
 var searchEvent = function(event) {
     let value = this.value;
-    let box = document.querySelector('#search div');
+    let search = document.getElementById('search');
+    let scrollable = document.querySelector('#search > div');
+    let box = document.querySelector('#search > div div');
 
     if (value.length == 0) {
-        box.innerHTML = "Write one of your supported commands: " + user.Commands.join(", ") + ".";
+        box.innerHTML = "Search or use one of your supported commands: " + user.Commands.join(", ") + ".";
         return;
     }
 
@@ -483,27 +485,47 @@ var searchEvent = function(event) {
     });
 
     if (!supported) {
-        box.innerHTML = "Command not supported."
-        return;
+        box.innerHTML = "Press enter to search."
+    } else {
+        box.innerHTML = "Press enter to execute."
     }
 
-    box.innerHTML = "Press enter to continue."
-
     if (event.keyCode == 13) {
-        box.innerHTML = '<i class="material-icons spin">autorenew</i>';
+        box.innerHTML = '';
+        search.classList.add('ongoing');
 
-        var conn = new WebSocket('ws://' + window.location.host + window.location.pathname + '?command=true');
-        conn.onopen = function() {
-            conn.send(value);
-        };
+        if (supported) {
+            var conn = new WebSocket('ws://' + window.location.host + window.location.pathname + '?command=true');
+            conn.onopen = function() {
+                conn.send(value);
+            };
 
-        conn.onmessage = function(event) {
-            box.innerHTML = event.data
-            box.scrollTop = box.scrollHeight;
-        }
+            conn.onmessage = function(event) {
+                box.innerHTML = event.data;
+                scrollable.scrollTop = scrollable.scrollHeight;
+            }
 
-        conn.onclose = function(event) {
-            reloadListing();
+            conn.onclose = 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');
+            conn.onopen = function() {
+                conn.send(value);
+            };
+
+            conn.onmessage = function(event) {
+                ul.innerHTML += '<li><a href="' + event.data + '">' + event.data + '</a></li>';
+                scrollable.scrollTop = scrollable.scrollHeight;
+            }
+
+            conn.onclose = function(event) {
+                search.classList.remove('ongoing');
+            }
         }
     }
 }
@@ -557,7 +579,7 @@ document.addEventListener('listing', event => {
             document.getElementById('search').classList.remove('active');
         });
 
-        document.querySelector('#search div').innerHTML = "Write one of yours suported commands: " + user.Commands.join(", ") + ".";
+        document.querySelector('#search > div div').innerHTML = "Search or use one of yours suported commands: " + user.Commands.join(", ") + ".";
         document.querySelector('#search input').addEventListener('keyup', searchEvent);
     }
 
@@ -900,4 +922,4 @@ document.addEventListener("DOMContentLoaded", function(event) {
     }
 
     return false;
-});
+});

_embed/templates/base.tmpl

@@ -52,7 +52,10 @@
                 <div id="search">
                     <i class="material-icons" title="Storage">storage</i>
                     <input type="text" placeholder="Execute a command...">
-                    <div>Write your git, mercurial or svn command and press enter.</div>
+                    <div>
+                        <div>Write your git, mercurial or svn command and press enter.</div>
+                        <p><i class="material-icons spin">autorenew</i></p>
+                    </div>
                 </div>
                 {{ end }}