import { loading_finish, loading_start } from "lib/Loading"; import { fs_get_node, fs_encode_path, fs_split_path } from "../lib/FilesystemAPI"; import type { FSNode, FSPath, FSPermissions, FSContext } from "../lib/FilesystemAPI"; export class FSNavigator { // Parts of the raw API response path: Array = [] base_index: number = 0 children: Array = [] permissions: FSPermissions = {} context: FSContext = {} // base equals path[base_index]. It's updated every time the path updates base: FSNode = {} // Initialized will be set to true when the first file or directory is loaded initialized = false shuffle = false // Whether navigation events should update the browser history history_enabled = true constructor(history_enabled = true) { this.history_enabled = history_enabled } // The popstate event can be used to listen for navigation events. Register // this event listener on the in the parent element. When // the user presses the back or forward buttons in the browser we'll catch // the event and navigate to the proper directory popstate = (e: PopStateEvent) => { // Get the part of the URL after the fs root and navigate to it const path = window.location.pathname.replace(/^\/d/, "") this.navigate(decodeURI(path), false) } // The FSNavigator acts as a svelte store. This allows for DOM reactivity. // This works by implementing the store contract: // https://svelte.dev/docs/svelte-components#script-4-prefix-stores-with-$-to-access-their-values subscribers: Array<(nav: FSNavigator) => void> = [] subscribe = (sub_func: (nav: FSNavigator) => void) => { // Immediately return the current value sub_func(this) this.subscribers.push(sub_func) // Return the unsubscribe function return () => this.subscribers.splice(this.subscribers.indexOf(sub_func), 1) } notify_subscribers = () => { for (let i = 0; i < this.subscribers.length; i++) { this.subscribers[i](this) } } navigate = async (path: string, push_history: boolean) => { if (path[0] !== "/") { path = "/" + path } console.debug("Navigating to path", path, push_history) try { loading_start() const resp = await fs_get_node(path) this.open_node(resp, push_history) } catch (err: any) { if (err.value && err.value === "path_not_found") { if (path !== this.path[0].path && path !== "/" && path !== "") { console.debug("Path", path, "was not found, trying to navigate to parent") this.navigate(fs_split_path(path).parent, push_history) } } else if (err.message) { console.error(err) alert("Error: " + err.message) } else { console.error(err) alert("Error: " + err) } } finally { loading_finish() } } navigate_up = async () => { if (this.path.length > 1) { await this.navigate(this.path[this.path.length - 2].path, false) } } reload = async () => { await this.navigate(this.base.path, false) } open_node = (node: FSPath, push_history: boolean) => { // Update window title and navigation history. If push_history is false // we still replace the URL with replaceState. This way the user is not // greeted to a 404 page when refreshing after renaming a file if (this.history_enabled) { window.document.title = node.path[node.base_index].name + " / FNX" const url = "/d" + fs_encode_path(node.path[node.base_index].path) + window.location.hash if (push_history) { window.history.pushState({}, window.document.title, url) } else { window.history.replaceState({}, window.document.title, url) } } // If the new node is a child of the previous node we save the parent's // children array if (node.path.length > 1 && node.path[node.path.length - 2].path === this.base.path) { console.debug("Current parent path and new node path match. Saving siblings") this.cached_siblings_path = node.path[node.path.length - 1].path this.cached_siblings = this.children } // Sort directory children sort_children(node.children, this.sort_last_field, this.sort_asc) // Update shared state this.path = node.path this.base_index = node.base_index this.base = node.path[node.base_index] this.children = node.children this.permissions = node.permissions this.context = node.context this.initialized = true console.debug("Opened node", node) // Signal to our subscribers that the new node is loaded. This triggers // the reactivity this.notify_subscribers() } // These are used to navigate forward and backward within a directory (using // the previous and next buttons on the toolbar). The cached siblings will // be used so that we don't need to make an extra request to the parent // directory. The siblings_path variable is used to verify that the parent // directory is still the same. If it's different the siblings array is not // used cached_siblings_path = "" cached_siblings: Array | null = null get_siblings = async () => { // If this node is a filesystem root then there are no siblings if (this.path.length < 2) { return [] } // Check if we already have siblings cached if ( this.cached_siblings === null || this.cached_siblings_path !== this.path[this.path.length - 2].path ) { console.debug("Cached siblings not available. Fetching new") const resp = await fs_get_node(this.path[this.path.length - 2].path) // Sort directory children to make sure the order is consistent sort_children(resp.children, this.sort_last_field, this.sort_asc) // Save new siblings in navigator state this.cached_siblings_path = this.path[this.path.length - 2].path this.cached_siblings = resp.children } return this.cached_siblings } // Opens a sibling of the currently open file. The offset is relative to the // file which is currently open. Give a positive number to move forward and // a negative number to move backward open_sibling = async (offset: number) => { if (this.path.length <= 1) { return } let siblings: Array try { loading_start() siblings = await this.get_siblings() } catch (err) { console.error(err) alert(err) return } finally { loading_finish() } let next_sibling: FSNode | null = null if (this.shuffle) { // Shuffle is on, pick a random sibling for (let i = 0; i < 10; i++) { next_sibling = siblings[Math.floor(Math.random() * siblings.length)] // If we selected the same sibling we already have open we try // again. Else we break the loop if (next_sibling.name !== this.base.name) { break } } } else { // Loop over the parent node's children to find the one which is // currently open. Then, if possible, we save the one which comes before // or after it for (let i = 0; i < siblings.length; i++) { if ( siblings[i].name === this.base.name && i + offset >= 0 && // Prevent underflow i + offset < siblings.length // Prevent overflow ) { next_sibling = siblings[i + offset] break } } } // If we found a sibling we open it if (next_sibling !== null) { console.debug("Opening sibling", next_sibling.path) await this.navigate(next_sibling.path, true) } else { console.debug("No siblings found") } } sort_last_field: string = "name" sort_asc: boolean = true sort_children = (field: string) => { // If the field is the same as last time we invert the direction if (field !== "" && field === this.sort_last_field) { this.sort_asc = !this.sort_asc } // If the field is empty we reuse the last field if (field === "") { field = this.sort_last_field } this.sort_last_field = field sort_children(this.children, field, this.sort_asc) // Signal to our subscribers that the order has changed. This triggers // the reactivity this.notify_subscribers() } } const sort_children = (children: FSNode[], field: string, asc: boolean) => { console.log("Sorting directory children by", field, "asc", asc) children.sort((a, b) => { // Sort directories before files if (a.type !== b.type) { return a.type === "dir" ? -1 : 1 } // If sort is descending we swap the arguments if (asc === false) { [a, b] = [b, a] } // If the two values are equal then we force sort by name, since names // are always unique if (a[field] === b[field]) { return a.name.localeCompare(b.name, undefined, { numeric: true }) } else if (typeof (a[field]) === "number") { // Sort ints from high to low return a[field] - b[field] } else { // Sort strings alphabetically return a[field].localeCompare(b[field], undefined, { numeric: true }) } }) }