add sort options to list view

navigator/navigator.css

@@ -275,6 +275,28 @@ input[type="text"] {
 .contents-view-list-header {
 	background-color: var(--list-view-header);
 	cursor: default !important;
+	position: sticky;
+	top: 0;
+	z-index: 10;
+}
+
+.contents-view-list > .list-view-top-spacer {
+	height: 30px;
+}
+
+.contents-view-grid > .list-view-top-spacer {
+	display: none;
+}
+
+.contents-view-list-header > div {
+	cursor: pointer;
+	position: relative;
+}
+
+.contents-view-list-header > div > i {
+	position: absolute;
+	right: 10px;
+	top: 0.25em;
 }
 
 .contents-view-list > .nav-item {

navigator/navigator.html

@@ -67,12 +67,13 @@
 			<div class="contents-view contents-view-grid" id="nav-contents-view">
 				<div class="contents-view-list-header nav-item">
 					<i class="nav-item-icon"></i>
-					<div class="nav-item-title">Name</div>
+					<div class="nav-item-title" id="sort-name-btn">Name<i class="sort-arrow fas fa-chevron-up" id="sort-name-icon"></i></div>
-					<div>Mode</div>
+					<div id="sort-mode-btn">Mode</div>
-					<div>Owner</div>
+					<div id="sort-owner-btn">Owner<i class="sort-arrow fas" id="sort-owner-icon"></i></div>
-					<div>Group</div>
+					<div id="sort-group-btn">Group<i class="sort-arrow fas" id="sort-group-icon"></i></div>
-					<div>Size</div>
+					<div id="sort-size-btn">Size<i class="sort-arrow fas" id="sort-size-icon"></i></div>
 				</div>
+				<div class="nav-item list-view-top-spacer"></div>
 				<div class="nav-notifications" id="nav-notifications">
 				</div>
 			</div>

navigator/navigator.js

@@ -1292,6 +1292,81 @@ class NavDragDrop {
 	}
 }
 
+class SortFunctions {
+	constructor() {
+		this.orders = {
+			name: "asc",
+			owner: "asc",
+			group: "asc",
+			size: "asc",
+		}
+		this.icons = {};
+		for (let option of ["name", "owner", "group", "size"]) {
+			this.icons[option] = document.getElementById(`sort-${option}-icon`);
+		}
+		this.current_choice = "name";
+	}
+
+	get_func() {
+		return this[`${this.current_choice}_${this.orders[this.current_choice]}`];
+	}
+
+	set_func(option) {
+		if (this.current_choice === option) {
+			if (this.orders[this.current_choice] === "asc") {
+				this.orders[this.current_choice] = "desc";
+				this.icons[this.current_choice].classList.remove("fa-chevron-up");
+				this.icons[this.current_choice].classList.add("fa-chevron-down");
+			} else {
+				this.orders[this.current_choice] = "asc";
+				this.icons[this.current_choice].classList.remove("fa-chevron-down");
+				this.icons[this.current_choice].classList.add("fa-chevron-up");
+			}
+		} else {
+			this.icons[this.current_choice].classList.remove("fa-chevron-up", "fa-chevron-down");
+			this.current_choice = option;
+			if (this.orders[this.current_choice] === "asc") {
+				this.icons[this.current_choice].classList.add("fa-chevron-up");
+			} else {
+				this.icons[this.current_choice].classList.add("fa-chevron-down");
+			}
+		}
+		
+	}
+
+	name_asc(first, second) {
+		return first.filename().localeCompare(second.filename());
+	}
+
+	name_desc(first, second) {
+		return second.filename().localeCompare(first.filename());
+	}
+
+	owner_asc(first, second) {
+		return first.stat["owner"].localeCompare(second.stat["owner"]);
+	}
+
+	owner_desc(first, second) {
+		return second.stat["owner"].localeCompare(first.stat["owner"]);
+	}
+
+	group_asc(first, second) {
+		return first.stat["group"].localeCompare(second.stat["group"]);
+	}
+
+	group_desc(first, second) {
+		return second.stat["group"].localeCompare(first.stat["group"]);
+	}
+
+	size_asc(first, second) {
+		return first.stat["size"] - second.stat["size"];
+	}
+
+	size_desc(first, second) {
+		return second.stat["size"] - first.stat["size"];
+	}
+}
+
 class NavWindow {
 	constructor() {
 		this.item_display = "grid";
@@ -1312,6 +1387,8 @@ class NavWindow {
 		this.clip_board = [];
 
 		this.uploader = new NavDragDrop(this.window, this);
+
+		this.sort_function = new SortFunctions();
 	}
 
 	/**
@@ -1368,7 +1445,9 @@ class NavWindow {
 		}
 		files.sort((first, second) => {
 			if (first.nav_type === second.nav_type) {
-				return first.filename().localeCompare(second.filename());
+				return this.item_display === "list" 
+					? this.sort_function.get_func()(first, second)
+					: this.sort_function.name_asc(first, second); // default to sort by name in grid view
 			}
 			if (first.nav_type === "dir")
 				return -1;
@@ -2025,6 +2104,13 @@ function set_up_buttons() {
 	document.getElementById("toggle-theme").addEventListener("change", switch_theme, false);
 	document.getElementById("nav-show-hidden").addEventListener("change", nav_window.toggle_show_hidden.bind(nav_window));
 	document.getElementById("nav-item-display-btn").addEventListener("click", nav_window.switch_item_display.bind(nav_window));
+	for (let option of ["name", "owner", "group", "size"]) {
+		var elem = document.getElementById("sort-" + option + "-btn");
+		elem.addEventListener("click", (event) => {
+			nav_window.sort_function.set_func(option);
+			nav_window.refresh();
+		});
+	}
 }
 
 async function main() {