mirror of
https://github.com/45Drives/cockpit-navigator.git
synced 2025-07-29 16:45:13 +02:00
make NavEntry, NavDir, and NavFile classes, and global NavWindow class to display contents of /
This commit is contained in:
joshuaboud
parent
a7972b9059
commit
2a70b36d68
@ -53,7 +53,7 @@
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.nav-item {
|
||||||
margin: 0.5em;
|
margin: 0.5em;
|
||||||
flex: 0;
|
flex: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -62,13 +62,37 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item .icon {
|
.nav-item .nav-item-title {
|
||||||
|
text-align: center;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item .nav-dir-icon {
|
||||||
background-color: #212427;
|
background-color: #212427;
|
||||||
border: 1px solid #3c3f42;
|
border: 1px solid #3c3f42;
|
||||||
width: 3em;
|
width: 5em;
|
||||||
height: 4em;
|
height: 4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.nav-item .nav-file-icon {
|
||||||
|
position: relative;
|
||||||
|
background-color: #212427;
|
||||||
|
width: 5em;
|
||||||
|
height: 4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item .nav-file-icon:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
border-width: 0 16px 16px 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #3c3f42 #151515;
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.info-column {
|
.info-column {
|
||||||
background-color: #212427;
|
background-color: #212427;
|
||||||
flex-basis: 0;
|
flex-basis: 0;
|
||||||
|
|||||||
@ -39,281 +39,9 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="vertical-spacer"></div>
|
<div class="vertical-spacer"></div>
|
||||||
<div class="flex-row inner-container">
|
<div class="flex-row inner-container">
|
||||||
<div class="contents-view">
|
<div class="contents-view" id="nav-contents-view"></div>
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="item">
|
|
||||||
<div class="icon"></div>
|
|
||||||
<div class="item-name">
|
|
||||||
test
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="horizontal-spacer"></div>
|
<div class="horizontal-spacer"></div>
|
||||||
<div class="info-column">
|
<div class="info-column"></div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@ -1 +1,99 @@
|
|||||||
|
|
||||||
|
|
||||||
|
class NavEntry {
|
||||||
|
constructor(/*string or array*/ path) {
|
||||||
|
if(typeof path == 'string')
|
||||||
|
this.path = path.split('/').splice(1);
|
||||||
|
else
|
||||||
|
this.path = path;
|
||||||
|
this.dom_element = document.createElement("div");
|
||||||
|
this.dom_element.classList.add("nav-item");
|
||||||
|
let icon = this.dom_element.nav_item_icon = document.createElement("div");
|
||||||
|
let title = this.dom_element.nav_item_title = document.createElement("div");
|
||||||
|
title.classList.add("nav-item-title");
|
||||||
|
title.innerText = this.filename();
|
||||||
|
this.dom_element.appendChild(icon);
|
||||||
|
this.dom_element.appendChild(title);
|
||||||
|
}
|
||||||
|
destroy() {
|
||||||
|
while(this.dom_element.firstChild){
|
||||||
|
this.dom_element.removeChild(this.dom_element.firstChild);
|
||||||
|
}
|
||||||
|
if(this.dom_element.parentElement)
|
||||||
|
this.dom_element.parentElement.removeChild(this.dom_element);
|
||||||
|
}
|
||||||
|
filename() {
|
||||||
|
return this.path[this.path.length -1];
|
||||||
|
}
|
||||||
|
path_str() {
|
||||||
|
return "/" + this.path.join('/');
|
||||||
|
}
|
||||||
|
show() {
|
||||||
|
document.getElementById("nav-contents-view").appendChild(this.dom_element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class NavFile extends NavEntry {
|
||||||
|
constructor(/*string or array*/ path) {
|
||||||
|
super(path);
|
||||||
|
this.dom_element.nav_item_icon.classList.add("nav-file-icon");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class NavDir extends NavEntry {
|
||||||
|
constructor(/*string or array*/ path) {
|
||||||
|
super(path);
|
||||||
|
this.dom_element.nav_item_icon.classList.add("nav-dir-icon");
|
||||||
|
}
|
||||||
|
async get_children() {
|
||||||
|
var children = [];
|
||||||
|
var data = await cockpit.spawn(["ls", "-lL", this.path_str()], {err:"out"});
|
||||||
|
var entries = data.split("\n");
|
||||||
|
entries = entries.splice(1, entries.length - 2);
|
||||||
|
entries.forEach(entry => {
|
||||||
|
var entry_array = entry.split(/\s+/);
|
||||||
|
var filename = entry_array[entry_array.length - 1];
|
||||||
|
if(entry[0] == 'd')
|
||||||
|
children.push(new NavDir([... this.path, filename]));
|
||||||
|
else
|
||||||
|
children.push(new NavFile([... this.path, filename]));
|
||||||
|
});
|
||||||
|
return children;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class NavWindow {
|
||||||
|
constructor() {
|
||||||
|
this.path_stack = [new NavDir("/")];
|
||||||
|
this.entries = [];
|
||||||
|
}
|
||||||
|
async refresh() {
|
||||||
|
while(this.entries.length){
|
||||||
|
var entry = this.entries.pop();
|
||||||
|
entry.destroy();
|
||||||
|
}
|
||||||
|
var files = await this.pwd().get_children();
|
||||||
|
files.forEach(file => {
|
||||||
|
file.show();
|
||||||
|
this.entries.push(file);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
pwd() {
|
||||||
|
return this.path_stack[this.path_stack.length - 1];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var nav_window = new NavWindow();
|
||||||
|
|
||||||
|
async function main() {
|
||||||
|
nav_window.refresh();
|
||||||
|
}
|
||||||
|
|
||||||
|
main();
|
||||||
|
|
||||||
|
// setTimeout(function(){
|
||||||
|
// while(files.length){
|
||||||
|
// var file = files.pop();
|
||||||
|
// file.destroy();
|
||||||
|
// }
|
||||||
|
// }, 5000);
|
||||||
Loading…
x
Reference in New Issue
Block a user