ian
/
file-browser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement back button functionality for directory navigation 

The back button functionality was added to the web application. Now users can navigate directories back and forth, improving user experience and interaction. This new feature is achieved through a 'handleBack' function in the 'back.js' file which listens to the click event on the 'Back' button. When clicked, it adjusts the current directory and navigates the application to the parent directory. This is especially crucial for a software that has a file system or explorer-like structure. The 'Back' button was also modified in 'index.html' to support this functionality and the 'handleBack' function was called in the 'Main' function in 'index.js' to initialise it at the start.
This commit is contained in:
Ian Wijma 2023-11-27 23:50:18 +11:00
parent d2f6d1640a
commit 6378dadea9
3 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/index.html
View File

@ -10,9 +10,8 @@
<body class="h-screen max-h-screen flex flex-col overflow-hidden"> <body class="h-screen max-h-screen flex flex-col overflow-hidden">
<header class="bg-amber-500 w-screen h-12 flex items-center justify-between"> <header class="bg-amber-500 w-screen h-12 flex items-center justify-between">
<span class="flex"> <span class="flex gap-2">
<button>Back</button> <button data-ui="up-one-dir">Back</button>
<button>Forward</button>
</span> </span>
<span class="flex"> <span class="flex">

2
src/index.js
View File

@ -1,12 +1,14 @@
import {renderFavourite} from "./parts/favourites.js"; import {renderFavourite} from "./parts/favourites.js";
import {renderBreadcrumbs} from "./parts/breadcrumbs.js"; import {renderBreadcrumbs} from "./parts/breadcrumbs.js";
import {renderFiles} from "./parts/files.js"; import {renderFiles} from "./parts/files.js";
import {handleBack} from "./parts/back.js";
async function Main() { async function Main() {
renderBreadcrumbs(); renderBreadcrumbs();
renderFavourite(); renderFavourite();
await renderFiles(); await renderFiles();
handleBack();
} }
Main(); Main();

14
src/parts/back.js Normal file
View File

@ -0,0 +1,14 @@
import {getOneElementOrThrow} from "../libs/element.js";
import {getCurrentDir, navigate} from "../libs/navigation.js";
import {sep} from "../libs/path.js";
export const handleBack = () => {
const backEl = getOneElementOrThrow(document, '[data-ui=up-one-dir]');
backEl.addEventListener('click', () => {
const currentDir = getCurrentDir();
const directorySplit = currentDir.split(sep);
const newDir = directorySplit.splice(0, directorySplit.length - 2);
navigate(sep + newDir.join(sep));
});
}