This commit is contained in:
fabioswartz 2016-12-30 11:36:33 +00:00
commit 41cac9ae12
3 changed files with 90 additions and 68 deletions

View File

@ -167,25 +167,35 @@ function deleteEvent(event) {
buttons.delete.changeToDone(request.status != 204, html); buttons.delete.changeToDone(request.status != 204, html);
} }
} }
r.send();
request.send();
}); });
return false; 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; 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) { user.Commands.forEach(function(cmd) {
if (cmd == pieces[0]) { if (cmd == pieces[0]) {
@ -193,7 +203,7 @@ var searchEvent = function(event) {
} }
}); });
if (!supported) { if (!supported || !user.AllowCommands) {
box.innerHTML = "Press enter to search." box.innerHTML = "Press enter to search."
} else { } else {
box.innerHTML = "Press enter to execute." box.innerHTML = "Press enter to execute."
@ -203,8 +213,15 @@ var searchEvent = function(event) {
box.innerHTML = ''; box.innerHTML = '';
search.classList.add('ongoing'); search.classList.add('ongoing');
if (supported) { let url = window.location.host + window.location.pathname;
var conn = new WebSocket('ws://' + window.location.host + window.location.pathname + '?command=true');
if (document.getElementById("editor")) {
url = removeLastDirectoryPartOf(url);
}
if (supported && user.AllowCommands) {
let conn = new WebSocket(`ws://${url}?command=true`);
conn.onopen = function() { conn.onopen = function() {
conn.send(value); conn.send(value);
}; };
@ -218,11 +235,15 @@ var searchEvent = function(event) {
search.classList.remove('ongoing'); search.classList.remove('ongoing');
reloadListing(); 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://${url}?search=true`);
conn.onopen = function() { conn.onopen = function() {
conn.send(value); conn.send(value);
}; };
@ -236,7 +257,45 @@ var searchEvent = function(event) {
search.classList.remove('ongoing'); search.classList.remove('ongoing');
} }
} }
} }
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);
} }
/* * * * * * * * * * * * * * * * /* * * * * * * * * * * * * * * *
@ -258,5 +317,6 @@ document.addEventListener("DOMContentLoaded", function(event) {
buttons.delete.addEventListener("click", deleteEvent); buttons.delete.addEventListener("click", deleteEvent);
} }
setupSearch();
return false; return false;
}); });

View File

@ -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 // Handles the current view mode and adds the event to the button
handleViewType(document.getCookie("view-list")); handleViewType(document.getCookie("view-list"));
document.getElementById("view").addEventListener("click", viewEvent); 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) { if (user.AllowEdit) {
// Enables rename button // Enables rename button

View File

@ -32,16 +32,14 @@
<!-- TOP BAR --> <!-- TOP BAR -->
<div> <div>
<div><p>File Manager</p></div> <div><p>File Manager</p></div>
{{ if .User.AllowCommands }}
<div id="search"> <div id="search">
<i class="material-icons" title="Storage">storage</i> <i class="material-icons" title="Storage">storage</i>
<input type="text" placeholder="Search or execute a command..."> <input type="text" placeholder="Search or execute a command...">
<div> <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> <p><i class="material-icons spin">autorenew</i></p>
</div> </div>
</div> </div>
{{ end }}
<div class="action" id="logout"> <div class="action" id="logout">
<i class="material-icons" title="Logout">exit_to_app</i> <span>Logout</span> <i class="material-icons" title="Logout">exit_to_app</i> <span>Logout</span>