diff --git a/src/Components/Drives/drives.ts b/src/Components/Drives/drives.ts index a93d2046..bf514502 100644 --- a/src/Components/Drives/drives.ts +++ b/src/Components/Drives/drives.ts @@ -72,7 +72,7 @@ const drivesToElements = (drives: Drive[], kBlockFormat = false): string => { const driveName = drive.mounted.split('/')[drive.mounted.split('/').length - 1]; // Get name of drive result += ` -
{ const result = `

${Translate("Favorites")}

-
+

Desktop icon${Translate("Desktop")}

-
+

Document icon${Translate("Documents")}

-
+

Download icon${Translate("Downloads")}

-
+

Pictures icon${Translate("Pictures")}

-
+

Music icon${Translate("Music")}

-
+

Video icon${Translate("Videos")}

`; diff --git a/src/Components/Files/File Operation/open.ts b/src/Components/Files/File Operation/open.ts index 23cdc352..7f421d08 100644 --- a/src/Components/Files/File Operation/open.ts +++ b/src/Components/Files/File Operation/open.ts @@ -31,6 +31,10 @@ const IGNORE_FILE = ['.', '..']; let timeStarted:number; let watcher:undefined|FSWatcher; +document.addEventListener('DOMContentLoaded', () => { + document.querySelector('#sidebar-nav').addEventListener('click', openFileHandler); + document.querySelector('#workspace').addEventListener('dblclick', openFileHandler); +}) /** * Close dir watcher @@ -44,7 +48,7 @@ const closeWatcher = ():void => { * Get command to open a file with default app on various operating systems. * @returns {string} */ -const getCommandLine =():string => { +const getCommandLine = ():string => { switch (process.platform) { case 'darwin': return 'open'; @@ -71,49 +75,37 @@ function openFileWithDefaultApp(file:string) :void{ * @param {any} e - event * @returns {void} */ -const openFileHandler = (e:Event):void => { +const openFileHandler = (e: Event): void => { + let element = e.target as HTMLElement; - while (!element.dataset.path) { - element = element.parentNode as HTMLElement + while(!element.dataset.path){ + element = element.parentNode as HTMLElement; } - const filePath = unescape(element.dataset.path) + if(element.id === "workspace") return; + + const filePath = unescape(element.dataset.path); + // Open the file if it's not directory - if (element.dataset.isdir !== "true") { + if (element.dataset.isdir !== 'true') { const recents = storage.get('recent')?.data; - openFileWithDefaultApp(filePath) + openFileWithDefaultApp(filePath); // Push file into recent files if (recents) { if (recents.indexOf(filePath) !== -1) { recents.push(recents.splice(recents.indexOf(filePath), 1)[0]); - storage.set('recent', recents) + storage.set('recent', recents); } else { - storage.set('recent', [...recents, filePath]) + storage.set('recent', [...recents, filePath]); } - } - else storage.set('recent', [filePath]) + } else { + storage.set('recent', [filePath]); + } } else { - open(filePath) + open(filePath); } } -/** - * Listen elements and pass it into the handler - * @param {NodeListOf} elements - array of elements to be listened - * @returns {void} - */ -const listenOpen = (elements: NodeListOf):void => { - elements.forEach(element => { - if (document.getElementById("workspace").contains(element)) { - element.removeEventListener("dblclick", openFileHandler) - element.addEventListener("dblclick", openFileHandler) - } else { - element.removeEventListener("click", openFileHandler) - element.addEventListener("click", openFileHandler) - } - }) -} - /** * Display files into Xplorer main section * @param {fileData[]} files - array of files of a directory @@ -188,7 +180,6 @@ const displayFiles = async (files: fileData[], dir:string, options?: {reveal: bo } fileGrid.setAttribute("draggable", 'true') - fileGrid.setAttribute("data-listenOpen", '') fileGrid.dataset.modifiedAt = String(dirent.modifiedAt); fileGrid.dataset.createdAt = String(dirent.createdAt); fileGrid.dataset.accessedAt = String(dirent.accessedAt); @@ -216,7 +207,6 @@ const displayFiles = async (files: fileData[], dir:string, options?: {reveal: bo updateTheme() nativeDrag(document.querySelectorAll(".file"), dir) SelectListener(document.querySelectorAll(".file")) - listenOpen(document.querySelectorAll("[data-listenOpen]")) // Listen to open the file LAZY_LOAD() InfoLog(`Open ${dir} within ${(Date.now() - timeStarted) / 1000}s`) @@ -241,7 +231,6 @@ const open = async (dir:string, reveal?:boolean):Promise => { await changePosition(dir) if (dir === "xplorer://Home") { Home(() => { - listenOpen(document.querySelectorAll("[data-listenOpen]")) // Listen to open the file SelectListener(document.querySelectorAll(".file")) InfoLog(`Open ${dir} within ${(Date.now() - timeStarted) / 1000}s`) console.log(`Open ${dir} within ${(Date.now() - timeStarted) / 1000}s`) @@ -344,5 +333,4 @@ const open = async (dir:string, reveal?:boolean):Promise => { } } - -export { listenOpen, open, openFileWithDefaultApp, closeWatcher } \ No newline at end of file +export { open, openFileWithDefaultApp, closeWatcher } \ No newline at end of file diff --git a/src/Components/Files/File Preview/preview.ts b/src/Components/Files/File Preview/preview.ts index 89a23317..ed23a536 100644 --- a/src/Components/Files/File Preview/preview.ts +++ b/src/Components/Files/File Preview/preview.ts @@ -29,7 +29,6 @@ const closePreviewFile = (): void => { * @returns {void} */ const Preview = (filePath: string): void => { - const { listenOpen } = require('../File Operation/open'); //eslint-disable-line closePreviewFile(); const previewElement = document.createElement('div'); previewElement.classList.add('preview'); @@ -42,7 +41,6 @@ const Preview = (filePath: string): void => { ${html} `; - listenOpen(previewElement.querySelectorAll('[data-listenOpen]')); document.querySelector('.main-box').scrollTop = 0; document.querySelector('.main-box').style.overflowY = 'hidden'; @@ -95,7 +93,7 @@ const Preview = (filePath: string): void => { }); } else if (IMAGE_TYPES.indexOf(path.extname(filePath)) !== -1) { changePreview( - `
` + `
` ); } else if (VIDEO_TYPES.indexOf(path.extname(filePath)) !== -1) { changePreview( diff --git a/src/Components/Layout/home.ts b/src/Components/Layout/home.ts index 0dc76399..de5e7aba 100644 --- a/src/Components/Layout/home.ts +++ b/src/Components/Layout/home.ts @@ -120,7 +120,7 @@ const homeFiles = (callback: cb) => { file.isDir } data-path = "${escape( path.join(os.homedir(), file.name) - )}" data-listenOpen ${ + )}" ${ isHiddenFile(path.join(os.homedir(), file.name)) ? 'data-hidden-file' : '' diff --git a/src/Components/Layout/layout.scss b/src/Components/Layout/layout.scss index b96e5155..eb0a81ea 100644 --- a/src/Components/Layout/layout.scss +++ b/src/Components/Layout/layout.scss @@ -20,7 +20,7 @@ flex-direction: column; height: 100vh; overflow: auto; - .sidebar-nav { + #sidebar-nav { flex-grow: 1; margin: 1rem 0; padding: 15px 20px; diff --git a/src/Components/Layout/sidebar.ts b/src/Components/Layout/sidebar.ts index 6e38c0bb..9ddebf0f 100644 --- a/src/Components/Layout/sidebar.ts +++ b/src/Components/Layout/sidebar.ts @@ -14,15 +14,9 @@ interface Favorites { } const changeSidebar = (newElement: HTMLElement) => { - const { listenOpen } = require('../Files/File Operation/open'); //eslint-disable-line const sidebarElement = document.body.querySelector('.sidebar'); sidebarElement.parentElement.replaceChild(newElement, sidebarElement); updateTheme(); - listenOpen( - document - .querySelector('.sidebar-nav') - .querySelectorAll('[data-listenOpen]') - ); // Listen to open the file return; }; @@ -54,7 +48,7 @@ const createSidebar = (): void => { } catch (_) { isdir = true; } - favoritesElement += `Xplorer -
- ${getFavoritesElement(_favorites)} - ${drivesElement} -
-
-
- Setting icon - ${Translate( - 'Settings' - )} -
-
`; + const sidebarNavElement = document.querySelector('#sidebar-nav') as HTMLDivElement; + sidebarNavElement.innerHTML = ` + ${getFavoritesElement(_favorites)} + ${drivesElement} + ` + + const sidebarElement = document.querySelector('.sidebar') as HTMLDivElement; + sidebarElement.insertAdjacentHTML( + 'beforeend', + `
+
+ Setting icon + + + ${Translate('Settings')} + +
+
` + ); // Collapse section - sidebarElement - .querySelectorAll('.sidebar-nav-item-dropdown-btn') + sidebarElement.querySelectorAll('.sidebar-nav-item-dropdown-btn') .forEach((btn) => { btn.addEventListener('click', (e) => { let sidebarNavItem = (e.target as Element).parentNode; @@ -221,9 +213,6 @@ const createSidebar = (): void => { if (_prevDrives === undefined) _prevDrives = _drives; else { if (_drives !== _prevDrives) { - const { - listenOpen, - } = require('../Files/File Operation/open'); //eslint-disable-line const _newElement = document.createElement('div'); _newElement.innerHTML = _drives.trim(); document @@ -233,11 +222,6 @@ const createSidebar = (): void => { document.getElementById('sidebar-drives') ); updateTheme(); - listenOpen( - document - .getElementById('sidebar-drives') - .querySelectorAll('[data-listenOpen]') - ); document.body .querySelector('.sidebar') .querySelectorAll('.drive-item') diff --git a/src/Components/Layout/windowManager.ts b/src/Components/Layout/windowManager.ts index 1ec67d1c..cf7592bb 100644 --- a/src/Components/Layout/windowManager.ts +++ b/src/Components/Layout/windowManager.ts @@ -1,7 +1,6 @@ import { open } from '../Files/File Operation/open'; import storage from 'electron-json-storage-sync'; import { BrowserWindow } from '@electron/remote'; -import createSidebar from './sidebar'; import { closePreviewFile } from '../Files/File Preview/preview'; import windowGUID from '../Constants/windowGUID'; @@ -9,9 +8,8 @@ import windowGUID from '../Constants/windowGUID'; * Reload the page * @returns {void} */ -const reload = async (): Promise => { +const reload = (): void => { const tabs = storage.get(`tabs-${windowGUID}`)?.data; - await createSidebar(); open(tabs.tabs[tabs.focus].position); closePreviewFile(); document.querySelector('.properties').style.animation = diff --git a/src/Components/Recent/recent.ts b/src/Components/Recent/recent.ts index e7b191b7..6033f3bb 100644 --- a/src/Components/Recent/recent.ts +++ b/src/Components/Recent/recent.ts @@ -12,7 +12,6 @@ import { SelectListener } from '../Files/File Operation/select'; * @returns {Promise} */ const Recent = async (): Promise => { - const { listenOpen } = require('../Files/File Operation/open'); //eslint-disable-line startLoading(); // Preference data const layout = @@ -71,7 +70,6 @@ const Recent = async (): Promise => { break; } fileGrid.setAttribute('draggable', 'true'); - fileGrid.setAttribute('data-listenOpen', ''); fileGrid.dataset.path = escape(recent); fileGrid.innerHTML = ` ${preview} @@ -86,7 +84,6 @@ const Recent = async (): Promise => { } updateTheme(); SelectListener(document.querySelectorAll('.file')); - listenOpen(document.querySelectorAll('[data-listenOpen]')); // Listen to open the file LAZY_LOAD(); } stopLoading(); diff --git a/src/Public/index.html b/src/Public/index.html index ae562094..22338726 100644 --- a/src/Public/index.html +++ b/src/Public/index.html @@ -13,7 +13,10 @@
-
+
+ Xplorer + +
@@ -76,7 +79,7 @@
-
+
diff --git a/src/preload.ts b/src/preload.ts index e2ad7880..200c0833 100644 --- a/src/preload.ts +++ b/src/preload.ts @@ -4,7 +4,6 @@ import { ipcRenderer, webFrame } from 'electron'; import createSidebar from './Components/Layout/sidebar'; import { windowManager } from './Components/Layout/windowManager'; import Home from './Components/Layout/home'; -import { listenOpen, open } from './Components/Files/File Operation/open'; import { ContextMenu } from './Components/ContextMenu/contextMenu'; import { createNewTab, Tab } from './Components/Layout/tab'; import { toggleHiddenFiles } from './Components/Functions/toggleHiddenFiles'; @@ -47,7 +46,6 @@ document.addEventListener('DOMContentLoaded', async () => { let homeExecuted = false; // only execute home once if (!homeExecuted) { Home(() => { - listenOpen(document.querySelectorAll('[data-listenOpen]')); // Listen to open the file SelectListener(document.querySelectorAll('.file')); homeExecuted = true; });