From 2a70b36d6871a653520eaca822d3e93387a74e84 Mon Sep 17 00:00:00 2001 From: joshuaboud Date: Fri, 21 May 2021 13:15:42 -0300 Subject: [PATCH] make NavEntry, NavDir, and NavFile classes, and global NavWindow class to display contents of / --- navigator/navigator.css | 30 ++++- navigator/navigator.html | 276 +-------------------------------------- navigator/navigator.js | 98 ++++++++++++++ 3 files changed, 127 insertions(+), 277 deletions(-) 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 @@
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
-
-
- test -
-
-
+
-
-
+
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