diff --git a/navigator/navigator.css b/navigator/navigator.css
index 6e40479..4d924b8 100644
--- a/navigator/navigator.css
+++ b/navigator/navigator.css
@@ -53,7 +53,7 @@
overflow: auto;
}
-.item {
+.nav-item {
margin: 0.5em;
flex: 0;
display: flex;
@@ -62,13 +62,37 @@
cursor: pointer;
}
-.item .icon {
+.nav-item .nav-item-title {
+ text-align: center;
+ overflow-wrap: anywhere;
+}
+
+.nav-item .nav-dir-icon {
background-color: #212427;
border: 1px solid #3c3f42;
- width: 3em;
+ width: 5em;
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 {
background-color: #212427;
flex-basis: 0;
diff --git a/navigator/navigator.html b/navigator/navigator.html
index 72f45ad..9ba86c9 100644
--- a/navigator/navigator.html
+++ b/navigator/navigator.html
@@ -39,281 +39,9 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
-
+
diff --git a/navigator/navigator.js b/navigator/navigator.js
index 8b13789..4d887e3 100644
--- a/navigator/navigator.js
+++ b/navigator/navigator.js
@@ -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);
\ No newline at end of file