From 6378dadea99feaa1e9d00409f4701025f532768c Mon Sep 17 00:00:00 2001 From: Ian Wijma Date: Mon, 27 Nov 2023 23:50:18 +1100 Subject: [PATCH] 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. --- src/index.html | 5 ++--- src/index.js | 2 ++ src/parts/back.js | 14 ++++++++++++++ 3 files changed, 18 insertions(+), 3 deletions(-) create mode 100644 src/parts/back.js diff --git a/src/index.html b/src/index.html index 4815a82..7e68dd6 100644 --- a/src/index.html +++ b/src/index.html @@ -10,9 +10,8 @@
- - - + + diff --git a/src/index.js b/src/index.js index 433adf3..bbbc08f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,14 @@ import {renderFavourite} from "./parts/favourites.js"; import {renderBreadcrumbs} from "./parts/breadcrumbs.js"; import {renderFiles} from "./parts/files.js"; +import {handleBack} from "./parts/back.js"; async function Main() { renderBreadcrumbs(); renderFavourite(); await renderFiles(); + handleBack(); } Main(); diff --git a/src/parts/back.js b/src/parts/back.js new file mode 100644 index 0000000..68fecd5 --- /dev/null +++ b/src/parts/back.js @@ -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)); + }); +} \ No newline at end of file