From e3716d7e89ce0379f3ebcbaeb104fe78eaba3de0 Mon Sep 17 00:00:00 2001 From: Ian Wijma Date: Mon, 27 Nov 2023 16:34:30 +1100 Subject: [PATCH] Add breadcrumbs feature for improved navigation The commit introduces a new breadcrumbs.js file, which creates a breadcrumb functionality to improve the app's navigation. The rendered breadcrumbs allow users to keep track of their current directory path and navigate back to previous directories by clicking on the breadcrumb links. This function is also integrated into the main application in index.js. In addition, changes have been made in 'navigation.js' to include 'exists' method for better directory existence checking before navigation. Some updates are made in 'favourites.js' to simplify and improve the rendering of favourites. Modifications in 'index.html' support the new breadcrumb feature. Overall, these changes significantly improve user experience and navigation efficiency. --- src/index.html | 16 +++++++------ src/index.js | 2 ++ src/libs/navigation.js | 31 ++++++++++++++++++++++--- src/parts/breadcrumbs.js | 28 +++++++++++++++++++++++ src/parts/favourites.js | 49 ++++++++++++++++++---------------------- 5 files changed, 89 insertions(+), 37 deletions(-) create mode 100644 src/parts/breadcrumbs.js diff --git a/src/index.html b/src/index.html index dbe57eb..d8e1ede 100644 --- a/src/index.html +++ b/src/index.html @@ -16,16 +16,14 @@ -
- path / to / memes -
+
- - - + + +
@@ -42,7 +40,7 @@ -
+
+ + diff --git a/src/index.js b/src/index.js index ad1293e..c4b8748 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,9 @@ import {renderFavourite} from "./parts/favourites.js"; +import {renderBreadcrumbs} from "./parts/breadcrumbs.js"; async function Main() { + renderBreadcrumbs(); renderFavourite(); } diff --git a/src/libs/navigation.js b/src/libs/navigation.js index 14056c8..5c0e011 100644 --- a/src/libs/navigation.js +++ b/src/libs/navigation.js @@ -1,5 +1,5 @@ import {homeDir} from "./path.js"; -import {readDir} from "./fs.js"; +import {exists, readDir} from "./fs.js"; const eventBus = new Comment(); @@ -7,23 +7,48 @@ const NAVIGATE_EVENT = 'navigate'; let currentDir = await homeDir(); +/** + * @param {function} callback + */ export const onNavigate = (callback) => eventBus.addEventListener( NAVIGATE_EVENT, () => callback(currentDir) ); + +/** + * @param {function} callback + */ export const onceNavigate = (callback) => eventBus.addEventListener( NAVIGATE_EVENT, () => callback(currentDir), { once: true } ); -export const navigate = (toDir) => { + +/** + * @param {string} toDir + */ +export const navigate = async (toDir) => { + const dirExists =await exists(toDir); + if (!dirExists) throw new Error(`Target dir does not exists: ${toDir}`); + + if (!toDir.endsWith('/')) { + toDir = toDir + '/' + } + currentDir = toDir; eventBus.dispatchEvent(new CustomEvent(NAVIGATE_EVENT)) } +/** + * @returns {string} + */ +export const getCurrentDir = () => currentDir; + const logDir = async () => console.log({ currentDir, items: await readDir(currentDir) }); -onNavigate(logDir); \ No newline at end of file +onNavigate(logDir); + +logDir(); \ No newline at end of file diff --git a/src/parts/breadcrumbs.js b/src/parts/breadcrumbs.js new file mode 100644 index 0000000..c45c372 --- /dev/null +++ b/src/parts/breadcrumbs.js @@ -0,0 +1,28 @@ +import {getOneElementOrThrow} from "../libs/element.js"; +import {getCurrentDir, navigate, onceNavigate} from "../libs/navigation.js"; +import {sep} from "../libs/path.js"; +import {getTemplate} from "../libs/template.js"; + +export const renderBreadcrumbs = () => { + const breadcrumbsEl = getOneElementOrThrow(document, '[data-ui=breadcrumbs]'); + breadcrumbsEl.innerHTML = ''; + + const currentDir = getCurrentDir(); + const currentDirSplit = currentDir.split(sep); + + currentDirSplit.map((value, index, array) => { + if (value) { + const restSplit = [...array].reverse().splice(array.length - (index + 1)).reverse(); + const path = restSplit.join(sep); + + const template = getTemplate('breadcrumbs'); + const actionEl = template.el('action'); + actionEl.innerText = value; + actionEl.addEventListener('click', () => navigate(path)); + + breadcrumbsEl.appendChild(template.render()); + } + }); + + onceNavigate(() => renderBreadcrumbs()); +} \ No newline at end of file diff --git a/src/parts/favourites.js b/src/parts/favourites.js index 1cefcf3..c3cf51d 100644 --- a/src/parts/favourites.js +++ b/src/parts/favourites.js @@ -4,36 +4,31 @@ import {getTemplate} from "../libs/template.js"; import {navigate} from "../libs/navigation.js"; export const renderFavourite = () => { - const updateFavourites = (favouritesArray) => { - const favouriteList = getOneElementOrThrow(document, '[data-ui=favourites]'); + const favouriteList = getOneElementOrThrow(document, '[data-ui=favourites]'); - const addedItems = getElements(favouriteList, '[data-el=added]'); - addedItems.forEach(addedItems => addedItems.remove()); - - favouritesArray.forEach(({ name, path, system }, index) => { - const template = getTemplate('favourites'); - const actionEl = template.el('action'); - actionEl.textContent = name; - actionEl.addEventListener('click', () => navigate(path)); - - const removeEl = template.el('remove'); - if (system) { - removeEl.remove(); - } else { - removeEl.addEventListener('click', () => { - removeFavouriteByIndex(index); - - renderFavourite(); - }); - } - - - favouriteList.appendChild(template.render()); - }); - } + const addedItems = getElements(favouriteList, '[data-el=added]'); + addedItems.forEach(addedItems => addedItems.remove()); const favourites = getFavourites(); - updateFavourites(favourites); + favourites.forEach(({ name, path, system }, index) => { + const template = getTemplate('favourites'); + const actionEl = template.el('action'); + actionEl.textContent = name; + actionEl.addEventListener('click', () => navigate(path)); + + const removeEl = template.el('remove'); + if (system) { + removeEl.remove(); + } else { + removeEl.addEventListener('click', () => { + removeFavouriteByIndex(index); + + renderFavourite(); + }); + } + + favouriteList.appendChild(template.render()); + }); const addEl = getOneElementOrThrow(document, '[data-ui=add-favourite]');