tyler.durden
/
cockpit-navigator
mirror of https://github.com/45Drives/cockpit-navigator.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add dynamic dropdown list while typing path

This commit is contained in:
joshuaboud 2021-05-26 15:18:35 -03:00
parent 9b0131a0b8
commit f6fb166b07
No known key found for this signature in database
GPG Key ID: 17EFB59E2A8BF50E
3 changed files with 51 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
navigator/navigator.css
View File

@ -33,6 +33,7 @@
.navigation-bar {
background-color: #212427;
color: inherit;
flex-grow: 1;
padding: 0.25em 1em 0.25em 1em;
border: 1px solid #3c3f42;

8
navigator/navigator.html
View File

@ -42,9 +42,11 @@
<button class="pf-c-button pf-m-secondary" id="nav-refresh-btn"><i class="fas fa-sync"></i></button>
</div>
<div class="horizontal-spacer"></div>
<div class="navigation-bar" id="pwd">
/current/dir
</div>
<input type="text" list="possible-paths-list" autocomplete="off" class="navigation-bar" id="pwd"></input>
<datalist id="possible-paths-list">
<select id="possible-paths">
</select>
</datalist>
<div class="horizontal-spacer"></div>
<button class="pf-c-button pf-m-primary" id="nav-mkdir-btn"><i class="fas fa-folder-plus"></i></button>
<div class="horizontal-spacer"></div>

48
navigator/navigator.js
View File

@ -206,11 +206,12 @@ class NavDir extends NavEntry {
}
super.handleEvent(e);
}
async get_children(nav_window_ref) {
async get_children(nav_window_ref, no_alert = false) {
var children = [];
var proc = cockpit.spawn(["/usr/share/cockpit/navigator/scripts/ls.py", this.path_str()], {err:"out", superuser: "try"});
proc.fail((e, data) => {
window.alert(data);
if(!no_alert)
window.alert(data);
})
var data = await proc;
var response = JSON.parse(data);
@ -284,7 +285,7 @@ class NavWindow {
file.show();
this.entries.push(file);
});
document.getElementById("pwd").innerText = this.pwd().path_str();
document.getElementById("pwd").value = this.pwd().path_str();
this.set_selected(this.pwd());
this.show_selected_properties();
}
@ -427,6 +428,44 @@ class NavWindow {
await proc;
this.refresh();
}
nav_bar_event_handler(e) {
switch(e.key){
case 'Enter':
this.nav_bar_cd();
break;
default:
break;
}
}
nav_bar_cd() {
var new_path = document.getElementById("pwd").value;
this.cd(new NavDir(new_path));
}
async nav_bar_update_choices() {
var list = document.getElementById("possible-paths");
var partial_path_str = document.getElementById("pwd").value;
var last_delim = partial_path_str.lastIndexOf('/');
if(last_delim === -1)
return;
var parent_path_str = partial_path_str.slice(0, last_delim);
if(this.nav_bar_last_parent_path_str === parent_path_str)
return;
this.nav_bar_last_parent_path_str = parent_path_str;
var parent_dir = new NavDir(parent_path_str);
console.log(parent_dir.path_str());
var error = false;
var objs = await parent_dir.get_children(this, true).catch(() => {error = true});
if(error)
return;
objs = objs.filter((child) => {return child.nav_type === "dir"});
while(list.firstChild)
list.removeChild(list.firstChild);
objs.forEach((obj) => {
var option = document.createElement("option");
option.value = obj.path_str();
list.appendChild(option);
});
}
}
let nav_window = new NavWindow();
@ -446,6 +485,9 @@ function set_up_buttons() {
for(let checkbox of mode_checkboxes){
checkbox.addEventListener("change", nav_window.update_permissions_preview.bind(nav_window));
}
document.getElementById("pwd").addEventListener("input", nav_window.nav_bar_update_choices.bind(nav_window), false);
document.getElementById("pwd").addEventListener("focus", nav_window.nav_bar_update_choices.bind(nav_window), false);
document.getElementById("pwd").addEventListener("keydown", nav_window.nav_bar_event_handler.bind(nav_window));
}
async function main() {