`; - } - return; + for (let index = 0; index < menu.length; index++) { + const section = menu[index]; + for (let i = 0; i < section.length; i++) { + const item = section[i]; + if (item.visible || item.visible === undefined) { + const menu = document.createElement("span"); + menu.classList.add("contextmenu-item"); + + if (item.icon) { + if (item.shortcut) + menu.innerHTML = `
"; + } + return; }; /** @@ -105,131 +105,131 @@ const MenuToElements = async (menu: contextMenuItem[][]): Promise
${await Translate(platform === 'linux' ? 'Pendrives' : 'Drives')}
` : ''; // Element Result - for (const drive of drives) { - const driveName = drive.mount_point.split('/')[drive.mount_point.split('/').length - 1]; // Get name of drive - result += ` + let result = drives.length ? `${await Translate(platform === "linux" ? "Pendrives" : "Drives")}
` : ""; // Element Result + for (const drive of drives) { + const driveName = drive.mount_point.split("/")[drive.mount_point.split("/").length - 1]; // Get name of drive + result += `
- })
+ 
`;
- }
- return result;
+ }
+ return result;
};
/**
@@ -52,15 +52,14 @@ const drivesToElements = async (drives: Drive[]): Promise
${
- drive.name ?? drive.disk_type
- ? `
${drive.name && /[^?]/.test(drive.name) ? drive.name : drive.disk_type} (${driveName})
` //eslint-disable-line - : `${driveName}
` - } -
-
${formatBytes(drive.available_space)} ${await Translate('free of')} ${formatBytes(drive.total_space)}
+ drive.name ?? drive.disk_type + ? `${drive.name && /[^?]/.test(drive.name) ? drive.name : drive.disk_type} (${driveName})
` //eslint-disable-line + : `${driveName}
` + } +
+
${formatBytes(drive.available_space)} ${await Translate("free of")} ${formatBytes(drive.total_space)}
\n` +
- ` 
\n` +
- `
\n` +
- ` \n` +
- ``;
- }
- const sidebar = await Storage.get('sidebar');
- const driveList = driveElement.querySelector('.sidebar-nav-list');
- driveList.innerHTML = content;
- if (sidebar?.hideSection?.drives) {
- const sidebarCollapseClass = 'sidebar-nav-dropdown-collapsed';
- driveElement.classList.add(sidebarCollapseClass);
- }
+ const drives = driveInfo.DRIVES;
+ const isWin32 = platform === "win32";
+ const driveElement = document.querySelector\n \n
\n \n`;
+ }
+ const sidebar = await Storage.get("sidebar");
+ const driveList = driveElement.querySelector(".sidebar-nav-list");
+ driveList.innerHTML = content;
+ if (sidebar?.hideSection?.drives) {
+ const sidebarCollapseClass = "sidebar-nav-dropdown-collapsed";
+ driveElement.classList.add(sidebarCollapseClass);
+ }
};
/**
@@ -109,21 +104,21 @@ const writeSidebarDriveItems = async (): Promise${await Translate('Favorites')}
`; - const defaultFavoritesList = (await defaultFavorites()).map((favorite) => favorite.name); - for (const favorite of favorites) { - if (!favorite.path) continue; - if (favorite.path === 'xplorer://Home') continue; - const fileData = new FileAPI(favorite.path); - const exists = await fileData.exists(); - if (!exists && !(await isDefaultFavorite(favorite.path))) continue; - let icon = favorite.icon; - if (!icon) { - if (defaultFavoritesList.indexOf(favorite.name) === -1) { - const isdir = await new DirectoryAPI(favorite.path).isDir(); - icon = await fileThumbnail(exists ? favorite.path : favorite.name, isdir ? 'folder' : 'file', false); - } else { - icon = await fileThumbnail(favorite.name.toLowerCase(), 'folder', false); - } - } - result += `${await Translate("Favorites")}`;
+ const defaultFavoritesList = (await defaultFavorites()).map((favorite) => favorite.name);
+ for (const favorite of favorites) {
+ if (!favorite.path) continue;
+ if (favorite.path === "xplorer://Home") continue;
+ const fileData = new FileAPI(favorite.path);
+ const exists = await fileData.exists();
+ if (!exists && !(await isDefaultFavorite(favorite.path))) continue;
+ let icon = favorite.icon;
+ if (!icon) {
+ if (defaultFavoritesList.indexOf(favorite.name) === -1) {
+ const isdir = await new DirectoryAPI(favorite.path).isDir();
+ icon = await fileThumbnail(exists ? favorite.path : favorite.name, isdir ? "folder" : "file", false);
+ } else {
+ icon = await fileThumbnail(favorite.name.toLowerCase(), "folder", false);
+ }
+ }
+ result += `, path: string) => void;
diff --git a/src/Components/File/GridFile.tsx b/src/Components/File/GridFile.tsx
index 62b523f8..8e424ae0 100644
--- a/src/Components/File/GridFile.tsx
+++ b/src/Components/File/GridFile.tsx
@@ -1,5 +1,5 @@
-import React, { MouseEvent } from "react";
-import FileMetaData from "../../Typings/fileMetaData";
+import React, { type MouseEvent } from "react";
+import type FileMetaData from "../../Typings/fileMetaData";
import { ThemedButton } from "../Theme";
export interface IGridFileProps {
diff --git a/src/Components/File/index.tsx b/src/Components/File/index.tsx
index 2daed9ef..53498afc 100644
--- a/src/Components/File/index.tsx
+++ b/src/Components/File/index.tsx
@@ -1,14 +1,11 @@
-import React, { MouseEvent } from "react";
+import React, { type MouseEvent } from "react";
import { useDispatch, useSelector } from "react-redux";
-import GridFile from "./GridFile";
import DetailFile from "./DetailFile";
+import GridFile from "./GridFile";
import { getStandardPath } from "../../Helpers/paths";
-import { openFileRequest, openFilePreview } from "../../Store/ActionCreators/FilesActionCreators";
-import { setActiveTab, updateTab } from "../../Store/ActionCreators/TabActionCreators";
-import { IAppState } from "../../Store/Reducers";
-import FileMetaData from "../../Typings/fileMetaData";
+import { openFilePreview, openFileRequest } from "../../Store/ActionCreators/FilesActionCreators";
import { updateSelection } from "../../Store/ActionCreators/SelectionActionCreators";
import { sortFiles } from "../MainView";
@@ -60,7 +57,13 @@ export const File = ({ mode, metadata }: IFileProps): JSX.Element => {
name: filePath.split("\\").pop() || "",
}),
);
- dispatch(setActiveTab({ name: filePath.split("\\").pop() || "", path: getStandardPath(filePath), id: activeTab.id }));
+ dispatch(
+ setActiveTab({
+ name: filePath.split("\\").pop() || "",
+ path: getStandardPath(filePath),
+ id: activeTab.id,
+ }),
+ );
};
switch (mode) {
diff --git a/src/Components/Files/File Operation/copy.ts b/src/Components/Files/File Operation/copy.ts
index 0418f049..aefa4799 100644
--- a/src/Components/Files/File Operation/copy.ts
+++ b/src/Components/Files/File Operation/copy.ts
@@ -1,4 +1,4 @@
-import Storage from '../../../Service/storage';
+import Storage from "../../../Service/storage";
/**
* Copy (a) file/s
*
@@ -6,7 +6,7 @@ import Storage from '../../../Service/storage';
* @returns {void}
*/
const Copy = (files: Array): void => {
- Storage.set('clipboard', { command: 'cp', files: files });
+ Storage.set("clipboard", { command: "cp", files: files });
};
export default Copy;
diff --git a/src/Components/Files/File Operation/cut.ts b/src/Components/Files/File Operation/cut.ts
index 6228221d..816dd245 100644
--- a/src/Components/Files/File Operation/cut.ts
+++ b/src/Components/Files/File Operation/cut.ts
@@ -1,4 +1,4 @@
-import Storage from '../../../Service/storage';
+import Storage from "../../../Service/storage";
/**
* Cut (a) file/s
*
@@ -6,25 +6,26 @@ import Storage from '../../../Service/storage';
* @returns {any}
*/
const Cut = (files: Array): void => {
- Storage.set('clipboard', { command: 'cut', files: files });
- for (const file of files) {
- document.querySelector(`.file[data-path="${encodeURI(file)}"]`).classList.add('cut');
- }
+ Storage.set("clipboard", { command: "cut", files: files });
+ for (const file of files) {
+ document.querySelector(`.file[data-path="${encodeURI(file)}"]`).classList.add("cut");
+ }
- (async function detectClipboardChange() {
- let n: NodeJS.Timeout; //eslint-disable-line
- if ((await Storage.get('clipboard')).files !== files) {
- global.clearTimeout(n);
- document.querySelectorAll('.file.cut').forEach((file) => {
- if (files.indexOf(decodeURI(file.dataset.path)) !== -1) {
- file.classList.remove('cut');
- }
- });
- return;
- }
- n = setTimeout(detectClipboardChange, 100);
- })();
- return;
+ (async function detectClipboardChange() {
+ // biome-ignore lint/style/useConst: Recursively assigned
+ let n: NodeJS.Timeout; //eslint-disable-line
+ if ((await Storage.get("clipboard")).files !== files) {
+ global.clearTimeout(n);
+ document.querySelectorAll(".file.cut").forEach((file) => {
+ if (files.indexOf(decodeURI(file.dataset.path)) !== -1) {
+ file.classList.remove("cut");
+ }
+ });
+ return;
+ }
+ n = setTimeout(detectClipboardChange, 100);
+ })();
+ return;
};
export default Cut;
diff --git a/src/Components/Files/File Operation/location.ts b/src/Components/Files/File Operation/location.ts
index bf5d0ca3..2d5fcd4d 100644
--- a/src/Components/Files/File Operation/location.ts
+++ b/src/Components/Files/File Operation/location.ts
@@ -1,4 +1,4 @@
-import { writeTextToClipboard } from '../../../Service/clipboard';
+import { writeTextToClipboard } from "../../../Service/clipboard";
/**
* Copy file location from file element into clipborad
@@ -6,8 +6,8 @@ import { writeTextToClipboard } from '../../../Service/clipboard';
* @returns {void}
*/
const copyLocation = (element: HTMLElement): void => {
- const path = decodeURI(element.dataset.path);
- writeTextToClipboard(path);
+ const path = decodeURI(element.dataset.path);
+ writeTextToClipboard(path);
};
export default copyLocation;
diff --git a/src/Components/Files/File Operation/new.ts b/src/Components/Files/File Operation/new.ts
index 1e44bcdb..8489e202 100644
--- a/src/Components/Files/File Operation/new.ts
+++ b/src/Components/Files/File Operation/new.ts
@@ -1,7 +1,7 @@
-import { OperationLog } from '../../Functions/log';
-import focusingPath from '../../Functions/focusingPath';
-import FileAPI from '../../../Service/files';
-import PromptError from '../../Prompt/error';
+import FileAPI from "../../../Service/files";
+import focusingPath from "../../Functions/focusingPath";
+import { OperationLog } from "../../Functions/log";
+import PromptError from "../../Prompt/error";
/**
* Create a new file
@@ -11,24 +11,24 @@ import PromptError from '../../Prompt/error';
* @returns {Promise}
*/
const NewFile = async (fileName: string, parentDir?: string, writeLog = true): Promise => {
- if (!parentDir) parentDir = await focusingPath();
- const newFile = new FileAPI(fileName, parentDir);
+ if (!parentDir) parentDir = await focusingPath();
+ const newFile = new FileAPI(fileName, parentDir);
- if (await newFile.exists()) {
- PromptError('Error creating file', `Failed to create file ${newFile.fileName}: File already existed`);
- } else {
- try {
- await newFile.createFile();
- } catch (err) {
- PromptError('Error creating file', `Failed to create file ${newFile.fileName}: Something went wrong (${err})`);
- }
+ if (await newFile.exists()) {
+ PromptError("Error creating file", `Failed to create file ${newFile.fileName}: File already existed`);
+ } else {
+ try {
+ await newFile.createFile();
+ } catch (err) {
+ PromptError("Error creating file", `Failed to create file ${newFile.fileName}: Something went wrong (${err})`);
+ }
- if (writeLog) {
- if (typeof newFile.fileName === 'string') {
- OperationLog('newfile', null, newFile.fileName);
- }
- }
- }
+ if (writeLog) {
+ if (typeof newFile.fileName === "string") {
+ OperationLog("newfile", null, newFile.fileName);
+ }
+ }
+ }
};
export default NewFile;
diff --git a/src/Components/Files/File Operation/paste.ts b/src/Components/Files/File Operation/paste.ts
index ee62fdf4..e84ceb86 100644
--- a/src/Components/Files/File Operation/paste.ts
+++ b/src/Components/Files/File Operation/paste.ts
@@ -1,81 +1,80 @@
-import Storage from '../../../Service/storage';
-import OperationAPI from '../../../Service/operation';
-import DirectoryAPI from '../../../Service/directory';
-import joinPath from '../../Functions/path/joinPath';
-import getBasename from '../../Functions/path/basename';
-import getDirname from '../../Functions/path/dirname';
-import NormalizeSlash from '../../Functions/path/normalizeSlash';
-import FileAPI from '../../../Service/files';
-import ConfirmDialog from '../../Prompt/confirm';
-import normalizeSlash from '../../Functions/path/normalizeSlash';
-import { OperationLog } from '../../Functions/log';
+import DirectoryAPI from "../../../Service/directory";
+import FileAPI from "../../../Service/files";
+import OperationAPI from "../../../Service/operation";
+import Storage from "../../../Service/storage";
+import { OperationLog } from "../../Functions/log";
+import getBasename from "../../Functions/path/basename";
+import getDirname from "../../Functions/path/dirname";
+import joinPath from "../../Functions/path/joinPath";
+import NormalizeSlash from "../../Functions/path/normalizeSlash";
+import normalizeSlash from "../../Functions/path/normalizeSlash";
+import ConfirmDialog from "../../Prompt/confirm";
const cpy = async (src: string, dest: string) => {
- dest = joinPath(dest, getBasename(src));
- if (NormalizeSlash(getDirname(src)) === NormalizeSlash(dest)) {
- dest += ' - COPY';
- }
- if (await new FileAPI(dest).exists()) {
- if (!(await ConfirmDialog('Target file exists', 'Target directory with the same file name exists, do you want to overwrite it?', 'No')))
- return;
- }
- new OperationAPI(src, dest).copyFile();
+ dest = joinPath(dest, getBasename(src));
+ if (NormalizeSlash(getDirname(src)) === NormalizeSlash(dest)) {
+ dest += " - COPY";
+ }
+ if (await new FileAPI(dest).exists()) {
+ if (!(await ConfirmDialog("Target file exists", "Target directory with the same file name exists, do you want to overwrite it?", "No")))
+ return;
+ }
+ new OperationAPI(src, dest).copyFile();
};
const Paste = async (target: string): Promise => {
- const clipboard = await Storage.get('clipboard');
+ const clipboard = await Storage.get("clipboard");
- const recuriveCopy = async (_path: string, _target: string, firstRecursion = false) => {
- let useCopySuffix = false;
- if (firstRecursion && normalizeSlash(getDirname(_path)) === normalizeSlash(_target)) {
- useCopySuffix = true;
- }
- const subdirInfo = new DirectoryAPI(normalizeSlash(_path));
- if (await subdirInfo.isDir()) {
- let _dest = joinPath(_target, getBasename(_path));
- if (useCopySuffix) _dest += '- COPY';
- await new DirectoryAPI(_dest).mkdir();
- (await subdirInfo.getFiles()).files.forEach(async (subsubdir) => {
- await recuriveCopy(subsubdir.file_path, _dest);
- });
- } else {
- cpy(_path, _target);
- }
- };
- for (const file of clipboard.files) {
- const dirInfo = new DirectoryAPI(file);
- const dest = joinPath(target, getBasename(file));
- switch (clipboard.command) {
- case 'cp':
- if (await dirInfo.isDir()) {
- await recuriveCopy(file, target, true);
- } else {
- cpy(file, target);
- }
- break;
- case 'cut':
- if (await new DirectoryAPI(dest).exists()) {
- if (
- !(await ConfirmDialog(
- 'Target file exists',
- 'Target directory with the same file/dir name exists, do you want to overwrite it?',
- 'No'
- ))
- )
- return;
- else {
- await new OperationAPI(dest).unlink();
- }
- }
- await new OperationAPI(file, dest).cut();
- break;
- }
- }
- switch (clipboard.command) {
- case 'cp':
- OperationLog('copy', clipboard.files, target);
- break;
- case 'cut':
- OperationLog('cut', clipboard.files, target);
- break;
- }
+ const recuriveCopy = async (_path: string, _target: string, firstRecursion = false) => {
+ let useCopySuffix = false;
+ if (firstRecursion && normalizeSlash(getDirname(_path)) === normalizeSlash(_target)) {
+ useCopySuffix = true;
+ }
+ const subdirInfo = new DirectoryAPI(normalizeSlash(_path));
+ if (await subdirInfo.isDir()) {
+ let _dest = joinPath(_target, getBasename(_path));
+ if (useCopySuffix) _dest += "- COPY";
+ await new DirectoryAPI(_dest).mkdir();
+ (await subdirInfo.getFiles()).files.forEach(async (subsubdir) => {
+ await recuriveCopy(subsubdir.file_path, _dest);
+ });
+ } else {
+ cpy(_path, _target);
+ }
+ };
+ for (const file of clipboard.files) {
+ const dirInfo = new DirectoryAPI(file);
+ const dest = joinPath(target, getBasename(file));
+ switch (clipboard.command) {
+ case "cp":
+ if (await dirInfo.isDir()) {
+ await recuriveCopy(file, target, true);
+ } else {
+ cpy(file, target);
+ }
+ break;
+ case "cut":
+ if (await new DirectoryAPI(dest).exists()) {
+ if (
+ !(await ConfirmDialog(
+ "Target file exists",
+ "Target directory with the same file/dir name exists, do you want to overwrite it?",
+ "No",
+ ))
+ )
+ return;
+
+ await new OperationAPI(dest).unlink();
+ }
+ await new OperationAPI(file, dest).cut();
+ break;
+ }
+ }
+ switch (clipboard.command) {
+ case "cp":
+ OperationLog("copy", clipboard.files, target);
+ break;
+ case "cut":
+ OperationLog("cut", clipboard.files, target);
+ break;
+ }
};
export default Paste;
diff --git a/src/Components/Files/File Operation/pin.ts b/src/Components/Files/File Operation/pin.ts
index fc02eec9..d385d014 100644
--- a/src/Components/Files/File Operation/pin.ts
+++ b/src/Components/Files/File Operation/pin.ts
@@ -1,11 +1,11 @@
-import createSidebar from '../../Layout/sidebar';
-import defaultFavorites from '../../Favorites/defaultFavorites';
-import Storage from '../../../Service/storage';
-import basename from '../../Functions/path/basename';
+import Storage from "../../../Service/storage";
+import defaultFavorites from "../../Favorites/defaultFavorites";
+import basename from "../../Functions/path/basename";
+import createSidebar from "../../Layout/sidebar";
interface Favorites {
- name: string;
- path: string;
- icon: string;
+ name: string;
+ path: string;
+ icon: string;
}
/**
@@ -14,18 +14,18 @@ interface Favorites {
* @returns {void}
*/
const Pin = async (filePaths: string[]): Promise => {
- const data = await Storage.get('favorites');
- let favorites = data?.favorites ?? [{ path: 'xplorer://Home', name: 'Home' }, ...(await defaultFavorites())];
- favorites.forEach((v: Favorites) => delete v.icon);
- for (const filePath of filePaths) {
- if (favorites.filter((favorite: Favorites) => favorite.path === filePath).length) {
- favorites = favorites.filter((favorite: Favorites) => favorite.path !== filePath);
- } else {
- favorites.push({ name: basename(filePath), path: filePath });
- }
- }
- Storage.set('favorites', { favorites });
- createSidebar();
+ const data = await Storage.get("favorites");
+ let favorites = data?.favorites ?? [{ path: "xplorer://Home", name: "Home" }, ...(await defaultFavorites())];
+ favorites.forEach((v: Favorites) => delete v.icon);
+ for (const filePath of filePaths) {
+ if (favorites.filter((favorite: Favorites) => favorite.path === filePath).length) {
+ favorites = favorites.filter((favorite: Favorites) => favorite.path !== filePath);
+ } else {
+ favorites.push({ name: basename(filePath), path: filePath });
+ }
+ }
+ Storage.set("favorites", { favorites });
+ createSidebar();
};
export default Pin;
diff --git a/src/Components/Files/File Operation/redo.ts b/src/Components/Files/File Operation/redo.ts
index b9f3070c..4fff770d 100644
--- a/src/Components/Files/File Operation/redo.ts
+++ b/src/Components/Files/File Operation/redo.ts
@@ -1,68 +1,67 @@
-import Copy from './copy';
-import Paste from './paste';
-import windowName from '../../../Service/window';
-import Storage from '../../../Service/storage';
-import NewFile from './new';
-import getBasename from '../../Functions/path/basename';
-import getDirname from '../../Functions/path/dirname';
-import NewFolder from '../../Folder/new';
-import DirectoryAPI from '../../../Service/directory';
-import ConfirmDialog from '../../Prompt/confirm';
-import OperationAPI from '../../../Service/operation';
-import joinPath from '../../Functions/path/joinPath';
-import { Trash } from './trash';
+import DirectoryAPI from "../../../Service/directory";
+import OperationAPI from "../../../Service/operation";
+import Storage from "../../../Service/storage";
+import windowName from "../../../Service/window";
+import NewFolder from "../../Folder/new";
+import getBasename from "../../Functions/path/basename";
+import getDirname from "../../Functions/path/dirname";
+import joinPath from "../../Functions/path/joinPath";
+import ConfirmDialog from "../../Prompt/confirm";
+import Copy from "./copy";
+import NewFile from "./new";
+import Paste from "./paste";
+import { Trash } from "./trash";
/**
* Redo the _undo_ed Operation
* @returns {Promise}
*/
const Redo = async (): Promise => {
- const operationLogs = await Storage.get(`operations-${windowName}`);
- const latestOperation = operationLogs.operations[operationLogs.currentIndex + 1];
- const increaseIndex = () => {
- if (operationLogs.currentIndex + 2 >= operationLogs.operations.length) operationLogs.currentIndex = operationLogs.currentIndex + 1;
- };
- switch (latestOperation.operationType) {
- case 'copy':
- Copy(latestOperation.sources);
- Paste(latestOperation.destination);
- break;
- case 'cut':
- for (const source of latestOperation.sources) {
- const dest = joinPath(latestOperation.destination, getBasename(source));
- if (await new DirectoryAPI(dest).exists()) {
- if (
- !(await ConfirmDialog(
- 'Target file exists',
- 'Target directory with the same file/dir name exists, do you want to overwrite it?',
- 'No'
- ))
- )
- return;
- else {
- await new OperationAPI(dest).unlink();
- }
- }
- await new OperationAPI(source, dest).rename();
- }
- increaseIndex();
- break;
- case 'newfile':
- NewFile(getBasename(latestOperation.destination), getDirname(latestOperation.destination), false);
- increaseIndex();
- break;
- case 'newfolder':
- NewFolder(getBasename(latestOperation.destination), getDirname(latestOperation.destination), false);
- increaseIndex();
- break;
- case 'delete':
- Trash(latestOperation.sources);
- increaseIndex();
- break;
- case 'rename':
- await new OperationAPI(latestOperation.sources, latestOperation.destination).rename();
- increaseIndex();
- break;
- }
- Storage.set(`operations-${windowName}`, operationLogs);
+ const operationLogs = await Storage.get(`operations-${windowName}`);
+ const latestOperation = operationLogs.operations[operationLogs.currentIndex + 1];
+ const increaseIndex = () => {
+ if (operationLogs.currentIndex + 2 >= operationLogs.operations.length) operationLogs.currentIndex = operationLogs.currentIndex + 1;
+ };
+ switch (latestOperation.operationType) {
+ case "copy":
+ Copy(latestOperation.sources);
+ Paste(latestOperation.destination);
+ break;
+ case "cut":
+ for (const source of latestOperation.sources) {
+ const dest = joinPath(latestOperation.destination, getBasename(source));
+ if (await new DirectoryAPI(dest).exists()) {
+ if (
+ !(await ConfirmDialog(
+ "Target file exists",
+ "Target directory with the same file/dir name exists, do you want to overwrite it?",
+ "No",
+ ))
+ )
+ return;
+
+ await new OperationAPI(dest).unlink();
+ }
+ await new OperationAPI(source, dest).rename();
+ }
+ increaseIndex();
+ break;
+ case "newfile":
+ NewFile(getBasename(latestOperation.destination), getDirname(latestOperation.destination), false);
+ increaseIndex();
+ break;
+ case "newfolder":
+ NewFolder(getBasename(latestOperation.destination), getDirname(latestOperation.destination), false);
+ increaseIndex();
+ break;
+ case "delete":
+ Trash(latestOperation.sources);
+ increaseIndex();
+ break;
+ case "rename":
+ await new OperationAPI(latestOperation.sources, latestOperation.destination).rename();
+ increaseIndex();
+ break;
+ }
+ Storage.set(`operations-${windowName}`, operationLogs);
};
export default Redo;
diff --git a/src/Components/Files/File Operation/rename.ts b/src/Components/Files/File Operation/rename.ts
index 09a7f8dd..9c99341c 100644
--- a/src/Components/Files/File Operation/rename.ts
+++ b/src/Components/Files/File Operation/rename.ts
@@ -1,32 +1,32 @@
-import { OperationLog } from '../../Functions/log';
-import focusingPath from '../../Functions/focusingPath';
-import Ask from '../../Prompt/ask';
-import basename from '../../Functions/path/basename';
-import getDirname from '../../Functions/path/dirname';
-import joinPath from '../../Functions/path/joinPath';
-import OperationAPI from '../../../Service/operation';
-import PromptError from '../../Prompt/error';
-import FileAPI from '../../../Service/files';
-import ConfirmDialog from '../../Prompt/confirm';
+import FileAPI from "../../../Service/files";
+import OperationAPI from "../../../Service/operation";
+import focusingPath from "../../Functions/focusingPath";
+import { OperationLog } from "../../Functions/log";
+import basename from "../../Functions/path/basename";
+import getDirname from "../../Functions/path/dirname";
+import joinPath from "../../Functions/path/joinPath";
+import Ask from "../../Prompt/ask";
+import ConfirmDialog from "../../Prompt/confirm";
+import PromptError from "../../Prompt/error";
/**
* Rename file/folder name
* @param {string} path - location of the file/folder
* @returns {void}
*/
const Rename = (filePath: string): void => {
- Ask('Rename', 'New File Name:', { value: basename(filePath) }).then(async (newName: string) => {
- const target = getDirname(newName) === '.' ? joinPath(await focusingPath(), newName) : joinPath(getDirname(filePath), newName);
- if (await new FileAPI(target).exists()) {
- const confirm = await ConfirmDialog('File Exists', 'The new name already exists, do you want to overwrite it?', 'No');
- if (!confirm) return;
- }
- try {
- new OperationAPI(filePath, target).rename();
- } catch (err) {
- PromptError('Error renaming file', `Failed to rename ${filePath} [${err}]`);
- }
- OperationLog('rename', decodeURI(filePath), target);
- });
+ Ask("Rename", "New File Name:", { value: basename(filePath) }).then(async (newName: string) => {
+ const target = getDirname(newName) === "." ? joinPath(await focusingPath(), newName) : joinPath(getDirname(filePath), newName);
+ if (await new FileAPI(target).exists()) {
+ const confirm = await ConfirmDialog("File Exists", "The new name already exists, do you want to overwrite it?", "No");
+ if (!confirm) return;
+ }
+ try {
+ new OperationAPI(filePath, target).rename();
+ } catch (err) {
+ PromptError("Error renaming file", `Failed to rename ${filePath} [${err}]`);
+ }
+ OperationLog("rename", decodeURI(filePath), target);
+ });
};
export default Rename;
diff --git a/src/Components/Files/File Operation/search.ts b/src/Components/Files/File Operation/search.ts
index 2c88a9e6..ea15e48d 100644
--- a/src/Components/Files/File Operation/search.ts
+++ b/src/Components/Files/File Operation/search.ts
@@ -1,20 +1,20 @@
-import Translate from '../../I18n/i18n';
-import focusingPath from '../../Functions/focusingPath';
-import DirectoryAPI from '../../../Service/directory';
-import { startLoading, stopLoading } from '../../Functions/Loading/loading';
-import displayFiles from '../../Open/displayFiles';
-import changePosition from '../../Functions/changePosition';
-import { LOAD_IMAGE } from '../../Functions/lazyLoadingImage';
-import { updateTheme } from '../../Theme/theme';
-import { OpenLog } from '../../Functions/log';
-import { OpenDir } from '../../Open/open';
-import isTauri from '../../../Util/is-tauri';
-import { GET_TAB_ELEMENT } from '../../../Util/constants';
+import DirectoryAPI from "../../../Service/directory";
+import { GET_TAB_ELEMENT } from "../../../Util/constants";
+import isTauri from "../../../Util/is-tauri";
+import { startLoading, stopLoading } from "../../Functions/Loading/loading";
+import changePosition from "../../Functions/changePosition";
+import focusingPath from "../../Functions/focusingPath";
+import { LOAD_IMAGE } from "../../Functions/lazyLoadingImage";
+import { OpenLog } from "../../Functions/log";
+import Translate from "../../I18n/i18n";
+import displayFiles from "../../Open/displayFiles";
+import { OpenDir } from "../../Open/open";
+import { updateTheme } from "../../Theme/theme";
let being_watch: string;
const stopSearchingProcess = async (): Promise => {
- being_watch = null;
- if (await new DirectoryAPI('').stopSearching()) stopLoading();
+ being_watch = null;
+ if (await new DirectoryAPI("").stopSearching()) stopLoading();
};
/**
@@ -24,33 +24,33 @@ const stopSearchingProcess = async (): Promise => {
* @returns {Promise}
*/
const processSearch = async (to_search: string, search_in: string): Promise => {
- const MAIN_ELEMENT = GET_TAB_ELEMENT();
- MAIN_ELEMENT.innerHTML = '';
- if (!to_search.length) OpenDir(search_in);
- startLoading();
- const search_path = `Search: [[${to_search}]] inside [[${search_in}]]`;
- changePosition(search_path);
- let foundSomething = false;
+ const MAIN_ELEMENT = GET_TAB_ELEMENT();
+ MAIN_ELEMENT.innerHTML = "";
+ if (!to_search.length) OpenDir(search_in);
+ startLoading();
+ const search_path = `Search: [[${to_search}]] inside [[${search_in}]]`;
+ changePosition(search_path);
+ let foundSomething = false;
- const finalResult = await new DirectoryAPI(search_in).search(to_search, async (partialFound) => {
- let _el = document.createElement('div') as HTMLElement;
- foundSomething = true;
- if (document.querySelector('.path-navigator').value.startsWith('Search: '))
- _el = await displayFiles(partialFound, search_path, _el, null, true);
- for (const childEl of _el.children) {
- MAIN_ELEMENT.appendChild(childEl);
- }
- });
- const _el = document.createElement('div');
- MAIN_ELEMENT.appendChild(await displayFiles(finalResult, search_path, _el, null, true));
- if (!finalResult.length && !foundSomething) {
- MAIN_ELEMENT.classList.add('empty-dir-notification');
- MAIN_ELEMENT.innerText = "Can't find specified query";
- }
- stopLoading();
- updateTheme('grid');
- LOAD_IMAGE();
- OpenLog(search_path);
+ const finalResult = await new DirectoryAPI(search_in).search(to_search, async (partialFound) => {
+ let _el = document.createElement("div") as HTMLElement;
+ foundSomething = true;
+ if (document.querySelector(".path-navigator").value.startsWith("Search: "))
+ _el = await displayFiles(partialFound, search_path, _el, null, true);
+ for (const childEl of _el.children) {
+ MAIN_ELEMENT.appendChild(childEl);
+ }
+ });
+ const _el = document.createElement("div");
+ MAIN_ELEMENT.appendChild(await displayFiles(finalResult, search_path, _el, null, true));
+ if (!finalResult.length && !foundSomething) {
+ MAIN_ELEMENT.classList.add("empty-dir-notification");
+ MAIN_ELEMENT.innerText = "Can't find specified query";
+ }
+ stopLoading();
+ updateTheme("grid");
+ LOAD_IMAGE();
+ OpenLog(search_path);
};
/**
@@ -58,57 +58,58 @@ const processSearch = async (to_search: string, search_in: string): Promise}
*/
const getFocusingPath = async (): Promise => {
- let _focusingPath = await focusingPath();
- if (_focusingPath.startsWith('Search: ')) {
- const splitByInsideKeyword = _focusingPath.split(' inside ');
- if (splitByInsideKeyword.length === 2) {
- _focusingPath = splitByInsideKeyword[1].slice(2, -2);
- } else {
- for (let i = 0; i < splitByInsideKeyword.length; i++) {
- if (splitByInsideKeyword[i]?.endsWith(']]') && splitByInsideKeyword[i + 1]?.startsWith('[[')) {
- _focusingPath = splitByInsideKeyword
- .slice(i + 1)
- .join(' inside ')
- .slice(2, -2);
- }
- }
- }
- }
- return _focusingPath;
+ let _focusingPath = await focusingPath();
+ if (_focusingPath.startsWith("Search: ")) {
+ const splitByInsideKeyword = _focusingPath.split(" inside ");
+ if (splitByInsideKeyword.length === 2) {
+ _focusingPath = splitByInsideKeyword[1].slice(2, -2);
+ } else {
+ for (let i = 0; i < splitByInsideKeyword.length; i++) {
+ if (splitByInsideKeyword[i]?.endsWith("]]") && splitByInsideKeyword[i + 1]?.startsWith("[[")) {
+ _focusingPath = splitByInsideKeyword
+ .slice(i + 1)
+ .join(" inside ")
+ .slice(2, -2);
+ }
+ }
+ }
+ }
+ return _focusingPath;
};
/**
* Initialize search feature in Xplorer
* @returns {Promise}
*/
const Search = async (): Promise => {
- let listener: ReturnType;
- const searchElement = document.querySelector('.search-bar');
- if (!isTauri) {
- searchElement.setAttribute('disabled', '');
- }
- searchElement.placeholder = `🔎 ${await Translate('Search')}`;
- searchElement.addEventListener('keydown', async (e: KeyboardEvent) => {
- clearTimeout(listener);
- if (e.ctrlKey && e.key === 'f') {
- return;
- } else if (e.key === 'Enter') {
- const value = (e.target as HTMLInputElement).value;
- if (value !== being_watch) {
- processSearch(value, await getFocusingPath());
- being_watch = value;
- }
- } else {
- listener = setTimeout(async () => {
- const value = (e.target as HTMLInputElement).value;
- if (value === '') {
- OpenDir(await getFocusingPath());
- } else if (value !== being_watch) {
- processSearch(value, await getFocusingPath());
- being_watch = value;
- }
- }, 1000);
- }
- });
+ let listener: ReturnType;
+ const searchElement = document.querySelector(".search-bar");
+ if (!isTauri) {
+ searchElement.setAttribute("disabled", "");
+ }
+ searchElement.placeholder = `🔎 ${await Translate("Search")}`;
+ searchElement.addEventListener("keydown", async (e: KeyboardEvent) => {
+ clearTimeout(listener);
+ if (e.ctrlKey && e.key === "f") {
+ return;
+ }
+ if (e.key === "Enter") {
+ const value = (e.target as HTMLInputElement).value;
+ if (value !== being_watch) {
+ processSearch(value, await getFocusingPath());
+ being_watch = value;
+ }
+ } else {
+ listener = setTimeout(async () => {
+ const value = (e.target as HTMLInputElement).value;
+ if (value === "") {
+ OpenDir(await getFocusingPath());
+ } else if (value !== being_watch) {
+ processSearch(value, await getFocusingPath());
+ being_watch = value;
+ }
+ }, 1000);
+ }
+ });
};
export default Search;
export { processSearch, stopSearchingProcess };
diff --git a/src/Components/Files/File Operation/select.ts b/src/Components/Files/File Operation/select.ts
index 57a1abc9..3771ebff 100644
--- a/src/Components/Files/File Operation/select.ts
+++ b/src/Components/Files/File Operation/select.ts
@@ -1,19 +1,19 @@
-import { elementClassNameContains } from '../../Functions/elementClassNameContains';
-import Storage from '../../../Service/storage';
-import { UpdateInfo } from '../../Layout/infobar';
-import FileAPI from '../../../Service/files';
-import formatBytes from '../../Functions/filesize';
-import Preview from '../File Preview/preview';
-import { ensureElementInViewPort } from '../../Functions/viewport';
-import { MAIN_BOX_ELEMENT } from '../../../Util/constants';
-import { direction } from '../../../Typings/select';
+import FileAPI from "../../../Service/files";
+import Storage from "../../../Service/storage";
+import type { direction } from "../../../Typings/select";
+import { MAIN_BOX_ELEMENT } from "../../../Util/constants";
+import { elementClassNameContains } from "../../Functions/elementClassNameContains";
+import formatBytes from "../../Functions/filesize";
+import { ensureElementInViewPort } from "../../Functions/viewport";
+import { UpdateInfo } from "../../Layout/infobar";
+import Preview from "../File Preview/preview";
let latestSelected: HTMLElement;
let latestShiftSelected: HTMLElement;
//Mouse drag selection vars
class Point {
- private _x: number;
+ private _x: number;
private _y: number;
constructor(x = 0, y = 0) {
@@ -21,48 +21,63 @@ class Point {
this._y = y;
}
- public get x(): number { return this._x; }
- public get y(): number { return this._y; }
+ public get x(): number {
+ return this._x;
+ }
+ public get y(): number {
+ return this._y;
+ }
- public set x(newX: number) { this._x = newX; }
- public set y(newY: number) { this._y = newY; }
+ public set x(newX: number) {
+ this._x = newX;
+ }
+ public set y(newY: number) {
+ this._y = newY;
+ }
public Set(x: number, y: number) {
this.x = x;
this.y = y;
}
- public delta(target: Point) {
- return new Point(this.x - target.x, this.y - target.y);
- }
+ public delta(target: Point) {
+ return new Point(this.x - target.x, this.y - target.y);
+ }
}
-let selectingDiv: HTMLElement = document.createElement('div');
-selectingDiv.setAttribute('style', 'position: absolute; background-color: rgba(100, 100, 255, 0.2); z-index: 100;');
-let isSelecting: boolean = false;
+const selectingDiv: HTMLElement = document.createElement("div");
+selectingDiv.setAttribute("style", "position: absolute; background-color: rgba(100, 100, 255, 0.2); z-index: 100;");
+let isSelecting = false;
let selectingOrigin: Point;
let mainBoxBounds: DOMRect;
let selected = 0;
-const selectingDivBounds = { left: 0, top: 0, right: 0, bottom: 0, height: 0, width: 0 };
+const selectingDivBounds = {
+ left: 0,
+ top: 0,
+ right: 0,
+ bottom: 0,
+ height: 0,
+ width: 0,
+};
/**
* Call this function whenever user selected (a) file grid(s).
* @returns {Promise}
*/
const ChangeSelectedEvent = async (): Promise => {
- const selectedFileGrid = document.querySelectorAll('.file-grid.selected');
- if (!selectedFileGrid.length) UpdateInfo('selected-files', '');
- else {
- const selectedFilePaths = Array.from(selectedFileGrid).map((element) => decodeURI((element as HTMLElement).dataset.path));
- const total_sizes = await new FileAPI(selectedFilePaths).calculateFilesSize();
- UpdateInfo('selected-files', `${selectedFileGrid.length} file${selectedFileGrid.length > 1 ? 's' : ''} selected ${formatBytes(total_sizes)}`);
- if (
- selectedFilePaths.length === 1 &&
- document.querySelectorAll('.preview').length > 0 &&
- ((await Storage.get('preference'))?.automaticallyChangePreviewFile ?? true)
- ) {
- Preview(selectedFilePaths[0]);
- }
- }
+ const selectedFileGrid = document.querySelectorAll(".file-grid.selected");
+ if (!selectedFileGrid.length) UpdateInfo("selected-files", "");
+ else {
+ const selectedFilePaths = Array.from(selectedFileGrid).map((element) => decodeURI((element as HTMLElement).dataset.path));
+ const total_sizes = await new FileAPI(selectedFilePaths).calculateFilesSize();
+ UpdateInfo("selected-files", `${selectedFileGrid.length} file${selectedFileGrid.length > 1 ? "s" : ""} selected ${formatBytes(total_sizes)}`);
+ if (
+ selectedFilePaths.length === 1 &&
+ document.querySelectorAll(".preview").length > 0 &&
+ ((await Storage.get("preference"))?.automaticallyChangePreviewFile ?? true)
+ ) {
+ Preview(selectedFilePaths[0]);
+ }
+ }
};
/**
* Select a file grid...
@@ -78,32 +93,32 @@ const ChangeSelectedEvent = async (): Promise => {
* @returns {void}
*/
const Select = (element: HTMLElement, ctrl: boolean, shift: boolean): void => {
- if (!ctrl && !shift) unselectAllSelected();
- // add 'selected' class if element classlist does not contain it...
- if (!element.classList.contains('selected')) element.classList.add('selected');
- // ...Otherwise, remove it
- else element.classList.remove('selected');
- if (shift && latestSelected) {
- let start = false;
- for (const _element of document.querySelectorAll('.file')) {
- if (start) _element.classList.add('selected');
- else _element.classList.remove('selected');
- if (_element === latestSelected) {
- start = !start;
- _element.classList.add('selected');
- } else if (_element === element) {
- start = !start;
- _element.classList.add('selected');
- }
- }
- } else {
- const { getSelectedAllStatus } = require('../../Shortcut/shortcut'); //eslint-disable-line
- if (getSelectedAllStatus() && ctrl) return;
- latestSelected = element;
- latestShiftSelected = element;
- }
- ChangeSelectedEvent();
- ensureElementInViewPort(element);
+ if (!ctrl && !shift) unselectAllSelected();
+ // add 'selected' class if element classlist does not contain it...
+ if (!element.classList.contains("selected")) element.classList.add("selected");
+ // ...Otherwise, remove it
+ else element.classList.remove("selected");
+ if (shift && latestSelected) {
+ let start = false;
+ for (const _element of document.querySelectorAll(".file")) {
+ if (start) _element.classList.add("selected");
+ else _element.classList.remove("selected");
+ if (_element === latestSelected) {
+ start = !start;
+ _element.classList.add("selected");
+ } else if (_element === element) {
+ start = !start;
+ _element.classList.add("selected");
+ }
+ }
+ } else {
+ const { getSelectedAllStatus } = require("../../Shortcut/shortcut"); //eslint-disable-line
+ if (getSelectedAllStatus() && ctrl) return;
+ latestSelected = element;
+ latestShiftSelected = element;
+ }
+ ChangeSelectedEvent();
+ ensureElementInViewPort(element);
};
/**
@@ -111,15 +126,15 @@ const Select = (element: HTMLElement, ctrl: boolean, shift: boolean): void => {
* @returns {Promise}
*/
const selectFirstFile = async (): Promise => {
- const hideHiddenFiles = (await Storage.get('preference'))?.hideHiddenFiles ?? true;
- const firstFileElement = MAIN_BOX_ELEMENT().querySelector(`.file${hideHiddenFiles ? ':not([data-hidden-file])' : ''}`);
- firstFileElement.classList.add('selected');
- ChangeSelectedEvent();
- latestSelected = firstFileElement as HTMLElement;
+ const hideHiddenFiles = (await Storage.get("preference"))?.hideHiddenFiles ?? true;
+ const firstFileElement = MAIN_BOX_ELEMENT().querySelector(`.file${hideHiddenFiles ? ":not([data-hidden-file])" : ""}`);
+ firstFileElement.classList.add("selected");
+ ChangeSelectedEvent();
+ latestSelected = firstFileElement as HTMLElement;
};
const elementIndex = (element: HTMLElement): number => {
- return Array.from(element.parentNode.children).indexOf(element);
+ return Array.from(element.parentNode.children).indexOf(element);
};
/**
@@ -127,191 +142,200 @@ const elementIndex = (element: HTMLElement): number => {
* @returns {void}
*/
const SelectInit = (): void => {
- //Saving the main box element in a variable, better than calling MAIN_BOX_ELEMENT() everytime
- const MAIN_BOX_EL: HTMLElement = MAIN_BOX_ELEMENT();
- mainBoxBounds = MAIN_BOX_EL.getBoundingClientRect();
-
- MAIN_BOX_EL.addEventListener('click', (e) => {
- if (
- !(e.target as HTMLElement).className.split(' ').some(function (c) {
- return /file/.test(c);
- }) &&
- //If user doesn't drag the mouse
- (e.pageX - mainBoxBounds.left == selectingOrigin.x &&
- e.pageY - mainBoxBounds.top == selectingOrigin.y)
- ) {
- unselectAllSelected();
- latestSelected = null;
- latestShiftSelected = null;
- }
- let fileTarget = e.target as HTMLElement;
- while (fileTarget?.classList && !fileTarget.classList.contains('file')) fileTarget = fileTarget.parentNode as HTMLElement;
- if (fileTarget.id === 'workspace' || !fileTarget?.classList?.contains('file')) return;
-
- Select(fileTarget, e.ctrlKey, e.shiftKey);
- });
-
- MAIN_BOX_EL.addEventListener('mousedown', (e) => {
- /// SelectInit is called async, therefore bounds come before full element calculation.
- /// Here is to avoid wrong div placement, but we can find a better way without calling getBoundingClientRect each mousedown
- mainBoxBounds = MAIN_BOX_EL.getBoundingClientRect();
- //Start selection
- isSelecting = true;
- //Save selection starting point
- selectingOrigin = new Point(e.pageX - mainBoxBounds.left, e.pageY - mainBoxBounds.top);
- if (
- !(e.target as HTMLElement).className.split(' ').some(function (c) {
- return /file/.test(c);
- })
- ) {
- MAIN_BOX_EL.prepend(selectingDiv);
- selectingDiv.style.inset = selectingOrigin.y + 'px auto ' + selectingOrigin.x + 'px auto';
- selectingDiv.style.width = selectingDiv.style.height = 'auto';
- }
- });
-
- //Check when mouse is released. On window to catch events outside of main box
- window.addEventListener('mouseup', (e) => {
- if(isSelecting) {
- isSelecting = false;
-
- selectingDiv.style.inset = selectingDiv.style.width = selectingDiv.style.height = 'auto';
-
- selectingDiv.remove();
- }
- });
-
- //Calculates selection div size and position + which files are selected
- MAIN_BOX_EL.addEventListener('mousemove', async(e) => {
- const POSITION = new Point(e.pageX - mainBoxBounds.left, e.pageY - mainBoxBounds.top);
- if(isSelecting) {
- const DIRECTION = await getSelectingDivDirection(selectingOrigin, POSITION);
- let top, right, bottom, left,
- height = Math.abs(selectingOrigin.y - POSITION.y),
- width = Math.abs(selectingOrigin.x - POSITION.x);
-
- switch(DIRECTION.y) {
- case 0:
- top = selectingOrigin.y;
- bottom = mainBoxBounds.height - selectingOrigin.y;
- break;
- case -1:
- bottom = mainBoxBounds.height - selectingOrigin.y;
- top = 'auto';
- break;
- case 1:
- bottom = 'auto';
- top = selectingOrigin.y;
- break;
- }
-
- switch(DIRECTION.x) {
- case 0:
- left = selectingOrigin.x;
- right = mainBoxBounds.width - selectingOrigin.x;
- break;
- case -1:
- left = 'auto';
- right = mainBoxBounds.width - selectingOrigin.x;
- break;
- case 1:
- left = selectingOrigin.x;
- right = 'auto';
- break;
- }
-
- //Updating selecting div bounds manually so we don't call getBoundingClientRect each mousemove
- selectingDivBounds.bottom = bottom == 'auto' ? mainBoxBounds.height - (top as number) - height : bottom as number;
- selectingDivBounds.top = top == 'auto' ? mainBoxBounds.height - (bottom as number) - height : top as number;
- selectingDivBounds.left = left == 'auto' ? mainBoxBounds.width - (right as number) - width : left as number;
- selectingDivBounds.right = right == 'auto' ? mainBoxBounds.width - (left as number) - width : right as number;
- selectingDivBounds.width = width;
- selectingDivBounds.height = height;
-
- selectingDiv.style.inset = top + (top == 'auto' ? ' ' : 'px ') + right + (right == 'auto' ? ' ' : 'px ') +
- bottom + (bottom == 'auto' ? ' ' : 'px ') + left + (left == 'auto' ? ' ' : 'px ');
- selectingDiv.style.height = height + 'px';
- selectingDiv.style.width = width + 'px';
-
- const FILES = MAIN_BOX_EL.getElementsByClassName('file');
-
- for(let x = 0; x < FILES.length; x++) {
- const CURRENT = FILES[x] as HTMLElement;
- //This should be fine since this function is async
- const BOUNDS = CURRENT.getBoundingClientRect();
-
- //If overlaps
- if(!(BOUNDS.right - mainBoxBounds.left < selectingDivBounds.left ||
- BOUNDS.left - mainBoxBounds.left > mainBoxBounds.width - selectingDivBounds.right ||
- BOUNDS.bottom - mainBoxBounds.top < selectingDivBounds.top ||
- BOUNDS.top - mainBoxBounds.top > mainBoxBounds.height - selectingDivBounds.bottom) &&
- isSelecting)
- {
- if(!CURRENT.classList.contains('selected')) CURRENT.classList.add('selected');
- selected++;
- } else {
- if(CURRENT.classList.contains('selected')) {
- CURRENT.classList.remove('selected');
- selected--;
- }
- }
- }
- if(selected == 0) unselectAllSelected();
- }
- });
-
- //Updates main box bounds on resize
- MAIN_BOX_EL.addEventListener('resize', (e) => {
- mainBoxBounds = MAIN_BOX_EL.getBoundingClientRect();
- });
-
- const selectShortcut = async (e: KeyboardEvent) => {
- // Ignore keyboard shortcuts for select files if input element has focus.
- if (document.activeElement.tagName === 'INPUT') return;
-
- const hideHiddenFiles = (await Storage.get('preference'))?.hideHiddenFiles ?? true;
-
- const keyHandlers: {
- [key: string]: (e: KeyboardEvent, hideHiddenFiles: boolean) => void;
- } = {
- ArrowRight: arrowRightHandler,
- ArrowLeft: arrowLeftHandler,
- ArrowDown: arrowDownHandler,
- ArrowUp: arrowUpHandler,
- };
-
- if (!e.altKey && keyHandlers[e.key]) {
- if (!document.contains(latestSelected)) {
- await selectFirstFile();
- return;
- }
-
- keyHandlers[e.key](e, hideHiddenFiles);
- }
- };
- document.addEventListener('keydown', selectShortcut);
+ //Saving the main box element in a variable, better than calling MAIN_BOX_ELEMENT() everytime
+ const MAIN_BOX_EL: HTMLElement = MAIN_BOX_ELEMENT();
+ mainBoxBounds = MAIN_BOX_EL.getBoundingClientRect();
+
+ MAIN_BOX_EL.addEventListener("click", (e) => {
+ if (
+ !(e.target as HTMLElement).className.split(" ").some((c) => /file/.test(c)) &&
+ //If user doesn't drag the mouse
+ e.pageX - mainBoxBounds.left === selectingOrigin.x &&
+ e.pageY - mainBoxBounds.top === selectingOrigin.y
+ ) {
+ unselectAllSelected();
+ latestSelected = null;
+ latestShiftSelected = null;
+ }
+ let fileTarget = e.target as HTMLElement;
+ while (fileTarget?.classList && !fileTarget.classList.contains("file")) fileTarget = fileTarget.parentNode as HTMLElement;
+ if (fileTarget.id === "workspace" || !fileTarget?.classList?.contains("file")) return;
+
+ Select(fileTarget, e.ctrlKey, e.shiftKey);
+ });
+
+ MAIN_BOX_EL.addEventListener("mousedown", (e) => {
+ /// SelectInit is called async, therefore bounds come before full element calculation.
+ /// Here is to avoid wrong div placement, but we can find a better way without calling getBoundingClientRect each mousedown
+ mainBoxBounds = MAIN_BOX_EL.getBoundingClientRect();
+ //Start selection
+ isSelecting = true;
+ //Save selection starting point
+ selectingOrigin = new Point(e.pageX - mainBoxBounds.left, e.pageY - mainBoxBounds.top);
+ if (!(e.target as HTMLElement).className.split(" ").some((c) => /file/.test(c))) {
+ MAIN_BOX_EL.prepend(selectingDiv);
+ selectingDiv.style.inset = `${selectingOrigin.y}px auto ${selectingOrigin.x}px auto`;
+ selectingDiv.style.width = selectingDiv.style.height = "auto";
+ }
+ });
+
+ //Check when mouse is released. On window to catch events outside of main box
+ window.addEventListener("mouseup", (e) => {
+ if (isSelecting) {
+ isSelecting = false;
+
+ selectingDiv.style.inset = selectingDiv.style.width = selectingDiv.style.height = "auto";
+
+ selectingDiv.remove();
+ }
+ });
+
+ //Calculates selection div size and position + which files are selected
+ MAIN_BOX_EL.addEventListener("mousemove", async (e) => {
+ const POSITION = new Point(e.pageX - mainBoxBounds.left, e.pageY - mainBoxBounds.top);
+ if (isSelecting) {
+ const DIRECTION = await getSelectingDivDirection(selectingOrigin, POSITION);
+ let top: number | string;
+ let right: number | string;
+ let bottom: number | string;
+ let left: number | string;
+ const height = Math.abs(selectingOrigin.y - POSITION.y);
+ const width = Math.abs(selectingOrigin.x - POSITION.x);
+
+ switch (DIRECTION.y) {
+ case 0:
+ top = selectingOrigin.y;
+ bottom = mainBoxBounds.height - selectingOrigin.y;
+ break;
+ case -1:
+ bottom = mainBoxBounds.height - selectingOrigin.y;
+ top = "auto";
+ break;
+ case 1:
+ bottom = "auto";
+ top = selectingOrigin.y;
+ break;
+ }
+
+ switch (DIRECTION.x) {
+ case 0:
+ left = selectingOrigin.x;
+ right = mainBoxBounds.width - selectingOrigin.x;
+ break;
+ case -1:
+ left = "auto";
+ right = mainBoxBounds.width - selectingOrigin.x;
+ break;
+ case 1:
+ left = selectingOrigin.x;
+ right = "auto";
+ break;
+ }
+
+ //Updating selecting div bounds manually so we don't call getBoundingClientRect each mousemove
+ selectingDivBounds.bottom = bottom === "auto" ? mainBoxBounds.height - (top as number) - height : (bottom as number);
+ selectingDivBounds.top = top === "auto" ? mainBoxBounds.height - (bottom as number) - height : (top as number);
+ selectingDivBounds.left = left === "auto" ? mainBoxBounds.width - (right as number) - width : (left as number);
+ selectingDivBounds.right = right === "auto" ? mainBoxBounds.width - (left as number) - width : (right as number);
+ selectingDivBounds.width = width;
+ selectingDivBounds.height = height;
+
+ selectingDiv.style.inset =
+ top +
+ (top === "auto" ? " " : "px ") +
+ right +
+ (right === "auto" ? " " : "px ") +
+ bottom +
+ (bottom === "auto" ? " " : "px ") +
+ left +
+ (left === "auto" ? " " : "px ");
+ selectingDiv.style.height = `${height}px`;
+ selectingDiv.style.width = `${width}px`;
+
+ const FILES = MAIN_BOX_EL.getElementsByClassName("file");
+
+ for (let x = 0; x < FILES.length; x++) {
+ const CURRENT = FILES[x] as HTMLElement;
+ //This should be fine since this function is async
+ const BOUNDS = CURRENT.getBoundingClientRect();
+
+ //If overlaps
+ if (
+ !(
+ BOUNDS.right - mainBoxBounds.left < selectingDivBounds.left ||
+ BOUNDS.left - mainBoxBounds.left > mainBoxBounds.width - selectingDivBounds.right ||
+ BOUNDS.bottom - mainBoxBounds.top < selectingDivBounds.top ||
+ BOUNDS.top - mainBoxBounds.top > mainBoxBounds.height - selectingDivBounds.bottom
+ ) &&
+ isSelecting
+ ) {
+ if (!CURRENT.classList.contains("selected")) CURRENT.classList.add("selected");
+ selected++;
+ } else {
+ if (CURRENT.classList.contains("selected")) {
+ CURRENT.classList.remove("selected");
+ selected--;
+ }
+ }
+ }
+ if (selected === 0) unselectAllSelected();
+ }
+ });
+
+ //Updates main box bounds on resize
+ MAIN_BOX_EL.addEventListener("resize", (e) => {
+ mainBoxBounds = MAIN_BOX_EL.getBoundingClientRect();
+ });
+
+ const selectShortcut = async (e: KeyboardEvent) => {
+ // Ignore keyboard shortcuts for select files if input element has focus.
+ if (document.activeElement.tagName === "INPUT") return;
+
+ const hideHiddenFiles = (await Storage.get("preference"))?.hideHiddenFiles ?? true;
+
+ const keyHandlers: {
+ [key: string]: (e: KeyboardEvent, hideHiddenFiles: boolean) => void;
+ } = {
+ ArrowRight: arrowRightHandler,
+ ArrowLeft: arrowLeftHandler,
+ ArrowDown: arrowDownHandler,
+ ArrowUp: arrowUpHandler,
+ };
+
+ if (!e.altKey && keyHandlers[e.key]) {
+ if (!document.contains(latestSelected)) {
+ await selectFirstFile();
+ return;
+ }
+
+ keyHandlers[e.key](e, hideHiddenFiles);
+ }
+ };
+ document.addEventListener("keydown", selectShortcut);
};
/**
- *
+ *
* @param origin - mouse drag selection origin point
* @param last - last mouse position
* @returns {Promise} - direction based on coord deltas, x and y can be either -1, 0 or 1 indicating the direction relative to point 0,0
*/
-const getSelectingDivDirection = async(origin: Point, last: Point): Promise => {
- const delta = origin.delta(last);
+const getSelectingDivDirection = async (origin: Point, last: Point): Promise => {
+ const delta = origin.delta(last);
- return { x: delta.x == 0 ? 0 : delta.x > 0 ? -1 : 1,
- y: delta.y == 0 ? 0 : delta.y > 0 ? -1 : 1 };
-}
+ return {
+ x: delta.x === 0 ? 0 : delta.x > 0 ? -1 : 1,
+ y: delta.y === 0 ? 0 : delta.y > 0 ? -1 : 1,
+ };
+};
/**
* Unselect all selected file grids.
* @returns {void}
*/
const unselectAllSelected = (): void => {
- document.querySelectorAll('.selected').forEach((element) => element.classList.remove('selected'));
- ChangeSelectedEvent();
- return;
+ document.querySelectorAll(".selected").forEach((element) => element.classList.remove("selected"));
+ ChangeSelectedEvent();
+ return;
};
/**
@@ -319,146 +343,146 @@ const unselectAllSelected = (): void => {
* @returns {NodeListOf}
*/
const getSelected = (): NodeListOf => {
- return document.querySelectorAll('.selected');
+ return document.querySelectorAll(".selected");
};
const arrowRightHandler = (e: KeyboardEvent, hideHiddenFiles: boolean): void => {
- if (latestShiftSelected && elementIndex(latestShiftSelected) < elementIndex(latestSelected)) {
- latestShiftSelected = latestSelected;
- }
- e.preventDefault();
- let nextSibling = (e.shiftKey ? latestShiftSelected.nextSibling : latestSelected.nextSibling) as HTMLElement;
- if (hideHiddenFiles) {
- while (nextSibling && nextSibling.dataset.isHidden === 'true') {
- nextSibling = nextSibling.nextSibling as HTMLElement;
- }
- }
- if (elementClassNameContains(nextSibling, /file/)) {
- ensureElementInViewPort(nextSibling);
- unselectAllSelected();
- if (e.shiftKey) {
- let start = false;
- for (const sibling of latestSelected.parentNode.children) {
- if (start || sibling === nextSibling || sibling === latestSelected) {
- if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.isHidden === 'true')) sibling.classList.add('selected');
- }
- if (sibling === latestSelected) start = true;
- if (sibling === nextSibling) break;
- }
- latestShiftSelected = nextSibling;
- } else {
- latestSelected.classList.remove('selected');
- latestSelected = nextSibling;
- nextSibling.classList.add('selected');
- }
- ChangeSelectedEvent();
- }
+ if (latestShiftSelected && elementIndex(latestShiftSelected) < elementIndex(latestSelected)) {
+ latestShiftSelected = latestSelected;
+ }
+ e.preventDefault();
+ let nextSibling = (e.shiftKey ? latestShiftSelected.nextSibling : latestSelected.nextSibling) as HTMLElement;
+ if (hideHiddenFiles) {
+ while (nextSibling && nextSibling.dataset.isHidden === "true") {
+ nextSibling = nextSibling.nextSibling as HTMLElement;
+ }
+ }
+ if (elementClassNameContains(nextSibling, /file/)) {
+ ensureElementInViewPort(nextSibling);
+ unselectAllSelected();
+ if (e.shiftKey) {
+ let start = false;
+ for (const sibling of latestSelected.parentNode.children) {
+ if (start || sibling === nextSibling || sibling === latestSelected) {
+ if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.isHidden === "true")) sibling.classList.add("selected");
+ }
+ if (sibling === latestSelected) start = true;
+ if (sibling === nextSibling) break;
+ }
+ latestShiftSelected = nextSibling;
+ } else {
+ latestSelected.classList.remove("selected");
+ latestSelected = nextSibling;
+ nextSibling.classList.add("selected");
+ }
+ ChangeSelectedEvent();
+ }
};
const arrowLeftHandler = (e: KeyboardEvent, hideHiddenFiles: boolean): void => {
- if (latestShiftSelected && elementIndex(latestShiftSelected) > elementIndex(latestSelected)) latestShiftSelected = latestSelected;
-
- e.preventDefault();
- let previousSibling = (e.shiftKey ? latestShiftSelected.previousSibling : latestSelected.previousSibling) as HTMLElement;
- if (hideHiddenFiles) {
- while (previousSibling && previousSibling.dataset.isHidden === 'true') {
- previousSibling = previousSibling.previousSibling as HTMLElement;
- }
- }
- if (elementClassNameContains(previousSibling, /file/)) {
- ensureElementInViewPort(previousSibling);
- let start = false;
- unselectAllSelected();
- if (e.shiftKey) {
- for (const sibling of latestSelected.parentNode.children) {
- if (start || sibling === previousSibling || sibling === latestSelected) {
- if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.isHidden === 'true')) sibling.classList.add('selected');
- }
- if (sibling === previousSibling) start = true;
- if (sibling === latestSelected) break;
- }
- latestShiftSelected = previousSibling;
- } else {
- latestSelected.classList.remove('selected');
- latestSelected = previousSibling;
- previousSibling.classList.add('selected');
- }
- ChangeSelectedEvent();
- }
+ if (latestShiftSelected && elementIndex(latestShiftSelected) > elementIndex(latestSelected)) latestShiftSelected = latestSelected;
+
+ e.preventDefault();
+ let previousSibling = (e.shiftKey ? latestShiftSelected.previousSibling : latestSelected.previousSibling) as HTMLElement;
+ if (hideHiddenFiles) {
+ while (previousSibling && previousSibling.dataset.isHidden === "true") {
+ previousSibling = previousSibling.previousSibling as HTMLElement;
+ }
+ }
+ if (elementClassNameContains(previousSibling, /file/)) {
+ ensureElementInViewPort(previousSibling);
+ let start = false;
+ unselectAllSelected();
+ if (e.shiftKey) {
+ for (const sibling of latestSelected.parentNode.children) {
+ if (start || sibling === previousSibling || sibling === latestSelected) {
+ if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.isHidden === "true")) sibling.classList.add("selected");
+ }
+ if (sibling === previousSibling) start = true;
+ if (sibling === latestSelected) break;
+ }
+ latestShiftSelected = previousSibling;
+ } else {
+ latestSelected.classList.remove("selected");
+ latestSelected = previousSibling;
+ previousSibling.classList.add("selected");
+ }
+ ChangeSelectedEvent();
+ }
};
const arrowDownHandler = (e: KeyboardEvent, hideHiddenFiles: boolean): void => {
- if (latestShiftSelected && elementIndex(latestShiftSelected) < elementIndex(latestSelected)) latestShiftSelected = latestSelected;
-
- e.preventDefault();
- const totalGridInArrow = Math.floor(
- (latestSelected.parentNode as HTMLElement).offsetWidth /
- (latestSelected.offsetWidth + parseInt(getComputedStyle(latestSelected).marginLeft) * 2)
- ); // Calculate the total of grids in arrow
- const siblings = latestSelected.parentNode.children;
- let elementBelow = siblings[Array.from(siblings).indexOf(e.shiftKey ? latestShiftSelected : latestSelected) + totalGridInArrow] as HTMLElement;
- if (hideHiddenFiles) {
- while (elementBelow && elementBelow.dataset.isHidden === 'true') {
- elementBelow = siblings[Array.from(siblings).indexOf(elementBelow) + totalGridInArrow] as HTMLElement;
- }
- }
- if (elementClassNameContains(elementBelow, /file/)) {
- ensureElementInViewPort(elementBelow);
- let start = false;
- unselectAllSelected();
- if (e.shiftKey) {
- for (const sibling of latestSelected.parentNode.children) {
- if (start || sibling === elementBelow || sibling === latestSelected) {
- if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.isHidden === 'true')) sibling.classList.add('selected');
- }
- if (sibling === latestSelected) start = true;
- if (sibling === elementBelow) break;
- }
- latestShiftSelected = elementBelow;
- } else {
- latestSelected.classList.remove('selected');
- latestSelected = elementBelow;
- elementBelow.classList.add('selected');
- }
- ChangeSelectedEvent();
- }
+ if (latestShiftSelected && elementIndex(latestShiftSelected) < elementIndex(latestSelected)) latestShiftSelected = latestSelected;
+
+ e.preventDefault();
+ const totalGridInArrow = Math.floor(
+ (latestSelected.parentNode as HTMLElement).offsetWidth /
+ (latestSelected.offsetWidth + Number.parseInt(getComputedStyle(latestSelected).marginLeft) * 2),
+ ); // Calculate the total of grids in arrow
+ const siblings = latestSelected.parentNode.children;
+ let elementBelow = siblings[Array.from(siblings).indexOf(e.shiftKey ? latestShiftSelected : latestSelected) + totalGridInArrow] as HTMLElement;
+ if (hideHiddenFiles) {
+ while (elementBelow && elementBelow.dataset.isHidden === "true") {
+ elementBelow = siblings[Array.from(siblings).indexOf(elementBelow) + totalGridInArrow] as HTMLElement;
+ }
+ }
+ if (elementClassNameContains(elementBelow, /file/)) {
+ ensureElementInViewPort(elementBelow);
+ let start = false;
+ unselectAllSelected();
+ if (e.shiftKey) {
+ for (const sibling of latestSelected.parentNode.children) {
+ if (start || sibling === elementBelow || sibling === latestSelected) {
+ if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.isHidden === "true")) sibling.classList.add("selected");
+ }
+ if (sibling === latestSelected) start = true;
+ if (sibling === elementBelow) break;
+ }
+ latestShiftSelected = elementBelow;
+ } else {
+ latestSelected.classList.remove("selected");
+ latestSelected = elementBelow;
+ elementBelow.classList.add("selected");
+ }
+ ChangeSelectedEvent();
+ }
};
const arrowUpHandler = (e: KeyboardEvent, hideHiddenFiles: boolean): void => {
- if (latestShiftSelected && elementIndex(latestShiftSelected) > elementIndex(latestSelected)) latestShiftSelected = latestSelected;
-
- e.preventDefault();
- const totalGridInArrow = Math.floor(
- (latestSelected.parentNode as HTMLElement).offsetWidth /
- (latestSelected.offsetWidth + parseInt(getComputedStyle(latestSelected).marginLeft) * 2)
- ); // Calculate the total of grids in arrow
- const siblings = latestSelected.parentNode.children;
- let elementAbove = siblings[Array.from(siblings).indexOf(e.shiftKey ? latestShiftSelected : latestSelected) - totalGridInArrow] as HTMLElement;
- if (hideHiddenFiles) {
- while (elementAbove && elementAbove.dataset.isHidden === 'true') {
- elementAbove = siblings[Array.from(siblings).indexOf(elementAbove) - totalGridInArrow] as HTMLElement;
- }
- }
- if (elementClassNameContains(elementAbove, /file/)) {
- ensureElementInViewPort(elementAbove);
- let start = false;
- unselectAllSelected();
- if (e.shiftKey) {
- for (const sibling of latestSelected.parentNode.children) {
- if (start || sibling === elementAbove || sibling === latestSelected) {
- if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.isHidden === 'true')) sibling.classList.add('selected');
- }
- if (sibling === elementAbove) start = true;
- if (sibling === latestSelected) break;
- }
- latestShiftSelected = elementAbove;
- } else {
- latestSelected.classList.remove('selected');
- latestSelected = elementAbove;
- elementAbove.classList.add('selected');
- }
- ChangeSelectedEvent();
- }
+ if (latestShiftSelected && elementIndex(latestShiftSelected) > elementIndex(latestSelected)) latestShiftSelected = latestSelected;
+
+ e.preventDefault();
+ const totalGridInArrow = Math.floor(
+ (latestSelected.parentNode as HTMLElement).offsetWidth /
+ (latestSelected.offsetWidth + Number.parseInt(getComputedStyle(latestSelected).marginLeft) * 2),
+ ); // Calculate the total of grids in arrow
+ const siblings = latestSelected.parentNode.children;
+ let elementAbove = siblings[Array.from(siblings).indexOf(e.shiftKey ? latestShiftSelected : latestSelected) - totalGridInArrow] as HTMLElement;
+ if (hideHiddenFiles) {
+ while (elementAbove && elementAbove.dataset.isHidden === "true") {
+ elementAbove = siblings[Array.from(siblings).indexOf(elementAbove) - totalGridInArrow] as HTMLElement;
+ }
+ }
+ if (elementClassNameContains(elementAbove, /file/)) {
+ ensureElementInViewPort(elementAbove);
+ let start = false;
+ unselectAllSelected();
+ if (e.shiftKey) {
+ for (const sibling of latestSelected.parentNode.children) {
+ if (start || sibling === elementAbove || sibling === latestSelected) {
+ if (!(hideHiddenFiles && (sibling as HTMLElement).dataset.isHidden === "true")) sibling.classList.add("selected");
+ }
+ if (sibling === elementAbove) start = true;
+ if (sibling === latestSelected) break;
+ }
+ latestShiftSelected = elementAbove;
+ } else {
+ latestSelected.classList.remove("selected");
+ latestSelected = elementAbove;
+ elementAbove.classList.add("selected");
+ }
+ ChangeSelectedEvent();
+ }
};
export { Select, SelectInit, getSelected, ChangeSelectedEvent, unselectAllSelected };
diff --git a/src/Components/Files/File Operation/trash.ts b/src/Components/Files/File Operation/trash.ts
index a747853b..8a9ceff6 100644
--- a/src/Components/Files/File Operation/trash.ts
+++ b/src/Components/Files/File Operation/trash.ts
@@ -1,10 +1,10 @@
-import { OperationLog } from '../../Functions/log';
-import PromptError from '../../Prompt/error';
-import OS from '../../../Service/platform';
-import { DeleteFiles, PurgeFiles, RestoreFiles, RestoreFile as RestoreFileAPI } from '../../../Service/trash';
-import OperationAPI from '../../../Service/operation';
-import ConfirmDialog from '../../Prompt/confirm';
-import { reload } from '../../Layout/windowManager';
+import OperationAPI from "../../../Service/operation";
+import OS from "../../../Service/platform";
+import { DeleteFiles, PurgeFiles, RestoreFile as RestoreFileAPI, RestoreFiles } from "../../../Service/trash";
+import { OperationLog } from "../../Functions/log";
+import { reload } from "../../Layout/windowManager";
+import ConfirmDialog from "../../Prompt/confirm";
+import PromptError from "../../Prompt/error";
let platform: string;
/**
@@ -13,29 +13,29 @@ let platform: string;
* @returns {Promise}
*/
const Restore = async (filePaths: string[]): Promise => {
- if (!platform) platform = await OS();
- if (platform === 'darwin') return;
+ if (!platform) platform = await OS();
+ if (platform === "darwin") return;
- const result = await RestoreFiles(filePaths);
- if (result.request_confirmation) {
- const confirm = await ConfirmDialog('Something went wrong when trying to restore the file/dir', result.message, 'Yes');
- if (!confirm) return;
- RestoreFiles(filePaths, true);
- }
- reload();
+ const result = await RestoreFiles(filePaths);
+ if (result.request_confirmation) {
+ const confirm = await ConfirmDialog("Something went wrong when trying to restore the file/dir", result.message, "Yes");
+ if (!confirm) return;
+ RestoreFiles(filePaths, true);
+ }
+ reload();
};
const Purge = async (filePaths: string[]): Promise => {
- if (!platform) platform = await OS();
- if (platform === 'darwin') return;
- const confirm = await ConfirmDialog(
- 'Permanently delete file',
- "Are you sure to permanently delete these files/dirs? This can't be undone.",
- 'Yes'
- );
- if (!confirm) return;
- PurgeFiles(filePaths);
- reload();
+ if (!platform) platform = await OS();
+ if (platform === "darwin") return;
+ const confirm = await ConfirmDialog(
+ "Permanently delete file",
+ "Are you sure to permanently delete these files/dirs? This can't be undone.",
+ "Yes",
+ );
+ if (!confirm) return;
+ PurgeFiles(filePaths);
+ reload();
};
/**
@@ -44,15 +44,15 @@ const Purge = async (filePaths: string[]): Promise => {
* @returns {Promise}
*/
const Trash = async (filePaths: string[]): Promise => {
- if (!platform) platform = await OS();
- try {
- DeleteFiles(filePaths);
- } catch (err) {
- PromptError('Failed to delete files/dirs', `Failed to move ` + filePaths.join(', ') + ` to trash. [${err}]`);
- }
- if (platform !== 'darwin') {
- OperationLog('delete', filePaths);
- }
+ if (!platform) platform = await OS();
+ try {
+ DeleteFiles(filePaths);
+ } catch (err) {
+ PromptError("Failed to delete files/dirs", `Failed to move ${filePaths.join(", ")} to trash. [${err}]`);
+ }
+ if (platform !== "darwin") {
+ OperationLog("delete", filePaths);
+ }
};
/**
@@ -62,9 +62,9 @@ const Trash = async (filePaths: string[]): Promise => {
* @returns {Promise}
*/
const RestoreFile = async (original_parent: string, basename: string): Promise => {
- if (!platform) platform = await OS();
- if (platform === 'darwin') return;
- await RestoreFileAPI(original_parent, basename);
+ if (!platform) platform = await OS();
+ if (platform === "darwin") return;
+ await RestoreFileAPI(original_parent, basename);
};
/**
@@ -73,17 +73,17 @@ const RestoreFile = async (original_parent: string, basename: string): Promise => {
- const confirm = await ConfirmDialog(
- 'Permanently delete file',
- filePaths.length > 1
- ? "Are you sure to permanently delete these files/dirs? This can't be undone."
- : "Are you sure to permanently delete this file/dir? This can't be undone.",
- 'Yes'
- );
- if (!confirm) return;
- for (const filePath of filePaths) {
- await new OperationAPI(filePath).unlink();
- }
+ const confirm = await ConfirmDialog(
+ "Permanently delete file",
+ filePaths.length > 1
+ ? "Are you sure to permanently delete these files/dirs? This can't be undone."
+ : "Are you sure to permanently delete this file/dir? This can't be undone.",
+ "Yes",
+ );
+ if (!confirm) return;
+ for (const filePath of filePaths) {
+ await new OperationAPI(filePath).unlink();
+ }
};
export { Trash, PermanentDelete, Restore, Purge, RestoreFile };
diff --git a/src/Components/Files/File Operation/undo.ts b/src/Components/Files/File Operation/undo.ts
index 6d1ee1f3..48846905 100644
--- a/src/Components/Files/File Operation/undo.ts
+++ b/src/Components/Files/File Operation/undo.ts
@@ -1,70 +1,69 @@
-import windowName from '../../../Service/window';
-import OperationAPI from '../../../Service/operation';
-import Storage from '../../../Service/storage';
-import joinPath from '../../Functions/path/joinPath';
-import getBasename from '../../Functions/path/basename';
-import FileAPI from '../../../Service/files';
-import ConfirmDialog from '../../Prompt/confirm';
-import DirectoryAPI from '../../../Service/directory';
-import { RestoreFile } from './trash';
-import getDirname from '../../Functions/path/dirname';
-import NormalizeSlash from '../../Functions/path/normalizeSlash';
+import DirectoryAPI from "../../../Service/directory";
+import FileAPI from "../../../Service/files";
+import OperationAPI from "../../../Service/operation";
+import Storage from "../../../Service/storage";
+import windowName from "../../../Service/window";
+import getBasename from "../../Functions/path/basename";
+import getDirname from "../../Functions/path/dirname";
+import joinPath from "../../Functions/path/joinPath";
+import NormalizeSlash from "../../Functions/path/normalizeSlash";
+import ConfirmDialog from "../../Prompt/confirm";
+import { RestoreFile } from "./trash";
/**
* Undo the latest operation
* @returns {Promise}
*/
const Undo = async (): Promise => {
- const operationLogs = await Storage.get(`operations-${windowName}`);
- const latestOperation = operationLogs?.operations[operationLogs?.currentIndex];
- switch (latestOperation?.operationType) {
- case 'copy':
- for (const source of latestOperation.sources) {
- const filename = joinPath(latestOperation.destination, getBasename(source));
- const filenameWithCopySuffix = `${filename
- .split('.')
- .splice(0, filename.split('.').length - 1)
- .join('.')} - Copy.${filename.split('.').splice(filename.split('.').length - 1)}`;
- const copiedFile = (await new FileAPI(filenameWithCopySuffix).exists()) ? filenameWithCopySuffix : filename;
- new OperationAPI(copiedFile).unlink();
- }
- break;
- case 'cut':
- for (const source of latestOperation.sources) {
- const dest = joinPath(latestOperation.destination, getBasename(source));
- if (await new DirectoryAPI(source).exists()) {
- if (
- !(await ConfirmDialog(
- 'Target file exists',
- 'Target directory with the same file/dir name exists, do you want to overwrite it?',
- 'No'
- ))
- )
- return;
- else {
- await new OperationAPI(source).unlink();
- }
- }
- await new OperationAPI(dest, source).rename();
- break;
- }
- break;
- case 'newfile':
- new OperationAPI(latestOperation.destination).unlink();
- break;
- case 'newfolder':
- new OperationAPI(latestOperation.destination).unlink();
- break;
- case 'delete':
- for (const source of latestOperation.sources) {
- RestoreFile(NormalizeSlash(getDirname(source)), NormalizeSlash(getBasename(source)));
- }
- break;
- case 'rename':
- await new OperationAPI(latestOperation.destination, latestOperation.sources).rename();
- break;
- }
- if (operationLogs.currentIndex > -1) operationLogs.currentIndex -= 1;
- Storage.set(`operations-${windowName}`, operationLogs);
+ const operationLogs = await Storage.get(`operations-${windowName}`);
+ const latestOperation = operationLogs?.operations[operationLogs?.currentIndex];
+ switch (latestOperation?.operationType) {
+ case "copy":
+ for (const source of latestOperation.sources) {
+ const filename = joinPath(latestOperation.destination, getBasename(source));
+ const filenameWithCopySuffix = `${filename
+ .split(".")
+ .splice(0, filename.split(".").length - 1)
+ .join(".")} - Copy.${filename.split(".").splice(filename.split(".").length - 1)}`;
+ const copiedFile = (await new FileAPI(filenameWithCopySuffix).exists()) ? filenameWithCopySuffix : filename;
+ new OperationAPI(copiedFile).unlink();
+ }
+ break;
+ case "cut":
+ for (const source of latestOperation.sources) {
+ const dest = joinPath(latestOperation.destination, getBasename(source));
+ if (await new DirectoryAPI(source).exists()) {
+ if (
+ !(await ConfirmDialog(
+ "Target file exists",
+ "Target directory with the same file/dir name exists, do you want to overwrite it?",
+ "No",
+ ))
+ )
+ return;
+
+ await new OperationAPI(source).unlink();
+ }
+ await new OperationAPI(dest, source).rename();
+ break;
+ }
+ break;
+ case "newfile":
+ new OperationAPI(latestOperation.destination).unlink();
+ break;
+ case "newfolder":
+ new OperationAPI(latestOperation.destination).unlink();
+ break;
+ case "delete":
+ for (const source of latestOperation.sources) {
+ RestoreFile(NormalizeSlash(getDirname(source)), NormalizeSlash(getBasename(source)));
+ }
+ break;
+ case "rename":
+ await new OperationAPI(latestOperation.destination, latestOperation.sources).rename();
+ break;
+ }
+ if (operationLogs.currentIndex > -1) operationLogs.currentIndex -= 1;
+ Storage.set(`operations-${windowName}`, operationLogs);
};
export default Undo;
diff --git a/src/Components/Files/File Preview/preview.ts b/src/Components/Files/File Preview/preview.ts
index 54a3bc82..7b759877 100644
--- a/src/Components/Files/File Preview/preview.ts
+++ b/src/Components/Files/File Preview/preview.ts
@@ -1,33 +1,33 @@
-import PromptError from '../../Prompt/error';
-import { HTML_TYPES, IMAGE_TYPES, VIDEO_TYPES, PLAINTEXT_TYPES, MARKDOWN_TYPES } from '../../../Config/file.config';
-import getBasename from '../../Functions/path/basename';
-import xlsx from 'xlsx';
-import FileAPI from '../../../Service/files';
-import { eURLify, URLify } from '../../Functions/urlify';
-import hljs from 'highlight.js';
-import ConfirmDialog from '../../Prompt/confirm';
-import { marked } from 'marked';
-import getDirname from '../../Functions/path/dirname';
-import isTauri from '../../../Util/is-tauri';
-import { GET_WORKSPACE_ELEMENT } from '../../../Util/constants';
+import hljs from "highlight.js";
+import { marked } from "marked";
+import xlsx from "xlsx";
+import { HTML_TYPES, IMAGE_TYPES, MARKDOWN_TYPES, PLAINTEXT_TYPES, VIDEO_TYPES } from "../../../Config/file.config";
+import FileAPI from "../../../Service/files";
+import { GET_WORKSPACE_ELEMENT } from "../../../Util/constants";
+import isTauri from "../../../Util/is-tauri";
+import getBasename from "../../Functions/path/basename";
+import getDirname from "../../Functions/path/dirname";
+import { URLify, eURLify } from "../../Functions/urlify";
+import ConfirmDialog from "../../Prompt/confirm";
+import PromptError from "../../Prompt/error";
const isValidURL = (text: string) => {
- let url;
- try {
- url = new URL(text);
- } catch (_) {
- return false;
- }
- return (url.protocol === 'http:' || url.protocol === 'https:') && url.hostname !== window.location.hostname;
+ let url: URL;
+ try {
+ url = new URL(text);
+ } catch (_) {
+ return false;
+ }
+ return (url.protocol === "http:" || url.protocol === "https:") && url.hostname !== window.location.hostname;
};
/**
* Close the preview file
* @returns {void}
*/
const closePreviewFile = (): void => {
- GET_WORKSPACE_ELEMENT(1).classList.remove('workspace-split');
- document.querySelectorAll('.preview').forEach((element) => element.parentNode.removeChild(element));
- document.querySelector('.main-box').style.overflowY = 'auto';
+ GET_WORKSPACE_ELEMENT(1).classList.remove("workspace-split");
+ document.querySelectorAll(".preview").forEach((element) => element.parentNode.removeChild(element));
+ document.querySelector(".main-box").style.overflowY = "auto";
};
/**
* Show preview file
@@ -35,18 +35,18 @@ const closePreviewFile = (): void => {
* @returns {void}
*/
const Preview = async (filePath: string): Promise => {
- if (!isTauri) {
- PromptError('Preview unavailable', 'Preview is currently unavailable on Web version');
- return;
- }
- closePreviewFile();
+ if (!isTauri) {
+ PromptError("Preview unavailable", "Preview is currently unavailable on Web version");
+ return;
+ }
+ closePreviewFile();
- const previewElement = document.createElement('div');
- previewElement.classList.add('preview');
+ const previewElement = document.createElement("div");
+ previewElement.classList.add("preview");
- const changePreview = (html: string) => {
- if (!html) return;
- previewElement.innerHTML = `
+ const changePreview = (html: string) => {
+ if (!html) return;
+ previewElement.innerHTML = `
=> {
/>${await Translate(favorite.name)}
`;
- }
- return result;
+ }
+ return result;
};
export default Favorites;
diff --git a/src/Components/File/DetailFile.tsx b/src/Components/File/DetailFile.tsx
index b976e8c3..b8540691 100644
--- a/src/Components/File/DetailFile.tsx
+++ b/src/Components/File/DetailFile.tsx
@@ -1,8 +1,8 @@
-import React, { MouseEvent } from "react";
-import FileMetaData from "../../Typings/fileMetaData";
-import { ThemedButton, ThemedSpan } from "../Theme";
+import React, { type MouseEvent } from "react";
import { useSelector } from "react-redux";
-import { IAppState } from "../../Store/Reducers";
+import type { IAppState } from "../../Store/Reducers";
+import type FileMetaData from "../../Typings/fileMetaData";
+import { ThemedButton, ThemedSpan } from "../Theme";
export interface IDetailFileProps {
metadata: FileMetaData;
handleFileRightClick: (e: MouseEvent
${getBasename(filePath)}
×
@@ -54,103 +54,105 @@ const Preview = async (filePath: string): Promise => {
${html}
`;
- document.querySelector('.main-box').scrollTop = 0;
- document.querySelector('.main-box').style.overflowY = 'hidden';
- GET_WORKSPACE_ELEMENT(1).classList.toggle('workspace-split');
- GET_WORKSPACE_ELEMENT(1).appendChild(previewElement);
- previewElement.querySelector('.preview-exit-btn').addEventListener('click', () => closePreviewFile());
- return;
- };
+ document.querySelector(".main-box").scrollTop = 0;
+ document.querySelector(".main-box").style.overflowY = "hidden";
+ GET_WORKSPACE_ELEMENT(1).classList.toggle("workspace-split");
+ GET_WORKSPACE_ELEMENT(1).appendChild(previewElement);
+ previewElement.querySelector(".preview-exit-btn").addEventListener("click", () => closePreviewFile());
+ return;
+ };
- const ext = filePath.split('.').pop().toLowerCase();
+ const ext = filePath.split(".").pop().toLowerCase();
- let previewed = true;
- if (ext === 'pdf') {
- changePreview(
- ``
- );
- } else if (HTML_TYPES.indexOf(ext) !== -1) {
- changePreview(``);
- } else if (['doc', 'docb', 'docm', 'dot', 'dotm', 'docx', 'rtf'].indexOf(ext) !== -1) {
- const { convertToHtml } = require('./mammoth.browser.min');
- const buf = await new FileAPI(filePath).readBuffer();
- const { value } = await convertToHtml({ arrayBuffer: buf });
- changePreview(`.readAsset()})
`);
- } else if (VIDEO_TYPES.indexOf(ext) !== -1) {
- changePreview(
- ``
- );
- // } else if (AUDIO_TYPES.indexOf(ext) !== -1) {
- // changePreview(
- // `
- // `);
+ } else if (VIDEO_TYPES.indexOf(ext) !== -1) {
+ changePreview(
+ ``,
+ );
+ // } else if (AUDIO_TYPES.indexOf(ext) !== -1) {
+ // changePreview(
+ // `
+ // => {
- if (!parentDir) parentDir = await focusingPath();
+ if (!parentDir) parentDir = await focusingPath();
- const newFolder = new FolderAPI(folderName, parentDir);
+ const newFolder = new FolderAPI(folderName, parentDir);
- if (await newFolder.exists()) {
- PromptError('Error creating folder', `Failed to create folder ${newFolder.dirName}: Folder already existed`);
- } else {
- try {
- await newFolder.mkdir();
- if (writeLog) OperationLog('newfolder', null, newFolder.dirName);
- } catch (err) {
- PromptError('Error creating file', `Failed to create file ${newFolder.dirName}: Something went wrong (${err})`);
- }
- }
+ if (await newFolder.exists()) {
+ PromptError("Error creating folder", `Failed to create folder ${newFolder.dirName}: Folder already existed`);
+ } else {
+ try {
+ await newFolder.mkdir();
+ if (writeLog) OperationLog("newfolder", null, newFolder.dirName);
+ } catch (err) {
+ PromptError("Error creating file", `Failed to create file ${newFolder.dirName}: Something went wrong (${err})`);
+ }
+ }
};
export default NewFolder;
diff --git a/src/Components/Functions/Loading/loading.ts b/src/Components/Functions/Loading/loading.ts
index 2eb584ff..bfec9074 100644
--- a/src/Components/Functions/Loading/loading.ts
+++ b/src/Components/Functions/Loading/loading.ts
@@ -3,16 +3,16 @@
* @returns {void}
*/
const startLoading = (): void => {
- const LOADING_BAR = document.querySelector('.loading-bar');
- LOADING_BAR.dataset.loading = 'true';
+ const LOADING_BAR = document.querySelector(".loading-bar");
+ LOADING_BAR.dataset.loading = "true";
};
/**
* Check if the loading animation is running
* @returns {any}
*/
const isLoading = (): boolean => {
- const LOADING_BAR = document.querySelector('.loading-bar');
- return LOADING_BAR.dataset.loading === 'true';
+ const LOADING_BAR = document.querySelector(".loading-bar");
+ return LOADING_BAR.dataset.loading === "true";
};
/**
@@ -20,8 +20,8 @@ const isLoading = (): boolean => {
* @returns {void}
*/
const stopLoading = (): void => {
- const LOADING_BAR = document.querySelector('.loading-bar');
- LOADING_BAR.dataset.loading = 'false';
+ const LOADING_BAR = document.querySelector(".loading-bar");
+ LOADING_BAR.dataset.loading = "false";
};
export { startLoading, stopLoading, isLoading };
diff --git a/src/Components/Functions/beep.ts b/src/Components/Functions/beep.ts
index c73c99c5..cc8b63dd 100644
--- a/src/Components/Functions/beep.ts
+++ b/src/Components/Functions/beep.ts
@@ -1,7 +1,7 @@
function beep(): void {
- const snd = new Audio(
- 'data:audio/wav;base64,//uQRAAAAWMSLwUIYAAsYkXgoQwAEaYLWfkWgAI0wWs/ItAAAGDgYtAgAyN+QWaAAihwMWm4G8QQRDiMcCBcH3Cc+CDv/7xA4Tvh9Rz/y8QADBwMWgQAZG/ILNAARQ4GLTcDeIIIhxGOBAuD7hOfBB3/94gcJ3w+o5/5eIAIAAAVwWgQAVQ2ORaIQwEMAJiDg95G4nQL7mQVWI6GwRcfsZAcsKkJvxgxEjzFUgfHoSQ9Qq7KNwqHwuB13MA4a1q/DmBrHgPcmjiGoh//EwC5nGPEmS4RcfkVKOhJf+WOgoxJclFz3kgn//dBA+ya1GhurNn8zb//9NNutNuhz31f////9vt///z+IdAEAAAK4LQIAKobHItEIYCGAExBwe8jcToF9zIKrEdDYIuP2MgOWFSE34wYiR5iqQPj0JIeoVdlG4VD4XA67mAcNa1fhzA1jwHuTRxDUQ//iYBczjHiTJcIuPyKlHQkv/LHQUYkuSi57yQT//uggfZNajQ3Vmz+Zt//+mm3Wm3Q576v////+32///5/EOgAAADVghQAAAAA//uQZAUAB1WI0PZugAAAAAoQwAAAEk3nRd2qAAAAACiDgAAAAAAABCqEEQRLCgwpBGMlJkIz8jKhGvj4k6jzRnqasNKIeoh5gI7BJaC1A1AoNBjJgbyApVS4IDlZgDU5WUAxEKDNmmALHzZp0Fkz1FMTmGFl1FMEyodIavcCAUHDWrKAIA4aa2oCgILEBupZgHvAhEBcZ6joQBxS76AgccrFlczBvKLC0QI2cBoCFvfTDAo7eoOQInqDPBtvrDEZBNYN5xwNwxQRfw8ZQ5wQVLvO8OYU+mHvFLlDh05Mdg7BT6YrRPpCBznMB2r//xKJjyyOh+cImr2/4doscwD6neZjuZR4AgAABYAAAABy1xcdQtxYBYYZdifkUDgzzXaXn98Z0oi9ILU5mBjFANmRwlVJ3/6jYDAmxaiDG3/6xjQQCCKkRb/6kg/wW+kSJ5//rLobkLSiKmqP/0ikJuDaSaSf/6JiLYLEYnW/+kXg1WRVJL/9EmQ1YZIsv/6Qzwy5qk7/+tEU0nkls3/zIUMPKNX/6yZLf+kFgAfgGyLFAUwY//uQZAUABcd5UiNPVXAAAApAAAAAE0VZQKw9ISAAACgAAAAAVQIygIElVrFkBS+Jhi+EAuu+lKAkYUEIsmEAEoMeDmCETMvfSHTGkF5RWH7kz/ESHWPAq/kcCRhqBtMdokPdM7vil7RG98A2sc7zO6ZvTdM7pmOUAZTnJW+NXxqmd41dqJ6mLTXxrPpnV8avaIf5SvL7pndPvPpndJR9Kuu8fePvuiuhorgWjp7Mf/PRjxcFCPDkW31srioCExivv9lcwKEaHsf/7ow2Fl1T/9RkXgEhYElAoCLFtMArxwivDJJ+bR1HTKJdlEoTELCIqgEwVGSQ+hIm0NbK8WXcTEI0UPoa2NbG4y2K00JEWbZavJXkYaqo9CRHS55FcZTjKEk3NKoCYUnSQ0rWxrZbFKbKIhOKPZe1cJKzZSaQrIyULHDZmV5K4xySsDRKWOruanGtjLJXFEmwaIbDLX0hIPBUQPVFVkQkDoUNfSoDgQGKPekoxeGzA4DUvnn4bxzcZrtJyipKfPNy5w+9lnXwgqsiyHNeSVpemw4bWb9psYeq//uQZBoABQt4yMVxYAIAAAkQoAAAHvYpL5m6AAgAACXDAAAAD59jblTirQe9upFsmZbpMudy7Lz1X1DYsxOOSWpfPqNX2WqktK0DMvuGwlbNj44TleLPQ+Gsfb+GOWOKJoIrWb3cIMeeON6lz2umTqMXV8Mj30yWPpjoSa9ujK8SyeJP5y5mOW1D6hvLepeveEAEDo0mgCRClOEgANv3B9a6fikgUSu/DmAMATrGx7nng5p5iimPNZsfQLYB2sDLIkzRKZOHGAaUyDcpFBSLG9MCQALgAIgQs2YunOszLSAyQYPVC2YdGGeHD2dTdJk1pAHGAWDjnkcLKFymS3RQZTInzySoBwMG0QueC3gMsCEYxUqlrcxK6k1LQQcsmyYeQPdC2YfuGPASCBkcVMQQqpVJshui1tkXQJQV0OXGAZMXSOEEBRirXbVRQW7ugq7IM7rPWSZyDlM3IuNEkxzCOJ0ny2ThNkyRai1b6ev//3dzNGzNb//4uAvHT5sURcZCFcuKLhOFs8mLAAEAt4UWAAIABAAAAAB4qbHo0tIjVkUU//uQZAwABfSFz3ZqQAAAAAngwAAAE1HjMp2qAAAAACZDgAAAD5UkTE1UgZEUExqYynN1qZvqIOREEFmBcJQkwdxiFtw0qEOkGYfRDifBui9MQg4QAHAqWtAWHoCxu1Yf4VfWLPIM2mHDFsbQEVGwyqQoQcwnfHeIkNt9YnkiaS1oizycqJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU='
- );
- snd.play();
+ const snd = new Audio(
+ "data:audio/wav;base64,//uQRAAAAWMSLwUIYAAsYkXgoQwAEaYLWfkWgAI0wWs/ItAAAGDgYtAgAyN+QWaAAihwMWm4G8QQRDiMcCBcH3Cc+CDv/7xA4Tvh9Rz/y8QADBwMWgQAZG/ILNAARQ4GLTcDeIIIhxGOBAuD7hOfBB3/94gcJ3w+o5/5eIAIAAAVwWgQAVQ2ORaIQwEMAJiDg95G4nQL7mQVWI6GwRcfsZAcsKkJvxgxEjzFUgfHoSQ9Qq7KNwqHwuB13MA4a1q/DmBrHgPcmjiGoh//EwC5nGPEmS4RcfkVKOhJf+WOgoxJclFz3kgn//dBA+ya1GhurNn8zb//9NNutNuhz31f////9vt///z+IdAEAAAK4LQIAKobHItEIYCGAExBwe8jcToF9zIKrEdDYIuP2MgOWFSE34wYiR5iqQPj0JIeoVdlG4VD4XA67mAcNa1fhzA1jwHuTRxDUQ//iYBczjHiTJcIuPyKlHQkv/LHQUYkuSi57yQT//uggfZNajQ3Vmz+Zt//+mm3Wm3Q576v////+32///5/EOgAAADVghQAAAAA//uQZAUAB1WI0PZugAAAAAoQwAAAEk3nRd2qAAAAACiDgAAAAAAABCqEEQRLCgwpBGMlJkIz8jKhGvj4k6jzRnqasNKIeoh5gI7BJaC1A1AoNBjJgbyApVS4IDlZgDU5WUAxEKDNmmALHzZp0Fkz1FMTmGFl1FMEyodIavcCAUHDWrKAIA4aa2oCgILEBupZgHvAhEBcZ6joQBxS76AgccrFlczBvKLC0QI2cBoCFvfTDAo7eoOQInqDPBtvrDEZBNYN5xwNwxQRfw8ZQ5wQVLvO8OYU+mHvFLlDh05Mdg7BT6YrRPpCBznMB2r//xKJjyyOh+cImr2/4doscwD6neZjuZR4AgAABYAAAABy1xcdQtxYBYYZdifkUDgzzXaXn98Z0oi9ILU5mBjFANmRwlVJ3/6jYDAmxaiDG3/6xjQQCCKkRb/6kg/wW+kSJ5//rLobkLSiKmqP/0ikJuDaSaSf/6JiLYLEYnW/+kXg1WRVJL/9EmQ1YZIsv/6Qzwy5qk7/+tEU0nkls3/zIUMPKNX/6yZLf+kFgAfgGyLFAUwY//uQZAUABcd5UiNPVXAAAApAAAAAE0VZQKw9ISAAACgAAAAAVQIygIElVrFkBS+Jhi+EAuu+lKAkYUEIsmEAEoMeDmCETMvfSHTGkF5RWH7kz/ESHWPAq/kcCRhqBtMdokPdM7vil7RG98A2sc7zO6ZvTdM7pmOUAZTnJW+NXxqmd41dqJ6mLTXxrPpnV8avaIf5SvL7pndPvPpndJR9Kuu8fePvuiuhorgWjp7Mf/PRjxcFCPDkW31srioCExivv9lcwKEaHsf/7ow2Fl1T/9RkXgEhYElAoCLFtMArxwivDJJ+bR1HTKJdlEoTELCIqgEwVGSQ+hIm0NbK8WXcTEI0UPoa2NbG4y2K00JEWbZavJXkYaqo9CRHS55FcZTjKEk3NKoCYUnSQ0rWxrZbFKbKIhOKPZe1cJKzZSaQrIyULHDZmV5K4xySsDRKWOruanGtjLJXFEmwaIbDLX0hIPBUQPVFVkQkDoUNfSoDgQGKPekoxeGzA4DUvnn4bxzcZrtJyipKfPNy5w+9lnXwgqsiyHNeSVpemw4bWb9psYeq//uQZBoABQt4yMVxYAIAAAkQoAAAHvYpL5m6AAgAACXDAAAAD59jblTirQe9upFsmZbpMudy7Lz1X1DYsxOOSWpfPqNX2WqktK0DMvuGwlbNj44TleLPQ+Gsfb+GOWOKJoIrWb3cIMeeON6lz2umTqMXV8Mj30yWPpjoSa9ujK8SyeJP5y5mOW1D6hvLepeveEAEDo0mgCRClOEgANv3B9a6fikgUSu/DmAMATrGx7nng5p5iimPNZsfQLYB2sDLIkzRKZOHGAaUyDcpFBSLG9MCQALgAIgQs2YunOszLSAyQYPVC2YdGGeHD2dTdJk1pAHGAWDjnkcLKFymS3RQZTInzySoBwMG0QueC3gMsCEYxUqlrcxK6k1LQQcsmyYeQPdC2YfuGPASCBkcVMQQqpVJshui1tkXQJQV0OXGAZMXSOEEBRirXbVRQW7ugq7IM7rPWSZyDlM3IuNEkxzCOJ0ny2ThNkyRai1b6ev//3dzNGzNb//4uAvHT5sURcZCFcuKLhOFs8mLAAEAt4UWAAIABAAAAAB4qbHo0tIjVkUU//uQZAwABfSFz3ZqQAAAAAngwAAAE1HjMp2qAAAAACZDgAAAD5UkTE1UgZEUExqYynN1qZvqIOREEFmBcJQkwdxiFtw0qEOkGYfRDifBui9MQg4QAHAqWtAWHoCxu1Yf4VfWLPIM2mHDFsbQEVGwyqQoQcwnfHeIkNt9YnkiaS1oizycqJrx4KOQjahZxWbcZgztj2c49nKmkId44S71j0c8eV9yDK6uPRzx5X18eDvjvQ6yKo9ZSS6l//8elePK/Lf//IInrOF/FvDoADYAGBMGb7FtErm5MXMlmPAJQVgWta7Zx2go+8xJ0UiCb8LHHdftWyLJE0QIAIsI+UbXu67dZMjmgDGCGl1H+vpF4NSDckSIkk7Vd+sxEhBQMRU8j/12UIRhzSaUdQ+rQU5kGeFxm+hb1oh6pWWmv3uvmReDl0UnvtapVaIzo1jZbf/pD6ElLqSX+rUmOQNpJFa/r+sa4e/pBlAABoAAAAA3CUgShLdGIxsY7AUABPRrgCABdDuQ5GC7DqPQCgbbJUAoRSUj+NIEig0YfyWUho1VBBBA//uQZB4ABZx5zfMakeAAAAmwAAAAF5F3P0w9GtAAACfAAAAAwLhMDmAYWMgVEG1U0FIGCBgXBXAtfMH10000EEEEEECUBYln03TTTdNBDZopopYvrTTdNa325mImNg3TTPV9q3pmY0xoO6bv3r00y+IDGid/9aaaZTGMuj9mpu9Mpio1dXrr5HERTZSmqU36A3CumzN/9Robv/Xx4v9ijkSRSNLQhAWumap82WRSBUqXStV/YcS+XVLnSS+WLDroqArFkMEsAS+eWmrUzrO0oEmE40RlMZ5+ODIkAyKAGUwZ3mVKmcamcJnMW26MRPgUw6j+LkhyHGVGYjSUUKNpuJUQoOIAyDvEyG8S5yfK6dhZc0Tx1KI/gviKL6qvvFs1+bWtaz58uUNnryq6kt5RzOCkPWlVqVX2a/EEBUdU1KrXLf40GoiiFXK///qpoiDXrOgqDR38JB0bw7SoL+ZB9o1RCkQjQ2CBYZKd/+VJxZRRZlqSkKiws0WFxUyCwsKiMy7hUVFhIaCrNQsKkTIsLivwKKigsj8XYlwt/WKi2N4d//uQRCSAAjURNIHpMZBGYiaQPSYyAAABLAAAAAAAACWAAAAApUF/Mg+0aohSIRobBAsMlO//Kk4soosy1JSFRYWaLC4qZBYWFRGZdwqKiwkNBVmoWFSJkWFxX4FFRQWR+LsS4W/rFRb/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////VEFHAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAU291bmRib3kuZGUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMjAwNGh0dHA6Ly93d3cuc291bmRib3kuZGUAAAAAAAAAACU=",
+ );
+ snd.play();
}
export default beep;
diff --git a/src/Components/Functions/changePosition.ts b/src/Components/Functions/changePosition.ts
index b129449f..bcd8c9bd 100644
--- a/src/Components/Functions/changePosition.ts
+++ b/src/Components/Functions/changePosition.ts
@@ -1,10 +1,10 @@
-import Translate from '../I18n/i18n';
-import { changeSelectedAllStatus } from '../Shortcut/shortcut';
-import windowName from '../../Service/window';
-import Storage from '../../Service/storage';
-import basename from './path/basename';
-import { UpdateInfo } from '../Layout/infobar';
-import { GET_TAB_ELEMENT } from '../../Util/constants';
+import Storage from "../../Service/storage";
+import windowName from "../../Service/window";
+import { GET_TAB_ELEMENT } from "../../Util/constants";
+import Translate from "../I18n/i18n";
+import { UpdateInfo } from "../Layout/infobar";
+import { changeSelectedAllStatus } from "../Shortcut/shortcut";
+import basename from "./path/basename";
/**
* Change current tab position
* @param {string} newPath - the new position you want to open
@@ -13,38 +13,39 @@ import { GET_TAB_ELEMENT } from '../../Util/constants';
* @returns {Promise}
*/
const changePosition = async (newPath: string, forceChange = false, writeHistory?: boolean): Promise => {
- document.querySelector('.path-navigator').value = newPath;
- GET_TAB_ELEMENT().dataset.path = encodeURI(newPath);
- if (!writeHistory) return;
+ document.querySelector(".path-navigator").value = newPath;
+ GET_TAB_ELEMENT().dataset.path = encodeURI(newPath);
+ if (!writeHistory) return;
- const tabs = await Storage.get(`tabs-${windowName}`);
- const _focusingTab = tabs?.tabs[String(tabs?.focus)];
- _focusingTab.position = newPath;
+ const tabs = await Storage.get(`tabs-${windowName}`);
+ const _focusingTab = tabs?.tabs[String(tabs?.focus)];
+ _focusingTab.position = newPath;
- if (newPath === _focusingTab.history[_focusingTab.currentIndex] && !forceChange) {
- return;
- } else if (newPath === _focusingTab.history[_focusingTab.currentIndex + 1]) {
- _focusingTab.currentIndex += 1;
- } else if (newPath === _focusingTab.history[_focusingTab.currentIndex - 1]) {
- _focusingTab.currentIndex -= 1;
- } else {
- _focusingTab.history = _focusingTab.history.slice(0, _focusingTab.currentIndex + 1);
- _focusingTab.history.push(newPath);
- _focusingTab.currentIndex += 1;
- }
- tabs.tabs[String(tabs.focus)] = _focusingTab;
+ if (newPath === _focusingTab.history[_focusingTab.currentIndex] && !forceChange) {
+ return;
+ }
+ if (newPath === _focusingTab.history[_focusingTab.currentIndex + 1]) {
+ _focusingTab.currentIndex += 1;
+ } else if (newPath === _focusingTab.history[_focusingTab.currentIndex - 1]) {
+ _focusingTab.currentIndex -= 1;
+ } else {
+ _focusingTab.history = _focusingTab.history.slice(0, _focusingTab.currentIndex + 1);
+ _focusingTab.history.push(newPath);
+ _focusingTab.currentIndex += 1;
+ }
+ tabs.tabs[String(tabs.focus)] = _focusingTab;
- document.getElementById(`tab${tabs.focus}`).querySelector('#tab-position').innerText = await Translate(
- document.querySelector('.path-navigator').value.startsWith('Search: ')
- ? newPath
- : basename(newPath) === ''
- ? newPath
- : basename(newPath)
- );
- Storage.set(`tabs-${windowName}`, tabs);
- UpdateInfo('selected-files', '');
- changeSelectedAllStatus();
- return;
+ document.getElementById(`tab${tabs.focus}`).querySelector("#tab-position").innerText = await Translate(
+ document.querySelector(".path-navigator").value.startsWith("Search: ")
+ ? newPath
+ : basename(newPath) === ""
+ ? newPath
+ : basename(newPath),
+ );
+ Storage.set(`tabs-${windowName}`, tabs);
+ UpdateInfo("selected-files", "");
+ changeSelectedAllStatus();
+ return;
};
export default changePosition;
diff --git a/src/Components/Functions/dragElement.ts b/src/Components/Functions/dragElement.ts
index 67d57faa..f0a7c9fe 100644
--- a/src/Components/Functions/dragElement.ts
+++ b/src/Components/Functions/dragElement.ts
@@ -5,50 +5,44 @@
* @returns {void}
*/
function dragElement(elmnt: HTMLElement, parentElement: HTMLElement): void {
- let pos1 = 0,
- pos2 = 0,
- pos3 = 0,
- pos4 = 0;
- elmnt.onmousedown = dragMouseDown;
+ let pos1 = 0;
+ let pos2 = 0;
+ let pos3 = 0;
+ let pos4 = 0;
+ elmnt.onmousedown = dragMouseDown;
- function dragMouseDown(e: MouseEvent) {
- e = e || (window.event as MouseEvent);
- e.preventDefault();
- // get the mouse cursor position at startup:
- pos3 = e.clientX;
- pos4 = e.clientY;
- document.onmouseup = closeDragElement;
- // call a function whenever the cursor moves:
- document.onmousemove = elementDrag;
- }
+ function dragMouseDown(e: MouseEvent) {
+ e = e || (window.event as MouseEvent);
+ e.preventDefault();
+ // get the mouse cursor position at startup:
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ document.onmouseup = closeDragElement;
+ // call a function whenever the cursor moves:
+ document.onmousemove = elementDrag;
+ }
- function elementDrag(e: MouseEvent) {
- e = e || (window.event as MouseEvent);
- e.preventDefault();
- // calculate the new cursor position:
- pos1 = pos3 - e.clientX;
- pos2 = pos4 - e.clientY;
- pos3 = e.clientX;
- pos4 = e.clientY;
- const x = parentElement.offsetLeft - parentElement.offsetWidth / 2;
- const y = parentElement.offsetTop - parentElement.offsetHeight / 2;
- // set the element's new position:
- if (
- y - pos2 >= 0 &&
- y + parentElement.offsetHeight - pos2 <= window.innerHeight
- )
- parentElement.style.top = parentElement.offsetTop - pos2 + 'px';
- if (
- x - pos1 >= 0 &&
- x + parentElement.offsetWidth - pos1 <= window.innerWidth
- )
- parentElement.style.left = parentElement.offsetLeft - pos1 + 'px';
- }
+ function elementDrag(e: MouseEvent) {
+ e = e || (window.event as MouseEvent);
+ e.preventDefault();
+ // calculate the new cursor position:
+ pos1 = pos3 - e.clientX;
+ pos2 = pos4 - e.clientY;
+ pos3 = e.clientX;
+ pos4 = e.clientY;
+ const x = parentElement.offsetLeft - parentElement.offsetWidth / 2;
+ const y = parentElement.offsetTop - parentElement.offsetHeight / 2;
+ // set the element's new position:
+ if (y - pos2 >= 0 && y + parentElement.offsetHeight - pos2 <= window.innerHeight)
+ parentElement.style.top = `${parentElement.offsetTop - pos2}px`;
+ if (x - pos1 >= 0 && x + parentElement.offsetWidth - pos1 <= window.innerWidth)
+ parentElement.style.left = `${parentElement.offsetLeft - pos1}px`;
+ }
- function closeDragElement() {
- /* stop moving when mouse button is released:*/
- document.onmouseup = null;
- document.onmousemove = null;
- }
+ function closeDragElement() {
+ /* stop moving when mouse button is released:*/
+ document.onmouseup = null;
+ document.onmousemove = null;
+ }
}
export default dragElement;
diff --git a/src/Components/Functions/elementClassNameContains.ts b/src/Components/Functions/elementClassNameContains.ts
index 3b06512f..c2f5a355 100644
--- a/src/Components/Functions/elementClassNameContains.ts
+++ b/src/Components/Functions/elementClassNameContains.ts
@@ -1,7 +1,3 @@
-export const elementClassNameContains = (
- element: Element | null,
- match: RegExp
-): boolean => {
- return new RegExp(match).test(element?.className);
+export const elementClassNameContains = (element: Element | null, match: RegExp): boolean => {
+ return new RegExp(match).test(element?.className);
};
-
diff --git a/src/Components/Functions/extractExeIcon.ts b/src/Components/Functions/extractExeIcon.ts
index 276f0c2a..b6b97788 100644
--- a/src/Components/Functions/extractExeIcon.ts
+++ b/src/Components/Functions/extractExeIcon.ts
@@ -1,33 +1,27 @@
const extractExeIcon = (filePath: string): string => {
- const fs = require('fs');
- const path = require('path');
- const { extractIcon } = require('../../Lib/extracticon/bindings');
- const electron = require('electron');
- const basename =
- filePath.split(/[\\/]/)[filePath.split(/[\\/]/).length - 1];
- const app =
- electron.app || (electron.remote && electron.remote.app) || null;
- const EXE_ICON_CACHE_DIR = path.join(
- app.getPath('userData'),
- 'Cache/Exe Icon'
- );
+ const fs = require("node:fs");
+ const path = require("node:path");
+ const { extractIcon } = require("../../Lib/extracticon/bindings");
+ const electron = require("electron");
+ const basename = filePath.split(/[\\/]/)[filePath.split(/[\\/]/).length - 1];
+ const app = electron.app || electron.remote?.app || null;
+ const EXE_ICON_CACHE_DIR = path.join(app.getPath("userData"), "Cache/Exe Icon");
- // Create cache directory if not exist
- if (!fs.existsSync(EXE_ICON_CACHE_DIR)) {
- if (!fs.existsSync(path.join(EXE_ICON_CACHE_DIR, '..'))) {
- fs.mkdirSync(path.join(EXE_ICON_CACHE_DIR, '..'));
- }
- fs.mkdirSync(EXE_ICON_CACHE_DIR);
- }
- const ICON_FILE_NAME = path.join(EXE_ICON_CACHE_DIR, basename + '.ico');
+ // Create cache directory if not exist
+ if (!fs.existsSync(EXE_ICON_CACHE_DIR)) {
+ if (!fs.existsSync(path.join(EXE_ICON_CACHE_DIR, ".."))) {
+ fs.mkdirSync(path.join(EXE_ICON_CACHE_DIR, ".."));
+ }
+ fs.mkdirSync(EXE_ICON_CACHE_DIR);
+ }
+ const ICON_FILE_NAME = path.join(EXE_ICON_CACHE_DIR, `${basename}.ico`);
- // Cache the icon parsed from the exe
- if (fs.existsSync(ICON_FILE_NAME)) {
- return ICON_FILE_NAME;
- } else {
- const buffer = extractIcon(filePath, 'large');
- fs.writeFileSync(ICON_FILE_NAME, buffer);
- return ICON_FILE_NAME;
- }
+ // Cache the icon parsed from the exe
+ if (fs.existsSync(ICON_FILE_NAME)) {
+ return ICON_FILE_NAME;
+ }
+ const buffer = extractIcon(filePath, "large");
+ fs.writeFileSync(ICON_FILE_NAME, buffer);
+ return ICON_FILE_NAME;
};
export default extractExeIcon;
diff --git a/src/Components/Functions/filesize.test.ts b/src/Components/Functions/filesize.test.ts
index b6efa9c7..ab1ddb0e 100644
--- a/src/Components/Functions/filesize.test.ts
+++ b/src/Components/Functions/filesize.test.ts
@@ -1,27 +1,27 @@
-import * as filesize from './filesize';
+import * as filesize from "./filesize";
// @ponicode
-describe('filesize.default', () => {
- test('0', () => {
- const result = filesize.default(1024);
- expect(result).toBe('1 KB');
- });
+describe("filesize.default", () => {
+ test("0", () => {
+ const result = filesize.default(1024);
+ expect(result).toBe("1 KB");
+ });
- test('1', () => {
- const result = filesize.default(102);
- expect(result).toBe('102 Bytes');
- });
+ test("1", () => {
+ const result = filesize.default(102);
+ expect(result).toBe("102 Bytes");
+ });
- test('2', () => {
- const result = filesize.default(2097052);
- expect(result).toBe('2 MB');
- });
+ test("2", () => {
+ const result = filesize.default(2097052);
+ expect(result).toBe("2 MB");
+ });
- test('3', () => {
- const result = filesize.default(1073741824);
- expect(result).toBe('1 GB');
- });
- test('4', () => {
- const result = filesize.default(6356551598);
- expect(result).toBe('5.92 GB');
- });
+ test("3", () => {
+ const result = filesize.default(1073741824);
+ expect(result).toBe("1 GB");
+ });
+ test("4", () => {
+ const result = filesize.default(6356551598);
+ expect(result).toBe("5.92 GB");
+ });
});
diff --git a/src/Components/Functions/filesize.ts b/src/Components/Functions/filesize.ts
index 0937bd18..3fb54803 100644
--- a/src/Components/Functions/filesize.ts
+++ b/src/Components/Functions/filesize.ts
@@ -5,13 +5,13 @@
* @returns {string} Human readable file size
*/
const formatBytes = (bytes: number): string => {
- // kBlockFormat = 1024-blocks format byte
- if (bytes === 0) return '0 Bytes';
- const k = 1024;
- const dm = 2; // Decimal digit
- const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
- const i = Math.floor(Math.log(bytes) / Math.log(k));
- return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+ // kBlockFormat = 1024-blocks format byte
+ if (bytes === 0) return "0 Bytes";
+ const k = 1024;
+ const dm = 2; // Decimal digit
+ const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return `${Number.parseFloat((bytes / k ** i).toFixed(dm))} ${sizes[i]}`;
};
export default formatBytes;
diff --git a/src/Components/Functions/focusingPath.ts b/src/Components/Functions/focusingPath.ts
index e495af1a..a687d954 100644
--- a/src/Components/Functions/focusingPath.ts
+++ b/src/Components/Functions/focusingPath.ts
@@ -1,5 +1,5 @@
-import OS from '../../Service/platform';
-import FavoritesAPI from '../../Service/favorites';
+import FavoritesAPI from "../../Service/favorites";
+import OS from "../../Service/platform";
let favoriteData: FavoritesAPI;
let platform: string;
@@ -8,15 +8,15 @@ let platform: string;
* @returns {Promise}
*/
const focusingPath = async (): Promise => {
- const PathNavigator = document.querySelector('.path-navigator') as HTMLInputElement;
- if (!favoriteData) {
- favoriteData = new FavoritesAPI();
- await favoriteData.build();
- }
- if (!platform) {
- platform = await OS();
- }
- return PathNavigator.value === 'xplorer://Home' && platform === 'linux' ? favoriteData.HOMEDIR_PATH : PathNavigator.value;
+ const PathNavigator = document.querySelector(".path-navigator") as HTMLInputElement;
+ if (!favoriteData) {
+ favoriteData = new FavoritesAPI();
+ await favoriteData.build();
+ }
+ if (!platform) {
+ platform = await OS();
+ }
+ return PathNavigator.value === "xplorer://Home" && platform === "linux" ? favoriteData.HOMEDIR_PATH : PathNavigator.value;
};
export default focusingPath;
diff --git a/src/Components/Functions/lazyLoadingImage.ts b/src/Components/Functions/lazyLoadingImage.ts
index 816cee38..940e33fd 100644
--- a/src/Components/Functions/lazyLoadingImage.ts
+++ b/src/Components/Functions/lazyLoadingImage.ts
@@ -1,4 +1,4 @@
-import FileAPI from '../../Service/files';
+import FileAPI from "../../Service/files";
const FETCHED_ICONS: string[] = []; // Array of fetch icons
@@ -8,14 +8,14 @@ const FETCHED_ICONS: string[] = []; // Array of fetch icons
* @returns {boolean} if element in viewport
*/
const isOnImageViewport = (el: HTMLElement): boolean => {
- const rect = el.getBoundingClientRect();
- const windowHeight = window.innerHeight || document.documentElement.clientHeight;
- return (
- rect.top >= 0 &&
- rect.left >= 0 &&
- rect.bottom - windowHeight <= windowHeight &&
- rect.right <= (window.innerWidth || document.documentElement.clientWidth)
- );
+ const rect = el.getBoundingClientRect();
+ const windowHeight = window.innerHeight || document.documentElement.clientHeight;
+ return (
+ rect.top >= 0 &&
+ rect.left >= 0 &&
+ rect.bottom - windowHeight <= windowHeight &&
+ rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+ );
};
/**
@@ -23,18 +23,18 @@ const isOnImageViewport = (el: HTMLElement): boolean => {
* @returns {void}
*/
export const LOAD_IMAGE = (): void => {
- const images = document.querySelectorAll('img[data-src]');
- images.forEach((image: HTMLImageElement) => {
- if (isOnImageViewport(image)) {
- if (image.dataset.isImg === 'true') {
- image.src = new FileAPI(image.dataset.src).readAsset();
- } else {
- image.src = require(`../../Icon/${image.dataset.src}`);
- }
- if (FETCHED_ICONS.indexOf(image.dataset.src) === -1) FETCHED_ICONS.push(image.dataset.src);
- image.removeAttribute('data-src');
- }
- });
+ const images = document.querySelectorAll("img[data-src]");
+ images.forEach((image: HTMLImageElement) => {
+ if (isOnImageViewport(image)) {
+ if (image.dataset.isImg === "true") {
+ image.src = new FileAPI(image.dataset.src).readAsset();
+ } else {
+ image.src = require(`../../Icon/${image.dataset.src}`);
+ }
+ if (FETCHED_ICONS.indexOf(image.dataset.src) === -1) FETCHED_ICONS.push(image.dataset.src);
+ image.removeAttribute("data-src");
+ }
+ });
};
/**
@@ -42,21 +42,21 @@ export const LOAD_IMAGE = (): void => {
* @returns {void}
*/
const LAZY_LOAD_INIT = (): void => {
- // Only show image when its visible in viewport to reduce latency
- document.querySelector('.main-box').addEventListener('scroll', () => {
- const images = document.querySelectorAll('img[data-src]');
- images.forEach((image: HTMLImageElement) => {
- if (isOnImageViewport(image)) {
- if (image.dataset.isImg === 'true') {
- image.src = new FileAPI(image.dataset.src).readAsset();
- } else {
- image.src = require(`../../Icon/${image.dataset.src}`);
- }
- if (FETCHED_ICONS.indexOf(image.dataset.src) === -1) FETCHED_ICONS.push(image.dataset.src);
- image.removeAttribute('data-src');
- }
- });
- });
+ // Only show image when its visible in viewport to reduce latency
+ document.querySelector(".main-box").addEventListener("scroll", () => {
+ const images = document.querySelectorAll("img[data-src]");
+ images.forEach((image: HTMLImageElement) => {
+ if (isOnImageViewport(image)) {
+ if (image.dataset.isImg === "true") {
+ image.src = new FileAPI(image.dataset.src).readAsset();
+ } else {
+ image.src = require(`../../Icon/${image.dataset.src}`);
+ }
+ if (FETCHED_ICONS.indexOf(image.dataset.src) === -1) FETCHED_ICONS.push(image.dataset.src);
+ image.removeAttribute("data-src");
+ }
+ });
+ });
};
export default LAZY_LOAD_INIT;
diff --git a/src/Components/Functions/log.ts b/src/Components/Functions/log.ts
index d6c62882..40b2bb55 100644
--- a/src/Components/Functions/log.ts
+++ b/src/Components/Functions/log.ts
@@ -1,10 +1,10 @@
-import windowName from '../../Service/window';
-import Storage from '../../Service/storage';
-import isValid from './validChecker';
+import Storage from "../../Service/storage";
+import windowName from "../../Service/window";
+import isValid from "./validChecker";
interface OpenLogType {
- path: string;
- timestamp: Date;
+ path: string;
+ timestamp: Date;
}
/**
* Write an error log
@@ -12,10 +12,10 @@ interface OpenLogType {
* @returns {Promise}
*/
const ErrorLog = async (err: any): Promise => {
- const log = await Storage.get('log');
- let errorLog = log?.errors ?? [];
- log.errors = [...errorLog, { err, timestamp: new Date() }];
- Storage.set('log', log);
+ const log = await Storage.get("log");
+ const errorLog = log?.errors ?? [];
+ log.errors = [...errorLog, { err, timestamp: new Date() }];
+ Storage.set("log", log);
};
/**
@@ -24,10 +24,10 @@ const ErrorLog = async (err: any): Promise => {
* @returns {Promise}
*/
const InfoLog = async (info: any): Promise => {
- const log = await Storage.get('log');
- let infoLog = log?.info ?? [];
- log.info = [...infoLog, { info, timestamp: new Date() }];
- Storage.set('log', log);
+ const log = await Storage.get("log");
+ const infoLog = log?.info ?? [];
+ log.info = [...infoLog, { info, timestamp: new Date() }];
+ Storage.set("log", log);
};
/**
@@ -38,21 +38,21 @@ const InfoLog = async (info: any): Promise => {
* @returns {Promise}
*/
const OperationLog = async (
- operationType: 'copy' | 'cut' | 'delete' | 'newfile' | 'newfolder' | 'rename',
- sources?: string | string[],
- destination?: string
+ operationType: "copy" | "cut" | "delete" | "newfile" | "newfolder" | "rename",
+ sources?: string | string[],
+ destination?: string,
): Promise => {
- let operationLogs = await Storage.get(`operations-${windowName}`);
- if (!isValid(operationLogs))
- operationLogs = {
- operations: [],
- currentIndex: -1,
- };
- if (JSON.stringify(operationLogs.operations[operationLogs.currentIndex + 1]) !== JSON.stringify({ operationType, sources, destination }))
- operationLogs.operations = operationLogs.operations.slice(0, operationLogs.currentIndex + 1);
- operationLogs.currentIndex += 1;
- operationLogs.operations.push({ operationType, sources, destination });
- Storage.set(`operations-${windowName}`, operationLogs);
+ let operationLogs = await Storage.get(`operations-${windowName}`);
+ if (!isValid(operationLogs))
+ operationLogs = {
+ operations: [],
+ currentIndex: -1,
+ };
+ if (JSON.stringify(operationLogs.operations[operationLogs.currentIndex + 1]) !== JSON.stringify({ operationType, sources, destination }))
+ operationLogs.operations = operationLogs.operations.slice(0, operationLogs.currentIndex + 1);
+ operationLogs.currentIndex += 1;
+ operationLogs.operations.push({ operationType, sources, destination });
+ Storage.set(`operations-${windowName}`, operationLogs);
};
/**
@@ -60,11 +60,11 @@ const OperationLog = async (
* @param {String} path - File/Dir path
* @returns {Promise}
*/
-const OpenLog = async (path: String): Promise => {
- const log = await Storage.get('log');
- let openLog = log?.opens ?? [];
- log.opens = [...openLog, { path, timestamp: new Date() }];
- Storage.set('log', log);
+const OpenLog = async (path: string): Promise => {
+ const log = await Storage.get("log");
+ const openLog = log?.opens ?? [];
+ log.opens = [...openLog, { path, timestamp: new Date() }];
+ Storage.set("log", log);
};
-export { ErrorLog, InfoLog, OperationLog, OpenLog, OpenLogType };
+export { ErrorLog, InfoLog, OperationLog, OpenLog, type OpenLogType };
diff --git a/src/Components/Functions/new.ts b/src/Components/Functions/new.ts
index fe21acea..0d3c3c13 100644
--- a/src/Components/Functions/new.ts
+++ b/src/Components/Functions/new.ts
@@ -1,27 +1,23 @@
-import NewFile from '../Files/File Operation/new';
-import NewFolder from '../Folder/new';
-import Ask from '../Prompt/ask';
-import focusingPath from './focusingPath';
+import NewFile from "../Files/File Operation/new";
+import NewFolder from "../Folder/new";
+import Ask from "../Prompt/ask";
+import focusingPath from "./focusingPath";
/**
* Create new file/folder with prompting asking file/folder name
* @param {'file'|'folder'} type
* @returns {Promise}
*/
-const New = async (type: 'file' | 'folder'): Promise => {
- /**
- * Don't react if the user is on non-directory page
- */
- if ((await focusingPath()).startsWith('xplorer://')) return;
- if (type === 'file') {
- Ask('New File', 'File Name:').then(async (fileName: string) =>
- NewFile(fileName, await focusingPath())
- );
- } else if (type === 'folder') {
- Ask('New Folder', 'Folder Name:').then(async (folderName: string) =>
- NewFolder(folderName, await focusingPath())
- );
- }
+const New = async (type: "file" | "folder"): Promise => {
+ /**
+ * Don't react if the user is on non-directory page
+ */
+ if ((await focusingPath()).startsWith("xplorer://")) return;
+ if (type === "file") {
+ Ask("New File", "File Name:").then(async (fileName: string) => NewFile(fileName, await focusingPath()));
+ } else if (type === "folder") {
+ Ask("New Folder", "Folder Name:").then(async (folderName: string) => NewFolder(folderName, await focusingPath()));
+ }
};
export default New;
diff --git a/src/Components/Functions/path/basename.test.ts b/src/Components/Functions/path/basename.test.ts
index 97518894..ae50d25b 100644
--- a/src/Components/Functions/path/basename.test.ts
+++ b/src/Components/Functions/path/basename.test.ts
@@ -1,23 +1,23 @@
-import * as basename from './basename';
+import * as basename from "./basename";
// @ponicode
-describe('basename.default', () => {
- test('0', () => {
- const result = basename.default('path/to/file.ext');
- expect(result).toBe('file.ext');
- });
+describe("basename.default", () => {
+ test("0", () => {
+ const result = basename.default("path/to/file.ext");
+ expect(result).toBe("file.ext");
+ });
- test('1', () => {
- const result = basename.default('path/to/folder/');
- expect(result).toBe('folder');
- });
+ test("1", () => {
+ const result = basename.default("path/to/folder/");
+ expect(result).toBe("folder");
+ });
- test('2', () => {
- const result = basename.default('/path/to/file');
- expect(result).toBe('file');
- });
+ test("2", () => {
+ const result = basename.default("/path/to/file");
+ expect(result).toBe("file");
+ });
- test('4', () => {
- const result = basename.default('C:\\\\path\\to\\folder\\');
- expect(result).toBe('folder');
- });
+ test("4", () => {
+ const result = basename.default("C:\\\\path\\to\\folder\\");
+ expect(result).toBe("folder");
+ });
});
diff --git a/src/Components/Functions/path/basename.ts b/src/Components/Functions/path/basename.ts
index 71e85a4c..bd41b415 100644
--- a/src/Components/Functions/path/basename.ts
+++ b/src/Components/Functions/path/basename.ts
@@ -4,8 +4,8 @@
* @returns {string}
*/
const basename = (path: string): string =>
- path
- .replace(/(\\|\/)$/g, '')
- .split(/[\\/]/)
- .pop();
+ path
+ .replace(/(\\|\/)$/g, "")
+ .split(/[\\/]/)
+ .pop();
export default basename;
diff --git a/src/Components/Functions/path/dirname.test.ts b/src/Components/Functions/path/dirname.test.ts
index 5a00d3fe..957422cf 100644
--- a/src/Components/Functions/path/dirname.test.ts
+++ b/src/Components/Functions/path/dirname.test.ts
@@ -1,28 +1,28 @@
-import * as dirname from './dirname';
+import * as dirname from "./dirname";
// @ponicode
-describe('dirname.default', () => {
- test('0', () => {
- const result = dirname.default('/path/to/file');
- expect(result).toBe('/path/to/');
- });
+describe("dirname.default", () => {
+ test("0", () => {
+ const result = dirname.default("/path/to/file");
+ expect(result).toBe("/path/to/");
+ });
- test('1', () => {
- const result = dirname.default('path/to/file.ext');
- expect(result).toBe('path/to/');
- });
+ test("1", () => {
+ const result = dirname.default("path/to/file.ext");
+ expect(result).toBe("path/to/");
+ });
- test('2', () => {
- const result = dirname.default('path/to/folder/');
- expect(result).toBe('path/to/');
- });
+ test("2", () => {
+ const result = dirname.default("path/to/folder/");
+ expect(result).toBe("path/to/");
+ });
- test('3', () => {
- const result = dirname.default('./path/to/file');
- expect(result).toBe('./path/to/');
- });
+ test("3", () => {
+ const result = dirname.default("./path/to/file");
+ expect(result).toBe("./path/to/");
+ });
- test('4', () => {
- const result = dirname.default('C:\\\\path\\to\\folder\\');
- expect(result).toBe('C:\\\\path\\to/');
- });
+ test("4", () => {
+ const result = dirname.default("C:\\\\path\\to\\folder\\");
+ expect(result).toBe("C:\\\\path\\to/");
+ });
});
diff --git a/src/Components/Functions/path/dirname.ts b/src/Components/Functions/path/dirname.ts
index fd3f1d76..f122b7fc 100644
--- a/src/Components/Functions/path/dirname.ts
+++ b/src/Components/Functions/path/dirname.ts
@@ -4,26 +4,26 @@
* @returns {any} result of the evaluated path
*/
const getDirname = (path: string): string => {
- if (path.length === 0) return '.';
- let code = path.charCodeAt(0);
- const hasRoot = code === 47 || code === 92; /*/*/
- let end = -1;
- let matchedSlash = true;
- for (let i = path.length - 1; i >= 1; --i) {
- code = path.charCodeAt(i);
- if (code === 47 || code === 92) {
- if (!matchedSlash) {
- end = i;
- break;
- }
- } else {
- // We saw the first non-path separator
- matchedSlash = false;
- }
- }
- if (end === -1) return hasRoot ? '/' : '.';
- if (hasRoot && end === 1) return '//';
- const result = path.slice(0, end);
- if (!(result.endsWith('/') || result.endsWith('\\'))) return result + '/';
+ if (path.length === 0) return ".";
+ let code = path.charCodeAt(0);
+ const hasRoot = code === 47 || code === 92; /*/*/
+ let end = -1;
+ let matchedSlash = true;
+ for (let i = path.length - 1; i >= 1; --i) {
+ code = path.charCodeAt(i);
+ if (code === 47 || code === 92) {
+ if (!matchedSlash) {
+ end = i;
+ break;
+ }
+ } else {
+ // We saw the first non-path separator
+ matchedSlash = false;
+ }
+ }
+ if (end === -1) return hasRoot ? "/" : ".";
+ if (hasRoot && end === 1) return "//";
+ const result = path.slice(0, end);
+ if (!(result.endsWith("/") || result.endsWith("\\"))) return `${result}/`;
};
export default getDirname;
diff --git a/src/Components/Functions/path/joinPath.test.ts b/src/Components/Functions/path/joinPath.test.ts
index 6acb8aa8..49c94c96 100644
--- a/src/Components/Functions/path/joinPath.test.ts
+++ b/src/Components/Functions/path/joinPath.test.ts
@@ -1,24 +1,24 @@
-import * as joinPath from './joinPath';
+import * as joinPath from "./joinPath";
// @ponicode
-describe('joinPath.default', () => {
- test('0', () => {
- const result = joinPath.default('path/to/', 'test');
- expect(result).toBe('path/to/test');
- });
+describe("joinPath.default", () => {
+ test("0", () => {
+ const result = joinPath.default("path/to/", "test");
+ expect(result).toBe("path/to/test");
+ });
- test('1', () => {
- const result = joinPath.default('path/to/folder/', 'a');
- expect(result).toBe('path/to/folder/a');
- });
+ test("1", () => {
+ const result = joinPath.default("path/to/folder/", "a");
+ expect(result).toBe("path/to/folder/a");
+ });
- test('2', () => {
- const result = joinPath.default('/path/to/file', 'hello');
- expect(result).toBe('/path/to/file/hello');
- });
+ test("2", () => {
+ const result = joinPath.default("/path/to/file", "hello");
+ expect(result).toBe("/path/to/file/hello");
+ });
- test('3', () => {
- const result = joinPath.default('C:\\\\path\\to\\folder\\', 'myfile');
- expect(result).toBe('C:\\\\path\\to\\folder\\myfile');
- });
+ test("3", () => {
+ const result = joinPath.default("C:\\\\path\\to\\folder\\", "myfile");
+ expect(result).toBe("C:\\\\path\\to\\folder\\myfile");
+ });
});
diff --git a/src/Components/Functions/path/joinPath.ts b/src/Components/Functions/path/joinPath.ts
index f88c0033..b708c8bc 100644
--- a/src/Components/Functions/path/joinPath.ts
+++ b/src/Components/Functions/path/joinPath.ts
@@ -4,21 +4,20 @@
* @returns {string}
*/
const joinPath = (...args: string[]): string => {
- if (args.length === 0) return '.';
- let joined;
- for (let i = 0; i < args.length; i++) {
- const arg = args[i];
- if (arg.length > 0) {
- if (joined === undefined) joined = arg;
- else {
- if (!(joined?.endsWith('/') || joined?.endsWith('\\')))
- joined += '/';
- joined += arg;
- }
- }
- }
- if (joined === undefined) return '.';
- return joined;
+ if (args.length === 0) return ".";
+ let joined: string | undefined;
+ for (let i = 0; i < args.length; i++) {
+ const arg = args[i];
+ if (arg.length > 0) {
+ if (joined === undefined) joined = arg;
+ else {
+ if (!(joined?.endsWith("/") || joined?.endsWith("\\"))) joined += "/";
+ joined += arg;
+ }
+ }
+ }
+ if (joined === undefined) return ".";
+ return joined;
};
export default joinPath;
diff --git a/src/Components/Functions/path/normalizeSlash.test.ts b/src/Components/Functions/path/normalizeSlash.test.ts
index 08873a45..11befbbc 100644
--- a/src/Components/Functions/path/normalizeSlash.test.ts
+++ b/src/Components/Functions/path/normalizeSlash.test.ts
@@ -1,20 +1,20 @@
-import * as normalizeSlash from './normalizeSlash';
+import * as normalizeSlash from "./normalizeSlash";
// @ponicode
-describe('normalizeSlash.default', () => {
- test('0', () => {
- const result = normalizeSlash.default('path/to/folder/');
- expect(result).toBe('path/to/folder');
- });
- test('1', () => {
- const result = normalizeSlash.default('path\\to\\folder\\');
- expect(result).toBe('path/to/folder');
- });
- test('2', () => {
- const result = normalizeSlash.default('E:');
- expect(result).toBe('E:/');
- });
- test('3', () => {
- const result = normalizeSlash.default('E:/');
- expect(result).toBe('E:/');
- });
+describe("normalizeSlash.default", () => {
+ test("0", () => {
+ const result = normalizeSlash.default("path/to/folder/");
+ expect(result).toBe("path/to/folder");
+ });
+ test("1", () => {
+ const result = normalizeSlash.default("path\\to\\folder\\");
+ expect(result).toBe("path/to/folder");
+ });
+ test("2", () => {
+ const result = normalizeSlash.default("E:");
+ expect(result).toBe("E:/");
+ });
+ test("3", () => {
+ const result = normalizeSlash.default("E:/");
+ expect(result).toBe("E:/");
+ });
});
diff --git a/src/Components/Functions/path/normalizeSlash.ts b/src/Components/Functions/path/normalizeSlash.ts
index 78ece963..f3f43a3b 100644
--- a/src/Components/Functions/path/normalizeSlash.ts
+++ b/src/Components/Functions/path/normalizeSlash.ts
@@ -4,12 +4,11 @@
* @returns {string}
*/
const NormalizeSlash = (path: string): string => {
- if (path === '\\' || path === '/') return '/';
- path = path.replace(/\\/g, '/');
+ if (path === "\\" || path === "/") return "/";
+ path = path.replace(/\\/g, "/");
- if (path.length === 2 && /.:/.test(path)) return path + '/';
- if (path.endsWith('/') && !(path.length === 3 && /.:\//.test(path)))
- return path.slice(0, path.length - 1);
- return path;
+ if (path.length === 2 && /.:/.test(path)) return `${path}/`;
+ if (path.endsWith("/") && !(path.length === 3 && /.:\//.test(path))) return path.slice(0, path.length - 1);
+ return path;
};
export default NormalizeSlash;
diff --git a/src/Components/Functions/toggleHiddenFiles.ts b/src/Components/Functions/toggleHiddenFiles.ts
index 1388e8a8..73216a78 100644
--- a/src/Components/Functions/toggleHiddenFiles.ts
+++ b/src/Components/Functions/toggleHiddenFiles.ts
@@ -1,10 +1,10 @@
-import { MAIN_BOX_ELEMENT } from '../../Util/constants';
-import Storage from '../../Service/storage';
+import Storage from "../../Service/storage";
+import { MAIN_BOX_ELEMENT } from "../../Util/constants";
const toggleHiddenFiles = async (): Promise => {
- const _preference = await Storage.get('preference');
- const hideHiddenFiles = !_preference?.hideHiddenFiles;
- _preference.hideHiddenFiles = hideHiddenFiles;
- MAIN_BOX_ELEMENT().dataset.hideHiddenFiles = String(hideHiddenFiles);
- Storage.set('preference', _preference);
+ const _preference = await Storage.get("preference");
+ const hideHiddenFiles = !_preference?.hideHiddenFiles;
+ _preference.hideHiddenFiles = hideHiddenFiles;
+ MAIN_BOX_ELEMENT().dataset.hideHiddenFiles = String(hideHiddenFiles);
+ Storage.set("preference", _preference);
};
export default toggleHiddenFiles;
diff --git a/src/Components/Functions/urlify.ts b/src/Components/Functions/urlify.ts
index cae99cfa..792a9560 100644
--- a/src/Components/Functions/urlify.ts
+++ b/src/Components/Functions/urlify.ts
@@ -4,11 +4,8 @@
* @returns {string} URLified HTML text.
*/
const URLify = (string: string): string => {
- const regex = />((((ftp|https?):\/\/)|(w{3}\.))[-\w@:%_+.~#?,&//=]+)/g;
- return string.replace(
- regex,
- '>$1'
- );
+ const regex = />((((ftp|https?):\/\/)|(w{3}\.))[-\w@:%_+.~#?,&//=]+)/g;
+ return string.replace(regex, '>$1');
};
/**
@@ -17,14 +14,14 @@ const URLify = (string: string): string => {
* @returns {string} eURLified HTML text.
*/
const eURLify = (string: string): string => {
- const _el = document.createElement('div');
- _el.innerHTML = string;
- _el.querySelectorAll('a').forEach((a) => {
- if (a.getAttribute('target') !== '_blank') {
- a.setAttribute('target', '_blank');
- }
- });
- return _el.innerHTML;
+ const _el = document.createElement("div");
+ _el.innerHTML = string;
+ _el.querySelectorAll("a").forEach((a) => {
+ if (a.getAttribute("target") !== "_blank") {
+ a.setAttribute("target", "_blank");
+ }
+ });
+ return _el.innerHTML;
};
export { URLify, eURLify };
diff --git a/src/Components/Functions/validChecker.test.ts b/src/Components/Functions/validChecker.test.ts
index 9a92ec53..9e44499c 100644
--- a/src/Components/Functions/validChecker.test.ts
+++ b/src/Components/Functions/validChecker.test.ts
@@ -1,49 +1,49 @@
-import * as validChecker from './validChecker';
+import * as validChecker from "./validChecker";
// @ponicode
-describe('validChecker.default', () => {
- test('0', () => {
- const result = validChecker.default({
- key1: 'Foo bar',
- key5: -5.48,
- });
- expect(result).toBe(true);
- });
+describe("validChecker.default", () => {
+ test("0", () => {
+ const result = validChecker.default({
+ key1: "Foo bar",
+ key5: -5.48,
+ });
+ expect(result).toBe(true);
+ });
- test('1', () => {
- const result = validChecker.default({ key1: 'foo bar', key5: -100 });
- expect(result).toBe(true);
- });
+ test("1", () => {
+ const result = validChecker.default({ key1: "foo bar", key5: -100 });
+ expect(result).toBe(true);
+ });
- test('2', () => {
- const result = validChecker.default({
- key1: 'Hello, world!',
- key5: 1,
- });
- expect(result).toBe(true);
- });
+ test("2", () => {
+ const result = validChecker.default({
+ key1: "Hello, world!",
+ key5: 1,
+ });
+ expect(result).toBe(true);
+ });
- test('3', () => {
- const result = validChecker.default({
- key1: 'Hello, world!',
- key5: -100,
- });
- expect(result).toBe(true);
- });
+ test("3", () => {
+ const result = validChecker.default({
+ key1: "Hello, world!",
+ key5: -100,
+ });
+ expect(result).toBe(true);
+ });
- test('4', () => {
- const result = validChecker.default(undefined);
- expect(result).toBe(false);
- });
- test('5', () => {
- const result = validChecker.default(null);
- expect(result).toBe(false);
- });
- test('5', () => {
- const result = validChecker.default({});
- expect(result).toBe(false);
- });
- test('6', () => {
- const result = validChecker.default([]);
- expect(result).toBe(false);
- });
+ test("4", () => {
+ const result = validChecker.default(undefined);
+ expect(result).toBe(false);
+ });
+ test("5", () => {
+ const result = validChecker.default(null);
+ expect(result).toBe(false);
+ });
+ test("5", () => {
+ const result = validChecker.default({});
+ expect(result).toBe(false);
+ });
+ test("6", () => {
+ const result = validChecker.default([]);
+ expect(result).toBe(false);
+ });
});
diff --git a/src/Components/Functions/validChecker.ts b/src/Components/Functions/validChecker.ts
index 20983129..8d743b0c 100644
--- a/src/Components/Functions/validChecker.ts
+++ b/src/Components/Functions/validChecker.ts
@@ -6,14 +6,16 @@
* @returns {boolean} is it valid?
*/
const IsValid = (obj: any): boolean => {
- if (obj === null || obj === undefined) return false;
- else if (Array.isArray(obj)) {
- if (obj.length === 0) return false;
- else return true;
- } else if (typeof obj === 'object') {
- if (Object.keys(obj).length === 0) return false;
- else return true;
- } else if (obj) return true;
- return false;
+ if (obj === null || obj === undefined) return false;
+ if (Array.isArray(obj)) {
+ if (obj.length === 0) return false;
+ return true;
+ }
+ if (typeof obj === "object") {
+ if (Object.keys(obj).length === 0) return false;
+ return true;
+ }
+ if (obj) return true;
+ return false;
};
export default IsValid;
diff --git a/src/Components/Functions/viewport.ts b/src/Components/Functions/viewport.ts
index 2add4dac..59045f3a 100644
--- a/src/Components/Functions/viewport.ts
+++ b/src/Components/Functions/viewport.ts
@@ -4,13 +4,13 @@
* @returns {boolean} if element in viewport
*/
const isElementInViewport = (el: HTMLElement): boolean => {
- const rect = el.getBoundingClientRect();
- return (
- rect.top >= 0 &&
- rect.left >= 0 &&
- rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
- rect.right <= (window.innerWidth || document.documentElement.clientWidth)
- );
+ const rect = el.getBoundingClientRect();
+ return (
+ rect.top >= 0 &&
+ rect.left >= 0 &&
+ rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+ rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+ );
};
/**
@@ -19,7 +19,7 @@ const isElementInViewport = (el: HTMLElement): boolean => {
* @returns {void}
*/
const ensureElementInViewPort = (element: HTMLElement): void => {
- if (!isElementInViewport(element)) element.scrollIntoView({ block: 'center', behavior: 'smooth' });
+ if (!isElementInViewport(element)) element.scrollIntoView({ block: "center", behavior: "smooth" });
};
export { ensureElementInViewPort };
diff --git a/src/Components/Header/SubHeader.tsx b/src/Components/Header/SubHeader.tsx
index 8546619b..5da3ce55 100644
--- a/src/Components/Header/SubHeader.tsx
+++ b/src/Components/Header/SubHeader.tsx
@@ -1,6 +1,6 @@
-import React, { FormEvent, useEffect, useState } from "react";
+import React, { type FormEvent, useEffect, useState } from "react";
-import { ITab } from ".";
+import type { ITab } from ".";
import { getParentDirectory } from "../../Helpers/paths";
import { ThemedButton, ThemedDiv, ThemedInput } from "../Theme";
@@ -19,7 +19,7 @@ const SubHeader = ({ activeTab, handleBack, handleForward, handlePathChange, han
useEffect(() => {
if (JSON.stringify(activeTab) === JSON.stringify(tempTab)) return;
setTempTab(activeTab);
- }, [activeTab]);
+ }, [activeTab, tempTab]);
const handleFormSubmit = (e: FormEvent) => {
e.preventDefault();
@@ -52,7 +52,12 @@ const SubHeader = ({ activeTab, handleBack, handleForward, handlePathChange, han
handlePathChange({ ...tempTab, path: getParentDirectory(tempTab.path) })}
+ onClick={() =>
+ handlePathChange({
+ ...tempTab,
+ path: getParentDirectory(tempTab.path),
+ })
+ }
// id="go-parent-dir"
title="Parent Directory (Alt + Up Arrow)"
>
diff --git a/src/Components/Header/index.tsx b/src/Components/Header/index.tsx
index 2a63fe26..3ba0423c 100644
--- a/src/Components/Header/index.tsx
+++ b/src/Components/Header/index.tsx
@@ -1,13 +1,13 @@
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
-import SubHeader from "./SubHeader";
import { getStandardPath } from "../../Helpers/paths";
import { fetchFilesRequest, updateHistoryIdxRequest } from "../../Store/ActionCreators/DirectoryActionCreators";
import { createTab, deleteTab, setActiveTab } from "../../Store/ActionCreators/TabActionCreators";
-import { IAppState } from "../../Store/Reducers";
-import { ThemedButton, ThemedDiv, ThemedSpan } from "../Theme";
import { closeWindowRequest, maximizeWindowRequest, minimizeWindowRequest } from "../../Store/ActionCreators/WindowActionCreators";
+import type { IAppState } from "../../Store/Reducers";
+import { ThemedButton, ThemedDiv, ThemedSpan } from "../Theme";
+import SubHeader from "./SubHeader";
let tabId = 0;
export interface ITab {
name: string;
@@ -72,19 +72,19 @@ const Header = () => {
id="minimize"
title="Minimize"
onClick={() => dispatch(minimizeWindowRequest())}
- >
+ />
dispatch(maximizeWindowRequest())}
- >
+ />
dispatch(closeWindowRequest())}
- >
+ />
diff --git a/src/Components/I18n/i18n.ts b/src/Components/I18n/i18n.ts
index fad368ac..99848f2d 100644
--- a/src/Components/I18n/i18n.ts
+++ b/src/Components/I18n/i18n.ts
@@ -1,5 +1,5 @@
-import Storage from "../../Service/storage";
import LocalesAPI from "../../Service/locales";
+import Storage from "../../Service/storage";
let localesInformation: LocalesAPI;
@@ -14,19 +14,15 @@ const Translate = async (source: string): Promise => {
localesInformation = new LocalesAPI();
await localesInformation.build();
}
- const lang =
- (await Storage.get("preference"))?.language ?? navigator.language;
+ const lang = (await Storage.get("preference"))?.language ?? navigator.language;
for (const locale of Object.values(localesInformation.AVAILABLE_LOCALES)) {
// Check if the inputed lang available
if (locale === lang) {
if (localesInformation.LOCALES[locale]) {
// Replace all text
- Object.keys(localesInformation.LOCALES[locale]).forEach(
- (key) => {
- if (source === key)
- source = localesInformation.LOCALES[locale][key];
- }
- );
+ Object.keys(localesInformation.LOCALES[locale]).forEach((key) => {
+ if (source === key) source = localesInformation.LOCALES[locale][key];
+ });
}
// Return translated text
return source;
diff --git a/src/Components/Layout/home.ts b/src/Components/Layout/home.ts
index cdf425e5..0e66e251 100644
--- a/src/Components/Layout/home.ts
+++ b/src/Components/Layout/home.ts
@@ -1,16 +1,16 @@
-import { Drives } from '../Drives/drives';
-import Favorites from '../Favorites/favorites';
-import { updateTheme } from '../Theme/theme';
-import { startLoading, stopLoading } from '../Functions/Loading/loading';
-import OS from '../../Service/platform';
-import DirectoryAPI from '../../Service/directory';
-import FavoritesAPI from '../../Service/favorites';
-import displayFiles from '../Open/displayFiles';
-import { LOAD_IMAGE } from '../Functions/lazyLoadingImage';
-import { GET_TAB_ELEMENT } from '../../Util/constants';
+import DirectoryAPI from "../../Service/directory";
+import FavoritesAPI from "../../Service/favorites";
+import OS from "../../Service/platform";
+import { GET_TAB_ELEMENT } from "../../Util/constants";
+import { Drives } from "../Drives/drives";
+import Favorites from "../Favorites/favorites";
+import { startLoading, stopLoading } from "../Functions/Loading/loading";
+import { LOAD_IMAGE } from "../Functions/lazyLoadingImage";
+import displayFiles from "../Open/displayFiles";
+import { updateTheme } from "../Theme/theme";
let platform: string;
(async () => {
- platform = await OS();
+ platform = await OS();
})();
let favoritesData: FavoritesAPI;
@@ -20,37 +20,37 @@ let favoritesData: FavoritesAPI;
* @returns {Promise}
*/
const Home = async (): Promise => {
- startLoading();
- // Get the main element
- const MAIN_ELEMENT = GET_TAB_ELEMENT();
- if (MAIN_ELEMENT.classList.contains('empty-dir-notification')) MAIN_ELEMENT.classList.remove('empty-dir-notification'); // Remove class if exist
- const favorites = await Favorites();
- const drives = await Drives();
- MAIN_ELEMENT.innerHTML = favorites + drives;
- if (platform !== 'win32') {
- if (!favoritesData?.HOMEDIR_PATH) {
- favoritesData = new FavoritesAPI();
- await favoritesData.build();
- }
- const directoryInfo = new DirectoryAPI(favoritesData.HOMEDIR_PATH);
- const homeElement = document.createElement('section');
- homeElement.classList.add('home-section');
- homeElement.innerHTML = 'Files';
+ startLoading();
+ // Get the main element
+ const MAIN_ELEMENT = GET_TAB_ELEMENT();
+ if (MAIN_ELEMENT.classList.contains("empty-dir-notification")) MAIN_ELEMENT.classList.remove("empty-dir-notification"); // Remove class if exist
+ const favorites = await Favorites();
+ const drives = await Drives();
+ MAIN_ELEMENT.innerHTML = favorites + drives;
+ if (platform !== "win32") {
+ if (!favoritesData?.HOMEDIR_PATH) {
+ favoritesData = new FavoritesAPI();
+ await favoritesData.build();
+ }
+ const directoryInfo = new DirectoryAPI(favoritesData.HOMEDIR_PATH);
+ const homeElement = document.createElement("section");
+ homeElement.classList.add("home-section");
+ homeElement.innerHTML = '
${eURLify(value)}
`);
- } else if (['xlsx', 'xls', 'xlsb', 'xls', 'ods', 'fods', 'csv'].indexOf(ext) !== -1) {
- const xlsxData = xlsx.read(await new FileAPI(filePath).readBuffer(), { type: 'buffer' });
- const parsedData = xlsx.utils.sheet_to_html(xlsxData.Sheets[xlsxData.SheetNames[0]]);
- changePreview(`${URLify(parsedData)}
`);
- } else if (IMAGE_TYPES.indexOf(ext) !== -1) {
- changePreview(`
- //
- //
`
- // );
- } else if (PLAINTEXT_TYPES.indexOf(ext) !== -1) {
- changePreview(`${await new FileAPI(filePath).readFile()}
`);
- } else if (MARKDOWN_TYPES.indexOf(ext) !== -1) {
- const html = marked(await new FileAPI(filePath).readFile());
- changePreview(`${eURLify(html)}
`);
- previewElement.querySelectorAll('img').forEach(async (img) => {
- if (!isValidURL(img.src)) {
- let imgData = new FileAPI(img.src);
- if (!(await imgData.exists())) {
- let imgPath = new URL(img.src).pathname;
- if (imgPath.charAt(0) === '/') imgPath = imgPath.substr(1);
- imgData = new FileAPI(`${getDirname(filePath)}${imgPath}`);
- if (await imgData.exists()) {
- img.src = imgData.readAsset();
- }
- } else {
- img.src = await imgData.readFile();
- }
- }
- });
- } else {
- try {
- const fileData = new FileAPI(filePath);
- const property = await fileData.properties();
- let highlight = true;
- if (property.size > 1024 * 100) {
- const confirm = await ConfirmDialog(
- 'File too large',
- 'File size is larger than 100kb, proceeding previewing file might crashes Xplorer, do you want to proceed?',
- 'Yes'
- );
- if (!confirm) return;
- }
- if (property.size > 1024 * 10) {
- highlight = false;
- }
- const fileText = await fileData.readFile();
- const highlightedCode = hljs.highlightAuto(fileText).value;
+ let previewed = true;
+ if (ext === "pdf") {
+ changePreview(
+ ``,
+ );
+ } else if (HTML_TYPES.indexOf(ext) !== -1) {
+ changePreview(``);
+ } else if (["doc", "docb", "docm", "dot", "dotm", "docx", "rtf"].indexOf(ext) !== -1) {
+ const { convertToHtml } = require("./mammoth.browser.min");
+ const buf = await new FileAPI(filePath).readBuffer();
+ const { value } = await convertToHtml({ arrayBuffer: buf });
+ changePreview(`${eURLify(value)}
`);
+ } else if (["xlsx", "xls", "xlsb", "xls", "ods", "fods", "csv"].indexOf(ext) !== -1) {
+ const xlsxData = xlsx.read(await new FileAPI(filePath).readBuffer(), {
+ type: "buffer",
+ });
+ const parsedData = xlsx.utils.sheet_to_html(xlsxData.Sheets[xlsxData.SheetNames[0]]);
+ changePreview(`${URLify(parsedData)}
`);
+ } else if (IMAGE_TYPES.indexOf(ext) !== -1) {
+ changePreview(`
+ //
+ //
`
+ // );
+ } else if (PLAINTEXT_TYPES.indexOf(ext) !== -1) {
+ changePreview(`${await new FileAPI(filePath).readFile()}
`);
+ } else if (MARKDOWN_TYPES.indexOf(ext) !== -1) {
+ const html = marked(await new FileAPI(filePath).readFile());
+ changePreview(`${eURLify(html)}
`);
+ previewElement.querySelectorAll("img").forEach(async (img) => {
+ if (!isValidURL(img.src)) {
+ let imgData = new FileAPI(img.src);
+ if (!(await imgData.exists())) {
+ let imgPath = new URL(img.src).pathname;
+ if (imgPath.charAt(0) === "/") imgPath = imgPath.substr(1);
+ imgData = new FileAPI(`${getDirname(filePath)}${imgPath}`);
+ if (await imgData.exists()) {
+ img.src = imgData.readAsset();
+ }
+ } else {
+ img.src = await imgData.readFile();
+ }
+ }
+ });
+ } else {
+ try {
+ const fileData = new FileAPI(filePath);
+ const property = await fileData.properties();
+ let highlight = true;
+ if (property.size > 1024 * 100) {
+ const confirm = await ConfirmDialog(
+ "File too large",
+ "File size is larger than 100kb, proceeding previewing file might crashes Xplorer, do you want to proceed?",
+ "Yes",
+ );
+ if (!confirm) return;
+ }
+ if (property.size > 1024 * 10) {
+ highlight = false;
+ }
+ const fileText = await fileData.readFile();
+ const highlightedCode = hljs.highlightAuto(fileText).value;
- changePreview(
- highlight
- ? `${highlightedCode}${fileText}
`
- );
- } catch (_) {
- previewed = false;
- }
- }
+ changePreview(
+ highlight
+ ? `${highlightedCode}${fileText}
`,
+ );
+ } catch (_) {
+ previewed = false;
+ }
+ }
- if (!previewed) PromptError('No preview handler', 'There is no preview handler for this file type yet.');
+ if (!previewed) PromptError("No preview handler", "There is no preview handler for this file type yet.");
};
export default Preview;
export { closePreviewFile };
diff --git a/src/Components/Folder/new.ts b/src/Components/Folder/new.ts
index 99ed1267..8ff5a162 100644
--- a/src/Components/Folder/new.ts
+++ b/src/Components/Folder/new.ts
@@ -1,7 +1,7 @@
-import { OperationLog } from '../Functions/log';
-import focusingPath from '../Functions/focusingPath';
-import FolderAPI from '../../Service/directory';
-import PromptError from '../Prompt/error';
+import FolderAPI from "../../Service/directory";
+import focusingPath from "../Functions/focusingPath";
+import { OperationLog } from "../Functions/log";
+import PromptError from "../Prompt/error";
/**
* Create a folder
* @param {string} folderName - name for the new folder
@@ -10,20 +10,20 @@ import PromptError from '../Prompt/error';
* @returns {void}
*/
const NewFolder = async (folderName: string, parentDir?: string, writeLog = true): PromiseFiles';
+ startLoading();
+ // Get the main element
+ const MAIN_ELEMENT = GET_TAB_ELEMENT();
+ if (MAIN_ELEMENT.classList.contains("empty-dir-notification")) MAIN_ELEMENT.classList.remove("empty-dir-notification"); // Remove class if exist
+ const favorites = await Favorites();
+ const drives = await Drives();
+ MAIN_ELEMENT.innerHTML = favorites + drives;
+ if (platform !== "win32") {
+ if (!favoritesData?.HOMEDIR_PATH) {
+ favoritesData = new FavoritesAPI();
+ await favoritesData.build();
+ }
+ const directoryInfo = new DirectoryAPI(favoritesData.HOMEDIR_PATH);
+ const homeElement = document.createElement("section");
+ homeElement.classList.add("home-section");
+ homeElement.innerHTML = 'Files';
- const homeFiles = await directoryInfo.getFiles();
- const homeSection = await displayFiles(homeFiles.files, favoritesData.HOMEDIR_PATH, homeElement);
- // Update the content in the main page ...
- MAIN_ELEMENT.innerHTML = favorites + drives;
- MAIN_ELEMENT.appendChild(homeSection);
+ const homeFiles = await directoryInfo.getFiles();
+ const homeSection = await displayFiles(homeFiles.files, favoritesData.HOMEDIR_PATH, homeElement);
+ // Update the content in the main page ...
+ MAIN_ELEMENT.innerHTML = favorites + drives;
+ MAIN_ELEMENT.appendChild(homeSection);
- // And also the theme :)
- updateTheme('favorites');
- updateTheme('grid');
- stopLoading();
- }
- updateTheme('favorites');
- stopLoading();
- LOAD_IMAGE();
+ // And also the theme :)
+ updateTheme("favorites");
+ updateTheme("grid");
+ stopLoading();
+ }
+ updateTheme("favorites");
+ stopLoading();
+ LOAD_IMAGE();
};
export default Home;
diff --git a/src/Components/Layout/hover.ts b/src/Components/Layout/hover.ts
index 54587daa..6e1ac795 100644
--- a/src/Components/Layout/hover.ts
+++ b/src/Components/Layout/hover.ts
@@ -1,83 +1,86 @@
-import FileAPI from '../../Service/files';
-import { IMAGE_TYPES } from '../../Config/file.config';
-import getBasename from '../Functions/path/basename';
-import Storage from '../../Service/storage';
-import { MAIN_BOX_ELEMENT } from '../../Util/constants';
-import focusingPath from '../Functions/focusingPath';
+import { IMAGE_TYPES } from "../../Config/file.config";
+import FileAPI from "../../Service/files";
+import Storage from "../../Service/storage";
+import { MAIN_BOX_ELEMENT } from "../../Util/constants";
+import focusingPath from "../Functions/focusingPath";
+import getBasename from "../Functions/path/basename";
const getExtension = (filename: string): string => {
- const basename = getBasename(filename);
- const index = basename.lastIndexOf('.');
- if (index === -1) {
- return '';
- }
- return basename.substr(index + 1);
+ const basename = getBasename(filename);
+ const index = basename.lastIndexOf(".");
+ if (index === -1) {
+ return "";
+ }
+ return basename.substr(index + 1);
};
/**
* Listen to mouse hovering
* @returns {void}
*/
const Hover = (): void => {
- let timeOut: number;
- let displayName: string;
- let hoveringElement: HTMLElement;
- const hoverPreviewElement = document.createElement('div');
+ let timeOut: number;
+ let displayName: string;
+ let hoveringElement: HTMLElement;
+ const hoverPreviewElement = document.createElement("div");
- MAIN_BOX_ELEMENT().addEventListener('mousemove', (e) => {
- let x = (e as MouseEvent).clientX;
- let y = (e as MouseEvent).clientY;
- window.clearTimeout(timeOut);
- hoverPreviewElement?.parentNode?.removeChild(hoverPreviewElement);
+ MAIN_BOX_ELEMENT().addEventListener("mousemove", (e) => {
+ let x = (e as MouseEvent).clientX;
+ let y = (e as MouseEvent).clientY;
+ window.clearTimeout(timeOut);
+ hoverPreviewElement?.parentNode?.removeChild(hoverPreviewElement);
- // Ignore workspace hovering
- if ((e.target as HTMLElement).classList.contains('workspace-tab') || (e.target as HTMLElement).classList.contains('workspace')) {
- if (hoveringElement?.dataset?.path && displayName) hoveringElement.querySelector('.file-grid-filename').innerHTML = displayName;
- return;
- }
- const isOnSearch = document.querySelector('.path-navigator').value.startsWith('Search: ');
+ // Ignore workspace hovering
+ if ((e.target as HTMLElement).classList.contains("workspace-tab") || (e.target as HTMLElement).classList.contains("workspace")) {
+ if (hoveringElement?.dataset?.path && displayName) hoveringElement.querySelector(".file-grid-filename").innerHTML = displayName;
+ return;
+ }
+ const isOnSearch = document.querySelector(".path-navigator").value.startsWith("Search: ");
- hoveringElement?.classList?.remove('hovering');
+ hoveringElement?.classList?.remove("hovering");
- const target = (e.target as HTMLElement)?.dataset?.path ? (e.target as HTMLElement) : ((e.target as HTMLElement)?.parentNode as HTMLElement);
+ const target = (e.target as HTMLElement)?.dataset?.path ? (e.target as HTMLElement) : ((e.target as HTMLElement)?.parentNode as HTMLElement);
- const filenameGrid = target.querySelector('.file-grid-filename');
+ const filenameGrid = target.querySelector(".file-grid-filename");
- if (!filenameGrid) return;
+ if (!filenameGrid) return;
- if (target !== hoveringElement) {
- displayName = undefined;
- }
- hoveringElement = target;
+ if (target !== hoveringElement) {
+ displayName = undefined;
+ }
+ hoveringElement = target;
- let openFromPreviewElementListener: { (): void; (this: HTMLDivElement, ev: MouseEvent): any; (this: HTMLDivElement, ev: MouseEvent): any } =
- null;
+ let openFromPreviewElementListener: {
+ (): void;
+ (this: HTMLDivElement, ev: MouseEvent): any;
+ (this: HTMLDivElement, ev: MouseEvent): any;
+ } = null;
- timeOut = window.setTimeout(async () => {
- displayName = filenameGrid.innerHTML;
- const path = decodeURI((await focusingPath()) === 'xplorer://Trash' ? target.dataset.realPath : target.dataset.path);
- filenameGrid.innerHTML = isOnSearch ? path : getBasename(path);
- target?.classList?.add('hovering');
+ timeOut = window.setTimeout(async () => {
+ displayName = filenameGrid.innerHTML;
+ const path = decodeURI((await focusingPath()) === "xplorer://Trash" ? target.dataset.realPath : target.dataset.path);
+ filenameGrid.innerHTML = isOnSearch ? path : getBasename(path);
+ target?.classList?.add("hovering");
- const previewImageOnHover = (await Storage.get('appearance')).previewImageOnHover ?? true;
- if (IMAGE_TYPES.indexOf(getExtension(filenameGrid.innerHTML)) !== -1 && previewImageOnHover) {
- hoverPreviewElement.innerHTML = `.readAsset()})
`;
- hoverPreviewElement.classList.add('hover-preview');
- openFromPreviewElementListener = () => {
- new FileAPI(path).openFile();
- hoverPreviewElement.removeEventListener('click', openFromPreviewElementListener); //eslint-disable-line
- };
- hoverPreviewElement.addEventListener('click', openFromPreviewElementListener);
- document.body.appendChild(hoverPreviewElement);
+ const previewImageOnHover = (await Storage.get("appearance")).previewImageOnHover ?? true;
+ if (IMAGE_TYPES.indexOf(getExtension(filenameGrid.innerHTML)) !== -1 && previewImageOnHover) {
+ hoverPreviewElement.innerHTML = ``;
+ hoverPreviewElement.classList.add("hover-preview");
+ openFromPreviewElementListener = () => {
+ new FileAPI(path).openFile();
+ hoverPreviewElement.removeEventListener("click", openFromPreviewElementListener); //eslint-disable-line
+ };
+ hoverPreviewElement.addEventListener("click", openFromPreviewElementListener);
+ document.body.appendChild(hoverPreviewElement);
- if (hoverPreviewElement.clientWidth > window.innerWidth) hoverPreviewElement.style.width = `${0.5 * window.innerWidth}px`;
- if (x + 300 > document.body.offsetWidth) x -= hoverPreviewElement.offsetWidth;
- if (y + hoverPreviewElement.clientHeight > document.body.offsetHeight) y -= hoverPreviewElement.offsetHeight;
- hoverPreviewElement.style.top = y + 'px';
- hoverPreviewElement.style.left = x + 'px';
- hoverPreviewElement.dataset.path = target.dataset.path;
- }
- }, 500);
- });
+ if (hoverPreviewElement.clientWidth > window.innerWidth) hoverPreviewElement.style.width = `${0.5 * window.innerWidth}px`;
+ if (x + 300 > document.body.offsetWidth) x -= hoverPreviewElement.offsetWidth;
+ if (y + hoverPreviewElement.clientHeight > document.body.offsetHeight) y -= hoverPreviewElement.offsetHeight;
+ hoverPreviewElement.style.top = `${y}px`;
+ hoverPreviewElement.style.left = `${x}px`;
+ hoverPreviewElement.dataset.path = target.dataset.path;
+ }
+ }, 500);
+ });
};
export default Hover;
diff --git a/src/Components/Layout/infobar.ts b/src/Components/Layout/infobar.ts
index cb7f76ed..1472de76 100644
--- a/src/Components/Layout/infobar.ts
+++ b/src/Components/Layout/infobar.ts
@@ -1,10 +1,10 @@
-import Storage from '../../Service/storage';
+import Storage from "../../Service/storage";
let infoBarElement: HTMLElement;
const UpdateInfo = (key: string, value: string): void => {
- const el = document.querySelector(`.infobar-item#${key}`);
- if (!el) return;
- el.innerHTML = value;
+ const el = document.querySelector(`.infobar-item#${key}`);
+ if (!el) return;
+ el.innerHTML = value;
};
/**
@@ -12,17 +12,17 @@ const UpdateInfo = (key: string, value: string): void => {
* @returns {any}
*/
const Infobar = async (): Promise => {
- const appearance = await Storage.get('appearance');
- document.body.dataset.infobarEnabled = appearance?.showInfoBar ?? true;
- if (!(appearance?.showInfoBar ?? true)) return;
- infoBarElement = document.createElement('div');
- infoBarElement.classList.add('infobar');
- infoBarElement.id = 'infobar';
- infoBarElement.innerHTML = `
+ const appearance = await Storage.get("appearance");
+ document.body.dataset.infobarEnabled = appearance?.showInfoBar ?? true;
+ if (!(appearance?.showInfoBar ?? true)) return;
+ infoBarElement = document.createElement("div");
+ infoBarElement.classList.add("infobar");
+ infoBarElement.id = "infobar";
+ infoBarElement.innerHTML = `
`;
- document.querySelector('.main').appendChild(infoBarElement);
+ document.querySelector(".main").appendChild(infoBarElement);
};
export default Infobar;
export { UpdateInfo };
diff --git a/src/Components/Layout/resizer.ts b/src/Components/Layout/resizer.ts
index 336e2723..e2ac544d 100644
--- a/src/Components/Layout/resizer.ts
+++ b/src/Components/Layout/resizer.ts
@@ -1,5 +1,5 @@
-import IStorageData from '../../Typings/storageData';
-import Storage from '../../Service/storage';
+import Storage from "../../Service/storage";
+import type IStorageData from "../../Typings/storageData";
const sidebarEdgeSensor = 10;
const windowMinSize = 800;
@@ -13,110 +13,110 @@ let settingsSidebar: HTMLElement;
let appearance: IStorageData;
export const updateSidebarParameters = (updateSidebar = false) => {
- const fontSize = parseInt(document.documentElement.style.fontSize || '18');
- const sidebarDefaultExpandedSizeOld = sidebarDefaultExpandedSize;
- const sidebarMinSizeOld = sidebarMinSize;
- sidebarMinSize = fontSize * 4;
- sidebarMinSnap = 180 + fontSize * 4;
- sidebarDefaultExpandedSize = 200 + fontSize * 4;
- if (!updateSidebar) return;
+ const fontSize = Number.parseInt(document.documentElement.style.fontSize || "18");
+ const sidebarDefaultExpandedSizeOld = sidebarDefaultExpandedSize;
+ const sidebarMinSizeOld = sidebarMinSize;
+ sidebarMinSize = fontSize * 4;
+ sidebarMinSnap = 180 + fontSize * 4;
+ sidebarDefaultExpandedSize = 200 + fontSize * 4;
+ if (!updateSidebar) return;
- let size = parseInt(appearance.expandedSidebarWidth);
- if (sidebar.offsetWidth !== sidebarMinSizeOld) size = sidebar.offsetWidth;
- else size ||= sidebarDefaultExpandedSizeOld;
- size = (size / sidebarDefaultExpandedSizeOld) * sidebarDefaultExpandedSize;
+ let size = Number.parseInt(appearance.expandedSidebarWidth);
+ if (sidebar.offsetWidth !== sidebarMinSizeOld) size = sidebar.offsetWidth;
+ else size ||= sidebarDefaultExpandedSizeOld;
+ size = (size / sidebarDefaultExpandedSizeOld) * sidebarDefaultExpandedSize;
- const minimized = size < sidebarMinSnap || appearance.preferMinimizedSidebar;
- resizeSidebar((minimized ? sidebarMinSize : size) + 'px');
- appearance.expandedSidebarWidth = Math.max(size, sidebarMinSnap) + 'px';
- Storage.set('appearance', appearance);
+ const minimized = size < sidebarMinSnap || appearance.preferMinimizedSidebar;
+ resizeSidebar(`${minimized ? sidebarMinSize : size}px`);
+ appearance.expandedSidebarWidth = `${Math.max(size, sidebarMinSnap)}px`;
+ Storage.set("appearance", appearance);
};
-export const resizeSidebar = function (size?: string) {
- if (!size) {
- if (sidebar.offsetWidth === sidebarMinSize) {
- const defaultSidebarWidth = sidebarDefaultExpandedSize + 'px';
- size = appearance.expandedSidebarWidth || defaultSidebarWidth;
- appearance.preferMinimizedSidebar = false;
- } else {
- size = sidebarMinSize + 'px';
- appearance.preferMinimizedSidebar = true;
- }
- Storage.set('appearance', appearance);
- }
- const root = document.documentElement;
- if (size === sidebarMinSize + 'px') {
- sidebar.classList.add('sidebar-minimized');
- settingsSidebar.classList.add('sidebar-minimized');
- root.style.setProperty('--sidebar-minimized-width', size);
- } else {
- sidebar.classList.remove('sidebar-minimized');
- settingsSidebar.classList.remove('sidebar-minimized');
- root.style.setProperty('--sidebar-minimized-width', '0px');
- }
- appearance.sidebarWidth = size;
- if (sidebar.animate && !matchMedia('(prefers-reduced-motion)').matches) {
- const animateOptions = { duration: 100, fill: 'forwards' } as const;
- sidebar.animate({ width: size }, animateOptions);
- settingsSidebar.animate({ width: size }, animateOptions);
- } else sidebar.style.width = settingsSidebar.style.width = size;
+export const resizeSidebar = (size?: string) => {
+ if (!size) {
+ if (sidebar.offsetWidth === sidebarMinSize) {
+ const defaultSidebarWidth = `${sidebarDefaultExpandedSize}px`;
+ size = appearance.expandedSidebarWidth || defaultSidebarWidth;
+ appearance.preferMinimizedSidebar = false;
+ } else {
+ size = `${sidebarMinSize}px`;
+ appearance.preferMinimizedSidebar = true;
+ }
+ Storage.set("appearance", appearance);
+ }
+ const root = document.documentElement;
+ if (size === `${sidebarMinSize}px`) {
+ sidebar.classList.add("sidebar-minimized");
+ settingsSidebar.classList.add("sidebar-minimized");
+ root.style.setProperty("--sidebar-minimized-width", size);
+ } else {
+ sidebar.classList.remove("sidebar-minimized");
+ settingsSidebar.classList.remove("sidebar-minimized");
+ root.style.setProperty("--sidebar-minimized-width", "0px");
+ }
+ appearance.sidebarWidth = size;
+ if (sidebar.animate && !matchMedia("(prefers-reduced-motion)").matches) {
+ const animateOptions = { duration: 100, fill: "forwards" } as const;
+ sidebar.animate({ width: size }, animateOptions);
+ settingsSidebar.animate({ width: size }, animateOptions);
+ } else sidebar.style.width = settingsSidebar.style.width = size;
};
export const Resizer = async (): Promise => {
- sidebar = document.querySelector('.sidebar');
- settingsSidebar = document.querySelector('.settings-sidebar');
- appearance = (await Storage.get('appearance')) || {};
- updateSidebarParameters();
- const defaultSidebarWidth = sidebarDefaultExpandedSize + 'px';
- resizeSidebar(appearance.sidebarWidth || defaultSidebarWidth);
+ sidebar = document.querySelector(".sidebar");
+ settingsSidebar = document.querySelector(".settings-sidebar");
+ appearance = (await Storage.get("appearance")) || {};
+ updateSidebarParameters();
+ const defaultSidebarWidth = `${sidebarDefaultExpandedSize}px`;
+ resizeSidebar(appearance.sidebarWidth || defaultSidebarWidth);
- const resizeWindow = () => {
- if (window.innerWidth < windowMinSize) resizeSidebar(sidebarMinSize + 'px');
- else if (!appearance.preferMinimizedSidebar) {
- resizeSidebar(appearance.expandedSidebarWidth || defaultSidebarWidth);
- }
- };
- resizeWindow();
- window.addEventListener('resize', resizeWindow);
+ const resizeWindow = () => {
+ if (window.innerWidth < windowMinSize) resizeSidebar(`${sidebarMinSize}px`);
+ else if (!appearance.preferMinimizedSidebar) {
+ resizeSidebar(appearance.expandedSidebarWidth || defaultSidebarWidth);
+ }
+ };
+ resizeWindow();
+ window.addEventListener("resize", resizeWindow);
- let resizing = false;
+ let resizing = false;
- document.addEventListener('mouseup', () => (resizing = false));
+ document.addEventListener("mouseup", () => (resizing = false));
- document.addEventListener('mousedown', ({ clientX: mx }) => {
- const { offsetWidth: w } = sidebar;
- resizing = Math.abs(w - mx) < sidebarEdgeSensor;
- });
+ document.addEventListener("mousedown", ({ clientX: mx }) => {
+ const { offsetWidth: w } = sidebar;
+ resizing = Math.abs(w - mx) < sidebarEdgeSensor;
+ });
- document.addEventListener('mousemove', (event) => {
- type MouseMoveEvent = MouseEvent & { target: HTMLElement };
- const { clientX: mx, clientY: my, target } = event as MouseMoveEvent;
- if (resizing) {
- let width = mx + 'px';
- if (mx < sidebarMinSnap) {
- width = sidebarMinSize + 'px';
- appearance.preferMinimizedSidebar = true;
- } else {
- appearance.expandedSidebarWidth = width;
- appearance.preferMinimizedSidebar = false;
- }
- resizeSidebar(width);
- Storage.set('appearance', appearance);
- }
- if (sidebar.classList.contains('sidebar-minimized')) {
- const itemClasses = ['favorite-item', 'drive-item'];
- if (itemClasses.some((c) => target.classList.contains(c))) {
- const sidebarText = target.querySelector('.sidebar-text');
- const { offsetTop: y, offsetHeight: h } = sidebarText;
- const root = document.documentElement;
- root.style.setProperty('--sidebar-text-y', my - y - h / 2 + 'px');
- }
- }
- const { offsetWidth: w } = sidebar;
- if (Math.abs(w - mx) < sidebarEdgeSensor || resizing) {
- document.body.classList.add('resize-horizontal');
- } else {
- document.body.classList.remove('resize-horizontal');
- }
- });
+ document.addEventListener("mousemove", (event) => {
+ type MouseMoveEvent = MouseEvent & { target: HTMLElement };
+ const { clientX: mx, clientY: my, target } = event as MouseMoveEvent;
+ if (resizing) {
+ let width = `${mx}px`;
+ if (mx < sidebarMinSnap) {
+ width = `${sidebarMinSize}px`;
+ appearance.preferMinimizedSidebar = true;
+ } else {
+ appearance.expandedSidebarWidth = width;
+ appearance.preferMinimizedSidebar = false;
+ }
+ resizeSidebar(width);
+ Storage.set("appearance", appearance);
+ }
+ if (sidebar.classList.contains("sidebar-minimized")) {
+ const itemClasses = ["favorite-item", "drive-item"];
+ if (itemClasses.some((c) => target.classList.contains(c))) {
+ const sidebarText = target.querySelector(".sidebar-text");
+ const { offsetTop: y, offsetHeight: h } = sidebarText;
+ const root = document.documentElement;
+ root.style.setProperty("--sidebar-text-y", `${my - y - h / 2}px`);
+ }
+ }
+ const { offsetWidth: w } = sidebar;
+ if (Math.abs(w - mx) < sidebarEdgeSensor || resizing) {
+ document.body.classList.add("resize-horizontal");
+ } else {
+ document.body.classList.remove("resize-horizontal");
+ }
+ });
};
diff --git a/src/Components/Layout/sidebar.ts b/src/Components/Layout/sidebar.ts
index b271952e..ce6c2f53 100644
--- a/src/Components/Layout/sidebar.ts
+++ b/src/Components/Layout/sidebar.ts
@@ -1,24 +1,24 @@
-import { writeSidebarDriveItems as writeDriveItems } from '../Drives/drives';
-import { updateTheme } from '../Theme/theme';
-import fileThumbnail from '../Thumbnail/thumbnail';
-import Translate from '../I18n/i18n';
-import FavoritesAPI from '../../Service/favorites';
-import DirectoryAPI from '../../Service/directory';
-import Storage from '../../Service/storage';
-import IsValid from '../Functions/validChecker';
-import defaultFavorites from '../Favorites/defaultFavorites';
-import FileAPI from '../../Service/files';
+import DirectoryAPI from "../../Service/directory";
+import FavoritesAPI from "../../Service/favorites";
+import FileAPI from "../../Service/files";
+import Storage from "../../Service/storage";
+import { writeSidebarDriveItems as writeDriveItems } from "../Drives/drives";
+import defaultFavorites from "../Favorites/defaultFavorites";
+import IsValid from "../Functions/validChecker";
+import Translate from "../I18n/i18n";
+import { updateTheme } from "../Theme/theme";
+import fileThumbnail from "../Thumbnail/thumbnail";
interface Favorites {
- name: string;
- path: string;
+ name: string;
+ path: string;
}
let FavoritesData: FavoritesAPI;
let _defaultFavorites: Favorites[] = [];
const isDefaultFavorite = async (filePath: string) => {
- if (!IsValid(_defaultFavorites)) _defaultFavorites = await defaultFavorites();
- return _defaultFavorites.some((favorite) => favorite.path === filePath);
+ if (!IsValid(_defaultFavorites)) _defaultFavorites = await defaultFavorites();
+ return _defaultFavorites.some((favorite) => favorite.path === filePath);
};
/**
@@ -27,37 +27,37 @@ const isDefaultFavorite = async (filePath: string) => {
* @returns {Promise}
*/
const writeFavoriteItems = async (favorites: Favorites[]): Promise => {
- const sidebarCollapseClass = 'sidebar-nav-dropdown-collapsed';
- const sidebar = await Storage.get('sidebar');
- let content = '';
- for (const favorite of favorites) {
- if (!favorite.path) continue;
- const exists = await new FileAPI(favorite.path).exists();
- const isDefault = await isDefaultFavorite(favorite.path);
- const isPseudo = favorite.path.startsWith('xplorer://');
- if (!exists && !isDefault && !isPseudo) continue;
- const isdir = isPseudo || (await new DirectoryAPI(favorite.path).isDir());
- const iconPath = exists && !isDefault ? favorite.path : favorite.name;
- let iconCategory = 'sidebar';
- if (!isDefault && favorite.path !== 'xplorer://Home') {
- iconCategory = isdir ? 'folder' : 'file';
- }
- content +=
- `\n` +
- ` ` +
- ` })
\n` +
- ` \n` +
- ` \n` +
- `\n`;
- }
- const favoriteElement = document.querySelector('#sidebar-favorites');
- const favoriteBtnText = favoriteElement.querySelector('.sidebar-text');
- const favoriteList = favoriteElement.querySelector('.sidebar-nav-list');
- favoriteBtnText.textContent = await Translate('Favorites');
- favoriteList.innerHTML = content;
- if (sidebar?.hideSection?.favorites) {
- favoriteElement.classList.add(sidebarCollapseClass);
- }
+ const sidebarCollapseClass = "sidebar-nav-dropdown-collapsed";
+ const sidebar = await Storage.get("sidebar");
+ let content = "";
+ for (const favorite of favorites) {
+ if (!favorite.path) continue;
+ const exists = await new FileAPI(favorite.path).exists();
+ const isDefault = await isDefaultFavorite(favorite.path);
+ const isPseudo = favorite.path.startsWith("xplorer://");
+ if (!exists && !isDefault && !isPseudo) continue;
+ const isdir = isPseudo || (await new DirectoryAPI(favorite.path).isDir());
+ const iconPath = exists && !isDefault ? favorite.path : favorite.name;
+ let iconCategory = "sidebar";
+ if (!isDefault && favorite.path !== "xplorer://Home") {
+ iconCategory = isdir ? "folder" : "file";
+ }
+ content += `\n })
\n \n \n\n`;
+ }
+ const favoriteElement = document.querySelector("#sidebar-favorites");
+ const favoriteBtnText = favoriteElement.querySelector(".sidebar-text");
+ const favoriteList = favoriteElement.querySelector(".sidebar-nav-list");
+ favoriteBtnText.textContent = await Translate("Favorites");
+ favoriteList.innerHTML = content;
+ if (sidebar?.hideSection?.favorites) {
+ favoriteElement.classList.add(sidebarCollapseClass);
+ }
};
/**
@@ -65,44 +65,44 @@ const writeFavoriteItems = async (favorites: Favorites[]): Promise => {
* @returns {Promise}
*/
const createSidebar = async (): Promise => {
- if (!FavoritesData) {
- FavoritesData = new FavoritesAPI();
- await FavoritesData.build();
- }
+ if (!FavoritesData) {
+ FavoritesData = new FavoritesAPI();
+ await FavoritesData.build();
+ }
- const favorites = await Storage.get('favorites');
- const _favorites = IsValid(favorites?.favorites)
- ? favorites.favorites
- : [
- { name: 'Home', path: 'xplorer://Home' },
- { name: 'Recent', path: 'xplorer://Recent' },
- { name: 'Desktop', path: FavoritesData.DESKTOP_PATH },
- { name: 'Documents', path: FavoritesData.DOCUMENT_PATH },
- { name: 'Downloads', path: FavoritesData.DOWNLOAD_PATH },
- { name: 'Pictures', path: FavoritesData.PICTURE_PATH },
- { name: 'Music', path: FavoritesData.MUSIC_PATH },
- { name: 'Videos', path: FavoritesData.VIDEO_PATH },
- { name: 'Trash', path: 'xplorer://Trash' }, // eslint-disable-next-line no-mixed-spaces-and-tabs
- ];
- await Promise.all([writeFavoriteItems(_favorites), writeDriveItems()]);
- updateTheme('root');
+ const favorites = await Storage.get("favorites");
+ const _favorites = IsValid(favorites?.favorites)
+ ? favorites.favorites
+ : [
+ { name: "Home", path: "xplorer://Home" },
+ { name: "Recent", path: "xplorer://Recent" },
+ { name: "Desktop", path: FavoritesData.DESKTOP_PATH },
+ { name: "Documents", path: FavoritesData.DOCUMENT_PATH },
+ { name: "Downloads", path: FavoritesData.DOWNLOAD_PATH },
+ { name: "Pictures", path: FavoritesData.PICTURE_PATH },
+ { name: "Music", path: FavoritesData.MUSIC_PATH },
+ { name: "Videos", path: FavoritesData.VIDEO_PATH },
+ { name: "Trash", path: "xplorer://Trash" }, // eslint-disable-next-line no-mixed-spaces-and-tabs
+ ];
+ await Promise.all([writeFavoriteItems(_favorites), writeDriveItems()]);
+ updateTheme("root");
- const settingBtnText = document.querySelector('#sidebar-setting-btn span');
- settingBtnText.textContent = await Translate('Settings');
+ const settingBtnText = document.querySelector("#sidebar-setting-btn span");
+ settingBtnText.textContent = await Translate("Settings");
- // Collapse section
- const sidebarElement = document.querySelector('.sidebar');
- sidebarElement.querySelectorAll('.sidebar-nav-toggle').forEach((btn) => {
- btn.addEventListener('click', async ({ target }) => {
- const sidebarCollapseClass = 'sidebar-nav-dropdown-collapsed';
- const sidebarNavItem = (target as HTMLElement).parentElement;
- sidebarNavItem.classList.toggle(sidebarCollapseClass);
- const sidebar = (await Storage.get('sidebar')) || {};
- const collapsed = sidebarNavItem.classList.contains(sidebarCollapseClass);
- (sidebar.hideSection ||= {})[sidebarNavItem.dataset.section] = collapsed;
- Storage.set('sidebar', sidebar);
- });
- });
+ // Collapse section
+ const sidebarElement = document.querySelector(".sidebar");
+ sidebarElement.querySelectorAll(".sidebar-nav-toggle").forEach((btn) => {
+ btn.addEventListener("click", async ({ target }) => {
+ const sidebarCollapseClass = "sidebar-nav-dropdown-collapsed";
+ const sidebarNavItem = (target as HTMLElement).parentElement;
+ sidebarNavItem.classList.toggle(sidebarCollapseClass);
+ const sidebar = (await Storage.get("sidebar")) || {};
+ const collapsed = sidebarNavItem.classList.contains(sidebarCollapseClass);
+ (sidebar.hideSection ||= {})[sidebarNavItem.dataset.section] = collapsed;
+ Storage.set("sidebar", sidebar);
+ });
+ });
};
export default createSidebar;
diff --git a/src/Components/Layout/tab.ts b/src/Components/Layout/tab.ts
index efcaea2c..3106d131 100644
--- a/src/Components/Layout/tab.ts
+++ b/src/Components/Layout/tab.ts
@@ -1,17 +1,17 @@
-import { updateTheme } from '../Theme/theme';
-import Storage from '../../Service/storage';
-import Translate from '../I18n/i18n';
-import windowName from '../../Service/window';
-import { OpenDir } from '../Open/open';
-import { close } from './windowManager';
-import basename from '../Functions/path/basename';
-import Home from './home';
-import { GET_WORKSPACE_ELEMENT } from '../../Util/constants';
-import changePosition from '../Functions/changePosition';
+import Storage from "../../Service/storage";
+import windowName from "../../Service/window";
+import { GET_WORKSPACE_ELEMENT } from "../../Util/constants";
+import changePosition from "../Functions/changePosition";
+import basename from "../Functions/path/basename";
+import Translate from "../I18n/i18n";
+import { OpenDir } from "../Open/open";
+import { updateTheme } from "../Theme/theme";
+import Home from "./home";
+import { close } from "./windowManager";
let tabsManager: HTMLElement;
-document.addEventListener('DOMContentLoaded', () => {
- tabsManager = document.querySelector('.tabs-manager');
+document.addEventListener("DOMContentLoaded", () => {
+ tabsManager = document.querySelector(".tabs-manager");
});
/**
* Function to create new tab
@@ -20,54 +20,54 @@ document.addEventListener('DOMContentLoaded', () => {
*/
const createNewTab = async (path?: string): Promise => {
- const createNewTabElement = document.querySelector('.create-new-tab');
- const tabsInfo = await Storage.get(`tabs-${windowName}`); // Fetch latest tabs information
-
- const newTab = document.createElement('div');
- newTab.classList.add('tab');
- newTab.classList.add('tab-hover-effect');
- newTab.innerHTML = `${await Translate('Home')}×`;
- tabsInfo.latestIndex += 1;
- newTab.dataset.tabIndex = tabsInfo.latestIndex;
- newTab.id = `tab${tabsInfo.latestIndex}`;
-
- updateTheme('tabbing'); // Update the theme
- createNewTabElement.parentElement.insertBefore(newTab, createNewTabElement); // Insert the new tab
- (newTab.parentNode as HTMLElement).scrollLeft = window.pageXOffset + newTab.getBoundingClientRect().left + newTab.offsetWidth; // Scroll the tabs scrollbar
-
- // Scroll the tab to the right end
- (newTab.parentNode as HTMLElement).scrollLeft = (newTab.parentNode as HTMLElement).scrollWidth;
-
- // Edit tabs information
- tabsInfo.tabs[String(tabsInfo.latestIndex)] = {
- position: path || 'xplorer://Home',
- history: ['xplorer://Home'],
- currentIndex: -1,
- };
- tabsInfo.focus = String(tabsInfo.latestIndex);
- tabsInfo.focusHistory.push(tabsInfo.latestIndex);
- Storage.set(`tabs-${windowName}`, tabsInfo);
-
- const newWorkspaceTabElement = document.createElement('div');
- newWorkspaceTabElement.classList.add('workspace-tab');
- newWorkspaceTabElement.id = `tab-1-${tabsInfo.latestIndex}`;
- newWorkspaceTabElement.dataset.path = path || 'xplorer://Home';
- GET_WORKSPACE_ELEMENT(1).appendChild(newWorkspaceTabElement);
-
- document.querySelectorAll('.workspace-tab').forEach((tab: HTMLElement) => {
- tab.classList.remove('workspace-tab-active');
- });
- newWorkspaceTabElement.classList.add('workspace-tab-active');
-
- OpenDir(path || 'xplorer://Home');
-
- newTab.addEventListener('click', (e) => {
- if ((e.target as HTMLElement).classList.contains('close-tab-btn')) return;
- SwitchTab(newTab.dataset.tabIndex);
- });
- if (tabsManager.scrollWidth > tabsManager.clientWidth) tabsManager.removeAttribute('data-tauri-drag-region');
- else tabsManager.setAttribute('data-tauri-drag-region', '');
- return;
+ const createNewTabElement = document.querySelector(".create-new-tab");
+ const tabsInfo = await Storage.get(`tabs-${windowName}`); // Fetch latest tabs information
+
+ const newTab = document.createElement("div");
+ newTab.classList.add("tab");
+ newTab.classList.add("tab-hover-effect");
+ newTab.innerHTML = `${await Translate("Home")}×`;
+ tabsInfo.latestIndex += 1;
+ newTab.dataset.tabIndex = tabsInfo.latestIndex;
+ newTab.id = `tab${tabsInfo.latestIndex}`;
+
+ updateTheme("tabbing"); // Update the theme
+ createNewTabElement.parentElement.insertBefore(newTab, createNewTabElement); // Insert the new tab
+ (newTab.parentNode as HTMLElement).scrollLeft = window.pageXOffset + newTab.getBoundingClientRect().left + newTab.offsetWidth; // Scroll the tabs scrollbar
+
+ // Scroll the tab to the right end
+ (newTab.parentNode as HTMLElement).scrollLeft = (newTab.parentNode as HTMLElement).scrollWidth;
+
+ // Edit tabs information
+ tabsInfo.tabs[String(tabsInfo.latestIndex)] = {
+ position: path || "xplorer://Home",
+ history: ["xplorer://Home"],
+ currentIndex: -1,
+ };
+ tabsInfo.focus = String(tabsInfo.latestIndex);
+ tabsInfo.focusHistory.push(tabsInfo.latestIndex);
+ Storage.set(`tabs-${windowName}`, tabsInfo);
+
+ const newWorkspaceTabElement = document.createElement("div");
+ newWorkspaceTabElement.classList.add("workspace-tab");
+ newWorkspaceTabElement.id = `tab-1-${tabsInfo.latestIndex}`;
+ newWorkspaceTabElement.dataset.path = path || "xplorer://Home";
+ GET_WORKSPACE_ELEMENT(1).appendChild(newWorkspaceTabElement);
+
+ document.querySelectorAll(".workspace-tab").forEach((tab: HTMLElement) => {
+ tab.classList.remove("workspace-tab-active");
+ });
+ newWorkspaceTabElement.classList.add("workspace-tab-active");
+
+ OpenDir(path || "xplorer://Home");
+
+ newTab.addEventListener("click", (e) => {
+ if ((e.target as HTMLElement).classList.contains("close-tab-btn")) return;
+ SwitchTab(newTab.dataset.tabIndex);
+ });
+ if (tabsManager.scrollWidth > tabsManager.clientWidth) tabsManager.removeAttribute("data-tauri-drag-region");
+ else tabsManager.setAttribute("data-tauri-drag-region", "");
+ return;
};
/**
@@ -76,16 +76,16 @@ const createNewTab = async (path?: string): Promise => {
* @returns {Promise}
*/
const SwitchTab = async (tabIndex: number | string): Promise => {
- const tabs = await Storage.get(`tabs-${windowName}`);
- tabs.focus = String(tabIndex);
- tabs.focusHistory.push(parseInt(String(tabIndex)));
- tabs.tabs[tabs.focus].currentIndex -= 1;
- Storage.set(`tabs-${windowName}`, tabs);
- document.querySelectorAll('.workspace-tab').forEach((tab: HTMLElement) => {
- tab.classList.remove('workspace-tab-active');
- });
- document.getElementById(`tab-1-${tabIndex}`).classList.add('workspace-tab-active');
- changePosition(tabs.tabs[tabs.focus].position);
+ const tabs = await Storage.get(`tabs-${windowName}`);
+ tabs.focus = String(tabIndex);
+ tabs.focusHistory.push(Number.parseInt(String(tabIndex)));
+ tabs.tabs[tabs.focus].currentIndex -= 1;
+ Storage.set(`tabs-${windowName}`, tabs);
+ document.querySelectorAll(".workspace-tab").forEach((tab: HTMLElement) => {
+ tab.classList.remove("workspace-tab-active");
+ });
+ document.getElementById(`tab-1-${tabIndex}`).classList.add("workspace-tab-active");
+ changePosition(tabs.tabs[tabs.focus].position);
};
/**
@@ -93,11 +93,11 @@ const SwitchTab = async (tabIndex: number | string): Promise => {
* @returns {Promise}
*/
const goBack = async (): Promise => {
- const tabs = await Storage.get(`tabs-${windowName}`);
- const _focusingTab = tabs.tabs[tabs.focus];
- if (_focusingTab.currentIndex > 0) {
- OpenDir(_focusingTab.history[_focusingTab.currentIndex - 1]);
- }
+ const tabs = await Storage.get(`tabs-${windowName}`);
+ const _focusingTab = tabs.tabs[tabs.focus];
+ if (_focusingTab.currentIndex > 0) {
+ OpenDir(_focusingTab.history[_focusingTab.currentIndex - 1]);
+ }
};
/**
@@ -105,11 +105,11 @@ const goBack = async (): Promise => {
* @returns {Promise}
*/
const goForward = async (): Promise => {
- const tabs = await Storage.get(`tabs-${windowName}`);
- const _focusingTab = tabs.tabs[tabs.focus];
- if (_focusingTab.currentIndex >= 0 && _focusingTab.history?.[_focusingTab.currentIndex + 1]) {
- OpenDir(_focusingTab.history[_focusingTab.currentIndex + 1]);
- }
+ const tabs = await Storage.get(`tabs-${windowName}`);
+ const _focusingTab = tabs.tabs[tabs.focus];
+ if (_focusingTab.currentIndex >= 0 && _focusingTab.history?.[_focusingTab.currentIndex + 1]) {
+ OpenDir(_focusingTab.history[_focusingTab.currentIndex + 1]);
+ }
};
/**
* Tab initiliazer function
@@ -117,135 +117,135 @@ const goForward = async (): Promise => {
* @returns {Promise}
*/
const Tab = async (reveal = false): Promise => {
- const _preference = await Storage.get('preference');
- const defaultTabsInfo = {
- focus: '1',
- tabs: {
- 1: {
- position: 'xplorer://Home',
- history: ['xplorer://Home'],
- currentIndex: 0,
- },
- },
- focusHistory: [1],
- latestIndex: 1,
- }; // default tabs information
- if ((_preference?.on_startup ?? 'new') === 'new') {
- // Store default tabs information into local storage
- Storage.set(`tabs-${windowName}`, defaultTabsInfo);
- tabsManager.setAttribute('data-tauri-drag-region', '');
- } else {
- const tabsInfo = await Storage.get(`tabs-${windowName}`);
- if (!tabsInfo.tabs || reveal) {
- Storage.set(`tabs-${windowName}`, defaultTabsInfo);
- tabsManager.setAttribute('data-tauri-drag-region', '');
- Home();
- } else {
- let _first = true;
- const createNewTabElement = document.querySelector('.create-new-tab');
- for (const index in Object.keys(tabsInfo.tabs)) {
- if (_first) {
- const tabIndex = Object.keys(tabsInfo.tabs)[index];
- const tabPosition = tabsInfo.tabs[tabIndex].position;
- if (Object.keys(tabsInfo.tabs).length > 1) {
- document.querySelector('#tab1').id = `tab${tabIndex}`;
- document.querySelector('#tab-1-1').id = `tab-1-${Object.keys(tabsInfo.tabs)[index]}`;
- } else {
- document.querySelector('#tab1').id = `tab${Object.keys(tabsInfo.tabs)[index]}`;
- document.querySelector('#tab-1-1').id = `tab-1-${Object.keys(tabsInfo.tabs)[index]}`;
- }
- document.getElementById(`tab${tabIndex}`).querySelector('#tab-position').innerText = await Translate(
- basename(tabPosition) === '' ? tabPosition : basename(tabPosition)
- );
- await OpenDir(tabsInfo.tabs[Object.keys(tabsInfo.tabs)[index]].position, false, true, false);
- _first = false;
- } else {
- const tabIndex = Object.keys(tabsInfo.tabs)[index];
- const tabPosition = tabsInfo.tabs[tabIndex].position;
- const newTab = document.createElement('div');
- newTab.classList.add('tab');
- newTab.classList.add('tab-hover-effect');
- newTab.innerHTML = `${await Translate('Home')}×`;
- newTab.dataset.tabIndex = tabIndex;
- newTab.id = `tab${tabIndex}`;
-
- createNewTabElement.parentElement.insertBefore(newTab, createNewTabElement); // Insert the new tab
- document.getElementById(`tab${tabIndex}`).querySelector('#tab-position').innerText = await Translate(
- basename(tabPosition) === '' ? tabPosition : basename(tabPosition)
- );
- const newWorkspaceTabElement = document.createElement('div');
- newWorkspaceTabElement.classList.add('workspace-tab');
- newWorkspaceTabElement.id = `tab-1-${tabIndex}`;
- newWorkspaceTabElement.dataset.path = tabPosition || 'xplorer://Home';
- GET_WORKSPACE_ELEMENT(1).appendChild(newWorkspaceTabElement);
-
- document.querySelectorAll('.workspace-tab').forEach((tab: HTMLElement) => {
- tab.classList.remove('workspace-tab-active');
- });
- newWorkspaceTabElement.classList.add('workspace-tab-active');
- await OpenDir(tabPosition || 'xplorer://Home', false, true, false);
- }
- }
- }
- }
- updateTheme('tabbing'); // Update the theme
-
- const arrayOfTabs = document.querySelectorAll('.tab');
- // Add close tab button
- for (let index = 0; index < arrayOfTabs.length; index++) {
- const tab = arrayOfTabs[index];
- const closeTab = document.createElement('span');
- closeTab.innerHTML = '×';
- closeTab.title = await Translate('Close Tab');
- tab.dataset.tabIndex = String(parseInt(tab.id.replace('tab', ''))) || '1';
- closeTab.classList.add('close-tab-btn');
- tab.appendChild(closeTab);
-
- tab.querySelector('#tab-position').innerText = await Translate(tab.querySelector('#tab-position').innerText);
-
- tab.addEventListener('click', (e) => {
- if ((e.target as HTMLElement).classList.contains('close-tab-btn')) return;
- SwitchTab(String(parseInt(tab.id.replace('tab', ''))) || '1');
- });
- }
-
- document.addEventListener('click', async (e) => {
- if ((e.target as HTMLElement).classList.contains('close-tab-btn')) {
- e.stopPropagation();
- // Close the window if user close the only tab
- if (document.querySelectorAll('.tab').length === 1) {
- Storage.remove(`tabs-${windowName}`);
- close();
- } else {
- const tab = (e.target as HTMLElement).parentNode as HTMLElement;
- const index = parseInt(tab.dataset.tabIndex);
- tab.parentElement.removeChild(tab);
- const tabs = await Storage.get(`tabs-${windowName}`);
- tabs.focusHistory = tabs.focusHistory.filter((tabIndex: number) => tabIndex !== index);
- tabs.focus = String(tabs.focusHistory[tabs.focusHistory.length - 1]);
- delete tabs.tabs[index];
- Storage.set(`tabs-${windowName}`, tabs);
- OpenDir(tabs.tabs[tabs.focus].position);
- if (tabsManager.scrollWidth > tabsManager.clientWidth) tabsManager.removeAttribute('data-tauri-drag-region');
- else tabsManager.setAttribute('data-tauri-drag-region', '');
- }
- }
- });
-
- const createNewTabElement = document.querySelector('.create-new-tab');
-
- // Create a new tab event
- createNewTabElement.addEventListener('click', () => createNewTab());
-
- // Scroll the tabs
- document.querySelector('.tabs-manager').addEventListener('wheel', (e) => {
- (e as WheelEvent).deltaY > 0
- ? (document.querySelector('.tabs-manager').scrollLeft += 25)
- : (document.querySelector('.tabs-manager').scrollLeft -= 25);
- });
-
- document.getElementById('go-back').addEventListener('click', () => goBack());
- document.getElementById('go-forward').addEventListener('click', () => goForward());
+ const _preference = await Storage.get("preference");
+ const defaultTabsInfo = {
+ focus: "1",
+ tabs: {
+ 1: {
+ position: "xplorer://Home",
+ history: ["xplorer://Home"],
+ currentIndex: 0,
+ },
+ },
+ focusHistory: [1],
+ latestIndex: 1,
+ }; // default tabs information
+ if ((_preference?.on_startup ?? "new") === "new") {
+ // Store default tabs information into local storage
+ Storage.set(`tabs-${windowName}`, defaultTabsInfo);
+ tabsManager.setAttribute("data-tauri-drag-region", "");
+ } else {
+ const tabsInfo = await Storage.get(`tabs-${windowName}`);
+ if (!tabsInfo.tabs || reveal) {
+ Storage.set(`tabs-${windowName}`, defaultTabsInfo);
+ tabsManager.setAttribute("data-tauri-drag-region", "");
+ Home();
+ } else {
+ let _first = true;
+ const createNewTabElement = document.querySelector(".create-new-tab");
+ for (const index in Object.keys(tabsInfo.tabs)) {
+ if (_first) {
+ const tabIndex = Object.keys(tabsInfo.tabs)[index];
+ const tabPosition = tabsInfo.tabs[tabIndex].position;
+ if (Object.keys(tabsInfo.tabs).length > 1) {
+ document.querySelector("#tab1").id = `tab${tabIndex}`;
+ document.querySelector("#tab-1-1").id = `tab-1-${Object.keys(tabsInfo.tabs)[index]}`;
+ } else {
+ document.querySelector("#tab1").id = `tab${Object.keys(tabsInfo.tabs)[index]}`;
+ document.querySelector("#tab-1-1").id = `tab-1-${Object.keys(tabsInfo.tabs)[index]}`;
+ }
+ document.getElementById(`tab${tabIndex}`).querySelector("#tab-position").innerText = await Translate(
+ basename(tabPosition) === "" ? tabPosition : basename(tabPosition),
+ );
+ await OpenDir(tabsInfo.tabs[Object.keys(tabsInfo.tabs)[index]].position, false, true, false);
+ _first = false;
+ } else {
+ const tabIndex = Object.keys(tabsInfo.tabs)[index];
+ const tabPosition = tabsInfo.tabs[tabIndex].position;
+ const newTab = document.createElement("div");
+ newTab.classList.add("tab");
+ newTab.classList.add("tab-hover-effect");
+ newTab.innerHTML = `${await Translate("Home")}×`;
+ newTab.dataset.tabIndex = tabIndex;
+ newTab.id = `tab${tabIndex}`;
+
+ createNewTabElement.parentElement.insertBefore(newTab, createNewTabElement); // Insert the new tab
+ document.getElementById(`tab${tabIndex}`).querySelector("#tab-position").innerText = await Translate(
+ basename(tabPosition) === "" ? tabPosition : basename(tabPosition),
+ );
+ const newWorkspaceTabElement = document.createElement("div");
+ newWorkspaceTabElement.classList.add("workspace-tab");
+ newWorkspaceTabElement.id = `tab-1-${tabIndex}`;
+ newWorkspaceTabElement.dataset.path = tabPosition || "xplorer://Home";
+ GET_WORKSPACE_ELEMENT(1).appendChild(newWorkspaceTabElement);
+
+ document.querySelectorAll(".workspace-tab").forEach((tab: HTMLElement) => {
+ tab.classList.remove("workspace-tab-active");
+ });
+ newWorkspaceTabElement.classList.add("workspace-tab-active");
+ await OpenDir(tabPosition || "xplorer://Home", false, true, false);
+ }
+ }
+ }
+ }
+ updateTheme("tabbing"); // Update the theme
+
+ const arrayOfTabs = document.querySelectorAll(".tab");
+ // Add close tab button
+ for (let index = 0; index < arrayOfTabs.length; index++) {
+ const tab = arrayOfTabs[index];
+ const closeTab = document.createElement("span");
+ closeTab.innerHTML = "×";
+ closeTab.title = await Translate("Close Tab");
+ tab.dataset.tabIndex = String(Number.parseInt(tab.id.replace("tab", ""))) || "1";
+ closeTab.classList.add("close-tab-btn");
+ tab.appendChild(closeTab);
+
+ tab.querySelector("#tab-position").innerText = await Translate(tab.querySelector("#tab-position").innerText);
+
+ tab.addEventListener("click", (e) => {
+ if ((e.target as HTMLElement).classList.contains("close-tab-btn")) return;
+ SwitchTab(String(Number.parseInt(tab.id.replace("tab", ""))) || "1");
+ });
+ }
+
+ document.addEventListener("click", async (e) => {
+ if ((e.target as HTMLElement).classList.contains("close-tab-btn")) {
+ e.stopPropagation();
+ // Close the window if user close the only tab
+ if (document.querySelectorAll(".tab").length === 1) {
+ Storage.remove(`tabs-${windowName}`);
+ close();
+ } else {
+ const tab = (e.target as HTMLElement).parentNode as HTMLElement;
+ const index = Number.parseInt(tab.dataset.tabIndex);
+ tab.parentElement.removeChild(tab);
+ const tabs = await Storage.get(`tabs-${windowName}`);
+ tabs.focusHistory = tabs.focusHistory.filter((tabIndex: number) => tabIndex !== index);
+ tabs.focus = String(tabs.focusHistory[tabs.focusHistory.length - 1]);
+ delete tabs.tabs[index];
+ Storage.set(`tabs-${windowName}`, tabs);
+ OpenDir(tabs.tabs[tabs.focus].position);
+ if (tabsManager.scrollWidth > tabsManager.clientWidth) tabsManager.removeAttribute("data-tauri-drag-region");
+ else tabsManager.setAttribute("data-tauri-drag-region", "");
+ }
+ }
+ });
+
+ const createNewTabElement = document.querySelector(".create-new-tab");
+
+ // Create a new tab event
+ createNewTabElement.addEventListener("click", () => createNewTab());
+
+ // Scroll the tabs
+ document.querySelector(".tabs-manager").addEventListener("wheel", (e) => {
+ (e as WheelEvent).deltaY > 0
+ ? (document.querySelector(".tabs-manager").scrollLeft += 25)
+ : (document.querySelector(".tabs-manager").scrollLeft -= 25);
+ });
+
+ document.getElementById("go-back").addEventListener("click", () => goBack());
+ document.getElementById("go-forward").addEventListener("click", () => goForward());
};
export { Tab, createNewTab, goBack, goForward };
diff --git a/src/Components/Layout/windowManager.ts b/src/Components/Layout/windowManager.ts
index 44c555ed..effdca9a 100644
--- a/src/Components/Layout/windowManager.ts
+++ b/src/Components/Layout/windowManager.ts
@@ -1,21 +1,21 @@
-import Translate from '../I18n/i18n';
-import Storage from '../../Service/storage';
-import windowName, { listenWindowClose, setDecorations } from '../../Service/window';
-import { OpenDir } from '../Open/open';
-import focusingPath from '../Functions/focusingPath';
-import getDirname from '../Functions/path/dirname';
-import createSidebar from './sidebar';
-import isTauri from '../../Util/is-tauri';
+import Storage from "../../Service/storage";
+import windowName, { listenWindowClose, setDecorations } from "../../Service/window";
+import isTauri from "../../Util/is-tauri";
+import focusingPath from "../Functions/focusingPath";
+import getDirname from "../Functions/path/dirname";
+import Translate from "../I18n/i18n";
+import { OpenDir } from "../Open/open";
+import createSidebar from "./sidebar";
/**
* Reload the page
* @returns {Promise}
*/
const reload = async (): Promise => {
- const tabs = await Storage.get(`tabs-${windowName}`);
- OpenDir(tabs.tabs[tabs.focus].position);
- //closePreviewFile();
- document.querySelector('.properties').style.animation = 'close-properties 1s forwards';
- createSidebar();
+ const tabs = await Storage.get(`tabs-${windowName}`);
+ OpenDir(tabs.tabs[tabs.focus].position);
+ //closePreviewFile();
+ document.querySelector(".properties").style.animation = "close-properties 1s forwards";
+ createSidebar();
};
/**
@@ -23,10 +23,10 @@ const reload = async (): Promise => {
* @returns {void}
*/
const minimize = (): void => {
- if (isTauri) {
- const { appWindow } = require('@tauri-apps/api/window');
- appWindow.minimize();
- }
+ if (isTauri) {
+ const { appWindow } = require("@tauri-apps/api/window");
+ appWindow.minimize();
+ }
};
/**
@@ -34,11 +34,11 @@ const minimize = (): void => {
* @returns {Promise}
*/
const maximize = async (): Promise => {
- if (isTauri) {
- const { appWindow } = require('@tauri-apps/api/window');
- if (await appWindow.isMaximized()) appWindow.unmaximize();
- else appWindow.maximize();
- }
+ if (isTauri) {
+ const { appWindow } = require("@tauri-apps/api/window");
+ if (await appWindow.isMaximized()) appWindow.unmaximize();
+ else appWindow.maximize();
+ }
};
/**
@@ -46,10 +46,10 @@ const maximize = async (): Promise => {
* @returns {any}
*/
const close = (): void => {
- if (isTauri) {
- const { appWindow } = require('@tauri-apps/api/window');
- appWindow.close();
- }
+ if (isTauri) {
+ const { appWindow } = require("@tauri-apps/api/window");
+ appWindow.close();
+ }
};
/**
@@ -57,9 +57,9 @@ const close = (): void => {
* @returns {Promise}
*/
const goParentDir = async (): Promise => {
- const dirName = getDirname(await focusingPath());
- if (dirName && !dirName.startsWith('xplorer://')) OpenDir(getDirname(await focusingPath()));
- else OpenDir('xplorer://Home');
+ const dirName = getDirname(await focusingPath());
+ if (dirName && !dirName.startsWith("xplorer://")) OpenDir(getDirname(await focusingPath()));
+ else OpenDir("xplorer://Home");
};
/**
@@ -67,39 +67,39 @@ const goParentDir = async (): Promise => {
* @returns {Promise}
*/
const windowManager = async (): Promise => {
- const appearance = await Storage.get('appearance');
- if (appearance?.frameStyle === 'os' || !isTauri) {
- document.querySelector('.window-manager').parentNode.removeChild(document.querySelector('.window-manager'));
- }
- setDecorations(appearance?.frameStyle !== 'default');
- // Minimize the screen
- document.querySelector('#minimize')?.addEventListener('click', minimize);
- document.querySelector('#minimize')?.setAttribute('title', await Translate('Minimize'));
- // Maximize the screen
- document.querySelector('#maximize')?.addEventListener('click', maximize);
- document.querySelector('#maximize')?.setAttribute('title', await Translate('Maximize'));
- // Exit window
- document.querySelector('#exit')?.addEventListener('click', close);
- document.querySelector('#exit')?.setAttribute('title', await Translate('Exit (Ctrl + w)'));
+ const appearance = await Storage.get("appearance");
+ if (appearance?.frameStyle === "os" || !isTauri) {
+ document.querySelector(".window-manager").parentNode.removeChild(document.querySelector(".window-manager"));
+ }
+ setDecorations(appearance?.frameStyle !== "default");
+ // Minimize the screen
+ document.querySelector("#minimize")?.addEventListener("click", minimize);
+ document.querySelector("#minimize")?.setAttribute("title", await Translate("Minimize"));
+ // Maximize the screen
+ document.querySelector("#maximize")?.addEventListener("click", maximize);
+ document.querySelector("#maximize")?.setAttribute("title", await Translate("Maximize"));
+ // Exit window
+ document.querySelector("#exit")?.addEventListener("click", close);
+ document.querySelector("#exit")?.setAttribute("title", await Translate("Exit (Ctrl + w)"));
- // Refresh the page
- document.querySelector('#refresh').addEventListener('click', reload);
- document.querySelector('#refresh')?.setAttribute('title', await Translate('Reload (f5)'));
+ // Refresh the page
+ document.querySelector("#refresh").addEventListener("click", reload);
+ document.querySelector("#refresh")?.setAttribute("title", await Translate("Reload (f5)"));
- document.querySelector('#go-parent-dir').addEventListener('click', goParentDir);
- document.querySelector('#go-parent-dir')?.setAttribute('title', await Translate('Parent Directory (Alt + Up Arrow)'));
- document.querySelector('#go-back')?.setAttribute('title', await Translate('Go Back (Alt + Left Arrow)'));
- document.querySelector('#go-forward')?.setAttribute('title', await Translate('Go Forward (Alt + Right Arrow)'));
+ document.querySelector("#go-parent-dir").addEventListener("click", goParentDir);
+ document.querySelector("#go-parent-dir")?.setAttribute("title", await Translate("Parent Directory (Alt + Up Arrow)"));
+ document.querySelector("#go-back")?.setAttribute("title", await Translate("Go Back (Alt + Left Arrow)"));
+ document.querySelector("#go-forward")?.setAttribute("title", await Translate("Go Forward (Alt + Right Arrow)"));
- document.querySelector('.path-navigator').addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- OpenDir(event.target.value);
- });
- const _preference = await Storage.get('preference');
- listenWindowClose().then(() => {
- if (_preference?.on_startup === 'new') Storage.remove(`tabs-${windowName}`);
- Storage.remove(`operations-${windowName}`);
- Storage.remove('clipboard');
- });
+ document.querySelector(".path-navigator").addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ OpenDir(event.target.value);
+ });
+ const _preference = await Storage.get("preference");
+ listenWindowClose().then(() => {
+ if (_preference?.on_startup === "new") Storage.remove(`tabs-${windowName}`);
+ Storage.remove(`operations-${windowName}`);
+ Storage.remove("clipboard");
+ });
};
export { windowManager, reload, minimize, maximize, close };
diff --git a/src/Components/LoadingBar/index.tsx b/src/Components/LoadingBar/index.tsx
index 02441445..0c8950d6 100644
--- a/src/Components/LoadingBar/index.tsx
+++ b/src/Components/LoadingBar/index.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react";
export interface ILoadingBarProps {
- isLoading: boolean
+ isLoading: boolean;
}
const LoadingBar = ({ isLoading }: ILoadingBarProps) => (
-
-
-
+
+
+
);
export default LoadingBar;
diff --git a/src/Components/MainView/index.tsx b/src/Components/MainView/index.tsx
index a0ee31b6..2b6009fa 100644
--- a/src/Components/MainView/index.tsx
+++ b/src/Components/MainView/index.tsx
@@ -4,8 +4,8 @@ import { useSelector } from "react-redux";
import File from "../File";
import Preview from "../Preview";
-import { IAppState } from "../../Store/Reducers";
-import { IFile } from "../../Typings/Store/files";
+import type { IAppState } from "../../Store/Reducers";
+import type { IFile } from "../../Typings/Store/files";
import { ThemedDiv } from "../Theme";
export interface IMainViewProps {
diff --git a/src/Components/Open/defaultSort.ts b/src/Components/Open/defaultSort.ts
index 96a2b336..215e3aee 100644
--- a/src/Components/Open/defaultSort.ts
+++ b/src/Components/Open/defaultSort.ts
@@ -1,31 +1,31 @@
-import FavoritesAPI from '../../Service/favorites';
+import FavoritesAPI from "../../Service/favorites";
let favoritesData: FavoritesAPI;
/**
* Check for default sort algorithm for a given directory
* @param {string} dir - directory to check
* @returns {Promise<'A'|'Z'|'L'|'F'|'S'|'T'>}
*/
-const getDefaultSort = async (dir: string): Promise<'A' | 'Z' | 'L' | 'F' | 'S' | 'T'> => {
- if (!favoritesData) {
- favoritesData = new FavoritesAPI();
- await favoritesData.build();
- }
- switch (dir) {
- case favoritesData.DOCUMENT_PATH:
- return 'L';
- case favoritesData.PICTURE_PATH:
- return 'L';
- case favoritesData.VIDEO_PATH:
- return 'L';
- case favoritesData.DESKTOP_PATH:
- return 'A';
- case favoritesData.DOWNLOAD_PATH:
- return 'L';
- case favoritesData.MUSIC_PATH:
- return 'A';
- default:
- return null;
- }
+const getDefaultSort = async (dir: string): Promise<"A" | "Z" | "L" | "F" | "S" | "T"> => {
+ if (!favoritesData) {
+ favoritesData = new FavoritesAPI();
+ await favoritesData.build();
+ }
+ switch (dir) {
+ case favoritesData.DOCUMENT_PATH:
+ return "L";
+ case favoritesData.PICTURE_PATH:
+ return "L";
+ case favoritesData.VIDEO_PATH:
+ return "L";
+ case favoritesData.DESKTOP_PATH:
+ return "A";
+ case favoritesData.DOWNLOAD_PATH:
+ return "L";
+ case favoritesData.MUSIC_PATH:
+ return "A";
+ default:
+ return null;
+ }
};
export default getDefaultSort;
diff --git a/src/Components/Open/displayFiles.ts b/src/Components/Open/displayFiles.ts
index cf86ad62..4be678df 100644
--- a/src/Components/Open/displayFiles.ts
+++ b/src/Components/Open/displayFiles.ts
@@ -1,12 +1,12 @@
-import Storage from '../../Service/storage';
-import fileThumbnail from '../Thumbnail/thumbnail';
-import formatBytes from '../Functions/filesize';
-import type FileMetaData from '../../Typings/fileMetaData';
-import { Select } from '../Files/File Operation/select';
-import normalizeSlash from '../Functions/path/normalizeSlash';
-import joinPath from '../Functions/path/joinPath';
-import getDefaultSort from './defaultSort';
-import { LnkData } from '../../Typings/fileMetaData';
+import Storage from "../../Service/storage";
+import type FileMetaData from "../../Typings/fileMetaData";
+import type { LnkData } from "../../Typings/fileMetaData";
+import { Select } from "../Files/File Operation/select";
+import formatBytes from "../Functions/filesize";
+import joinPath from "../Functions/path/joinPath";
+import normalizeSlash from "../Functions/path/normalizeSlash";
+import fileThumbnail from "../Thumbnail/thumbnail";
+import getDefaultSort from "./defaultSort";
/**
* Display files into Xplorer main section
* @param {fileData[]} files - array of files of a directory
@@ -19,145 +19,141 @@ import { LnkData } from '../../Typings/fileMetaData';
* @returns {Promise}
*/
const displayFiles = async (
- files: FileMetaData[],
- dir: string,
- onElement?: HTMLElement,
- options?: { reveal: boolean; revealDir: string },
- isSearch?: boolean,
- lnk_files?: LnkData[]
+ files: FileMetaData[],
+ dir: string,
+ onElement?: HTMLElement,
+ options?: { reveal: boolean; revealDir: string },
+ isSearch?: boolean,
+ lnk_files?: LnkData[],
): Promise => {
- const FilesElement = onElement ?? document.createElement('div');
- const preference = await Storage.get('preference');
- const appearance = await Storage.get('appearance');
- const dirAlongsideFiles = preference?.dirAlongsideFiles ?? false;
- const layout = (await Storage.get('layout'))?.[dir] ?? appearance?.layout ?? 'd';
- const sort = (await Storage.get('sort'))?.[dir] ?? (await getDefaultSort(dir));
- switch (sort) {
- case 'L': // Last Modified
- files.sort((a, b) => {
- return new Date(a.last_modified?.secs_since_epoch ?? a.time_deleted) < new Date(b.last_modified?.secs_since_epoch ?? b.time_deleted)
- ? 1
- : -1;
- });
- break;
- case 'F': // First Modified
- files.sort((a, b) => {
- return new Date(a.last_modified?.secs_since_epoch ?? a.time_deleted) > new Date(b.last_modified?.secs_since_epoch ?? b.time_deleted)
- ? 1
- : -1;
- });
- break;
- case 'S': // Size
- files.sort((a, b) => a.size - b.size);
- break;
- case 'T': // Filetype
- files.sort((a, b) => (a.file_type > b.file_type ? 1 : -1));
- break;
+ const FilesElement = onElement ?? document.createElement("div");
+ const preference = await Storage.get("preference");
+ const appearance = await Storage.get("appearance");
+ const dirAlongsideFiles = preference?.dirAlongsideFiles ?? false;
+ const layout = (await Storage.get("layout"))?.[dir] ?? appearance?.layout ?? "d";
+ const sort = (await Storage.get("sort"))?.[dir] ?? (await getDefaultSort(dir));
+ switch (sort) {
+ case "L": // Last Modified
+ files.sort((a, b) => {
+ return new Date(a.last_modified?.secs_since_epoch ?? a.time_deleted) < new Date(b.last_modified?.secs_since_epoch ?? b.time_deleted)
+ ? 1
+ : -1;
+ });
+ break;
+ case "F": // First Modified
+ files.sort((a, b) => {
+ return new Date(a.last_modified?.secs_since_epoch ?? a.time_deleted) > new Date(b.last_modified?.secs_since_epoch ?? b.time_deleted)
+ ? 1
+ : -1;
+ });
+ break;
+ case "S": // Size
+ files.sort((a, b) => a.size - b.size);
+ break;
+ case "T": // Filetype
+ files.sort((a, b) => (a.file_type > b.file_type ? 1 : -1));
+ break;
+ default: {
+ const compator = new Intl.Collator(undefined, {
+ numeric: true,
+ sensitivity: "base",
+ }).compare;
+ if (sort === "Z") {
+ files.sort((a, b) => {
+ return compator(b.basename.toLowerCase(), a.basename.toLowerCase());
+ });
+ } else {
+ files.sort((a, b) => {
+ return compator(a.basename.toLowerCase(), b.basename.toLowerCase());
+ });
+ }
+ }
+ }
+ if (!dirAlongsideFiles) {
+ files = files.sort((a, b) => -(Number(a.is_dir) - Number(b.is_dir)));
+ }
- case 'A': // A-Z
- case 'Z': // Z-A
- default: {
- const compator = new Intl.Collator(undefined, {
- numeric: true,
- sensitivity: 'base',
- }).compare;
- if (sort === 'Z') {
- files.sort((a, b) => {
- return compator(b.basename.toLowerCase(), a.basename.toLowerCase());
- });
- } else {
- files.sort((a, b) => {
- return compator(a.basename.toLowerCase(), b.basename.toLowerCase());
- });
- }
- }
- }
- if (!dirAlongsideFiles) {
- files = files.sort((a, b) => -(Number(a.is_dir) - Number(b.is_dir)));
- }
+ const imageAsThumbnail =
+ (appearance?.imageAsThumbnail ?? "smalldir") === "smalldir" ? files.length < 100 : appearance?.imageAsThumbnail === "yes";
+ for (const file of files) {
+ const fileGrid = document.createElement("div");
+ fileGrid.className = "file-grid grid-hover-effect file";
+ let displayName: string;
+ switch (layout) {
+ case "m":
+ fileGrid.classList.add("medium-grid-view");
+ displayName = file.basename.length > 30 ? `${file.basename.substring(0, 30)}...` : file.basename;
+ break;
+ case "l":
+ fileGrid.classList.add("large-grid-view");
+ displayName = file.basename.length > 40 ? `${file.basename.substring(0, 40)}...` : file.basename;
+ break;
+ case "d":
+ fileGrid.classList.add("detail-view");
+ displayName = file.basename;
+ break;
+ default:
+ fileGrid.classList.add("small-grid-view");
+ displayName = file.basename.length > 20 ? `${file.basename.substring(0, 20)}...` : file.basename;
+ break;
+ }
+ if (isSearch) displayName = file.file_path;
- const imageAsThumbnail =
- (appearance?.imageAsThumbnail ?? 'smalldir') === 'smalldir' ? files.length < 100 : appearance?.imageAsThumbnail === 'yes';
- for (const file of files) {
- const fileGrid = document.createElement('div');
- fileGrid.className = 'file-grid grid-hover-effect file';
- let displayName: string;
- switch (layout) {
- case 'm':
- fileGrid.classList.add('medium-grid-view');
- displayName = file.basename.length > 30 ? file.basename.substring(0, 30) + '...' : file.basename;
- break;
- case 'l':
- fileGrid.classList.add('large-grid-view');
- displayName = file.basename.length > 40 ? file.basename.substring(0, 40) + '...' : file.basename;
- break;
- case 'd':
- fileGrid.classList.add('detail-view');
- displayName = file.basename;
- break;
- default:
- fileGrid.classList.add('small-grid-view');
- displayName = file.basename.length > 20 ? file.basename.substring(0, 20) + '...' : file.basename;
- break;
- }
- if (isSearch) displayName = file.file_path;
+ fileGrid.setAttribute("draggable", "true");
+ if (!file.is_trash) {
+ fileGrid.dataset.modifiedAt = String(
+ new Date(file.last_modified.secs_since_epoch * 1000).toLocaleString(navigator.language, { hour12: false }),
+ );
+ fileGrid.dataset.createdAt = String(new Date(file.created.secs_since_epoch * 1000).toLocaleString(navigator.language, { hour12: false }));
+ fileGrid.dataset.accessedAt = String(
+ new Date(file.last_accessed.secs_since_epoch * 1000).toLocaleString(navigator.language, { hour12: false }),
+ );
+ }
+ fileGrid.dataset.isdir = String(file.is_dir);
+ if (file.time_deleted) fileGrid.dataset.trashDeletionDate = String(file.time_deleted);
+ if (file.is_trash) fileGrid.dataset.realPath = encodeURI(joinPath(file.original_parent, file.basename));
+ let preview: string;
+ if (file.file_type === "Windows Shortcut") {
+ fileGrid.dataset.isLnk = "true";
+ for (const lnk of lnk_files) {
+ if (file.file_path === lnk.file_path) {
+ preview = await fileThumbnail(lnk.icon, "file", true, true);
+ break;
+ }
+ }
+ } else {
+ preview = await fileThumbnail(file.file_path, file.is_dir ? "folder" : "file", true, imageAsThumbnail);
+ }
- fileGrid.setAttribute('draggable', 'true');
- if (!file.is_trash) {
- fileGrid.dataset.modifiedAt = String(
- new Date(file.last_modified.secs_since_epoch * 1000).toLocaleString(navigator.language, { hour12: false })
- );
- fileGrid.dataset.createdAt = String(new Date(file.created.secs_since_epoch * 1000).toLocaleString(navigator.language, { hour12: false }));
- fileGrid.dataset.accessedAt = String(
- new Date(file.last_accessed.secs_since_epoch * 1000).toLocaleString(navigator.language, { hour12: false })
- );
- }
- fileGrid.dataset.isdir = String(file.is_dir);
- if (file.time_deleted) fileGrid.dataset.trashDeletionDate = String(file.time_deleted);
- if (file.is_trash) fileGrid.dataset.realPath = encodeURI(joinPath(file.original_parent, file.basename));
- let preview: string;
- if (file.file_type === 'Windows Shortcut') {
- fileGrid.dataset.isLnk = 'true';
- for (const lnk of lnk_files) {
- if (file.file_path === lnk.file_path) {
- preview = await fileThumbnail(lnk.icon, 'file', true, true);
- break;
- }
- }
- } else {
- preview = await fileThumbnail(file.file_path, file.is_dir ? 'folder' : 'file', true, imageAsThumbnail);
- }
-
- fileGrid.dataset.path = encodeURI(normalizeSlash(file.file_path));
- fileGrid.dataset.isSystem = String(file.is_system);
- fileGrid.dataset.isTrash = String(file.is_trash);
- fileGrid.dataset.isDir = String(file.is_dir);
- fileGrid.dataset.isHidden = String(file.is_hidden);
- fileGrid.dataset.isReadOnly = String(file.readonly);
- fileGrid.innerHTML = `
+ fileGrid.dataset.path = encodeURI(normalizeSlash(file.file_path));
+ fileGrid.dataset.isSystem = String(file.is_system);
+ fileGrid.dataset.isTrash = String(file.is_trash);
+ fileGrid.dataset.isDir = String(file.is_dir);
+ fileGrid.dataset.isHidden = String(file.is_hidden);
+ fileGrid.dataset.isReadOnly = String(file.readonly);
+ fileGrid.innerHTML = `
${preview}
${displayName}
- ${file.original_parent ? `${file.original_parent}` : ''}
- ${new Date((file.last_modified?.secs_since_epoch ?? file.time_deleted) * 1000).toLocaleString(
- navigator.language,
- { hour12: false }
- )}
+ ${file.original_parent ? `${file.original_parent}` : ""}
+ ${new Date(
+ (file.last_modified?.secs_since_epoch ?? file.time_deleted) * 1000,
+ ).toLocaleString(navigator.language, { hour12: false })}
${
- file.size > 0
- ? `${formatBytes(
- file.size // eslint-disable-next-line no-mixed-spaces-and-tabs
- )}`
- : ``
- }
+ file.size > 0
+ ? `${formatBytes(
+ file.size, // eslint-disable-next-line no-mixed-spaces-and-tabs
+ )}`
+ : ``
+ }
${file.file_type}
`;
- FilesElement.appendChild(fileGrid);
- }
- if (options?.reveal) {
- Select(document.querySelector(`.file[data-path="${encodeURI(options?.revealDir)}"]`), false, false);
- }
+ FilesElement.appendChild(fileGrid);
+ }
+ if (options?.reveal) {
+ Select(document.querySelector(`.file[data-path="${encodeURI(options?.revealDir)}"]`), false, false);
+ }
- return FilesElement;
+ return FilesElement;
};
export default displayFiles;
diff --git a/src/Components/Open/open.ts b/src/Components/Open/open.ts
index 680222b5..218d8db6 100644
--- a/src/Components/Open/open.ts
+++ b/src/Components/Open/open.ts
@@ -1,27 +1,26 @@
-import DirectoryAPI from '../../Service/directory';
-import { startLoading, stopLoading, isLoading } from '../Functions/Loading/loading';
-import { updateTheme } from '../Theme/theme';
-import FileAPI from '../../Service/files';
-import changePosition from '../Functions/changePosition';
-import Recent from './recent';
-import Home from '../Layout/home';
-import displayFiles from './displayFiles';
-import { InfoLog, OpenLog } from '../Functions/log';
-import getDirname from '../Functions/path/dirname';
-import normalizeSlash from '../Functions/path/normalizeSlash';
-import { changeWindowTitle } from '../../Service/window';
-import getBasename from '../Functions/path/basename';
-import { getTrashedFiles } from '../../Service/trash';
-import OS from '../../Service/platform';
-import { reload } from '../Layout/windowManager';
-import focusingPath from '../Functions/focusingPath';
-import { LOAD_IMAGE } from '../Functions/lazyLoadingImage';
-import PromptError from '../Prompt/error';
-import { UpdateInfo } from '../Layout/infobar';
-import { processSearch, stopSearchingProcess } from '../Files/File Operation/search';
-import Storage from '../../Service/storage';
-import { GET_TAB_ELEMENT, MAIN_BOX_ELEMENT } from '../../Util/constants';
-import Error from '../Prompt/error';
+import DirectoryAPI from "../../Service/directory";
+import FileAPI from "../../Service/files";
+import OS from "../../Service/platform";
+import Storage from "../../Service/storage";
+import { getTrashedFiles } from "../../Service/trash";
+import { changeWindowTitle } from "../../Service/window";
+import { GET_TAB_ELEMENT, MAIN_BOX_ELEMENT } from "../../Util/constants";
+import { processSearch, stopSearchingProcess } from "../Files/File Operation/search";
+import { isLoading, startLoading, stopLoading } from "../Functions/Loading/loading";
+import changePosition from "../Functions/changePosition";
+import focusingPath from "../Functions/focusingPath";
+import { LOAD_IMAGE } from "../Functions/lazyLoadingImage";
+import { InfoLog, OpenLog } from "../Functions/log";
+import getBasename from "../Functions/path/basename";
+import getDirname from "../Functions/path/dirname";
+import normalizeSlash from "../Functions/path/normalizeSlash";
+import Home from "../Layout/home";
+import { UpdateInfo } from "../Layout/infobar";
+import { reload } from "../Layout/windowManager";
+import PromptError from "../Prompt/error";
+import { updateTheme } from "../Theme/theme";
+import displayFiles from "./displayFiles";
+import Recent from "./recent";
let platform: string;
let directoryInfo: DirectoryAPI;
/**
@@ -33,150 +32,150 @@ let directoryInfo: DirectoryAPI;
* @returns {Promise}
*/
const OpenDir = async (dir: string, reveal?: boolean, forceOpen = false, writeHistory = true): Promise => {
- await stopSearchingProcess();
- if (isLoading() && !forceOpen) {
- InfoLog(`Something is still loading, refusing to open dir ${dir}`);
- return;
- }
- // Check if the user is just want to reload the current directory
- const isReload = (await focusingPath()) === dir && !forceOpen;
- if (!isReload) directoryInfo?.unlisten?.();
- startLoading();
- changePosition(dir, forceOpen, writeHistory);
- const MAIN_ELEMENT = GET_TAB_ELEMENT();
- MAIN_ELEMENT.innerHTML = '';
- if (MAIN_ELEMENT.classList.contains('error-reading-files')) MAIN_ELEMENT.classList.remove('error-reading-files'); // Remove class if exist
- if (dir === 'xplorer://Home') {
- Home();
- UpdateInfo('number-of-files', '');
- OpenLog(dir);
- } else if (dir === 'xplorer://Trash') {
- if (!platform) platform = await OS();
- if (platform === 'darwin') {
- MAIN_ELEMENT.classList.add('error-reading-files');
- MAIN_ELEMENT.innerText = 'Xploring trash folder is not supported for macOS yet.';
- stopLoading();
- } else {
- getTrashedFiles().then(async (trashedFiles) => {
- UpdateInfo('number-of-files', `${trashedFiles.files.length} files`);
- if (!trashedFiles.files.length) {
- MAIN_ELEMENT.classList.add('error-reading-files');
- MAIN_ELEMENT.innerText = 'This folder is empty.';
- stopLoading();
- } else {
- await displayFiles(trashedFiles.files, dir, MAIN_ELEMENT);
- stopLoading();
- updateTheme('grid');
- LOAD_IMAGE();
- changeWindowTitle(getBasename(dir));
- }
- });
- }
- OpenLog(dir);
- } else if (dir === 'xplorer://Recent') {
- Recent();
- UpdateInfo('number-of-files', '');
- OpenLog(dir);
- } else if (dir.startsWith('Search')) {
- // Search path pattern: Search: [[search-query]] inside [[search-path]]
- const splitBySearchKeyword = dir.split('Search: ');
- splitBySearchKeyword.shift();
- const query = splitBySearchKeyword.join('Search: ');
- const splitByInsideKeyword = query.split(' inside ');
- if (splitByInsideKeyword.length === 2) {
- const searchQuery = splitByInsideKeyword[0].slice(2, -2);
- const searchPath = splitByInsideKeyword[1].slice(2, -2);
- processSearch(searchQuery, searchPath);
- } else {
- for (let i = 0; i < splitByInsideKeyword.length; i++) {
- if (splitByInsideKeyword[i]?.endsWith(']]') && splitByInsideKeyword[i + 1]?.startsWith('[[')) {
- const searchQuery = splitByInsideKeyword
- .slice(0, i + 1)
- .join(' inside ')
- .slice(2, -2);
- const searchPath = splitByInsideKeyword
- .slice(i + 1)
- .join(' inside ')
- .slice(2, -2);
- processSearch(searchQuery, searchPath);
- }
- }
- }
- } else {
- if (reveal) {
- directoryInfo = new DirectoryAPI(getDirname(dir));
- if (!(await directoryInfo.exists())) {
- PromptError('Directory not exists', "Directory you're looking for does not exist.");
- stopLoading();
- return;
- }
- await directoryInfo
- .getFiles()
- .then(async (files) => {
- UpdateInfo('number-of-files', `${files.number_of_files - files.skipped_files.length} files`);
- if (!files.files.length) {
- MAIN_ELEMENT.classList.add('error-reading-files');
- MAIN_ELEMENT.innerText = 'This folder is empty.';
- stopLoading();
- } else {
- await displayFiles(
- files.files,
- dir,
- MAIN_ELEMENT,
- {
- reveal,
- revealDir: normalizeSlash(dir),
- },
- null,
- files.lnk_files
- );
- stopLoading();
- updateTheme('grid');
- LOAD_IMAGE();
- changeWindowTitle(getBasename(getDirname(dir)));
- console.timeEnd(dir);
- if (!isReload) directoryInfo.listen(() => reload());
- }
- })
- .catch((err) => {
- MAIN_ELEMENT.classList.add('error-reading-files');
- MAIN_ELEMENT.innerText = err;
- stopLoading();
- });
- } else {
- directoryInfo = new DirectoryAPI(dir);
- if (!(await directoryInfo.exists())) {
- PromptError('Directory not exists', "Directory you're looking for does not exist.");
- stopLoading();
- return;
- }
- await directoryInfo
- .getFiles()
- .then(async (files) => {
- UpdateInfo('number-of-files', `${files.number_of_files - files.skipped_files.length} files`);
- if (!files.files.length) {
- MAIN_ELEMENT.classList.add('error-reading-files');
- MAIN_ELEMENT.innerText = 'This folder is empty.';
- stopLoading();
- } else {
- await displayFiles(files.files, dir, MAIN_ELEMENT, null, null, files.lnk_files);
- stopLoading();
- updateTheme('grid');
- LOAD_IMAGE();
- changeWindowTitle(getBasename(dir));
- if (!isReload) directoryInfo.listen(() => reload());
- console.timeEnd(dir);
- return;
- }
- })
- .catch((err) => {
- MAIN_ELEMENT.classList.add('error-reading-files');
- MAIN_ELEMENT.innerText = err;
- stopLoading();
- });
- }
- OpenLog(dir);
- }
+ await stopSearchingProcess();
+ if (isLoading() && !forceOpen) {
+ InfoLog(`Something is still loading, refusing to open dir ${dir}`);
+ return;
+ }
+ // Check if the user is just want to reload the current directory
+ const isReload = (await focusingPath()) === dir && !forceOpen;
+ if (!isReload) directoryInfo?.unlisten?.();
+ startLoading();
+ changePosition(dir, forceOpen, writeHistory);
+ const MAIN_ELEMENT = GET_TAB_ELEMENT();
+ MAIN_ELEMENT.innerHTML = "";
+ if (MAIN_ELEMENT.classList.contains("error-reading-files")) MAIN_ELEMENT.classList.remove("error-reading-files"); // Remove class if exist
+ if (dir === "xplorer://Home") {
+ Home();
+ UpdateInfo("number-of-files", "");
+ OpenLog(dir);
+ } else if (dir === "xplorer://Trash") {
+ if (!platform) platform = await OS();
+ if (platform === "darwin") {
+ MAIN_ELEMENT.classList.add("error-reading-files");
+ MAIN_ELEMENT.innerText = "Xploring trash folder is not supported for macOS yet.";
+ stopLoading();
+ } else {
+ getTrashedFiles().then(async (trashedFiles) => {
+ UpdateInfo("number-of-files", `${trashedFiles.files.length} files`);
+ if (!trashedFiles.files.length) {
+ MAIN_ELEMENT.classList.add("error-reading-files");
+ MAIN_ELEMENT.innerText = "This folder is empty.";
+ stopLoading();
+ } else {
+ await displayFiles(trashedFiles.files, dir, MAIN_ELEMENT);
+ stopLoading();
+ updateTheme("grid");
+ LOAD_IMAGE();
+ changeWindowTitle(getBasename(dir));
+ }
+ });
+ }
+ OpenLog(dir);
+ } else if (dir === "xplorer://Recent") {
+ Recent();
+ UpdateInfo("number-of-files", "");
+ OpenLog(dir);
+ } else if (dir.startsWith("Search")) {
+ // Search path pattern: Search: [[search-query]] inside [[search-path]]
+ const splitBySearchKeyword = dir.split("Search: ");
+ splitBySearchKeyword.shift();
+ const query = splitBySearchKeyword.join("Search: ");
+ const splitByInsideKeyword = query.split(" inside ");
+ if (splitByInsideKeyword.length === 2) {
+ const searchQuery = splitByInsideKeyword[0].slice(2, -2);
+ const searchPath = splitByInsideKeyword[1].slice(2, -2);
+ processSearch(searchQuery, searchPath);
+ } else {
+ for (let i = 0; i < splitByInsideKeyword.length; i++) {
+ if (splitByInsideKeyword[i]?.endsWith("]]") && splitByInsideKeyword[i + 1]?.startsWith("[[")) {
+ const searchQuery = splitByInsideKeyword
+ .slice(0, i + 1)
+ .join(" inside ")
+ .slice(2, -2);
+ const searchPath = splitByInsideKeyword
+ .slice(i + 1)
+ .join(" inside ")
+ .slice(2, -2);
+ processSearch(searchQuery, searchPath);
+ }
+ }
+ }
+ } else {
+ if (reveal) {
+ directoryInfo = new DirectoryAPI(getDirname(dir));
+ if (!(await directoryInfo.exists())) {
+ PromptError("Directory not exists", "Directory you're looking for does not exist.");
+ stopLoading();
+ return;
+ }
+ await directoryInfo
+ .getFiles()
+ .then(async (files) => {
+ UpdateInfo("number-of-files", `${files.number_of_files - files.skipped_files.length} files`);
+ if (!files.files.length) {
+ MAIN_ELEMENT.classList.add("error-reading-files");
+ MAIN_ELEMENT.innerText = "This folder is empty.";
+ stopLoading();
+ } else {
+ await displayFiles(
+ files.files,
+ dir,
+ MAIN_ELEMENT,
+ {
+ reveal,
+ revealDir: normalizeSlash(dir),
+ },
+ null,
+ files.lnk_files,
+ );
+ stopLoading();
+ updateTheme("grid");
+ LOAD_IMAGE();
+ changeWindowTitle(getBasename(getDirname(dir)));
+ console.timeEnd(dir);
+ if (!isReload) directoryInfo.listen(() => reload());
+ }
+ })
+ .catch((err) => {
+ MAIN_ELEMENT.classList.add("error-reading-files");
+ MAIN_ELEMENT.innerText = err;
+ stopLoading();
+ });
+ } else {
+ directoryInfo = new DirectoryAPI(dir);
+ if (!(await directoryInfo.exists())) {
+ PromptError("Directory not exists", "Directory you're looking for does not exist.");
+ stopLoading();
+ return;
+ }
+ await directoryInfo
+ .getFiles()
+ .then(async (files) => {
+ UpdateInfo("number-of-files", `${files.number_of_files - files.skipped_files.length} files`);
+ if (!files.files.length) {
+ MAIN_ELEMENT.classList.add("error-reading-files");
+ MAIN_ELEMENT.innerText = "This folder is empty.";
+ stopLoading();
+ } else {
+ await displayFiles(files.files, dir, MAIN_ELEMENT, null, null, files.lnk_files);
+ stopLoading();
+ updateTheme("grid");
+ LOAD_IMAGE();
+ changeWindowTitle(getBasename(dir));
+ if (!isReload) directoryInfo.listen(() => reload());
+ console.timeEnd(dir);
+ return;
+ }
+ })
+ .catch((err) => {
+ MAIN_ELEMENT.classList.add("error-reading-files");
+ MAIN_ELEMENT.innerText = err;
+ stopLoading();
+ });
+ }
+ OpenLog(dir);
+ }
};
/**
* Open file/folder handler
@@ -184,41 +183,41 @@ const OpenDir = async (dir: string, reveal?: boolean, forceOpen = false, writeHi
* @returns {Promise}
*/
const OpenHandler = async (e: MouseEvent): Promise => {
- const preference = await Storage.get('preference');
- if (document.querySelector('#sidebar-nav').contains(e.target as HTMLElement)) {
- if (e.detail === 1 && preference?.clickToOpenSidebar && preference?.clickToOpenSidebar !== 'single') return;
- } else if ((await focusingPath()) === 'xplorer://Home') {
- if (e.detail === 1 && preference?.clickToOpenHome !== 'single') return;
- } else {
- if (e.detail === 1 && preference?.clickToOpenHome !== 'single') return;
- }
- let element = e.target as HTMLElement;
- while (element?.dataset && !element.dataset.path) {
- element = element.parentNode as HTMLElement;
- }
- if (!element?.dataset?.path) return;
- if (element.classList.contains('workspace-tab')) return;
+ const preference = await Storage.get("preference");
+ if (document.querySelector("#sidebar-nav").contains(e.target as HTMLElement)) {
+ if (e.detail === 1 && preference?.clickToOpenSidebar && preference?.clickToOpenSidebar !== "single") return;
+ } else if ((await focusingPath()) === "xplorer://Home") {
+ if (e.detail === 1 && preference?.clickToOpenHome !== "single") return;
+ } else {
+ if (e.detail === 1 && preference?.clickToOpenHome !== "single") return;
+ }
+ let element = e.target as HTMLElement;
+ while (element?.dataset && !element.dataset.path) {
+ element = element.parentNode as HTMLElement;
+ }
+ if (!element?.dataset?.path) return;
+ if (element.classList.contains("workspace-tab")) return;
- const filePath = decodeURI(element.dataset.path);
+ const filePath = decodeURI(element.dataset.path);
- if ((await focusingPath()) === 'xplorer://Trash' && element.dataset.isdir !== 'true') {
- Error('Error opening trashed file', 'Please restore the file first in order to open it.');
- }
+ if ((await focusingPath()) === "xplorer://Trash" && element.dataset.isdir !== "true") {
+ PromptError("Error opening trashed file", "Please restore the file first in order to open it.");
+ }
- // Open the file if it's not directory
- if (element.dataset.isdir !== 'true') {
- OpenLog(filePath);
- await new FileAPI(filePath).openFile();
- } else {
- OpenDir(filePath);
- }
+ // Open the file if it's not directory
+ if (element.dataset.isdir !== "true") {
+ OpenLog(filePath);
+ await new FileAPI(filePath).openFile();
+ } else {
+ OpenDir(filePath);
+ }
};
/**
* Open directory/file listener initializer
* @returns {Promise}
*/
const OpenInit = async (): Promise => {
- document.querySelector('#sidebar-nav').addEventListener('click', OpenHandler);
- MAIN_BOX_ELEMENT().addEventListener('click', OpenHandler);
+ document.querySelector("#sidebar-nav").addEventListener("click", OpenHandler);
+ MAIN_BOX_ELEMENT().addEventListener("click", OpenHandler);
};
export { OpenInit, OpenDir };
diff --git a/src/Components/Open/recent.ts b/src/Components/Open/recent.ts
index 8ce21afe..87b66568 100644
--- a/src/Components/Open/recent.ts
+++ b/src/Components/Open/recent.ts
@@ -1,137 +1,137 @@
-import { startLoading, stopLoading } from '../Functions/Loading/loading';
-import Storage from '../../Service/storage';
-import fileThumbnail from '../Thumbnail/thumbnail';
-import { updateTheme } from '../Theme/theme';
-import type { OpenLogType } from '../Functions/log';
-import FileAPI from '../../Service/files';
-import FileMetaData from '../../Typings/fileMetaData';
-import NormalizeSlash from '../Functions/path/normalizeSlash';
-import formatBytes from '../Functions/filesize';
-import { LOAD_IMAGE } from '../Functions/lazyLoadingImage';
-import { GET_TAB_ELEMENT } from '../../Util/constants';
+import FileAPI from "../../Service/files";
+import Storage from "../../Service/storage";
+import type FileMetaData from "../../Typings/fileMetaData";
+import { GET_TAB_ELEMENT } from "../../Util/constants";
+import { startLoading, stopLoading } from "../Functions/Loading/loading";
+import formatBytes from "../Functions/filesize";
+import { LOAD_IMAGE } from "../Functions/lazyLoadingImage";
+import type { OpenLogType } from "../Functions/log";
+import NormalizeSlash from "../Functions/path/normalizeSlash";
+import { updateTheme } from "../Theme/theme";
+import fileThumbnail from "../Thumbnail/thumbnail";
interface RecentType {
- path: string;
- timestamp: Date;
- properties: FileMetaData;
+ path: string;
+ timestamp: Date;
+ properties: FileMetaData;
}
/**
* Recent files handler
* @returns {Promise}
*/
const Recent = async (): Promise => {
- startLoading();
- // Preference data
- const layout = (await Storage.get('layout'))?.['Recent'] ?? (await Storage.get('appearance'))?.layout ?? 's';
- const sort = (await Storage.get('sort'))?.['Recent'] ?? 'F';
- // Get the main element
- const MAIN_ELEMENT = GET_TAB_ELEMENT();
- MAIN_ELEMENT.innerHTML = '';
- if (MAIN_ELEMENT.classList.contains('empty-dir-notification')) MAIN_ELEMENT.classList.remove('empty-dir-notification'); // Remove class if exist
- // Get recent files list
- const _recents: OpenLogType[] = (await Storage.get('log'))?.opens ?? [];
- let recents = await Promise.all(
- _recents.map(async (_recent) => {
- const FileData = new FileAPI(_recent.path);
- if (!(await FileData.exists())) return null;
- const properties = await FileData.properties();
- return { path: _recent.path, timestamp: _recent.timestamp, properties };
- })
- );
- recents = recents.filter((recent) => recent !== null);
- if (!recents) {
- MAIN_ELEMENT.classList.add('empty-dir-notification');
- MAIN_ELEMENT.innerText = 'This folder is empty.';
- stopLoading();
- return;
- }
- recents = recents.sort((a, b) => {
- switch (sort) {
- case 'A': // A-Z
- return a.path.split('\\').pop().split('/').pop().toLowerCase() > b.path.split('\\').pop().split('/').pop().toLowerCase() ? 1 : -1;
- case 'Z': // Z-A
- return a.path.split('\\').pop().split('/').pop().toLowerCase() < b.path.split('\\').pop().split('/').pop().toLowerCase() ? 1 : -1;
- case 'L': // Last Modified
- return new Date(a.timestamp) < new Date(b.timestamp) ? -1 : 1;
- case 'F': // First Modified
- return new Date(a.timestamp) > new Date(b.timestamp) ? -1 : 1;
- case 'S': // Size
- return a.properties.size > b.properties.size ? 1 : -1;
- case 'T':
- return a.properties.file_type > b.properties.file_type ? 1 : -1;
- }
- });
- const __filterDuplicate = (arr: RecentType[]) => {
- const seen: string[] = [];
- const out = [];
- for (let i = 0; i < arr.length; i++) {
- const item = arr[i];
- if (seen.indexOf(NormalizeSlash(item.path)) === -1) {
- seen.push(NormalizeSlash(item.path));
- out.push(arr[i]);
- }
- }
- return out;
- };
- recents = __filterDuplicate(recents);
- if (!recents.length) {
- MAIN_ELEMENT.classList.add('empty-dir-notification');
- MAIN_ELEMENT.innerText = 'This folder is empty.';
- } else {
- for (const recent of recents) {
- const preview = await fileThumbnail(recent.path, recent.properties.is_dir ? 'folder' : 'file');
- const fileGrid = document.createElement('div');
- fileGrid.className = 'file-grid file grid-hover-effect';
- let displayName: string;
- switch (layout) {
- case 'm':
- fileGrid.classList.add('medium-grid-view');
- displayName =
- recent.properties.basename.length > 30 ? recent.properties.basename.substring(0, 30) + '...' : recent.properties.basename;
- break;
- case 'l':
- fileGrid.classList.add('large-grid-view');
- displayName =
- recent.properties.basename.length > 40 ? recent.properties.basename.substring(0, 40) + '...' : recent.properties.basename;
- break;
- case 'd':
- fileGrid.classList.add('detail-view');
- displayName = recent.properties.basename;
- break;
- default:
- fileGrid.classList.add('small-grid-view');
- displayName =
- recent.properties.basename.length > 20 ? recent.properties.basename.substring(0, 20) + '...' : recent.properties.basename;
- break;
- }
- fileGrid.setAttribute('draggable', 'true');
- fileGrid.dataset.isdir = String(recent.properties.is_dir);
- fileGrid.dataset.path = encodeURI(NormalizeSlash(recent.path));
- fileGrid.dataset.isSystem = String(recent.properties.is_system);
- fileGrid.dataset.isReadOnly = String(recent.properties.readonly);
- fileGrid.dataset.isHidden = String(recent.properties.is_hidden);
- fileGrid.innerHTML = `
+ startLoading();
+ // Preference data
+ const layout = (await Storage.get("layout"))?.Recent ?? (await Storage.get("appearance"))?.layout ?? "s";
+ const sort = (await Storage.get("sort"))?.Recent ?? "F";
+ // Get the main element
+ const MAIN_ELEMENT = GET_TAB_ELEMENT();
+ MAIN_ELEMENT.innerHTML = "";
+ if (MAIN_ELEMENT.classList.contains("empty-dir-notification")) MAIN_ELEMENT.classList.remove("empty-dir-notification"); // Remove class if exist
+ // Get recent files list
+ const _recents: OpenLogType[] = (await Storage.get("log"))?.opens ?? [];
+ let recents = await Promise.all(
+ _recents.map(async (_recent) => {
+ const FileData = new FileAPI(_recent.path);
+ if (!(await FileData.exists())) return null;
+ const properties = await FileData.properties();
+ return { path: _recent.path, timestamp: _recent.timestamp, properties };
+ }),
+ );
+ recents = recents.filter((recent) => recent !== null);
+ if (!recents) {
+ MAIN_ELEMENT.classList.add("empty-dir-notification");
+ MAIN_ELEMENT.innerText = "This folder is empty.";
+ stopLoading();
+ return;
+ }
+ recents = recents.sort((a, b) => {
+ switch (sort) {
+ case "A": // A-Z
+ return a.path.split("\\").pop().split("/").pop().toLowerCase() > b.path.split("\\").pop().split("/").pop().toLowerCase() ? 1 : -1;
+ case "Z": // Z-A
+ return a.path.split("\\").pop().split("/").pop().toLowerCase() < b.path.split("\\").pop().split("/").pop().toLowerCase() ? 1 : -1;
+ case "L": // Last Modified
+ return new Date(a.timestamp) < new Date(b.timestamp) ? -1 : 1;
+ case "F": // First Modified
+ return new Date(a.timestamp) > new Date(b.timestamp) ? -1 : 1;
+ case "S": // Size
+ return a.properties.size > b.properties.size ? 1 : -1;
+ case "T":
+ return a.properties.file_type > b.properties.file_type ? 1 : -1;
+ }
+ });
+ const __filterDuplicate = (arr: RecentType[]) => {
+ const seen: string[] = [];
+ const out = [];
+ for (let i = 0; i < arr.length; i++) {
+ const item = arr[i];
+ if (seen.indexOf(NormalizeSlash(item.path)) === -1) {
+ seen.push(NormalizeSlash(item.path));
+ out.push(arr[i]);
+ }
+ }
+ return out;
+ };
+ recents = __filterDuplicate(recents);
+ if (!recents.length) {
+ MAIN_ELEMENT.classList.add("empty-dir-notification");
+ MAIN_ELEMENT.innerText = "This folder is empty.";
+ } else {
+ for (const recent of recents) {
+ const preview = await fileThumbnail(recent.path, recent.properties.is_dir ? "folder" : "file");
+ const fileGrid = document.createElement("div");
+ fileGrid.className = "file-grid file grid-hover-effect";
+ let displayName: string;
+ switch (layout) {
+ case "m":
+ fileGrid.classList.add("medium-grid-view");
+ displayName =
+ recent.properties.basename.length > 30 ? `${recent.properties.basename.substring(0, 30)}...` : recent.properties.basename;
+ break;
+ case "l":
+ fileGrid.classList.add("large-grid-view");
+ displayName =
+ recent.properties.basename.length > 40 ? `${recent.properties.basename.substring(0, 40)}...` : recent.properties.basename;
+ break;
+ case "d":
+ fileGrid.classList.add("detail-view");
+ displayName = recent.properties.basename;
+ break;
+ default:
+ fileGrid.classList.add("small-grid-view");
+ displayName =
+ recent.properties.basename.length > 20 ? `${recent.properties.basename.substring(0, 20)}...` : recent.properties.basename;
+ break;
+ }
+ fileGrid.setAttribute("draggable", "true");
+ fileGrid.dataset.isdir = String(recent.properties.is_dir);
+ fileGrid.dataset.path = encodeURI(NormalizeSlash(recent.path));
+ fileGrid.dataset.isSystem = String(recent.properties.is_system);
+ fileGrid.dataset.isReadOnly = String(recent.properties.readonly);
+ fileGrid.dataset.isHidden = String(recent.properties.is_hidden);
+ fileGrid.innerHTML = `
${preview}
${displayName}
${new Date(recent.properties.last_modified?.secs_since_epoch * 1000).toLocaleString(
- navigator.language,
- { hour12: false }
- )}
+ navigator.language,
+ { hour12: false },
+ )}
${
- recent.properties.size > 0 && !recent.properties.is_dir
- ? `${formatBytes(
- recent.properties.size // eslint-disable-next-line no-mixed-spaces-and-tabs
- )}`
- : ``
- }
+ recent.properties.size > 0 && !recent.properties.is_dir
+ ? `${formatBytes(
+ recent.properties.size, // eslint-disable-next-line no-mixed-spaces-and-tabs
+ )}`
+ : ``
+ }
${recent.properties.file_type}
`;
- MAIN_ELEMENT.appendChild(fileGrid);
- }
- updateTheme('grid');
- LOAD_IMAGE();
- }
- stopLoading();
+ MAIN_ELEMENT.appendChild(fileGrid);
+ }
+ updateTheme("grid");
+ LOAD_IMAGE();
+ }
+ stopLoading();
};
export default Recent;
diff --git a/src/Components/Preview/DocxViewer.tsx b/src/Components/Preview/DocxViewer.tsx
index 6266b9ee..705b9f92 100644
--- a/src/Components/Preview/DocxViewer.tsx
+++ b/src/Components/Preview/DocxViewer.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
export interface IDocxViewerProps {
- filePath: string
+ filePath: string;
}
const DocxViewer = ({ filePath }: IDocxViewerProps): JSX.Element => {
- return (Docx viewer: {filePath});
-}
+ return Docx viewer: {filePath};
+};
export default DocxViewer;
diff --git a/src/Components/Preview/HtmlViewer.tsx b/src/Components/Preview/HtmlViewer.tsx
index 4fd6e83e..c38d3ba5 100644
--- a/src/Components/Preview/HtmlViewer.tsx
+++ b/src/Components/Preview/HtmlViewer.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
export interface IHtmlViewerProps {
- filePath: string
+ filePath: string;
}
const HtmlViewer = ({ filePath }: IHtmlViewerProps): JSX.Element => {
- return (pdf viewer: {filePath});
-}
+ return pdf viewer: {filePath};
+};
export default HtmlViewer;
diff --git a/src/Components/Preview/ImageViewer.tsx b/src/Components/Preview/ImageViewer.tsx
index f2317bfb..3b1d5972 100644
--- a/src/Components/Preview/ImageViewer.tsx
+++ b/src/Components/Preview/ImageViewer.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
export interface IImageViewerProps {
- filePath: string
+ filePath: string;
}
const ImageViewer = ({ filePath }: IImageViewerProps): JSX.Element => {
- return (Image viewer: {filePath});
-}
+ return Image viewer: {filePath};
+};
export default ImageViewer;
diff --git a/src/Components/Preview/MarkdownViewer.tsx b/src/Components/Preview/MarkdownViewer.tsx
index df38a672..06bc12fa 100644
--- a/src/Components/Preview/MarkdownViewer.tsx
+++ b/src/Components/Preview/MarkdownViewer.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
export interface IMarkdownViewerProps {
- filePath: string
+ filePath: string;
}
const MarkdownViewer = ({ filePath }: IMarkdownViewerProps): JSX.Element => {
- return (Markdown viewer: {filePath});
-}
+ return Markdown viewer: {filePath};
+};
export default MarkdownViewer;
diff --git a/src/Components/Preview/PdfViewer.tsx b/src/Components/Preview/PdfViewer.tsx
index 254d4c34..c8878e49 100644
--- a/src/Components/Preview/PdfViewer.tsx
+++ b/src/Components/Preview/PdfViewer.tsx
@@ -1,36 +1,30 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
-import { readAssetRequest } from '../../Store/ActionCreators/FilesActionCreators';
-import { IAppState } from '../../Store/Reducers';
+import { readAssetRequest } from "../../Store/ActionCreators/FilesActionCreators";
+import type { IAppState } from "../../Store/Reducers";
export interface IPdfViewerProps {
- filePath: string
+ filePath: string;
}
const PdfViewer = ({ filePath }: IPdfViewerProps): JSX.Element => {
- const dispatch = useDispatch();
- const content = useSelector(state => state.files.files?.[filePath]?.content);
+ const dispatch = useDispatch();
+ const content = useSelector((state) => state.files.files?.[filePath]?.content);
- useEffect(() => {
- dispatch(readAssetRequest(filePath));
- }, [filePath]);
+ useEffect(() => {
+ dispatch(readAssetRequest(filePath));
+ }, [filePath, dispatch]);
- if (!content) return Loading...;
+ if (!content) return Loading...;
- return (
-
-
-
- );
-}
+ return (
+
+
+
+ );
+};
export default PdfViewer;
diff --git a/src/Components/Preview/PlaintextViewer.tsx b/src/Components/Preview/PlaintextViewer.tsx
index ce0e3701..993ba9aa 100644
--- a/src/Components/Preview/PlaintextViewer.tsx
+++ b/src/Components/Preview/PlaintextViewer.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
export interface IPlaintextViewerProps {
- filePath: string
+ filePath: string;
}
const PlaintextViewer = ({ filePath }: IPlaintextViewerProps): JSX.Element => {
- return (Plaintext viewer: {filePath});
-}
+ return Plaintext viewer: {filePath};
+};
export default PlaintextViewer;
diff --git a/src/Components/Preview/VideoViewer.tsx b/src/Components/Preview/VideoViewer.tsx
index 95878106..5b15f0ce 100644
--- a/src/Components/Preview/VideoViewer.tsx
+++ b/src/Components/Preview/VideoViewer.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
export interface IVideoViewerProps {
- filePath: string
+ filePath: string;
}
const VideoViewer = ({ filePath }: IVideoViewerProps): JSX.Element => {
- return (Video viewer: {filePath});
-}
+ return Video viewer: {filePath};
+};
export default VideoViewer;
diff --git a/src/Components/Preview/XlsxViewer.tsx b/src/Components/Preview/XlsxViewer.tsx
index 0f06596b..2e1d8bf0 100644
--- a/src/Components/Preview/XlsxViewer.tsx
+++ b/src/Components/Preview/XlsxViewer.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
export interface IXlsxViewerProps {
- filePath: string
+ filePath: string;
}
const XlsxViewer = ({ filePath }: IXlsxViewerProps): JSX.Element => {
- return (Xlsx viewer: {filePath});
-}
+ return Xlsx viewer: {filePath};
+};
export default XlsxViewer;
diff --git a/src/Components/Preview/index.tsx b/src/Components/Preview/index.tsx
index f6913830..2f82f131 100644
--- a/src/Components/Preview/index.tsx
+++ b/src/Components/Preview/index.tsx
@@ -1,67 +1,73 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
// import xlsx from 'xlsx';
// import hljs from 'highlight.js';
// import { marked } from 'marked';
-import PdfViewer from './PdfViewer';
-import HtmlViewer from './HtmlViewer';
-import DocxViewer from './DocxViewer';
-import XlsxViewer from './XlsxViewer';
-import ImageViewer from './ImageViewer';
-import VideoViewer from './VideoViewer';
-import PlaintextViewer from './PlaintextViewer';
-import MarkdownViewer from './MarkdownViewer';
+import DocxViewer from "./DocxViewer";
+import HtmlViewer from "./HtmlViewer";
+import ImageViewer from "./ImageViewer";
+import MarkdownViewer from "./MarkdownViewer";
+import PdfViewer from "./PdfViewer";
+import PlaintextViewer from "./PlaintextViewer";
+import VideoViewer from "./VideoViewer";
+import XlsxViewer from "./XlsxViewer";
// import { readFileRequest, readAssetRequest, readBufferRequest } from '../../Store/ActionCreators/FilesActionCreators';
-import { IAppState } from '../../Store/Reducers';
-import { IFile } from '../../Typings/Store/files';
+import type { IAppState } from "../../Store/Reducers";
+import type { IFile } from "../../Typings/Store/files";
import {
- IMAGE_TYPES,
- VIDEO_TYPES,
- PLAINTEXT_TYPES,
- HTML_TYPES,
- MARKDOWN_TYPES,
- XLSX_TYPES,
- DOCX_TYPES,
- PDF_TYPES,
- extensionMatches,
-} from '../../Config/file.config';
+ DOCX_TYPES,
+ HTML_TYPES,
+ IMAGE_TYPES,
+ MARKDOWN_TYPES,
+ PDF_TYPES,
+ PLAINTEXT_TYPES,
+ VIDEO_TYPES,
+ XLSX_TYPES,
+ extensionMatches,
+} from "../../Config/file.config";
export interface IPreviewProps {
- filePath: string;
+ filePath: string;
}
const Preview = ({ filePath }: IPreviewProps): JSX.Element => {
- // const dispatch = useDispatch();
- const file = useSelector((state) => state.files.files?.[filePath]);
+ // const dispatch = useDispatch();
+ const file = useSelector((state) => state.files.files?.[filePath]);
- console.log(filePath.split('.')[filePath.split('.').length - 1]);
+ console.log(filePath.split(".")[filePath.split(".").length - 1]);
- const filePathSplit = filePath.split('.');
- const extension = filePathSplit[filePathSplit.length - 1].toLowerCase();
+ const filePathSplit = filePath.split(".");
+ const extension = filePathSplit[filePathSplit.length - 1].toLowerCase();
- if (extensionMatches(PDF_TYPES, extension)) {
- return => {
- document.querySelectorAll('.prompt').forEach((el) => el.parentNode.removeChild(el));
- const promptElement = document.createElement('div');
- promptElement.className = 'prompt';
- promptElement.innerHTML = `
+ document.querySelectorAll(".prompt").forEach((el) => el.parentNode.removeChild(el));
+ const promptElement = document.createElement("div");
+ promptElement.className = "prompt";
+ promptElement.innerHTML = `
${title}
- ${message ? `` : ''}
-
+ ${message ? `` : ""}
+
`;
- promptElement.querySelector('.prompt-exit-btn').addEventListener('click', () => promptElement.parentNode.removeChild(promptElement));
- promptElement.querySelector('.prompt-cancel').addEventListener('click', () => promptElement.parentNode.removeChild(promptElement));
+ promptElement.querySelector(".prompt-exit-btn").addEventListener("click", () => promptElement.parentNode.removeChild(promptElement));
+ promptElement.querySelector(".prompt-cancel").addEventListener("click", () => promptElement.parentNode.removeChild(promptElement));
- dragElement(promptElement.querySelector('.prompt-frame'), promptElement);
- document.body.appendChild(promptElement);
+ dragElement(promptElement.querySelector(".prompt-frame"), promptElement);
+ document.body.appendChild(promptElement);
- const promptInput = promptElement.querySelector('.prompt-input');
- if (options?.selectFileName ?? true) promptInput.setSelectionRange(0, promptInput.value.lastIndexOf('.'));
- else promptInput.setSelectionRange(promptInput.value.length, promptInput.value.length);
- promptInput.focus();
- return new Promise((resolve) => {
- promptElement.querySelector('.prompt-ok').addEventListener('click', () => {
- promptElement.parentNode.removeChild(promptElement);
- resolve(promptInput.value);
- });
- promptInput.onkeydown = (event: KeyboardEvent) => {
- if (event.key === 'Enter') {
- promptElement.parentNode.removeChild(promptElement);
- resolve(promptInput.value);
- }
- };
- });
+ const promptInput = promptElement.querySelector(".prompt-input");
+ if (options?.selectFileName ?? true) promptInput.setSelectionRange(0, promptInput.value.lastIndexOf("."));
+ else promptInput.setSelectionRange(promptInput.value.length, promptInput.value.length);
+ promptInput.focus();
+ return new Promise((resolve) => {
+ promptElement.querySelector(".prompt-ok").addEventListener("click", () => {
+ promptElement.parentNode.removeChild(promptElement);
+ resolve(promptInput.value);
+ });
+ promptInput.onkeydown = (event: KeyboardEvent) => {
+ if (event.key === "Enter") {
+ promptElement.parentNode.removeChild(promptElement);
+ resolve(promptInput.value);
+ }
+ };
+ });
};
export default Ask;
diff --git a/src/Components/Prompt/confirm.ts b/src/Components/Prompt/confirm.ts
index c8f47684..04031f43 100644
--- a/src/Components/Prompt/confirm.ts
+++ b/src/Components/Prompt/confirm.ts
@@ -1,44 +1,44 @@
-import dragElement from '../Functions/dragElement';
-import { pauseEnter } from '../Shortcut/shortcut';
+import dragElement from "../Functions/dragElement";
+import { pauseEnter } from "../Shortcut/shortcut";
-const ConfirmDialog = (title: string, message: string, defaultValue?: 'Yes' | 'No'): Promise => {
- return new Promise((resolve) => {
- document.querySelectorAll('.prompt').forEach((el) => el.parentNode.removeChild(el));
- const promptElement = document.createElement('div');
- promptElement.className = 'prompt';
- promptElement.innerHTML = `
+const ConfirmDialog = (title: string, message: string, defaultValue?: "Yes" | "No"): Promise => {
+ return new Promise((resolve) => {
+ document.querySelectorAll(".prompt").forEach((el) => el.parentNode.removeChild(el));
+ const promptElement = document.createElement("div");
+ promptElement.className = "prompt";
+ promptElement.innerHTML = `
${title}
- ${message ? `` : ''}
+ ${message ? `` : ""}
`;
- promptElement.querySelector('.prompt-exit-btn').addEventListener('click', () => {
- promptElement.parentNode.removeChild(promptElement);
- resolve(false);
- });
- promptElement.querySelector('.prompt-cancel').addEventListener('click', () => {
- promptElement.parentNode.removeChild(promptElement);
- resolve(false);
- });
- promptElement.querySelector('.prompt-ok').addEventListener('click', () => {
- promptElement.parentNode.removeChild(promptElement);
- resolve(true);
- });
- dragElement(promptElement.querySelector('.prompt-frame'), promptElement);
- const keydownhandler = (event: KeyboardEvent) => {
- if (event.key === 'Enter') {
- pauseEnter();
- promptElement.parentNode.removeChild(promptElement);
- document.removeEventListener('keydown', keydownhandler);
- resolve(defaultValue === 'Yes');
- }
- };
- document.addEventListener('keydown', keydownhandler);
- document.body.appendChild(promptElement);
- });
+ promptElement.querySelector(".prompt-exit-btn").addEventListener("click", () => {
+ promptElement.parentNode.removeChild(promptElement);
+ resolve(false);
+ });
+ promptElement.querySelector(".prompt-cancel").addEventListener("click", () => {
+ promptElement.parentNode.removeChild(promptElement);
+ resolve(false);
+ });
+ promptElement.querySelector(".prompt-ok").addEventListener("click", () => {
+ promptElement.parentNode.removeChild(promptElement);
+ resolve(true);
+ });
+ dragElement(promptElement.querySelector(".prompt-frame"), promptElement);
+ const keydownhandler = (event: KeyboardEvent) => {
+ if (event.key === "Enter") {
+ pauseEnter();
+ promptElement.parentNode.removeChild(promptElement);
+ document.removeEventListener("keydown", keydownhandler);
+ resolve(defaultValue === "Yes");
+ }
+ };
+ document.addEventListener("keydown", keydownhandler);
+ document.body.appendChild(promptElement);
+ });
};
export default ConfirmDialog;
diff --git a/src/Components/Prompt/error.ts b/src/Components/Prompt/error.ts
index 6a7dfec7..f95fc0a5 100644
--- a/src/Components/Prompt/error.ts
+++ b/src/Components/Prompt/error.ts
@@ -1,28 +1,28 @@
-import beep from '../Functions/beep';
-import dragElement from '../Functions/dragElement';
-import { ErrorLog } from '../Functions/log';
+import beep from "../Functions/beep";
+import dragElement from "../Functions/dragElement";
+import { ErrorLog } from "../Functions/log";
const PromptError = (title: string, message: string): void => {
- document.querySelectorAll('.prompt').forEach((el) => el.parentNode.removeChild(el));
- const promptElement = document.createElement('div');
- promptElement.className = 'prompt';
- promptElement.innerHTML = `
+ document.querySelectorAll(".prompt").forEach((el) => el.parentNode.removeChild(el));
+ const promptElement = document.createElement("div");
+ promptElement.className = "prompt";
+ promptElement.innerHTML = `
${title}
- ${message ? `` : ''}
+ ${message ? `` : ""}
`;
- promptElement.querySelector('.prompt-ok').addEventListener('click', () => promptElement.parentNode.removeChild(promptElement));
- document.body.appendChild(promptElement);
- beep();
- dragElement(promptElement.querySelector('.prompt-frame'), promptElement);
- ErrorLog(`[${title}] ${message}`);
- document.addEventListener('keydown', (e) => {
- if (e.key === 'Enter') {
- promptElement.parentNode.removeChild(promptElement);
- }
- });
+ promptElement.querySelector(".prompt-ok").addEventListener("click", () => promptElement.parentNode.removeChild(promptElement));
+ document.body.appendChild(promptElement);
+ beep();
+ dragElement(promptElement.querySelector(".prompt-frame"), promptElement);
+ ErrorLog(`[${title}] ${message}`);
+ document.addEventListener("keydown", (e) => {
+ if (e.key === "Enter") {
+ promptElement.parentNode.removeChild(promptElement);
+ }
+ });
};
export default PromptError;
diff --git a/src/Components/Properties/index.tsx b/src/Components/Properties/index.tsx
index 3abf6147..2f689de4 100644
--- a/src/Components/Properties/index.tsx
+++ b/src/Components/Properties/index.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react";
const Properties = () => (
-
-
- Properties
- ×
+
+
+ Properties
+ ×
+
+
-
-
);
export default Properties;
diff --git a/src/Components/Properties/properties.ts b/src/Components/Properties/properties.ts
index 09dfafb8..02f06e45 100644
--- a/src/Components/Properties/properties.ts
+++ b/src/Components/Properties/properties.ts
@@ -1,31 +1,31 @@
-import formatBytes from '../Functions/filesize';
-import DirectoryAPI from '../../Service/directory';
-import FileAPI from '../../Service/files';
+import DirectoryAPI from "../../Service/directory";
+import FileAPI from "../../Service/files";
+import formatBytes from "../Functions/filesize";
/**
* Render file/folder properties into HTML
* @param {Record} options - File/folder's properties
*/
const RenderProperties = (options: Record) => {
- const PROPERTIES_ELEMENT = document.querySelector('.properties');
- const PROPERTIES_BODY = PROPERTIES_ELEMENT.querySelector('.properties-body');
- PROPERTIES_ELEMENT.querySelector('.properties-heading-exit').addEventListener('click', () => {
- PROPERTIES_ELEMENT.style.animation = 'close-properties 1s forwards';
- });
- PROPERTIES_ELEMENT.style.animation = 'properties 1s forwards';
+ const PROPERTIES_ELEMENT = document.querySelector(".properties");
+ const PROPERTIES_BODY = PROPERTIES_ELEMENT.querySelector(".properties-body");
+ PROPERTIES_ELEMENT.querySelector(".properties-heading-exit").addEventListener("click", () => {
+ PROPERTIES_ELEMENT.style.animation = "close-properties 1s forwards";
+ });
+ PROPERTIES_ELEMENT.style.animation = "properties 1s forwards";
- let table: string;
- table = '';
- Object.keys(options).forEach((key) => {
- if (options[key] !== '') {
- const value =
- options[key] === 'calculating'
- ? `Calculating... `
- : `${options[key]} `;
- table += `${key} : ${value}';
+ Object.keys(options).forEach((key) => {
+ if (options[key] !== "") {
+ const value =
+ options[key] === "calculating"
+ ? `Calculating... `
+ : `${options[key]} `;
+ table += `${key} : ${value}) => {
* @returns {void}
*/
const Properties = async (filePath: string): Promise => {
- const fileElement = document.querySelector(`[data-path="${encodeURI(filePath)}"]`);
+ const fileElement = document.querySelector(`[data-path="${encodeURI(filePath)}"]`);
- let size, createdAt, modifiedAt, accessedAt, fileType, isHidden, isSystem, isReadonly;
+ let size: string;
+ let createdAt: string | undefined;
+ let modifiedAt: string | undefined;
+ let accessedAt: string | undefined;
+ let fileType: string;
+ let isHidden: boolean | undefined;
+ let isSystem: boolean | undefined;
+ let isReadonly: boolean | undefined;
- if (fileElement.classList.contains('file')) {
- size = fileElement.querySelector('.file-size').innerHTML;
- if (fileElement.dataset.realPath) filePath = fileElement.dataset.realPath;
- createdAt = fileElement.dataset.createdAt;
- modifiedAt = fileElement.dataset.modifiedAt;
- accessedAt = fileElement.dataset.accessedAt;
- fileType = fileElement.querySelector('.file-type').innerHTML;
- isHidden = fileElement.dataset.isHidden === 'true';
- isSystem = fileElement.dataset.isSystem === 'true';
- isReadonly = fileElement.dataset.isReadonly === 'true';
- } else {
- const fileInfo = await new FileAPI(filePath).properties();
- size = formatBytes(fileInfo.size);
- createdAt = String(new Date(fileInfo.created.secs_since_epoch * 1000).toLocaleString(navigator.language, { hour12: false }));
- modifiedAt = String(new Date(fileInfo.last_modified.secs_since_epoch * 1000).toLocaleString(navigator.language, { hour12: false }));
- accessedAt = String(new Date(fileInfo.last_accessed.secs_since_epoch * 1000).toLocaleString(navigator.language, { hour12: false }));
- isHidden = fileInfo.is_hidden;
- isSystem = fileInfo.is_system;
- isReadonly = fileInfo.readonly;
- fileType = 'File Folder';
- }
- const file_attrs = [];
- if (isHidden) file_attrs.push('Hidden');
- if (isSystem) file_attrs.push('System file');
- if (isReadonly) file_attrs.push('Read only');
- const isDirectory = fileElement.dataset.isDir === 'true';
- const file_attr = file_attrs.join(', ');
- if (isDirectory) {
- new DirectoryAPI(filePath).getSize().then((size) => {
- document.querySelector(`[data-calculating="size"]`).innerHTML = formatBytes(size);
- });
- }
+ if (fileElement.classList.contains("file")) {
+ size = fileElement.querySelector(".file-size").innerHTML;
+ if (fileElement.dataset.realPath) filePath = fileElement.dataset.realPath;
+ createdAt = fileElement.dataset.createdAt;
+ modifiedAt = fileElement.dataset.modifiedAt;
+ accessedAt = fileElement.dataset.accessedAt;
+ fileType = fileElement.querySelector(".file-type").innerHTML;
+ isHidden = fileElement.dataset.isHidden === "true";
+ isSystem = fileElement.dataset.isSystem === "true";
+ isReadonly = fileElement.dataset.isReadonly === "true";
+ } else {
+ const fileInfo = await new FileAPI(filePath).properties();
+ size = formatBytes(fileInfo.size);
+ createdAt = String(new Date(fileInfo.created.secs_since_epoch * 1000).toLocaleString(navigator.language, { hour12: false }));
+ modifiedAt = String(new Date(fileInfo.last_modified.secs_since_epoch * 1000).toLocaleString(navigator.language, { hour12: false }));
+ accessedAt = String(new Date(fileInfo.last_accessed.secs_since_epoch * 1000).toLocaleString(navigator.language, { hour12: false }));
+ isHidden = fileInfo.is_hidden;
+ isSystem = fileInfo.is_system;
+ isReadonly = fileInfo.readonly;
+ fileType = "File Folder";
+ }
+ const file_attrs = [];
+ if (isHidden) file_attrs.push("Hidden");
+ if (isSystem) file_attrs.push("System file");
+ if (isReadonly) file_attrs.push("Read only");
+ const isDirectory = fileElement.dataset.isDir === "true";
+ const file_attr = file_attrs.join(", ");
+ if (isDirectory) {
+ new DirectoryAPI(filePath).getSize().then((size) => {
+ document.querySelector(`[data-calculating="size"]`).innerHTML = formatBytes(size);
+ });
+ }
- RenderProperties({
- Size: size ? size : 'calculating',
- 'File Path': filePath,
- 'File Type': fileType,
- 'Created At': createdAt,
- 'Modified At': modifiedAt,
- 'Accessed At': accessedAt,
- 'File Attribute': file_attr,
- });
+ RenderProperties({
+ Size: size ? size : "calculating",
+ "File Path": filePath,
+ "File Type": fileType,
+ "Created At": createdAt,
+ "Modified At": modifiedAt,
+ "Accessed At": accessedAt,
+ "File Attribute": file_attr,
+ });
};
export default Properties;
diff --git a/src/Components/Setting/About/about.ts b/src/Components/Setting/About/about.ts
index 968a5865..1952ce13 100644
--- a/src/Components/Setting/About/about.ts
+++ b/src/Components/Setting/About/about.ts
@@ -1,25 +1,25 @@
-import { getTauriVersion } from '@tauri-apps/api/app';
-import { version, description } from '../../../../package.json';
-import { os } from '@tauri-apps/api';
+import { os } from "@tauri-apps/api";
+import { getTauriVersion } from "@tauri-apps/api/app";
+import { description, version } from "../../../../package.json";
// Copy text into clipboard
const copyToClipboard = (text: string) => {
- return `navigator.clipboard.writeText('${text}')`;
+ return `navigator.clipboard.writeText('${text}')`;
};
/**
* Create about section
* @returns {Promise}
*/
const About = async (): Promise => {
- const settingsMain = document.querySelector('.settings-main');
- const tauriVersion = await getTauriVersion();
- const platform = await os.platform();
- const arch = await os.arch();
- const osVersion = await os.version();
- const aboutPage = `
+ const settingsMain = document.querySelector(".settings-main");
+ const tauriVersion = await getTauriVersion();
+ const platform = await os.platform();
+ const arch = await os.arch();
+ const osVersion = await os.version();
+ const aboutPage = `
- })
+ 
Xplorer
${description}
@@ -29,7 +29,7 @@ const About = async (): Promise => {
Version: ${version}⎘
@@ -37,7 +37,7 @@ const About = async (): Promise => {
Tauri version: ${tauriVersion}⎘
@@ -45,7 +45,7 @@ const About = async (): Promise => {
OS: ${platform} ${arch} ${osVersion}⎘
@@ -79,6 +79,6 @@ const About = async (): Promise => {
`;
- settingsMain.innerHTML = aboutPage;
+ settingsMain.innerHTML = aboutPage;
};
export default About;
diff --git a/src/Components/Setting/Appearance/Appearance.ts b/src/Components/Setting/Appearance/Appearance.ts
index 72f4cfcd..b4e491ef 100644
--- a/src/Components/Setting/Appearance/Appearance.ts
+++ b/src/Components/Setting/Appearance/Appearance.ts
@@ -1,111 +1,111 @@
-import { reload, minimize, maximize, close } from '../../Layout/windowManager';
-import Translate from '../../I18n/i18n';
-import Storage from '../../../Service/storage';
-import OS, { isWin11 } from '../../../Service/platform';
-import { changeTransparentEffect, getAvailableFonts, enableShadowEffect } from '../../../Service/app';
-import { getElementStyle, getInstalledThemes, updateTheme } from '../../Theme/theme';
-import { setDecorations } from '../../../Service/window';
-import Infobar from '../../Layout/infobar';
-import isTauri from '../../../Util/is-tauri';
+import { changeTransparentEffect, enableShadowEffect, getAvailableFonts } from "../../../Service/app";
+import OS, { isWin11 } from "../../../Service/platform";
+import Storage from "../../../Service/storage";
+import { setDecorations } from "../../../Service/window";
+import isTauri from "../../../Util/is-tauri";
+import Translate from "../../I18n/i18n";
+import Infobar from "../../Layout/infobar";
+import { close, maximize, minimize, reload } from "../../Layout/windowManager";
+import { getElementStyle, getInstalledThemes, updateTheme } from "../../Theme/theme";
let platform: string;
/**
* Create appearence section
* @returns {Promise}
*/
const Appearance = async (): Promise => {
- if (!platform) {
- platform = await OS();
- }
- const developingTheme = document.body.dataset.usingCustomTheme === 'true';
- const _theme = await Storage.get('theme');
- const _appearance = await Storage.get('appearance');
- const theme = _theme?.theme;
- const shadowEffect = _appearance?.shadowEffect ?? true;
- const layout = _appearance?.layout ?? 's';
- const videoAsThumbnail = _appearance?.videoAsThumbnail ?? false;
- const imageAsThumbnail = _appearance?.imageAsThumbnail ?? 'smalldir';
- const extractExeIcon = _appearance?.extractExeIcon ?? false;
- const previewImageOnHover = _appearance?.previewImageOnHover ?? true;
- const settingsMain = document.querySelector('.settings-main');
- const fontFamily = _appearance?.fontFamily ?? getElementStyle('fontFamily');
- const fontSize = parseInt(_appearance?.fontSize ?? 16);
- const windowTransparency = parseInt(_appearance?.windowTransparency ?? 80);
- const transparentEffect = _appearance?.transparentEffect ?? 'none';
- const transparentSidebar = _appearance?.transparentSidebar ?? true;
- const transparentTopbar = _appearance?.transparentTopbar ?? false;
- const transparentWorkspace = _appearance?.transparentWorkspace ?? false;
- const frameStyle = _appearance?.frameStyle ?? 'default';
- const showInfoBar = _appearance?.showInfoBar ?? true;
+ if (!platform) {
+ platform = await OS();
+ }
+ const developingTheme = document.body.dataset.usingCustomTheme === "true";
+ const _theme = await Storage.get("theme");
+ const _appearance = await Storage.get("appearance");
+ const theme = _theme?.theme;
+ const shadowEffect = _appearance?.shadowEffect ?? true;
+ const layout = _appearance?.layout ?? "s";
+ const videoAsThumbnail = _appearance?.videoAsThumbnail ?? false;
+ const imageAsThumbnail = _appearance?.imageAsThumbnail ?? "smalldir";
+ const extractExeIcon = _appearance?.extractExeIcon ?? false;
+ const previewImageOnHover = _appearance?.previewImageOnHover ?? true;
+ const settingsMain = document.querySelector(".settings-main");
+ const fontFamily = _appearance?.fontFamily ?? getElementStyle("fontFamily");
+ const fontSize = Number.parseInt(_appearance?.fontSize ?? 16);
+ const windowTransparency = Number.parseInt(_appearance?.windowTransparency ?? 80);
+ const transparentEffect = _appearance?.transparentEffect ?? "none";
+ const transparentSidebar = _appearance?.transparentSidebar ?? true;
+ const transparentTopbar = _appearance?.transparentTopbar ?? false;
+ const transparentWorkspace = _appearance?.transparentWorkspace ?? false;
+ const frameStyle = _appearance?.frameStyle ?? "default";
+ const showInfoBar = _appearance?.showInfoBar ?? true;
- const installedThemes = await getInstalledThemes();
- const availableThemes = [
- { name: 'Light', identifier: 'light' },
- { name: 'Dark', identifier: 'dark' },
- { name: 'Light+', identifier: 'light+' },
- { name: 'Dark+', identifier: 'dark+' },
- ].concat(...installedThemes.map((theme) => [{ name: theme.name, identifier: theme.identifier }]));
- const availableFonts = await getAvailableFonts();
- const default_i18n = await Translate('Default');
- const appTheme_i18n = await Translate('App Theme');
- const shadowEffect_i18n = await Translate('Apply Shadow Effect');
- const filePreview_i18n = await Translate('File Preview');
- const defaultFileLayout_i18n = await Translate('Default File Layout');
- const gridViewSmall_i18n = await Translate('Grid View (Small)');
- const gridViewMedium_i18n = await Translate('Grid View (Medium)');
- const gridViewLarge_i18n = await Translate('Grid View (Large)');
- const detailView_i18n = await Translate('Detail View');
- const systemDefault_i18n = await Translate('System Default');
- const imageAsThumbnail_i18n = await Translate('Show image as thumbnail');
- const disabled_i18n = await Translate('Disabled');
- const forSmallDirectory_i18n = await Translate('For small directory (recommended)');
- const enableForAllDirectory_i18n = await Translate('Enable for all directory');
- const videoAsThumbnail_i18n = await Translate('Automatically play video file as thumbnail (May consume high amount of RAM)');
- const extractExeIcon_i18n = await Translate('Extract exe file icon and make it as the thumbnail (Turning it on might crashes Xplorer)');
- const previewImageOnHover_i18n = await Translate('Preview image on hover');
- const fontFamily_i18n = await Translate('Font Family');
- const fontSize_i18n = await Translate('Font Size');
- const windowTransparency_i18n = await Translate('Window Transparency');
- const transparentEffect_i18n = await Translate('Transparent Effect');
- const blur_i18n = await Translate('Blur');
- const acrylic_i18n = await Translate('Acrylic');
- const mica_i18n = await Translate('Mica');
- const vibrancy_i18n = await Translate('Vibrancy');
- const none_i18n = await Translate('None');
- const transparentSidebar_i18n = await Translate('Transparent Sidebar');
- const transparentTopbar_i18n = await Translate('Transparent Topbar');
- const transparentWorkspace_i18n = await Translate('Transparent Workspace');
- const frameStyle_i18n = await Translate('Frame Style');
- const workspace_i18n = await Translate('Workspace');
- const showInfoBar_i18n = await Translate('Show Info Bar');
- const disabledForWeb = !isTauri ? 'disabled' : '';
- const appearancePage = `${appTheme_i18n}
+ const installedThemes = await getInstalledThemes();
+ const availableThemes = [
+ { name: "Light", identifier: "light" },
+ { name: "Dark", identifier: "dark" },
+ { name: "Light+", identifier: "light+" },
+ { name: "Dark+", identifier: "dark+" },
+ ].concat(...installedThemes.map((theme) => [{ name: theme.name, identifier: theme.identifier }]));
+ const availableFonts = await getAvailableFonts();
+ const default_i18n = await Translate("Default");
+ const appTheme_i18n = await Translate("App Theme");
+ const shadowEffect_i18n = await Translate("Apply Shadow Effect");
+ const filePreview_i18n = await Translate("File Preview");
+ const defaultFileLayout_i18n = await Translate("Default File Layout");
+ const gridViewSmall_i18n = await Translate("Grid View (Small)");
+ const gridViewMedium_i18n = await Translate("Grid View (Medium)");
+ const gridViewLarge_i18n = await Translate("Grid View (Large)");
+ const detailView_i18n = await Translate("Detail View");
+ const systemDefault_i18n = await Translate("System Default");
+ const imageAsThumbnail_i18n = await Translate("Show image as thumbnail");
+ const disabled_i18n = await Translate("Disabled");
+ const forSmallDirectory_i18n = await Translate("For small directory (recommended)");
+ const enableForAllDirectory_i18n = await Translate("Enable for all directory");
+ const videoAsThumbnail_i18n = await Translate("Automatically play video file as thumbnail (May consume high amount of RAM)");
+ const extractExeIcon_i18n = await Translate("Extract exe file icon and make it as the thumbnail (Turning it on might crashes Xplorer)");
+ const previewImageOnHover_i18n = await Translate("Preview image on hover");
+ const fontFamily_i18n = await Translate("Font Family");
+ const fontSize_i18n = await Translate("Font Size");
+ const windowTransparency_i18n = await Translate("Window Transparency");
+ const transparentEffect_i18n = await Translate("Transparent Effect");
+ const blur_i18n = await Translate("Blur");
+ const acrylic_i18n = await Translate("Acrylic");
+ const mica_i18n = await Translate("Mica");
+ const vibrancy_i18n = await Translate("Vibrancy");
+ const none_i18n = await Translate("None");
+ const transparentSidebar_i18n = await Translate("Transparent Sidebar");
+ const transparentTopbar_i18n = await Translate("Transparent Topbar");
+ const transparentWorkspace_i18n = await Translate("Transparent Workspace");
+ const frameStyle_i18n = await Translate("Frame Style");
+ const workspace_i18n = await Translate("Workspace");
+ const showInfoBar_i18n = await Translate("Show Info Bar");
+ const disabledForWeb = !isTauri ? "disabled" : "";
+ const appearancePage = `${appTheme_i18n}
${
- platform !== 'linux'
- ? `
+ platform !== "linux"
+ ? `
`
- : ''
- }
+ : ""
+ }
${fontFamily_i18n}
${fontSize_i18n}
@@ -118,254 +118,259 @@ const Appearance = async (): Promise => {
${transparentEffect_i18n}
${frameStyle_i18n}
${filePreview_i18n}
${
- platform === 'win32'
- ? `
+ platform === "win32"
+ ? `
`
- : ''
- }
+ : ""
+ }
${imageAsThumbnail_i18n}
${defaultFileLayout_i18n}
${workspace_i18n}
`;
- settingsMain.innerHTML = appearancePage;
- settingsMain.querySelector('[name="shadow-effect"]')?.addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- const shadowEffect = event.target.checked;
- const appearance = _appearance ?? {};
- appearance.shadowEffect = shadowEffect;
- enableShadowEffect(shadowEffect);
- Storage.set('appearance', appearance);
- });
- settingsMain.querySelectorAll('.number-ctrl').forEach((ctrl) => {
- const number = ctrl.querySelector('.number-ctrl-input');
- ctrl.querySelector('.number-ctrl-minus').addEventListener('click', () => {
- number.value = +number.value - 1 + '';
- const appearance = _appearance ?? {};
- appearance.fontSize = `${number.value}px`;
- document.body.style.fontSize = `${number.value}px`;
- document.documentElement.style.fontSize = `${number.value}px`;
- Storage.set('appearance', appearance);
- });
- ctrl.querySelector('.number-ctrl-plus').addEventListener('click', () => {
- number.value = +number.value + 1 + '';
- const appearance = _appearance ?? {};
- appearance.fontSize = `${number.value}px`;
- document.body.style.fontSize = `${number.value}px`;
- document.documentElement.style.fontSize = `${number.value}px`;
- Storage.set('appearance', appearance);
- });
- });
+ settingsMain.innerHTML = appearancePage;
+ settingsMain.querySelector('[name="shadow-effect"]')?.addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ const shadowEffect = event.target.checked;
+ const appearance = _appearance ?? {};
+ appearance.shadowEffect = shadowEffect;
+ enableShadowEffect(shadowEffect);
+ Storage.set("appearance", appearance);
+ });
+ settingsMain.querySelectorAll(".number-ctrl").forEach((ctrl) => {
+ const number = ctrl.querySelector(".number-ctrl-input");
+ ctrl.querySelector(".number-ctrl-minus").addEventListener("click", () => {
+ number.value = `${+number.value - 1}`;
+ const appearance = _appearance ?? {};
+ appearance.fontSize = `${number.value}px`;
+ document.body.style.fontSize = `${number.value}px`;
+ document.documentElement.style.fontSize = `${number.value}px`;
+ Storage.set("appearance", appearance);
+ });
+ ctrl.querySelector(".number-ctrl-plus").addEventListener("click", () => {
+ number.value = `${+number.value + 1}`;
+ const appearance = _appearance ?? {};
+ appearance.fontSize = `${number.value}px`;
+ document.body.style.fontSize = `${number.value}px`;
+ document.documentElement.style.fontSize = `${number.value}px`;
+ Storage.set("appearance", appearance);
+ });
+ });
- settingsMain.querySelector('.transparency-slider').addEventListener('input', (event: Event & { target: HTMLInputElement }) => {
- const value = parseInt(event.target.value);
- const appearance = _appearance ?? {};
- appearance.windowTransparency = `${value}%`;
- document.getElementById('transparency-label').innerHTML = String(value);
- if (appearance?.transparentSidebar ?? true)
- document.body.style.setProperty('--sidebar-transparency', appearance?.windowTransparency ?? '0.8');
- if (appearance?.transparentWorkspace ?? false)
- document.body.style.setProperty('--workspace-transparency', appearance?.windowTransparency ?? '0.8');
- if (appearance?.transparentTopbar ?? false) document.body.style.setProperty('--topbar-transparency', appearance?.windowTransparency ?? '0.8');
- Storage.set('appearance', appearance);
- });
- settingsMain.querySelector('[name="transparent-sidebar"]').addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- const value = event.target.checked;
- const appearance = _appearance ?? {};
- appearance.transparentSidebar = value;
- if (value) {
- document.body.style.setProperty('--sidebar-transparency', appearance?.windowTransparency ?? '0.8');
- } else {
- document.body.style.setProperty('--sidebar-transparency', '1');
- }
- Storage.set('appearance', appearance);
- });
- settingsMain.querySelector('[name="transparent-workspace"]').addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- const value = event.target.checked;
- const appearance = _appearance ?? {};
- appearance.transparentWorkspace = value;
- if (value) {
- document.body.style.setProperty('--workspace-transparency', appearance?.windowTransparency ?? '0.8');
- } else {
- document.body.style.setProperty('--workspace-transparency', '1');
- }
- Storage.set('appearance', appearance);
- });
- settingsMain.querySelector('[name="transparent-topbar"]').addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- const value = event.target.checked;
- const appearance = _appearance ?? {};
- appearance.transparentTopbar = value;
- if (value) {
- document.body.style.setProperty('--topbar-transparency', appearance?.windowTransparency ?? '0.8');
- } else {
- document.body.style.setProperty('--topbar-transparency', '1');
- }
- Storage.set('appearance', appearance);
- });
- settingsMain.querySelector('[name="transparent-effect"]').addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- const appearance = _appearance ?? {};
- appearance.transparentEffect = event.target.value;
- changeTransparentEffect(appearance.transparentEffect);
- Storage.set('appearance', appearance);
- });
- settingsMain.querySelector('[name="frame-style"]').addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- const value = event.target.value;
- const appearance = _appearance ?? {};
- appearance.frameStyle = value;
- setDecorations(value === 'os');
- if (value === 'os') {
- document.querySelector('.window-manager').parentNode.removeChild(document.querySelector('.window-manager'));
- } else {
- const windowManager = document.createElement('div');
- windowManager.classList.add('window-manager');
- windowManager.innerHTML = `
+ settingsMain.querySelector(".transparency-slider").addEventListener("input", (event: Event & { target: HTMLInputElement }) => {
+ const value = Number.parseInt(event.target.value);
+ const appearance = _appearance ?? {};
+ appearance.windowTransparency = `${value}%`;
+ document.getElementById("transparency-label").innerHTML = String(value);
+ if (appearance?.transparentSidebar ?? true)
+ document.body.style.setProperty("--sidebar-transparency", appearance?.windowTransparency ?? "0.8");
+ if (appearance?.transparentWorkspace ?? false)
+ document.body.style.setProperty("--workspace-transparency", appearance?.windowTransparency ?? "0.8");
+ if (appearance?.transparentTopbar ?? false) document.body.style.setProperty("--topbar-transparency", appearance?.windowTransparency ?? "0.8");
+ Storage.set("appearance", appearance);
+ });
+ settingsMain.querySelector('[name="transparent-sidebar"]').addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ const value = event.target.checked;
+ const appearance = _appearance ?? {};
+ appearance.transparentSidebar = value;
+ if (value) {
+ document.body.style.setProperty("--sidebar-transparency", appearance?.windowTransparency ?? "0.8");
+ } else {
+ document.body.style.setProperty("--sidebar-transparency", "1");
+ }
+ Storage.set("appearance", appearance);
+ });
+ settingsMain.querySelector('[name="transparent-workspace"]').addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ const value = event.target.checked;
+ const appearance = _appearance ?? {};
+ appearance.transparentWorkspace = value;
+ if (value) {
+ document.body.style.setProperty("--workspace-transparency", appearance?.windowTransparency ?? "0.8");
+ } else {
+ document.body.style.setProperty("--workspace-transparency", "1");
+ }
+ Storage.set("appearance", appearance);
+ });
+ settingsMain.querySelector('[name="transparent-topbar"]').addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ const value = event.target.checked;
+ const appearance = _appearance ?? {};
+ appearance.transparentTopbar = value;
+ if (value) {
+ document.body.style.setProperty("--topbar-transparency", appearance?.windowTransparency ?? "0.8");
+ } else {
+ document.body.style.setProperty("--topbar-transparency", "1");
+ }
+ Storage.set("appearance", appearance);
+ });
+ settingsMain.querySelector('[name="transparent-effect"]').addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ const appearance = _appearance ?? {};
+ appearance.transparentEffect = event.target.value;
+ changeTransparentEffect(appearance.transparentEffect);
+ Storage.set("appearance", appearance);
+ });
+ settingsMain.querySelector('[name="frame-style"]').addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ const value = event.target.value;
+ const appearance = _appearance ?? {};
+ appearance.frameStyle = value;
+ setDecorations(value === "os");
+ if (value === "os") {
+ document.querySelector(".window-manager").parentNode.removeChild(document.querySelector(".window-manager"));
+ } else {
+ const windowManager = document.createElement("div");
+ windowManager.classList.add("window-manager");
+ windowManager.innerHTML = `
`;
- document.querySelector('.tabs-manager').appendChild(windowManager);
- // Minimize the screen
- windowManager.querySelector('#minimize').addEventListener('click', minimize);
- // Maximize the screen
- windowManager.querySelector('#maximize').addEventListener('click', maximize);
- // Exit window
- windowManager.querySelector('#exit').addEventListener('click', close);
- }
- Storage.set('appearance', appearance);
- });
- settingsMain.querySelector('[name="fontSize"]')?.addEventListener('input', (event: Event & { target: HTMLInputElement }) => {
- const appearance = _appearance ?? {};
- appearance.fontSize = `${event.target.value}px`;
- document.body.style.fontSize = `${event.target.value}px`;
- document.documentElement.style.fontSize = `${parseInt(event.target.value)}px`;
- Storage.set('appearance', appearance);
- });
- settingsMain.querySelector('[name="theme"]')?.addEventListener('change', async (event: Event & { target: HTMLInputElement }) => {
- const themes = (await Storage.get('theme')) ?? {};
- themes['theme'] = event.target.value;
- Storage.set('theme', themes);
- updateTheme('*');
- });
- settingsMain.querySelector('[name="font"]')?.addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- const appearance = _appearance ?? {};
- appearance.fontFamily = event.target.value;
- document.body.style.fontFamily = appearance.fontFamily;
- Storage.set('appearance', appearance);
- });
- settingsMain.querySelector('[name="layout"]')?.addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- const appearance = _appearance ?? {};
- appearance.layout = event.target.value;
- Storage.set('appearance', appearance);
- reload();
- });
- settingsMain.querySelector(`[name="preview-video"]`)?.addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- const appearance = _appearance ?? {};
- appearance.videoAsThumbnail = event.target.checked;
- Storage.set('appearance', appearance);
- reload();
- });
- settingsMain.querySelector(`[name="preview-image-on-hover"]`)?.addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- const appearance = _appearance ?? {};
- appearance.previewImageOnHover = event.target.checked;
- Storage.set('appearance', appearance);
- reload();
- });
- settingsMain.querySelector(`[name="extract-exe-icon"]`)?.addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- const appearance = _appearance ?? {};
- appearance.extractExeIcon = event.target.checked;
- Storage.set('appearance', appearance);
- reload();
- });
- settingsMain.querySelector('[name="imageAsThumbnail"]')?.addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- const appearance = _appearance ?? {};
- appearance.imageAsThumbnail = event.target.value;
- Storage.set('appearance', appearance);
- reload();
- });
- settingsMain.querySelector('[name="show-info-bar"]').addEventListener('change', (event: Event & { target: HTMLInputElement }) => {
- const value = event.target.checked;
- const appearance = _appearance ?? {};
- appearance.showInfoBar = value;
- Storage.set('appearance', appearance);
- if (value) {
- Infobar();
- reload();
- } else {
- document.getElementById('infobar')?.parentNode?.removeChild?.(document.getElementById('infobar'));
- }
- });
+ document.querySelector(".tabs-manager").appendChild(windowManager);
+ // Minimize the screen
+ windowManager.querySelector("#minimize").addEventListener("click", minimize);
+ // Maximize the screen
+ windowManager.querySelector("#maximize").addEventListener("click", maximize);
+ // Exit window
+ windowManager.querySelector("#exit").addEventListener("click", close);
+ }
+ Storage.set("appearance", appearance);
+ });
+ settingsMain.querySelector('[name="fontSize"]')?.addEventListener("input", (event: Event & { target: HTMLInputElement }) => {
+ const appearance = _appearance ?? {};
+ appearance.fontSize = `${event.target.value}px`;
+ document.body.style.fontSize = `${event.target.value}px`;
+ document.documentElement.style.fontSize = `${Number.parseInt(event.target.value)}px`;
+ Storage.set("appearance", appearance);
+ });
+ settingsMain.querySelector('[name="theme"]')?.addEventListener("change", async (event: Event & { target: HTMLInputElement }) => {
+ const themes = (await Storage.get("theme")) ?? {};
+ themes.theme = event.target.value;
+ Storage.set("theme", themes);
+ updateTheme("*");
+ });
+ settingsMain.querySelector('[name="font"]')?.addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ const appearance = _appearance ?? {};
+ appearance.fontFamily = event.target.value;
+ document.body.style.fontFamily = appearance.fontFamily;
+ Storage.set("appearance", appearance);
+ });
+ settingsMain.querySelector('[name="layout"]')?.addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ const appearance = _appearance ?? {};
+ appearance.layout = event.target.value;
+ Storage.set("appearance", appearance);
+ reload();
+ });
+ settingsMain.querySelector(`[name="preview-video"]`)?.addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ const appearance = _appearance ?? {};
+ appearance.videoAsThumbnail = event.target.checked;
+ Storage.set("appearance", appearance);
+ reload();
+ });
+ settingsMain.querySelector(`[name="preview-image-on-hover"]`)?.addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ const appearance = _appearance ?? {};
+ appearance.previewImageOnHover = event.target.checked;
+ Storage.set("appearance", appearance);
+ reload();
+ });
+ settingsMain.querySelector(`[name="extract-exe-icon"]`)?.addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ const appearance = _appearance ?? {};
+ appearance.extractExeIcon = event.target.checked;
+ Storage.set("appearance", appearance);
+ reload();
+ });
+ settingsMain.querySelector('[name="imageAsThumbnail"]')?.addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ const appearance = _appearance ?? {};
+ appearance.imageAsThumbnail = event.target.value;
+ Storage.set("appearance", appearance);
+ reload();
+ });
+ settingsMain.querySelector('[name="show-info-bar"]').addEventListener("change", (event: Event & { target: HTMLInputElement }) => {
+ const value = event.target.checked;
+ const appearance = _appearance ?? {};
+ appearance.showInfoBar = value;
+ Storage.set("appearance", appearance);
+ if (value) {
+ Infobar();
+ reload();
+ } else {
+ document.getElementById("infobar")?.parentNode?.removeChild?.(document.getElementById("infobar"));
+ }
+ });
};
export default Appearance;
diff --git a/src/Components/Setting/Preference/preference.ts b/src/Components/Setting/Preference/preference.ts
index c6ad0ed1..e5b5859b 100644
--- a/src/Components/Setting/Preference/preference.ts
+++ b/src/Components/Setting/Preference/preference.ts
@@ -1,98 +1,98 @@
-import { reload } from '../../Layout/windowManager';
-import Translate from '../../I18n/i18n';
-import LocalesAPI from '../../../Service/locales';
-import Storage from '../../../Service/storage';
-import { MAIN_BOX_ELEMENT } from '../../../Util/constants';
+import LocalesAPI from "../../../Service/locales";
+import Storage from "../../../Service/storage";
+import { MAIN_BOX_ELEMENT } from "../../../Util/constants";
+import Translate from "../../I18n/i18n";
+import { reload } from "../../Layout/windowManager";
let localesData: LocalesAPI;
/**
* Create preference section
* @returns {Promise}
*/
const Preference = async (): Promise => {
- if (!localesData) {
- localesData = new LocalesAPI();
- localesData.build();
- }
- const _preference = await Storage.get('preference');
- let language = _preference?.language ?? navigator.language;
- if (Object.values(localesData.AVAILABLE_LOCALES).indexOf(language) === -1) language = 'en-US';
- const hideHiddenFiles = _preference?.hideHiddenFiles ?? true;
- const hideSystemFiles = _preference?.hideSystemFiles ?? true;
- const dirAlongsideFiles = _preference?.dirAlongsideFiles ?? false;
- const detectDriveChange = _preference?.detectDriveChange ?? false;
- const automaticallyChangePreviewFile = _preference?.automaticallyChangePreviewFile ?? true;
- const settingsMain = document.querySelector('.settings-main');
- const on_startup = _preference?.on_startup ?? 'new';
- const clickToOpenSidebar = _preference?.clickToOpenSidebar ?? 'single';
- const clickToOpenHome = _preference?.clickToOpenHome ?? 'double';
- const clickToOpenFile = _preference?.clickToOpenFile ?? 'double';
- const calculateSubFolderSize = _preference?.calculateSubFolderSize ?? false;
+ if (!localesData) {
+ localesData = new LocalesAPI();
+ localesData.build();
+ }
+ const _preference = await Storage.get("preference");
+ let language = _preference?.language ?? navigator.language;
+ if (Object.values(localesData.AVAILABLE_LOCALES).indexOf(language) === -1) language = "en-US";
+ const hideHiddenFiles = _preference?.hideHiddenFiles ?? true;
+ const hideSystemFiles = _preference?.hideSystemFiles ?? true;
+ const dirAlongsideFiles = _preference?.dirAlongsideFiles ?? false;
+ const detectDriveChange = _preference?.detectDriveChange ?? false;
+ const automaticallyChangePreviewFile = _preference?.automaticallyChangePreviewFile ?? true;
+ const settingsMain = document.querySelector(".settings-main");
+ const on_startup = _preference?.on_startup ?? "new";
+ const clickToOpenSidebar = _preference?.clickToOpenSidebar ?? "single";
+ const clickToOpenHome = _preference?.clickToOpenHome ?? "double";
+ const clickToOpenFile = _preference?.clickToOpenFile ?? "double";
+ const calculateSubFolderSize = _preference?.calculateSubFolderSize ?? false;
- const appLanguage_i18n = await Translate('App Language');
- const fileAndFolders_i18n = await Translate('Files and Folders');
- const hideHiddenFiles_i18n = await Translate('Hide hidden files');
- const hideSystemFiles_i18n = await Translate('Hide system files');
- const dirAlongsideFiles_i18n = await Translate('List and sort directories alongside files');
- const on_startup_i18n = await Translate('On startup');
- const newTab_i18n = await Translate('New tab');
- const continuePreviousSession_i18n = await Translate('Continue previous session');
- const detectDriveChange_i18n = await Translate('Detect Drive Change');
- const automaticallyChangePreviewFile_i18n = await Translate('Automatically change preview file with selected file');
- const clickToOpen_i18n = await Translate('Single/Double Click to open a file');
- const clickToOpenSidebar_i18n = await Translate('Double click to open items under sidebar section');
- const clickToOpenHome_i18n = await Translate('Double click to open items under home section');
- const clickToOpenFile_i18n = await Translate('Double click to open files/folders');
- const calculateSubFolderSize_i18n = await Translate('Calculate sub folder size');
- const preferencePage = `${appLanguage_i18n}
+ const appLanguage_i18n = await Translate("App Language");
+ const fileAndFolders_i18n = await Translate("Files and Folders");
+ const hideHiddenFiles_i18n = await Translate("Hide hidden files");
+ const hideSystemFiles_i18n = await Translate("Hide system files");
+ const dirAlongsideFiles_i18n = await Translate("List and sort directories alongside files");
+ const on_startup_i18n = await Translate("On startup");
+ const newTab_i18n = await Translate("New tab");
+ const continuePreviousSession_i18n = await Translate("Continue previous session");
+ const detectDriveChange_i18n = await Translate("Detect Drive Change");
+ const automaticallyChangePreviewFile_i18n = await Translate("Automatically change preview file with selected file");
+ const clickToOpen_i18n = await Translate("Single/Double Click to open a file");
+ const clickToOpenSidebar_i18n = await Translate("Double click to open items under sidebar section");
+ const clickToOpenHome_i18n = await Translate("Double click to open items under home section");
+ const clickToOpenFile_i18n = await Translate("Double click to open files/folders");
+ const calculateSubFolderSize_i18n = await Translate("Calculate sub folder size");
+ const preferencePage = `${appLanguage_i18n}
${fileAndFolders_i18n}
@@ -100,100 +100,100 @@ const Preference = async (): Promise => {
${clickToOpen_i18n}
${on_startup_i18n}
`;
- settingsMain.innerHTML = preferencePage;
- settingsMain.querySelector(`[name="language"]`).addEventListener('change', async (event: Event & { target: HTMLInputElement }) => {
- const preference = (await Storage.get('preference')) ?? {};
- preference.language = event.target.value;
- Storage.set('preference', preference);
- reload();
+ settingsMain.innerHTML = preferencePage;
+ settingsMain.querySelector(`[name="language"]`).addEventListener("change", async (event: Event & { target: HTMLInputElement }) => {
+ const preference = (await Storage.get("preference")) ?? {};
+ preference.language = event.target.value;
+ Storage.set("preference", preference);
+ reload();
- document.querySelector('#sidebar-setting-btn-text').innerHTML = await Translate('Settings');
- Preference();
- });
- settingsMain.querySelector(`[name="hide-hidden-files"]`).addEventListener('change', async (event: Event & { target: HTMLInputElement }) => {
- const preference = (await Storage.get('preference')) ?? {};
- preference.hideHiddenFiles = event.target.checked;
- Storage.set('preference', preference);
- MAIN_BOX_ELEMENT().dataset.hideHiddenFiles = String(event.target.checked);
- });
- settingsMain.querySelector(`[name="hide-system-files"]`).addEventListener('change', async (event: Event & { target: HTMLInputElement }) => {
- const preference = (await Storage.get('preference')) ?? {};
- preference.hideSystemFiles = event.target.checked;
- Storage.set('preference', preference);
- reload();
- });
- settingsMain.querySelector(`[name="dirAlongsideFiles"]`).addEventListener('change', async (event: Event & { target: HTMLInputElement }) => {
- const preference = (await Storage.get('preference')) ?? {};
- preference.dirAlongsideFiles = event.target.checked;
- Storage.set('preference', preference);
- reload();
- });
- settingsMain.querySelector(`[name="detect-drive-change"]`).addEventListener('change', async (event: Event & { target: HTMLInputElement }) => {
- const preference = (await Storage.get('preference')) ?? {};
- preference.detectDriveChange = event.target.checked;
- Storage.set('preference', preference);
- });
- settingsMain
- .querySelector(`[name="automatically-change-preview-file"]`)
- .addEventListener('change', async (event: Event & { target: HTMLInputElement }) => {
- const preference = (await Storage.get('preference')) ?? {};
- preference.automaticallyChangePreviewFile = event.target.checked;
- Storage.set('preference', preference);
- });
- settingsMain
- .querySelector(`[name="calculate-subfolder-size"]`)
- .addEventListener('change', async (event: Event & { target: HTMLInputElement }) => {
- const preference = (await Storage.get('preference')) ?? {};
- console.log(event.target);
- preference.calculateSubFolderSize = event.target.checked;
- Storage.set('preference', preference);
- reload();
- });
- settingsMain.querySelector(`[name="click-to-open-sidebar"]`).addEventListener('change', async (event: Event & { target: HTMLInputElement }) => {
- const preference = (await Storage.get('preference')) ?? {};
- preference.clickToOpenSidebar = event.target.checked ? 'double' : 'single';
- Storage.set('preference', preference);
- });
- settingsMain.querySelector(`[name="click-to-open-home"]`).addEventListener('change', async (event: Event & { target: HTMLInputElement }) => {
- const preference = (await Storage.get('preference')) ?? {};
- preference.clickToOpenHome = event.target.checked ? 'double' : 'single';
- Storage.set('preference', preference);
- });
- settingsMain.querySelector(`[name="click-to-open-file"]`).addEventListener('change', async (event: Event & { target: HTMLInputElement }) => {
- const preference = (await Storage.get('preference')) ?? {};
- preference.clickToOpenFile = event.target.checked ? 'double' : 'single';
- Storage.set('preference', preference);
- });
- settingsMain.querySelector(`[name="on_startup"]`).addEventListener('change', async (event: Event & { target: HTMLInputElement }) => {
- const preference = (await Storage.get('preference')) ?? {};
- preference.on_startup = event.target.value;
- Storage.set('preference', preference);
- reload();
- });
+ document.querySelector("#sidebar-setting-btn-text").innerHTML = await Translate("Settings");
+ Preference();
+ });
+ settingsMain.querySelector(`[name="hide-hidden-files"]`).addEventListener("change", async (event: Event & { target: HTMLInputElement }) => {
+ const preference = (await Storage.get("preference")) ?? {};
+ preference.hideHiddenFiles = event.target.checked;
+ Storage.set("preference", preference);
+ MAIN_BOX_ELEMENT().dataset.hideHiddenFiles = String(event.target.checked);
+ });
+ settingsMain.querySelector(`[name="hide-system-files"]`).addEventListener("change", async (event: Event & { target: HTMLInputElement }) => {
+ const preference = (await Storage.get("preference")) ?? {};
+ preference.hideSystemFiles = event.target.checked;
+ Storage.set("preference", preference);
+ reload();
+ });
+ settingsMain.querySelector(`[name="dirAlongsideFiles"]`).addEventListener("change", async (event: Event & { target: HTMLInputElement }) => {
+ const preference = (await Storage.get("preference")) ?? {};
+ preference.dirAlongsideFiles = event.target.checked;
+ Storage.set("preference", preference);
+ reload();
+ });
+ settingsMain.querySelector(`[name="detect-drive-change"]`).addEventListener("change", async (event: Event & { target: HTMLInputElement }) => {
+ const preference = (await Storage.get("preference")) ?? {};
+ preference.detectDriveChange = event.target.checked;
+ Storage.set("preference", preference);
+ });
+ settingsMain
+ .querySelector(`[name="automatically-change-preview-file"]`)
+ .addEventListener("change", async (event: Event & { target: HTMLInputElement }) => {
+ const preference = (await Storage.get("preference")) ?? {};
+ preference.automaticallyChangePreviewFile = event.target.checked;
+ Storage.set("preference", preference);
+ });
+ settingsMain
+ .querySelector(`[name="calculate-subfolder-size"]`)
+ .addEventListener("change", async (event: Event & { target: HTMLInputElement }) => {
+ const preference = (await Storage.get("preference")) ?? {};
+ console.log(event.target);
+ preference.calculateSubFolderSize = event.target.checked;
+ Storage.set("preference", preference);
+ reload();
+ });
+ settingsMain.querySelector(`[name="click-to-open-sidebar"]`).addEventListener("change", async (event: Event & { target: HTMLInputElement }) => {
+ const preference = (await Storage.get("preference")) ?? {};
+ preference.clickToOpenSidebar = event.target.checked ? "double" : "single";
+ Storage.set("preference", preference);
+ });
+ settingsMain.querySelector(`[name="click-to-open-home"]`).addEventListener("change", async (event: Event & { target: HTMLInputElement }) => {
+ const preference = (await Storage.get("preference")) ?? {};
+ preference.clickToOpenHome = event.target.checked ? "double" : "single";
+ Storage.set("preference", preference);
+ });
+ settingsMain.querySelector(`[name="click-to-open-file"]`).addEventListener("change", async (event: Event & { target: HTMLInputElement }) => {
+ const preference = (await Storage.get("preference")) ?? {};
+ preference.clickToOpenFile = event.target.checked ? "double" : "single";
+ Storage.set("preference", preference);
+ });
+ settingsMain.querySelector(`[name="on_startup"]`).addEventListener("change", async (event: Event & { target: HTMLInputElement }) => {
+ const preference = (await Storage.get("preference")) ?? {};
+ preference.on_startup = event.target.value;
+ Storage.set("preference", preference);
+ reload();
+ });
};
export default Preference;
diff --git a/src/Components/Setting/setting.ts b/src/Components/Setting/setting.ts
index 133dd183..16007d21 100644
--- a/src/Components/Setting/setting.ts
+++ b/src/Components/Setting/setting.ts
@@ -1,81 +1,81 @@
-import Translate from '../I18n/i18n';
-import fileThumbnail from '../Thumbnail/thumbnail';
-import Storage from '../../Service/storage';
+import Storage from "../../Service/storage";
+import Translate from "../I18n/i18n";
+import fileThumbnail from "../Thumbnail/thumbnail";
-import About from './About/about';
-import Appearance from './Appearance/Appearance';
-import Preference from './Preference/preference';
+import About from "./About/about";
+import Appearance from "./Appearance/Appearance";
+import Preference from "./Preference/preference";
/**
* Setting initializer function
* @returns {Promise}
*/
const Setting = async (): Promise => {
- const settingsItem = ['Appearance', 'Preference', 'About'];
- const defaultTab = settingsItem[0];
+ const settingsItem = ["Appearance", "Preference", "About"];
+ const defaultTab = settingsItem[0];
- const setActiveTab = (tab: string) => {
- settingsItem.forEach((tabs: string) => {
- if (tabs === tab) {
- document.getElementById(tab.toLowerCase()).parentElement.classList.add('active');
- } else document.getElementById(tabs.toLowerCase()).parentElement.classList.remove('active');
- });
- Array.from(document.getElementsByClassName('settings-sidebar-item') as HTMLCollectionOf).forEach((element) => {
- if (!element.classList.contains('active')) element.style.background = '';
- });
- };
+ const setActiveTab = (tab: string) => {
+ settingsItem.forEach((tabs: string) => {
+ if (tabs === tab) {
+ document.getElementById(tab.toLowerCase()).parentElement.classList.add("active");
+ } else document.getElementById(tabs.toLowerCase()).parentElement.classList.remove("active");
+ });
+ Array.from(document.getElementsByClassName("settings-sidebar-item") as HTMLCollectionOf).forEach((element) => {
+ if (!element.classList.contains("active")) element.style.background = "";
+ });
+ };
- document.querySelector('#sidebar-setting-btn').addEventListener('click', async () => {
- document.querySelector('.settings').style.animation = 'open-setting 1s forwards';
- document.querySelector('.settings-sidebar-heading').innerHTML = await Translate('Settings');
- const settingsSidebarItems = document.querySelector('.settings-sidebar-items');
- settingsSidebarItems.innerHTML = '';
+ document.querySelector("#sidebar-setting-btn").addEventListener("click", async () => {
+ document.querySelector(".settings").style.animation = "open-setting 1s forwards";
+ document.querySelector(".settings-sidebar-heading").innerHTML = await Translate("Settings");
+ const settingsSidebarItems = document.querySelector(".settings-sidebar-items");
+ settingsSidebarItems.innerHTML = "";
- for (const item of settingsItem) {
- const settingsItem = document.createElement('span');
- settingsItem.classList.add('settings-sidebar-item', 'sidebar-hover-effect');
- settingsItem.innerHTML = `})
${await Translate(
- item
- )}`;
- settingsSidebarItems.appendChild(settingsItem);
+ for (const item of settingsItem) {
+ const settingsItem = document.createElement("span");
+ settingsItem.classList.add("settings-sidebar-item", "sidebar-hover-effect");
+ settingsItem.innerHTML = `
${await Translate(
+ item,
+ )}`;
+ settingsSidebarItems.appendChild(settingsItem);
- settingsItem.addEventListener('click', async () => {
- setActiveTab(item);
- switch (item) {
- case 'Appearance':
- Appearance();
- break;
- case 'Preference':
- Preference();
- break;
- case 'About':
- About();
- break;
- }
- const appearance = (await Storage.get('appearance')) ?? {};
- appearance['activeSettingsTab'] = item;
- Storage.set('appearance', appearance);
- });
- }
- const appearance = (await Storage.get('appearance')) ?? {};
- const activeSettingsTab = appearance['activeSettingsTab'] ?? defaultTab;
- setActiveTab(activeSettingsTab);
- switch (activeSettingsTab) {
- case 'Appearance':
- Appearance();
- break;
- case 'Preference':
- Preference();
- break;
- case 'About':
- About();
- break;
- }
+ settingsItem.addEventListener("click", async () => {
+ setActiveTab(item);
+ switch (item) {
+ case "Appearance":
+ Appearance();
+ break;
+ case "Preference":
+ Preference();
+ break;
+ case "About":
+ About();
+ break;
+ }
+ const appearance = (await Storage.get("appearance")) ?? {};
+ appearance.activeSettingsTab = item;
+ Storage.set("appearance", appearance);
+ });
+ }
+ const appearance = (await Storage.get("appearance")) ?? {};
+ const activeSettingsTab = appearance.activeSettingsTab ?? defaultTab;
+ setActiveTab(activeSettingsTab);
+ switch (activeSettingsTab) {
+ case "Appearance":
+ Appearance();
+ break;
+ case "Preference":
+ Preference();
+ break;
+ case "About":
+ About();
+ break;
+ }
- document.querySelector('.exit-setting-btn').addEventListener('click', () => {
- document.querySelector('.settings').style.animation = 'close-setting 1s forwards';
- });
- });
+ document.querySelector(".exit-setting-btn").addEventListener("click", () => {
+ document.querySelector(".settings").style.animation = "close-setting 1s forwards";
+ });
+ });
};
export default Setting;
diff --git a/src/Components/SettingsView/index.tsx b/src/Components/SettingsView/index.tsx
index 721954e8..82e7cefd 100644
--- a/src/Components/SettingsView/index.tsx
+++ b/src/Components/SettingsView/index.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
+import React from "react";
const SettingsView = () => (
-
-
-
- ←
- Settings
-
-
+
+
+
+ ←
+ Settings
+
+
+
+
-
-
);
export default SettingsView;
diff --git a/src/Components/Shortcut/shortcut.ts b/src/Components/Shortcut/shortcut.ts
index fda87b61..d917d43b 100644
--- a/src/Components/Shortcut/shortcut.ts
+++ b/src/Components/Shortcut/shortcut.ts
@@ -1,32 +1,32 @@
-import { createNewTab, goBack, goForward } from '../Layout/tab';
-import focusingPath from '../Functions/focusingPath';
-import { OpenDir } from '../Open/open';
-import getDirname from '../Functions/path/dirname';
-import copyLocation from '../Files/File Operation/location';
-import { ChangeSelectedEvent, getSelected, Select, unselectAllSelected } from '../Files/File Operation/select';
-import Pin from '../Files/File Operation/pin';
-import New from '../Functions/new';
-import { createNewWindow } from '../../Service/window';
-import Storage from '../../Service/storage';
-import windowName from '../../Service/window';
-import FileAPI from '../../Service/files';
-import DirectoryAPI from '../../Service/directory';
-import reveal from '../../Service/reveal';
-import NormalizeSlash from '../Functions/path/normalizeSlash';
-import { reload } from '../Layout/windowManager';
-import Cut from '../Files/File Operation/cut';
-import Copy from '../Files/File Operation/copy';
-import Paste from '../Files/File Operation/paste';
-import toggleHiddenFiles from '../Functions/toggleHiddenFiles';
-import Rename from '../Files/File Operation/rename';
-import Undo from '../Files/File Operation/undo';
-import Redo from '../Files/File Operation/redo';
-import { Trash, PermanentDelete, Purge } from '../Files/File Operation/trash';
-import Properties from '../Properties/properties';
-import Preview, { closePreviewFile } from '../Files/File Preview/preview';
-import { ensureElementInViewPort } from '../Functions/viewport';
-import OperationAPI from '../../Service/operation';
-import { resizeSidebar } from '../Layout/resizer';
+import DirectoryAPI from "../../Service/directory";
+import FileAPI from "../../Service/files";
+import OperationAPI from "../../Service/operation";
+import reveal from "../../Service/reveal";
+import Storage from "../../Service/storage";
+import { createNewWindow } from "../../Service/window";
+import windowName from "../../Service/window";
+import Copy from "../Files/File Operation/copy";
+import Cut from "../Files/File Operation/cut";
+import copyLocation from "../Files/File Operation/location";
+import Paste from "../Files/File Operation/paste";
+import Pin from "../Files/File Operation/pin";
+import Redo from "../Files/File Operation/redo";
+import Rename from "../Files/File Operation/rename";
+import { ChangeSelectedEvent, Select, getSelected, unselectAllSelected } from "../Files/File Operation/select";
+import { PermanentDelete, Purge, Trash } from "../Files/File Operation/trash";
+import Undo from "../Files/File Operation/undo";
+import Preview, { closePreviewFile } from "../Files/File Preview/preview";
+import focusingPath from "../Functions/focusingPath";
+import New from "../Functions/new";
+import getDirname from "../Functions/path/dirname";
+import NormalizeSlash from "../Functions/path/normalizeSlash";
+import toggleHiddenFiles from "../Functions/toggleHiddenFiles";
+import { ensureElementInViewPort } from "../Functions/viewport";
+import { resizeSidebar } from "../Layout/resizer";
+import { createNewTab, goBack, goForward } from "../Layout/tab";
+import { reload } from "../Layout/windowManager";
+import { OpenDir } from "../Open/open";
+import Properties from "../Properties/properties";
let selectedAll = true;
let pauseEnterListener = false;
/**
@@ -39,11 +39,11 @@ const getSelectedAllStatus = (): boolean => selectedAll;
* @returns {void}
*/
const changeSelectedAllStatus = (): void => {
- selectedAll = false;
+ selectedAll = false;
};
const pauseEnter = (): void => {
- pauseEnterListener = true;
+ pauseEnterListener = true;
};
/**
@@ -51,346 +51,346 @@ const pauseEnter = (): void => {
* @returns {void}
*/
const Shortcut = (): void => {
- const searchElement = document.querySelector('.search-bar');
- let searchingState = false;
- let searchingFileName = '';
- let searchingFiles: HTMLElement[] | null = null;
- let _searchListener: ReturnType | null = null;
+ const searchElement = document.querySelector(".search-bar");
+ let searchingState = false;
+ let searchingFileName = "";
+ let searchingFiles: HTMLElement[] | null = null;
+ let _searchListener: ReturnType | null = null;
- const KeyUpShortcutsHandler = async (e: KeyboardEvent) => {
- // Don't react if cursor is over input field
- if (document.activeElement.tagName === 'INPUT') return;
+ const KeyUpShortcutsHandler = async (e: KeyboardEvent) => {
+ // Don't react if cursor is over input field
+ if (document.activeElement.tagName === "INPUT") return;
- const isAlphanumeric = ['Key', 'Digit'].some((a) => e.code.startsWith(a));
- // Fast search for files
- if (!e.ctrlKey && !e.shiftKey && !e.altKey && isAlphanumeric) {
- const resetTimer = () => {
- clearTimeout(_searchListener);
- _searchListener = setTimeout(() => (searchingState = false), 400);
- };
+ const isAlphanumeric = ["Key", "Digit"].some((a) => e.code.startsWith(a));
+ // Fast search for files
+ if (!e.ctrlKey && !e.shiftKey && !e.altKey && isAlphanumeric) {
+ const resetTimer = () => {
+ clearTimeout(_searchListener);
+ _searchListener = setTimeout(() => (searchingState = false), 400);
+ };
- const isMatchFile = (file: HTMLElement) => {
- return file
- .querySelector('#file-filename')
- ?.textContent.toLowerCase()
- .normalize('NFD')
- .replace(/[\u0300-\u036f]/gu, '')
- .startsWith(searchingFileName);
- };
+ const isMatchFile = (file: HTMLElement) => {
+ return file
+ .querySelector("#file-filename")
+ ?.textContent.toLowerCase()
+ .normalize("NFD")
+ .replace(/\p{Diacritic}/gu, "")
+ .startsWith(searchingFileName);
+ };
- const search = (files: HTMLElement[], isStateSwitcher = false) => {
- if (isStateSwitcher) {
- searchingState = true;
- searchingFileName = '';
- }
- searchingFileName += e.key.toLowerCase();
- searchElement.placeholder = '⚡ ' + searchingFileName;
- searchingFiles = null;
- resetTimer();
- unselectAllSelected();
- const file = files.find((file) => isMatchFile(file));
- if (!file) return;
- Select(file, false, false);
- ensureElementInViewPort(file);
- };
+ const search = (files: HTMLElement[], isStateSwitcher = false) => {
+ if (isStateSwitcher) {
+ searchingState = true;
+ searchingFileName = "";
+ }
+ searchingFileName += e.key.toLowerCase();
+ searchElement.placeholder = `⚡ ${searchingFileName}`;
+ searchingFiles = null;
+ resetTimer();
+ unselectAllSelected();
+ const file = files.find((file) => isMatchFile(file));
+ if (!file) return;
+ Select(file, false, false);
+ ensureElementInViewPort(file);
+ };
- const navigate = (files: HTMLElement[]) => {
- searchingFiles ||= files.filter((file) => isMatchFile(file));
- const fileIndex = searchingFiles.findIndex((file) => {
- return file.classList.contains('selected');
- });
- unselectAllSelected();
- const fileNext = searchingFiles[fileIndex + 1] || searchingFiles[0];
- if (!fileNext) return;
- Select(fileNext, false, false);
- ensureElementInViewPort(fileNext);
- };
+ const navigate = (files: HTMLElement[]) => {
+ searchingFiles ||= files.filter((file) => isMatchFile(file));
+ const fileIndex = searchingFiles.findIndex((file) => {
+ return file.classList.contains("selected");
+ });
+ unselectAllSelected();
+ const fileNext = searchingFiles[fileIndex + 1] || searchingFiles[0];
+ if (!fileNext) return;
+ Select(fileNext, false, false);
+ ensureElementInViewPort(fileNext);
+ };
- const files = [...document.querySelectorAll('.file')];
- if (searchingState) search(files);
- else if (e.key.toLowerCase() === searchingFileName.at(-1)) navigate(files);
- else search(files, true);
- return;
- }
+ const files = [...document.querySelectorAll(".file")];
+ if (searchingState) search(files);
+ else if (e.key.toLowerCase() === searchingFileName.at(-1)) navigate(files);
+ else search(files, true);
+ return;
+ }
- searchingState = false;
- searchingFileName = '';
- searchingFiles = null;
- clearTimeout(_searchListener);
- searchElement.placeholder = '🔎 Search';
+ searchingState = false;
+ searchingFileName = "";
+ searchingFiles = null;
+ clearTimeout(_searchListener);
+ searchElement.placeholder = "🔎 Search";
- const selectedFile = getSelected()?.[0];
- const selectedFilePath = decodeURI(selectedFile?.dataset?.path);
- const isDir = selectedFile?.dataset.isdir === 'true';
- const _focusingPath = await focusingPath();
+ const selectedFile = getSelected()?.[0];
+ const selectedFilePath = decodeURI(selectedFile?.dataset?.path);
+ const isDir = selectedFile?.dataset.isdir === "true";
+ const _focusingPath = await focusingPath();
- // Open file shorcut (Enter)
- if (e.key === 'Enter') {
- for (const selected of getSelected()) {
- const targetPath = decodeURI(selected.dataset.path) === 'undefined' ? _focusingPath : decodeURI(selected.dataset.path);
- if ((await new DirectoryAPI(targetPath).exists()) && !pauseEnterListener) {
- // Open file in vscode (Shift + Enter)
- if (e.shiftKey) {
- reveal(targetPath, 'vscode');
- } else {
- if (isDir) {
- OpenDir(targetPath);
- } else {
- new FileAPI(targetPath).openFile();
- }
- }
- } else pauseEnterListener = false;
- }
- }
- // Collapse sidebar (Ctrl + B)
- if (e.ctrlKey && e.key === 'b') {
- resizeSidebar();
- }
- // Duplicate file (Ctrl + D)
- if (e.ctrlKey && e.key === 'd') {
- new OperationAPI(selectedFilePath).duplicate();
- }
- // New tab shortcut (Ctrl + T)
- else if (e.key === 't' && e.ctrlKey) {
- createNewTab();
- }
- // New window shortcut (Ctrl + N)
- else if (e.key === 'n' && e.ctrlKey) {
- createNewWindow();
- }
- // New file shortcut (Alt + N)
- else if (e.key === 'n' && e.altKey && !e.shiftKey) {
- New('file');
- }
- // New folder shortcut (Shift + N)
- else if (e.key === 'N' && !e.altKey && e.shiftKey) {
- New('folder');
- }
+ // Open file shorcut (Enter)
+ if (e.key === "Enter") {
+ for (const selected of getSelected()) {
+ const targetPath = decodeURI(selected.dataset.path) === "undefined" ? _focusingPath : decodeURI(selected.dataset.path);
+ if ((await new DirectoryAPI(targetPath).exists()) && !pauseEnterListener) {
+ // Open file in vscode (Shift + Enter)
+ if (e.shiftKey) {
+ reveal(targetPath, "vscode");
+ } else {
+ if (isDir) {
+ OpenDir(targetPath);
+ } else {
+ new FileAPI(targetPath).openFile();
+ }
+ }
+ } else pauseEnterListener = false;
+ }
+ }
+ // Collapse sidebar (Ctrl + B)
+ if (e.ctrlKey && e.key === "b") {
+ resizeSidebar();
+ }
+ // Duplicate file (Ctrl + D)
+ if (e.ctrlKey && e.key === "d") {
+ new OperationAPI(selectedFilePath).duplicate();
+ }
+ // New tab shortcut (Ctrl + T)
+ else if (e.key === "t" && e.ctrlKey) {
+ createNewTab();
+ }
+ // New window shortcut (Ctrl + N)
+ else if (e.key === "n" && e.ctrlKey) {
+ createNewWindow();
+ }
+ // New file shortcut (Alt + N)
+ else if (e.key === "n" && e.altKey && !e.shiftKey) {
+ New("file");
+ }
+ // New folder shortcut (Shift + N)
+ else if (e.key === "N" && !e.altKey && e.shiftKey) {
+ New("folder");
+ }
- // Open in terminal shortcut (Alt + T)
- else if (e.altKey && e.key === 't') {
- const _to_reveal = NormalizeSlash(selectedFilePath && selectedFilePath !== 'undefined' ? selectedFilePath : _focusingPath);
- if (_to_reveal.startsWith('xplorer://')) return;
- reveal(_to_reveal, 'terminal');
- }
- // Pin to sidebar shortcut (Alt+P)
- else if (e.altKey && e.key === 'p') {
- let filePaths = [];
- for (const element of getSelected()) {
- filePaths.push(decodeURI(element.dataset.path));
- }
- if (!filePaths.length) filePaths = [_focusingPath];
- Pin(filePaths);
- }
+ // Open in terminal shortcut (Alt + T)
+ else if (e.altKey && e.key === "t") {
+ const _to_reveal = NormalizeSlash(selectedFilePath && selectedFilePath !== "undefined" ? selectedFilePath : _focusingPath);
+ if (_to_reveal.startsWith("xplorer://")) return;
+ reveal(_to_reveal, "terminal");
+ }
+ // Pin to sidebar shortcut (Alt+P)
+ else if (e.altKey && e.key === "p") {
+ let filePaths = [];
+ for (const element of getSelected()) {
+ filePaths.push(decodeURI(element.dataset.path));
+ }
+ if (!filePaths.length) filePaths = [_focusingPath];
+ Pin(filePaths);
+ }
- // Copy file shortcut (Ctrl + C)
- else if (e.ctrlKey && e.key === 'c') {
- const filePaths = [];
- for (const element of getSelected()) {
- filePaths.push(decodeURI(element.dataset.path));
- }
- Copy(filePaths);
- }
+ // Copy file shortcut (Ctrl + C)
+ else if (e.ctrlKey && e.key === "c") {
+ const filePaths = [];
+ for (const element of getSelected()) {
+ filePaths.push(decodeURI(element.dataset.path));
+ }
+ Copy(filePaths);
+ }
- // Toggle hidden files shortcut (Ctrl+H)
- else if (e.ctrlKey && e.key === 'h') {
- toggleHiddenFiles();
- }
- // Open file in preview shortcut (Ctrl+O)
- else if (e.ctrlKey && e.key === 'o') {
- if (document.querySelectorAll('.preview').length > 0) {
- closePreviewFile();
- } else Preview(selectedFilePath);
- }
+ // Toggle hidden files shortcut (Ctrl+H)
+ else if (e.ctrlKey && e.key === "h") {
+ toggleHiddenFiles();
+ }
+ // Open file in preview shortcut (Ctrl+O)
+ else if (e.ctrlKey && e.key === "o") {
+ if (document.querySelectorAll(".preview").length > 0) {
+ closePreviewFile();
+ } else Preview(selectedFilePath);
+ }
- // Exit tab shortcut (Ctrl + W)
- else if (e.ctrlKey && e.key === 'w') {
- const tabs = await Storage.get(`tabs-${windowName}`);
+ // Exit tab shortcut (Ctrl + W)
+ else if (e.ctrlKey && e.key === "w") {
+ const tabs = await Storage.get(`tabs-${windowName}`);
- if (document.querySelectorAll('.tab').length === 1) {
- close();
- } else {
- const tab = document.getElementById(`tab${tabs.focus}`);
- tab.parentElement.removeChild(tab);
- tabs.focusHistory = tabs.focusHistory.filter((tabIndex: number) => String(tabIndex) !== tabs.focus);
- delete tabs.tabs[tabs.focus];
- tabs.focus = String(tabs.focusHistory[tabs.focusHistory.length - 1]);
- Storage.set(`tabs-${windowName}`, tabs);
- OpenDir(tabs.tabs[tabs.focus].position);
+ if (document.querySelectorAll(".tab").length === 1) {
+ close();
+ } else {
+ const tab = document.getElementById(`tab${tabs.focus}`);
+ tab.parentElement.removeChild(tab);
+ tabs.focusHistory = tabs.focusHistory.filter((tabIndex: number) => String(tabIndex) !== tabs.focus);
+ delete tabs.tabs[tabs.focus];
+ tabs.focus = String(tabs.focusHistory[tabs.focusHistory.length - 1]);
+ Storage.set(`tabs-${windowName}`, tabs);
+ OpenDir(tabs.tabs[tabs.focus].position);
- const tabsManager = document.querySelector('.tabs-manager');
- if (tabsManager.scrollWidth > tabsManager.clientWidth) tabsManager.removeAttribute('data-tauri-drag-region');
- else tabsManager.setAttribute('data-tauri-drag-region', '');
- }
- }
- // Copy file shortcut (Ctrl + V)
- else if (e.ctrlKey && e.key === 'v') {
- Paste(_focusingPath);
- }
- // Copy file shortcut (Ctrl + X)
- else if (e.ctrlKey && e.key === 'x') {
- const filePaths = [];
- for (const element of getSelected()) {
- filePaths.push(decodeURI(element.dataset.path));
- }
- Cut(filePaths);
- }
- // Undo file action (Ctrl+Z)
- else if (e.ctrlKey && e.key === 'z') {
- Undo();
- }
- // Redo file action (Ctrl+Shift+Z OR Ctrl+Y)
- else if ((e.ctrlKey && e.shiftKey && e.key === 'Z') || (e.ctrlKey && e.key === 'y')) {
- Redo();
- }
- // Previous tab shortcut (Alt+Arrow Left)
- else if (e.altKey && e.key === 'ArrowLeft') {
- goBack();
- }
+ const tabsManager = document.querySelector(".tabs-manager");
+ if (tabsManager.scrollWidth > tabsManager.clientWidth) tabsManager.removeAttribute("data-tauri-drag-region");
+ else tabsManager.setAttribute("data-tauri-drag-region", "");
+ }
+ }
+ // Copy file shortcut (Ctrl + V)
+ else if (e.ctrlKey && e.key === "v") {
+ Paste(_focusingPath);
+ }
+ // Copy file shortcut (Ctrl + X)
+ else if (e.ctrlKey && e.key === "x") {
+ const filePaths = [];
+ for (const element of getSelected()) {
+ filePaths.push(decodeURI(element.dataset.path));
+ }
+ Cut(filePaths);
+ }
+ // Undo file action (Ctrl+Z)
+ else if (e.ctrlKey && e.key === "z") {
+ Undo();
+ }
+ // Redo file action (Ctrl+Shift+Z OR Ctrl+Y)
+ else if ((e.ctrlKey && e.shiftKey && e.key === "Z") || (e.ctrlKey && e.key === "y")) {
+ Redo();
+ }
+ // Previous tab shortcut (Alt+Arrow Left)
+ else if (e.altKey && e.key === "ArrowLeft") {
+ goBack();
+ }
- // Next tab shortcut (Alt+Arrow Right)
- else if (e.altKey && e.key === 'ArrowRight') {
- goForward();
- }
+ // Next tab shortcut (Alt+Arrow Right)
+ else if (e.altKey && e.key === "ArrowRight") {
+ goForward();
+ }
- // Go to parent directory (Alt + Arrow Up)
- else if (e.altKey && e.key === 'ArrowUp') {
- const _dirPath = getDirname(_focusingPath);
- if (!_focusingPath.startsWith('xplorer://') && _dirPath !== '.') OpenDir(_dirPath);
- }
+ // Go to parent directory (Alt + Arrow Up)
+ else if (e.altKey && e.key === "ArrowUp") {
+ const _dirPath = getDirname(_focusingPath);
+ if (!_focusingPath.startsWith("xplorer://") && _dirPath !== ".") OpenDir(_dirPath);
+ }
- // Copy location path (Alt + Shift + C)
- else if (e.altKey && e.shiftKey && e.key === 'C') {
- copyLocation(selectedFile);
- }
+ // Copy location path (Alt + Shift + C)
+ else if (e.altKey && e.shiftKey && e.key === "C") {
+ copyLocation(selectedFile);
+ }
- // Rename file shortcut (F2)
- else if (e.key === 'F2') {
- if (selectedFile) Rename(selectedFilePath);
- }
- // Delete file shortcut (Del)
- else if (e.key === 'Delete') {
- if (e.shiftKey) {
- const filePaths = [];
- for (const element of getSelected()) {
- filePaths.push(decodeURI(element.dataset.path));
- }
- if (_focusingPath === 'xplorer://Trash') Purge(filePaths);
- else PermanentDelete(filePaths);
- } else {
- if (_focusingPath === 'xplorer://Trash') return;
- const filePaths = [];
- for (const element of getSelected()) {
- filePaths.push(decodeURI(element.dataset.path));
- }
- Trash(filePaths);
- }
- } else if (e.keyCode >= 65 && e.keyCode <= 90) {
- // ignore some keys that has its own function
- if (e.ctrlKey && (e.key === 'a' || e.key === 'p' || e.key === 'f')) return;
- clearInterval(_searchListener);
- if (e.key.toLowerCase() === searchingFileName.at(-1)) {
- const _files = [...document.querySelectorAll('.file')].filter((file: HTMLElement) => {
- return file
- .querySelector('#file-filename')
- .innerHTML.toLowerCase()
- .normalize('NFD')
- .replace(/[\u0300-\u036f]/g, '')
- .startsWith(searchingFileName);
- });
- for (let i = 0; i < _files.length; i++) {
- const _file = _files[i];
- if (_file.classList.contains('selected')) {
- unselectAllSelected();
- Select((_files[i + 1] ?? _files[0]) as HTMLElement, false, false);
- break;
- }
- }
- } else {
- searchingFileName += e.key.toLowerCase();
+ // Rename file shortcut (F2)
+ else if (e.key === "F2") {
+ if (selectedFile) Rename(selectedFilePath);
+ }
+ // Delete file shortcut (Del)
+ else if (e.key === "Delete") {
+ if (e.shiftKey) {
+ const filePaths = [];
+ for (const element of getSelected()) {
+ filePaths.push(decodeURI(element.dataset.path));
+ }
+ if (_focusingPath === "xplorer://Trash") Purge(filePaths);
+ else PermanentDelete(filePaths);
+ } else {
+ if (_focusingPath === "xplorer://Trash") return;
+ const filePaths = [];
+ for (const element of getSelected()) {
+ filePaths.push(decodeURI(element.dataset.path));
+ }
+ Trash(filePaths);
+ }
+ } else if (e.keyCode >= 65 && e.keyCode <= 90) {
+ // ignore some keys that has its own function
+ if (e.ctrlKey && (e.key === "a" || e.key === "p" || e.key === "f")) return;
+ clearInterval(_searchListener);
+ if (e.key.toLowerCase() === searchingFileName.at(-1)) {
+ const _files = [...document.querySelectorAll(".file")].filter((file: HTMLElement) => {
+ return file
+ .querySelector("#file-filename")
+ .innerHTML.toLowerCase()
+ .normalize("NFD")
+ .replace(/\p{Diacritic}/g, "")
+ .startsWith(searchingFileName);
+ });
+ for (let i = 0; i < _files.length; i++) {
+ const _file = _files[i];
+ if (_file.classList.contains("selected")) {
+ unselectAllSelected();
+ Select((_files[i + 1] ?? _files[0]) as HTMLElement, false, false);
+ break;
+ }
+ }
+ } else {
+ searchingFileName += e.key.toLowerCase();
- const _files = document.querySelectorAll('.file');
- unselectAllSelected();
- for (const _file of _files) {
- const _fileName = _file.querySelector('#file-filename').innerHTML.toLowerCase();
- console.log(_fileName.normalize('NFD').replace(/[\u0300-\u036f]/g, ''));
- if (
- _fileName
- .normalize('NFD')
- .replace(/[\u0300-\u036f]/g, '')
- .startsWith(searchingFileName)
- ) {
- Select(_file as HTMLElement, false, false);
- ensureElementInViewPort(_file as HTMLElement);
- ChangeSelectedEvent();
- break;
- }
- }
- }
+ const _files = document.querySelectorAll(".file");
+ unselectAllSelected();
+ for (const _file of _files) {
+ const _fileName = _file.querySelector("#file-filename").innerHTML.toLowerCase();
+ console.log(_fileName.normalize("NFD").replace(/\p{Diacritic}/g, ""));
+ if (
+ _fileName
+ .normalize("NFD")
+ .replace(/\p{Diacritic}/g, "")
+ .startsWith(searchingFileName)
+ ) {
+ Select(_file as HTMLElement, false, false);
+ ensureElementInViewPort(_file as HTMLElement);
+ ChangeSelectedEvent();
+ break;
+ }
+ }
+ }
- _searchListener = setInterval(() => {
- searchingFileName = '';
- clearInterval(_searchListener);
- }, 750);
- }
- };
- const KeyDownShortcutsHandler = async (e: KeyboardEvent) => {
- // Don't react if cursor is over input field
- if (document.activeElement.tagName === 'INPUT') return;
- // Select all shortcut (Ctrl + A)
- if (e.key === 'a' && e.ctrlKey) {
- e.preventDefault();
- selectedAll = !selectedAll;
- if (selectedAll) {
- document.querySelectorAll('.file').forEach((element) => element.classList.add('selected'));
- } else document.querySelectorAll('.file').forEach((element) => element.classList.remove('selected'));
- ChangeSelectedEvent();
- }
+ _searchListener = setInterval(() => {
+ searchingFileName = "";
+ clearInterval(_searchListener);
+ }, 750);
+ }
+ };
+ const KeyDownShortcutsHandler = async (e: KeyboardEvent) => {
+ // Don't react if cursor is over input field
+ if (document.activeElement.tagName === "INPUT") return;
+ // Select all shortcut (Ctrl + A)
+ if (e.key === "a" && e.ctrlKey) {
+ e.preventDefault();
+ selectedAll = !selectedAll;
+ if (selectedAll) {
+ document.querySelectorAll(".file").forEach((element) => element.classList.add("selected"));
+ } else document.querySelectorAll(".file").forEach((element) => element.classList.remove("selected"));
+ ChangeSelectedEvent();
+ }
- // File properties (Ctrl+P)
- else if (e.ctrlKey && e.key === 'p') {
- e.preventDefault();
- const selectedFile = getSelected()?.[0];
- const selectedFilePath = decodeURI(selectedFile?.dataset?.path);
- Properties(selectedFilePath === 'undefined' ? await focusingPath() : selectedFilePath);
- }
- // Find files (Ctrl+F)
- else if (e.ctrlKey && e.key === 'f') {
- e.preventDefault();
- searchElement.select();
- searchElement.focus();
- }
- // Internal Reload (F5)
- if (e.key === 'F5') {
- e.preventDefault();
- reload();
- }
- };
+ // File properties (Ctrl+P)
+ else if (e.ctrlKey && e.key === "p") {
+ e.preventDefault();
+ const selectedFile = getSelected()?.[0];
+ const selectedFilePath = decodeURI(selectedFile?.dataset?.path);
+ Properties(selectedFilePath === "undefined" ? await focusingPath() : selectedFilePath);
+ }
+ // Find files (Ctrl+F)
+ else if (e.ctrlKey && e.key === "f") {
+ e.preventDefault();
+ searchElement.select();
+ searchElement.focus();
+ }
+ // Internal Reload (F5)
+ if (e.key === "F5") {
+ e.preventDefault();
+ reload();
+ }
+ };
- const MouseShortcutsHandler = (e: MouseEvent) => {
- // Don't react if cursor is over input field
- if (document.activeElement.tagName === 'INPUT') return;
+ const MouseShortcutsHandler = (e: MouseEvent) => {
+ // Don't react if cursor is over input field
+ if (document.activeElement.tagName === "INPUT") return;
- switch (e.button) {
- // Back button
- case 3:
- goBack();
- break;
- // Forward button
- case 4:
- goForward();
- break;
- }
- };
+ switch (e.button) {
+ // Back button
+ case 3:
+ goBack();
+ break;
+ // Forward button
+ case 4:
+ goForward();
+ break;
+ }
+ };
- document.addEventListener('keyup', KeyUpShortcutsHandler);
- document.addEventListener('keydown', KeyDownShortcutsHandler);
- document.addEventListener('mouseup', MouseShortcutsHandler);
+ document.addEventListener("keyup", KeyUpShortcutsHandler);
+ document.addEventListener("keydown", KeyDownShortcutsHandler);
+ document.addEventListener("mouseup", MouseShortcutsHandler);
- window.addEventListener('beforeunload', () => {
- document.removeEventListener('keyup', KeyUpShortcutsHandler, false);
- document.removeEventListener('keydown', KeyDownShortcutsHandler, false);
- document.removeEventListener('mouseup', MouseShortcutsHandler);
- });
+ window.addEventListener("beforeunload", () => {
+ document.removeEventListener("keyup", KeyUpShortcutsHandler, false);
+ document.removeEventListener("keydown", KeyDownShortcutsHandler, false);
+ document.removeEventListener("mouseup", MouseShortcutsHandler);
+ });
};
export { Shortcut, changeSelectedAllStatus, getSelectedAllStatus, pauseEnter };
diff --git a/src/Components/Sidebar/index.tsx b/src/Components/Sidebar/index.tsx
index cbf5c70b..7a75995d 100644
--- a/src/Components/Sidebar/index.tsx
+++ b/src/Components/Sidebar/index.tsx
@@ -2,8 +2,8 @@ import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { setActiveTab, updateTab } from "../../Store/ActionCreators/TabActionCreators";
-import { IAppState } from "../../Store/Reducers";
-import { IFavoritesReducerState } from "../../Typings/Store/favorites";
+import type { IAppState } from "../../Store/Reducers";
+import type { IFavoritesReducerState } from "../../Typings/Store/favorites";
import XplorerLogo from "../../Icon/extension/xplorer.svg";
import FavoriteLogo from "../../Icon/folder/sidebar-favorite.svg";
@@ -48,7 +48,7 @@ const Sidebar = () => {
onClick={() => navigateToPath(path)}
key={path + name}
>
-
+
{name}
@@ -68,9 +68,10 @@ const Sidebar = () => {
data-path={mount_point}
className="sidebar-hover-effect sidebar-nav-item drive-item"
onClick={() => navigateToPath(mount_point.replace(/\\/g, "/"))}
+ onKeyUp={() => navigateToPath(mount_point.replace(/\\/g, "/"))}
key={mount_point + name}
>
-
+
{name}
diff --git a/src/Components/Thumbnail/thumbnail.ts b/src/Components/Thumbnail/thumbnail.ts
index c3532015..ea293b77 100644
--- a/src/Components/Thumbnail/thumbnail.ts
+++ b/src/Components/Thumbnail/thumbnail.ts
@@ -1,13 +1,13 @@
-import { customThumbnail, defaultThumbnail } from '../../Config/folder.config';
-import { IMAGE_TYPES, VIDEO_TYPES } from '../../Config/file.config';
-import getBasename from '../Functions/path/basename';
-import Storage from '../../Service/storage';
-import FileAPI from '../../Service/files';
-import FileLib from '../../../lib/files.json';
-import FolderLib from '../../../lib/folder.json';
-import ThumbnailExtensionTrie from './thumbnailExtensionTrie';
-import ThumbnailFileTrie from './thumbnailFileTrie';
-import ThumbnailFolderTrie from './thumbnailFolderTrie';
+import FileLib from "../../../lib/files.json";
+import FolderLib from "../../../lib/folder.json";
+import { IMAGE_TYPES, VIDEO_TYPES } from "../../Config/file.config";
+import { customThumbnail, defaultThumbnail } from "../../Config/folder.config";
+import FileAPI from "../../Service/files";
+import Storage from "../../Service/storage";
+import getBasename from "../Functions/path/basename";
+import ThumbnailExtensionTrie from "./thumbnailExtensionTrie";
+import ThumbnailFileTrie from "./thumbnailFileTrie";
+import ThumbnailFolderTrie from "./thumbnailFolderTrie";
let trieInitilized = false;
const extensionThumbnailTrie = new ThumbnailExtensionTrie();
@@ -24,10 +24,10 @@ const DEFAULT_IMAGE_THUMBNAIL = require(`../../Icon/${defaultThumbnail.DEFAULT_I
* @returns {string} HTML Result
*/
const imageThumbnail = async (source: string, HTMLFormat?: boolean, isImg = false): Promise => {
- if (!HTMLFormat) return (await new FileAPI(source).exists()) ? new FileAPI(source).readAsset() : require(`../../Icon/${source}`);
- return source?.startsWith('data:image/')
- ? `
`
- : `
`;
+ if (!HTMLFormat) return (await new FileAPI(source).exists()) ? new FileAPI(source).readAsset() : require(`../../Icon/${source}`);
+ return source?.startsWith("data:image/")
+ ? ``
+ : ``;
};
/**
@@ -36,11 +36,11 @@ const imageThumbnail = async (source: string, HTMLFormat?: boolean, isImg = fals
* @returns {string} HTML Result
*/
const videoPreview = async (filename: string): Promise => {
- const appearance = await Storage.get('appearance');
- const alt = require(`../../Icon/${defaultThumbnail.DEFAULT_VIDEO_THUMBNAIL}`);
- return appearance?.videoAsThumbnail
- ? ``
- : imageThumbnail(alt, true);
+ const appearance = await Storage.get("appearance");
+ const alt = require(`../../Icon/${defaultThumbnail.DEFAULT_VIDEO_THUMBNAIL}`);
+ return appearance?.videoAsThumbnail
+ ? ``
+ : imageThumbnail(alt, true);
};
/**
* Get file icon of a file/folder
@@ -50,67 +50,67 @@ const videoPreview = async (filename: string): Promise => {
* @param {boolean} imageAsThumbnail - return image as thumbnail (optional)
* @returns {Promise} the preview of the file/folder
*/
-const fileThumbnail = async (filePath: string, category = 'folder', HTMLFormat = true, imageAsThumbnail = true): Promise => {
- if (!trieInitilized) {
- for (const category of FileLib) {
- if (category.extensions?.length && category.thumbnail) {
- for (const extension of category.extensions) {
- extensionThumbnailTrie.insert(extension, category.thumbnail);
- }
- }
- if (category.fileNames?.length && category.thumbnail) {
- for (const fileName of category.fileNames) {
- filenameThumbnailTrie.insert(fileName, category.thumbnail);
- }
- }
- }
- for (const category of FolderLib) {
- if (category.folderNames?.length && category.thumbnail) {
- for (const folderName of category.folderNames) {
- folderThumbnailTrie.insert(folderName, category.thumbnail);
- }
- }
- }
- trieInitilized = true;
- }
- if (category === 'file' && filePath.indexOf('.') === -1) return imageThumbnail(defaultThumbnail.DEFAULT_FILE_THUMBNAIL, HTMLFormat);
- const ext = filePath.split('.').pop().toLowerCase(); // Get extension of filename
- const basename = getBasename(filePath).toLowerCase();
- const appearance = await Storage.get('appearance');
- if (category === 'file') {
- if (IMAGE_TYPES.indexOf(ext) !== -1) {
- if (imageAsThumbnail) {
- return imageThumbnail(filePath, HTMLFormat, true);
- } else {
- return imageThumbnail(DEFAULT_IMAGE_THUMBNAIL, HTMLFormat);
- }
- } else if (VIDEO_TYPES.indexOf(ext) !== -1) {
- const assetSrc = new FileAPI(filePath).readAsset();
- return HTMLFormat ? await videoPreview(assetSrc) : assetSrc;
- } else if ((appearance?.extractExeIcon ?? false) && (ext === 'exe' || ext === 'msi')) {
- return imageThumbnail(await new FileAPI(filePath).extractIcon(), HTMLFormat, true);
- }
- }
+const fileThumbnail = async (filePath: string, category = "folder", HTMLFormat = true, imageAsThumbnail = true): Promise => {
+ if (!trieInitilized) {
+ for (const category of FileLib) {
+ if (category.extensions?.length && category.thumbnail) {
+ for (const extension of category.extensions) {
+ extensionThumbnailTrie.insert(extension, category.thumbnail);
+ }
+ }
+ if (category.fileNames?.length && category.thumbnail) {
+ for (const fileName of category.fileNames) {
+ filenameThumbnailTrie.insert(fileName, category.thumbnail);
+ }
+ }
+ }
+ for (const category of FolderLib) {
+ if (category.folderNames?.length && category.thumbnail) {
+ for (const folderName of category.folderNames) {
+ folderThumbnailTrie.insert(folderName, category.thumbnail);
+ }
+ }
+ }
+ trieInitilized = true;
+ }
+ if (category === "file" && filePath.indexOf(".") === -1) return imageThumbnail(defaultThumbnail.DEFAULT_FILE_THUMBNAIL, HTMLFormat);
+ const ext = filePath.split(".").pop().toLowerCase(); // Get extension of filename
+ const basename = getBasename(filePath).toLowerCase();
+ const appearance = await Storage.get("appearance");
+ if (category === "file") {
+ if (IMAGE_TYPES.indexOf(ext) !== -1) {
+ if (imageAsThumbnail) {
+ return imageThumbnail(filePath, HTMLFormat, true);
+ }
+ return imageThumbnail(DEFAULT_IMAGE_THUMBNAIL, HTMLFormat);
+ }
+ if (VIDEO_TYPES.indexOf(ext) !== -1) {
+ const assetSrc = new FileAPI(filePath).readAsset();
+ return HTMLFormat ? await videoPreview(assetSrc) : assetSrc;
+ }
+ if ((appearance?.extractExeIcon ?? false) && (ext === "exe" || ext === "msi")) {
+ return imageThumbnail(await new FileAPI(filePath).extractIcon(), HTMLFormat, true);
+ }
+ }
- const filename = filePath.toLowerCase(); // Lowercase filename
- if (category === 'contextmenu') {
- return imageThumbnail(`contextmenu/${filePath + '.svg'}`);
- }
+ const filename = filePath.toLowerCase(); // Lowercase filename
+ if (category === "contextmenu") {
+ return imageThumbnail(`contextmenu/${`${filePath}.svg`}`);
+ }
- if (category === 'file') {
- return imageThumbnail(
- filenameThumbnailTrie.search(basename) ?? extensionThumbnailTrie.search(ext) ?? defaultThumbnail.DEFAULT_FILE_THUMBNAIL,
- HTMLFormat
- );
- } else {
- if (category !== 'folder') {
- const _key = `${category}-${filename}`;
- if (Object.keys(customThumbnail).indexOf(_key) !== -1) {
- return imageThumbnail(customThumbnail[_key], HTMLFormat);
- }
- }
- return imageThumbnail(folderThumbnailTrie.search(basename) ?? defaultThumbnail.DEFAULT_FOLDER_THUMBNAIL, HTMLFormat);
- }
+ if (category === "file") {
+ return imageThumbnail(
+ filenameThumbnailTrie.search(basename) ?? extensionThumbnailTrie.search(ext) ?? defaultThumbnail.DEFAULT_FILE_THUMBNAIL,
+ HTMLFormat,
+ );
+ }
+ if (category !== "folder") {
+ const _key = `${category}-${filename}`;
+ if (Object.keys(customThumbnail).indexOf(_key) !== -1) {
+ return imageThumbnail(customThumbnail[_key], HTMLFormat);
+ }
+ }
+ return imageThumbnail(folderThumbnailTrie.search(basename) ?? defaultThumbnail.DEFAULT_FOLDER_THUMBNAIL, HTMLFormat);
};
export default fileThumbnail;
diff --git a/src/Components/Thumbnail/thumbnailExtensionNode.ts b/src/Components/Thumbnail/thumbnailExtensionNode.ts
index f9c3e469..4f88728d 100644
--- a/src/Components/Thumbnail/thumbnailExtensionNode.ts
+++ b/src/Components/Thumbnail/thumbnailExtensionNode.ts
@@ -1,13 +1,13 @@
class ThumbnailExtensionNode {
- public _ch: string;
- public _icon: string;
- public _isLeaf: boolean;
- public _children: ThumbnailExtensionNode[];
+ public _ch: string;
+ public _icon: string;
+ public _isLeaf: boolean;
+ public _children: ThumbnailExtensionNode[];
- constructor(ch: string) {
- this._ch = ch;
- this._children = [];
- }
+ constructor(ch: string) {
+ this._ch = ch;
+ this._children = [];
+ }
}
export default ThumbnailExtensionNode;
diff --git a/src/Components/Thumbnail/thumbnailExtensionTrie.ts b/src/Components/Thumbnail/thumbnailExtensionTrie.ts
index f3138ca5..1ce3cf0f 100644
--- a/src/Components/Thumbnail/thumbnailExtensionTrie.ts
+++ b/src/Components/Thumbnail/thumbnailExtensionTrie.ts
@@ -1,45 +1,45 @@
-import ThumbnailExtensionNode from './thumbnailExtensionNode';
+import ThumbnailExtensionNode from "./thumbnailExtensionNode";
class ThumbnailExtensionTrie {
- public _root: ThumbnailExtensionNode;
+ public _root: ThumbnailExtensionNode;
- constructor() {
- this._root = new ThumbnailExtensionNode('');
- }
+ constructor() {
+ this._root = new ThumbnailExtensionNode("");
+ }
- insert(suffix: string, icon: string): void {
- let node = this._root;
- for (let i = 0; i < suffix.length; i++) {
- let position = 0;
- for (const child of node._children) {
- if (child._ch === suffix[i]) break;
- position++;
- }
- if (position < node._children.length) {
- //find it
- node = node._children[position];
- } else {
- //not find, create new Node
- node._children.push(new ThumbnailExtensionNode(suffix[i]));
- node = node._children[position];
- }
- }
- node._isLeaf = true;
- node._icon = icon;
- }
+ insert(suffix: string, icon: string): void {
+ let node = this._root;
+ for (let i = 0; i < suffix.length; i++) {
+ let position = 0;
+ for (const child of node._children) {
+ if (child._ch === suffix[i]) break;
+ position++;
+ }
+ if (position < node._children.length) {
+ //find it
+ node = node._children[position];
+ } else {
+ //not find, create new Node
+ node._children.push(new ThumbnailExtensionNode(suffix[i]));
+ node = node._children[position];
+ }
+ }
+ node._isLeaf = true;
+ node._icon = icon;
+ }
- search(suffix: string): string {
- let node = this._root;
- for (let i = 0; i < suffix.length; i++) {
- for (const child of node._children) {
- if (child._ch === suffix[i]) {
- node = child;
- }
- }
- }
- if (node._isLeaf) return node._icon;
- return null;
- }
+ search(suffix: string): string {
+ let node = this._root;
+ for (let i = 0; i < suffix.length; i++) {
+ for (const child of node._children) {
+ if (child._ch === suffix[i]) {
+ node = child;
+ }
+ }
+ }
+ if (node._isLeaf) return node._icon;
+ return null;
+ }
}
export default ThumbnailExtensionTrie;
diff --git a/src/Components/Thumbnail/thumbnailFileNode.ts b/src/Components/Thumbnail/thumbnailFileNode.ts
index 3b7f8daa..bb1e721e 100644
--- a/src/Components/Thumbnail/thumbnailFileNode.ts
+++ b/src/Components/Thumbnail/thumbnailFileNode.ts
@@ -1,13 +1,13 @@
class ThumbnailFileNode {
- public _ch: string;
- public _icon: string;
- public _isLeaf: boolean;
- public _children: ThumbnailFileNode[];
+ public _ch: string;
+ public _icon: string;
+ public _isLeaf: boolean;
+ public _children: ThumbnailFileNode[];
- constructor(ch: string) {
- this._ch = ch;
- this._children = [];
- }
+ constructor(ch: string) {
+ this._ch = ch;
+ this._children = [];
+ }
}
export default ThumbnailFileNode;
diff --git a/src/Components/Thumbnail/thumbnailFileTrie.ts b/src/Components/Thumbnail/thumbnailFileTrie.ts
index 1043cdce..be0850ff 100644
--- a/src/Components/Thumbnail/thumbnailFileTrie.ts
+++ b/src/Components/Thumbnail/thumbnailFileTrie.ts
@@ -1,45 +1,45 @@
-import ThumbnailFileNode from './thumbnailFileNode';
+import ThumbnailFileNode from "./thumbnailFileNode";
class ThumbnailFileTrie {
- public _root: ThumbnailFileNode;
+ public _root: ThumbnailFileNode;
- constructor() {
- this._root = new ThumbnailFileNode('');
- }
+ constructor() {
+ this._root = new ThumbnailFileNode("");
+ }
- insert(suffix: string, icon: string): void {
- let node = this._root;
- for (let i = 0; i < suffix.length; i++) {
- let position = 0;
- for (const child of node._children) {
- if (child._ch === suffix[i]) break;
- position++;
- }
- if (position < node._children.length) {
- //find it
- node = node._children[position];
- } else {
- //not find, create new Node
- node._children.push(new ThumbnailFileNode(suffix[i]));
- node = node._children[position];
- }
- }
- node._isLeaf = true;
- node._icon = icon;
- }
+ insert(suffix: string, icon: string): void {
+ let node = this._root;
+ for (let i = 0; i < suffix.length; i++) {
+ let position = 0;
+ for (const child of node._children) {
+ if (child._ch === suffix[i]) break;
+ position++;
+ }
+ if (position < node._children.length) {
+ //find it
+ node = node._children[position];
+ } else {
+ //not find, create new Node
+ node._children.push(new ThumbnailFileNode(suffix[i]));
+ node = node._children[position];
+ }
+ }
+ node._isLeaf = true;
+ node._icon = icon;
+ }
- search(suffix: string): string {
- let node = this._root;
- for (let i = 0; i < suffix.length; i++) {
- for (const child of node._children) {
- if (child._ch === suffix[i]) {
- node = child;
- }
- }
- }
- if (node._isLeaf) return node._icon;
- return null;
- }
+ search(suffix: string): string {
+ let node = this._root;
+ for (let i = 0; i < suffix.length; i++) {
+ for (const child of node._children) {
+ if (child._ch === suffix[i]) {
+ node = child;
+ }
+ }
+ }
+ if (node._isLeaf) return node._icon;
+ return null;
+ }
}
export default ThumbnailFileTrie;
diff --git a/src/Components/Thumbnail/thumbnailFolderNode.ts b/src/Components/Thumbnail/thumbnailFolderNode.ts
index 9c0bb1ac..409c5faa 100644
--- a/src/Components/Thumbnail/thumbnailFolderNode.ts
+++ b/src/Components/Thumbnail/thumbnailFolderNode.ts
@@ -1,13 +1,13 @@
class ThumbnailFolderNode {
- public _ch: string;
- public _icon: string;
- public _isLeaf: boolean;
- public _children: ThumbnailFolderNode[];
+ public _ch: string;
+ public _icon: string;
+ public _isLeaf: boolean;
+ public _children: ThumbnailFolderNode[];
- constructor(ch: string) {
- this._ch = ch;
- this._children = [];
- }
+ constructor(ch: string) {
+ this._ch = ch;
+ this._children = [];
+ }
}
export default ThumbnailFolderNode;
diff --git a/src/Components/Thumbnail/thumbnailFolderTrie.ts b/src/Components/Thumbnail/thumbnailFolderTrie.ts
index b5db4cce..8963673a 100644
--- a/src/Components/Thumbnail/thumbnailFolderTrie.ts
+++ b/src/Components/Thumbnail/thumbnailFolderTrie.ts
@@ -1,45 +1,45 @@
-import ThumbnailFolderNode from './thumbnailFolderNode';
+import ThumbnailFolderNode from "./thumbnailFolderNode";
class ThumbnailFolderTrie {
- public _root: ThumbnailFolderNode;
+ public _root: ThumbnailFolderNode;
- constructor() {
- this._root = new ThumbnailFolderNode('');
- }
+ constructor() {
+ this._root = new ThumbnailFolderNode("");
+ }
- insert(suffix: string, icon: string): void {
- let node = this._root;
- for (let i = 0; i < suffix.length; i++) {
- let position = 0;
- for (const child of node._children) {
- if (child._ch === suffix[i]) break;
- position++;
- }
- if (position < node._children.length) {
- //find it
- node = node._children[position];
- } else {
- //not find, create new Node
- node._children.push(new ThumbnailFolderNode(suffix[i]));
- node = node._children[position];
- }
- }
- node._isLeaf = true;
- node._icon = icon;
- }
+ insert(suffix: string, icon: string): void {
+ let node = this._root;
+ for (let i = 0; i < suffix.length; i++) {
+ let position = 0;
+ for (const child of node._children) {
+ if (child._ch === suffix[i]) break;
+ position++;
+ }
+ if (position < node._children.length) {
+ //find it
+ node = node._children[position];
+ } else {
+ //not find, create new Node
+ node._children.push(new ThumbnailFolderNode(suffix[i]));
+ node = node._children[position];
+ }
+ }
+ node._isLeaf = true;
+ node._icon = icon;
+ }
- search(suffix: string): string {
- let node = this._root;
- for (let i = 0; i < suffix.length; i++) {
- for (const child of node._children) {
- if (child._ch === suffix[i]) {
- node = child;
- }
- }
- }
- if (node._isLeaf) return node._icon;
- return null;
- }
+ search(suffix: string): string {
+ let node = this._root;
+ for (let i = 0; i < suffix.length; i++) {
+ for (const child of node._children) {
+ if (child._ch === suffix[i]) {
+ node = child;
+ }
+ }
+ }
+ if (node._isLeaf) return node._icon;
+ return null;
+ }
}
export default ThumbnailFolderTrie;
diff --git a/src/Config/file.config.ts b/src/Config/file.config.ts
index e8d46707..8fc239c9 100644
--- a/src/Config/file.config.ts
+++ b/src/Config/file.config.ts
@@ -1,10 +1,10 @@
-export const IMAGE_TYPES = ['jpg', 'png', 'gif', 'bmp', 'jpeg', 'jpe', 'jif', 'jfif', 'jfi', 'webp', 'tiff', 'tif', 'ico', 'svg', 'webp'];
-export const VIDEO_TYPES = ['mp4', 'webm', 'mpg', 'mp2', 'mpeg', 'mpe', 'mpv', 'ocg', 'm4p', 'm4v', 'avi', 'wmv', 'mov', 'qt', 'flv', 'swf'];
-export const PLAINTEXT_TYPES = ['txt'];
-export const HTML_TYPES = ['html', 'htm', 'xhtml', 'html_vm', 'asp'];
-export const MARKDOWN_TYPES = ['md', 'markdown', 'mdown', 'mkd', 'mkdown', 'mdwn', 'mdtxt', 'mdtext', 'text'];
-export const XLSX_TYPES = ['xlsx', 'xls', 'xlsb', 'xls', 'ods', 'fods', 'csv'];
-export const DOCX_TYPES = ['doc', 'docb', 'docm', 'dot', 'dotm', 'docx', 'rtf'];
-export const PDF_TYPES = ['pdf'];
+export const IMAGE_TYPES = ["jpg", "png", "gif", "bmp", "jpeg", "jpe", "jif", "jfif", "jfi", "webp", "tiff", "tif", "ico", "svg", "webp"];
+export const VIDEO_TYPES = ["mp4", "webm", "mpg", "mp2", "mpeg", "mpe", "mpv", "ocg", "m4p", "m4v", "avi", "wmv", "mov", "qt", "flv", "swf"];
+export const PLAINTEXT_TYPES = ["txt"];
+export const HTML_TYPES = ["html", "htm", "xhtml", "html_vm", "asp"];
+export const MARKDOWN_TYPES = ["md", "markdown", "mdown", "mkd", "mkdown", "mdwn", "mdtxt", "mdtext", "text"];
+export const XLSX_TYPES = ["xlsx", "xls", "xlsb", "xls", "ods", "fods", "csv"];
+export const DOCX_TYPES = ["doc", "docb", "docm", "dot", "dotm", "docx", "rtf"];
+export const PDF_TYPES = ["pdf"];
export const extensionMatches = (extList: string[], extension: string): boolean => extList.includes(extension);
diff --git a/src/Config/folder.config.ts b/src/Config/folder.config.ts
index d5b02246..8963e4e9 100644
--- a/src/Config/folder.config.ts
+++ b/src/Config/folder.config.ts
@@ -1,30 +1,30 @@
const defaultThumbnail = {
- DEFAULT_FILE_THUMBNAIL: 'file.svg',
- DEFAULT_FOLDER_THUMBNAIL: 'folder.svg',
- DEFAULT_IMAGE_THUMBNAIL: 'extension/image.svg',
- DEFAULT_VIDEO_THUMBNAIL: 'extension/video.svg',
+ DEFAULT_FILE_THUMBNAIL: "file.svg",
+ DEFAULT_FOLDER_THUMBNAIL: "folder.svg",
+ DEFAULT_IMAGE_THUMBNAIL: "extension/image.svg",
+ DEFAULT_VIDEO_THUMBNAIL: "extension/video.svg",
};
interface customThumbnailType {
- [key: string]: string;
+ [key: string]: string;
}
const customThumbnail: customThumbnailType = {
- 'sidebar-about': 'folder/sidebar-about.svg',
- 'sidebar-recent': 'folder/sidebar-recent.svg',
- 'sidebar-favorites': 'folder/sidebar-favorite.svg',
- 'sidebar-setting': 'folder/sidebar-setting.svg',
- 'sidebar-trash': 'folder/sidebar-trash.svg',
- 'sidebar-desktop': 'folder/sidebar-desktop.svg',
- 'sidebar-home': 'folder/sidebar-home.svg',
- 'sidebar-documents': 'folder/sidebar-document.svg',
- 'sidebar-downloads': 'folder/sidebar-download.svg',
- 'sidebar-music': 'folder/sidebar-music.svg',
- 'sidebar-pictures': 'folder/sidebar-picture.svg',
- 'sidebar-videos': 'folder/sidebar-video.svg',
- 'settings-about': 'folder/setting-about.svg',
- 'settings-appearance': 'folder/setting-appearance.svg',
- 'settings-preference': 'folder/setting-preference.svg',
- 'favorites-usb': 'usb.svg',
- 'favorites-hard-disk': 'hard-disk.svg',
+ "sidebar-about": "folder/sidebar-about.svg",
+ "sidebar-recent": "folder/sidebar-recent.svg",
+ "sidebar-favorites": "folder/sidebar-favorite.svg",
+ "sidebar-setting": "folder/sidebar-setting.svg",
+ "sidebar-trash": "folder/sidebar-trash.svg",
+ "sidebar-desktop": "folder/sidebar-desktop.svg",
+ "sidebar-home": "folder/sidebar-home.svg",
+ "sidebar-documents": "folder/sidebar-document.svg",
+ "sidebar-downloads": "folder/sidebar-download.svg",
+ "sidebar-music": "folder/sidebar-music.svg",
+ "sidebar-pictures": "folder/sidebar-picture.svg",
+ "sidebar-videos": "folder/sidebar-video.svg",
+ "settings-about": "folder/setting-about.svg",
+ "settings-appearance": "folder/setting-appearance.svg",
+ "settings-preference": "folder/setting-preference.svg",
+ "favorites-usb": "usb.svg",
+ "favorites-hard-disk": "hard-disk.svg",
};
export { customThumbnail, defaultThumbnail };
diff --git a/src/Helpers/paths.ts b/src/Helpers/paths.ts
index 8115105a..7e0ff463 100644
--- a/src/Helpers/paths.ts
+++ b/src/Helpers/paths.ts
@@ -9,7 +9,7 @@ export const dirDelimiter = "/";
*/
export const getStandardPath = (path: string): string => {
if (!path) return dirDelimiter;
- if (path[path.length - 1] !== dirDelimiter) return path + "/";
+ if (path[path.length - 1] !== dirDelimiter) return `${path}/`;
return path.replaceAll("\\", dirDelimiter);
};
diff --git a/src/Icon/index.tsx b/src/Icon/index.tsx
index 6f716f87..0cbb78fb 100644
--- a/src/Icon/index.tsx
+++ b/src/Icon/index.tsx
@@ -28,7 +28,7 @@ export const CopyIcon = ({ fillColor = "currentColor", size = 24 }) => (
=> {
- if (!isTauri) return false;
- const { invoke } = require('@tauri-apps/api');
- const storedUtils = await Storage.get('utils');
- if (storedUtils?.vscodeInstalled === undefined) {
- if (_vscodeInstalled === undefined) {
- _vscodeInstalled = await invoke('check_vscode_installed');
- storedUtils.vscodeInstalled = _vscodeInstalled;
- Storage.set('utils', storedUtils);
- }
- } else _vscodeInstalled = storedUtils.vscodeInstalled;
- return _vscodeInstalled;
+ if (!isTauri) return false;
+ const { invoke } = require("@tauri-apps/api");
+ const storedUtils = await Storage.get("utils");
+ if (storedUtils?.vscodeInstalled === undefined) {
+ if (_vscodeInstalled === undefined) {
+ _vscodeInstalled = await invoke("check_vscode_installed");
+ storedUtils.vscodeInstalled = _vscodeInstalled;
+ Storage.set("utils", storedUtils);
+ }
+ } else _vscodeInstalled = storedUtils.vscodeInstalled;
+ return _vscodeInstalled;
};
const getAvailableFonts = async (): Promise => {
- if (isTauri) {
- const { invoke } = require('@tauri-apps/api');
- return await invoke('get_available_fonts');
- } else {
- const fonts = await (await fetch(GET_AVAILABLE_FONTS_ENDPOINT, { method: 'GET' })).json();
- return fonts;
- }
+ if (isTauri) {
+ const { invoke } = require("@tauri-apps/api");
+ return await invoke("get_available_fonts");
+ }
+ const fonts = await (await fetch(GET_AVAILABLE_FONTS_ENDPOINT, { method: "GET" })).json();
+ return fonts;
};
let listened = false;
const listenStylesheetChange = async (cb: (stylesheet: JSON) => void): Promise => {
- if (!isTauri) return;
- if (!listened) {
- const { getCurrent } = require('@tauri-apps/api/window');
- const { invoke } = require('@tauri-apps/api');
- invoke('listen_stylesheet_change');
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- getCurrent().listen('stylesheet_changes', (e: any) => {
- cb(e.payload as JSON);
- });
- listened = true;
- }
+ if (!isTauri) return;
+ if (!listened) {
+ const { getCurrent } = require("@tauri-apps/api/window");
+ const { invoke } = require("@tauri-apps/api");
+ invoke("listen_stylesheet_change");
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ getCurrent().listen("stylesheet_changes", (e: any) => {
+ cb(e.payload as JSON);
+ });
+ listened = true;
+ }
};
-const changeTransparentEffect = async (transparentEffect: 'blur' | 'acrylic' | 'none'): Promise
` +
- ` \n` +
- `
\n` +
- ` \n` +
- `\n`;
- }
- const favoriteElement = document.querySelector('#sidebar-favorites');
- const favoriteBtnText = favoriteElement.querySelector('.sidebar-text');
- const favoriteList = favoriteElement.querySelector('.sidebar-nav-list');
- favoriteBtnText.textContent = await Translate('Favorites');
- favoriteList.innerHTML = content;
- if (sidebar?.hideSection?.favorites) {
- favoriteElement.classList.add(sidebarCollapseClass);
- }
+ const sidebarCollapseClass = "sidebar-nav-dropdown-collapsed";
+ const sidebar = await Storage.get("sidebar");
+ let content = "";
+ for (const favorite of favorites) {
+ if (!favorite.path) continue;
+ const exists = await new FileAPI(favorite.path).exists();
+ const isDefault = await isDefaultFavorite(favorite.path);
+ const isPseudo = favorite.path.startsWith("xplorer://");
+ if (!exists && !isDefault && !isPseudo) continue;
+ const isdir = isPseudo || (await new DirectoryAPI(favorite.path).isDir());
+ const iconPath = exists && !isDefault ? favorite.path : favorite.name;
+ let iconCategory = "sidebar";
+ if (!isDefault && favorite.path !== "xplorer://Home") {
+ iconCategory = isdir ? "folder" : "file";
+ }
+ content += `\n
-
-
+
+
+
);
export default LoadingBar;
diff --git a/src/Components/MainView/index.tsx b/src/Components/MainView/index.tsx
index a0ee31b6..2b6009fa 100644
--- a/src/Components/MainView/index.tsx
+++ b/src/Components/MainView/index.tsx
@@ -4,8 +4,8 @@ import { useSelector } from "react-redux";
import File from "../File";
import Preview from "../Preview";
-import { IAppState } from "../../Store/Reducers";
-import { IFile } from "../../Typings/Store/files";
+import type { IAppState } from "../../Store/Reducers";
+import type { IFile } from "../../Typings/Store/files";
import { ThemedDiv } from "../Theme";
export interface IMainViewProps {
diff --git a/src/Components/Open/defaultSort.ts b/src/Components/Open/defaultSort.ts
index 96a2b336..215e3aee 100644
--- a/src/Components/Open/defaultSort.ts
+++ b/src/Components/Open/defaultSort.ts
@@ -1,31 +1,31 @@
-import FavoritesAPI from '../../Service/favorites';
+import FavoritesAPI from "../../Service/favorites";
let favoritesData: FavoritesAPI;
/**
* Check for default sort algorithm for a given directory
* @param {string} dir - directory to check
* @returns {Promise<'A'|'Z'|'L'|'F'|'S'|'T'>}
*/
-const getDefaultSort = async (dir: string): Promise<'A' | 'Z' | 'L' | 'F' | 'S' | 'T'> => {
- if (!favoritesData) {
- favoritesData = new FavoritesAPI();
- await favoritesData.build();
- }
- switch (dir) {
- case favoritesData.DOCUMENT_PATH:
- return 'L';
- case favoritesData.PICTURE_PATH:
- return 'L';
- case favoritesData.VIDEO_PATH:
- return 'L';
- case favoritesData.DESKTOP_PATH:
- return 'A';
- case favoritesData.DOWNLOAD_PATH:
- return 'L';
- case favoritesData.MUSIC_PATH:
- return 'A';
- default:
- return null;
- }
+const getDefaultSort = async (dir: string): Promise<"A" | "Z" | "L" | "F" | "S" | "T"> => {
+ if (!favoritesData) {
+ favoritesData = new FavoritesAPI();
+ await favoritesData.build();
+ }
+ switch (dir) {
+ case favoritesData.DOCUMENT_PATH:
+ return "L";
+ case favoritesData.PICTURE_PATH:
+ return "L";
+ case favoritesData.VIDEO_PATH:
+ return "L";
+ case favoritesData.DESKTOP_PATH:
+ return "A";
+ case favoritesData.DOWNLOAD_PATH:
+ return "L";
+ case favoritesData.MUSIC_PATH:
+ return "A";
+ default:
+ return null;
+ }
};
export default getDefaultSort;
diff --git a/src/Components/Open/displayFiles.ts b/src/Components/Open/displayFiles.ts
index cf86ad62..4be678df 100644
--- a/src/Components/Open/displayFiles.ts
+++ b/src/Components/Open/displayFiles.ts
@@ -1,12 +1,12 @@
-import Storage from '../../Service/storage';
-import fileThumbnail from '../Thumbnail/thumbnail';
-import formatBytes from '../Functions/filesize';
-import type FileMetaData from '../../Typings/fileMetaData';
-import { Select } from '../Files/File Operation/select';
-import normalizeSlash from '../Functions/path/normalizeSlash';
-import joinPath from '../Functions/path/joinPath';
-import getDefaultSort from './defaultSort';
-import { LnkData } from '../../Typings/fileMetaData';
+import Storage from "../../Service/storage";
+import type FileMetaData from "../../Typings/fileMetaData";
+import type { LnkData } from "../../Typings/fileMetaData";
+import { Select } from "../Files/File Operation/select";
+import formatBytes from "../Functions/filesize";
+import joinPath from "../Functions/path/joinPath";
+import normalizeSlash from "../Functions/path/normalizeSlash";
+import fileThumbnail from "../Thumbnail/thumbnail";
+import getDefaultSort from "./defaultSort";
/**
* Display files into Xplorer main section
* @param {fileData[]} files - array of files of a directory
@@ -19,145 +19,141 @@ import { LnkData } from '../../Typings/fileMetaData';
* @returns {PromiseDocx viewer: {filePath}
);
-}
+ return Docx viewer: {filePath}
;
+};
export default DocxViewer;
diff --git a/src/Components/Preview/HtmlViewer.tsx b/src/Components/Preview/HtmlViewer.tsx
index 4fd6e83e..c38d3ba5 100644
--- a/src/Components/Preview/HtmlViewer.tsx
+++ b/src/Components/Preview/HtmlViewer.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
export interface IHtmlViewerProps {
- filePath: string
+ filePath: string;
}
const HtmlViewer = ({ filePath }: IHtmlViewerProps): JSX.Element => {
- return (pdf viewer: {filePath}
);
-}
+ return pdf viewer: {filePath}
;
+};
export default HtmlViewer;
diff --git a/src/Components/Preview/ImageViewer.tsx b/src/Components/Preview/ImageViewer.tsx
index f2317bfb..3b1d5972 100644
--- a/src/Components/Preview/ImageViewer.tsx
+++ b/src/Components/Preview/ImageViewer.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
export interface IImageViewerProps {
- filePath: string
+ filePath: string;
}
const ImageViewer = ({ filePath }: IImageViewerProps): JSX.Element => {
- return (Image viewer: {filePath}
);
-}
+ return Image viewer: {filePath}
;
+};
export default ImageViewer;
diff --git a/src/Components/Preview/MarkdownViewer.tsx b/src/Components/Preview/MarkdownViewer.tsx
index df38a672..06bc12fa 100644
--- a/src/Components/Preview/MarkdownViewer.tsx
+++ b/src/Components/Preview/MarkdownViewer.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
export interface IMarkdownViewerProps {
- filePath: string
+ filePath: string;
}
const MarkdownViewer = ({ filePath }: IMarkdownViewerProps): JSX.Element => {
- return (Markdown viewer: {filePath}
);
-}
+ return Markdown viewer: {filePath}
;
+};
export default MarkdownViewer;
diff --git a/src/Components/Preview/PdfViewer.tsx b/src/Components/Preview/PdfViewer.tsx
index 254d4c34..c8878e49 100644
--- a/src/Components/Preview/PdfViewer.tsx
+++ b/src/Components/Preview/PdfViewer.tsx
@@ -1,36 +1,30 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React, { useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
-import { readAssetRequest } from '../../Store/ActionCreators/FilesActionCreators';
-import { IAppState } from '../../Store/Reducers';
+import { readAssetRequest } from "../../Store/ActionCreators/FilesActionCreators";
+import type { IAppState } from "../../Store/Reducers";
export interface IPdfViewerProps {
- filePath: string
+ filePath: string;
}
const PdfViewer = ({ filePath }: IPdfViewerProps): JSX.Element => {
- const dispatch = useDispatch();
- const content = useSelectorLoading...
;
+ if (!content) return Loading...
;
- return (
-
-
-
- );
-}
+ return (
+
+
+
+ );
+};
export default PdfViewer;
diff --git a/src/Components/Preview/PlaintextViewer.tsx b/src/Components/Preview/PlaintextViewer.tsx
index ce0e3701..993ba9aa 100644
--- a/src/Components/Preview/PlaintextViewer.tsx
+++ b/src/Components/Preview/PlaintextViewer.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
export interface IPlaintextViewerProps {
- filePath: string
+ filePath: string;
}
const PlaintextViewer = ({ filePath }: IPlaintextViewerProps): JSX.Element => {
- return (Plaintext viewer: {filePath}
);
-}
+ return Plaintext viewer: {filePath}
;
+};
export default PlaintextViewer;
diff --git a/src/Components/Preview/VideoViewer.tsx b/src/Components/Preview/VideoViewer.tsx
index 95878106..5b15f0ce 100644
--- a/src/Components/Preview/VideoViewer.tsx
+++ b/src/Components/Preview/VideoViewer.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
export interface IVideoViewerProps {
- filePath: string
+ filePath: string;
}
const VideoViewer = ({ filePath }: IVideoViewerProps): JSX.Element => {
- return (Video viewer: {filePath}
);
-}
+ return Video viewer: {filePath}
;
+};
export default VideoViewer;
diff --git a/src/Components/Preview/XlsxViewer.tsx b/src/Components/Preview/XlsxViewer.tsx
index 0f06596b..2e1d8bf0 100644
--- a/src/Components/Preview/XlsxViewer.tsx
+++ b/src/Components/Preview/XlsxViewer.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React from "react";
export interface IXlsxViewerProps {
- filePath: string
+ filePath: string;
}
const XlsxViewer = ({ filePath }: IXlsxViewerProps): JSX.Element => {
- return (Xlsx viewer: {filePath}
);
-}
+ return Xlsx viewer: {filePath}
;
+};
export default XlsxViewer;
diff --git a/src/Components/Preview/index.tsx b/src/Components/Preview/index.tsx
index f6913830..2f82f131 100644
--- a/src/Components/Preview/index.tsx
+++ b/src/Components/Preview/index.tsx
@@ -1,67 +1,73 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
// import xlsx from 'xlsx';
// import hljs from 'highlight.js';
// import { marked } from 'marked';
-import PdfViewer from './PdfViewer';
-import HtmlViewer from './HtmlViewer';
-import DocxViewer from './DocxViewer';
-import XlsxViewer from './XlsxViewer';
-import ImageViewer from './ImageViewer';
-import VideoViewer from './VideoViewer';
-import PlaintextViewer from './PlaintextViewer';
-import MarkdownViewer from './MarkdownViewer';
+import DocxViewer from "./DocxViewer";
+import HtmlViewer from "./HtmlViewer";
+import ImageViewer from "./ImageViewer";
+import MarkdownViewer from "./MarkdownViewer";
+import PdfViewer from "./PdfViewer";
+import PlaintextViewer from "./PlaintextViewer";
+import VideoViewer from "./VideoViewer";
+import XlsxViewer from "./XlsxViewer";
// import { readFileRequest, readAssetRequest, readBufferRequest } from '../../Store/ActionCreators/FilesActionCreators';
-import { IAppState } from '../../Store/Reducers';
-import { IFile } from '../../Typings/Store/files';
+import type { IAppState } from "../../Store/Reducers";
+import type { IFile } from "../../Typings/Store/files";
import {
- IMAGE_TYPES,
- VIDEO_TYPES,
- PLAINTEXT_TYPES,
- HTML_TYPES,
- MARKDOWN_TYPES,
- XLSX_TYPES,
- DOCX_TYPES,
- PDF_TYPES,
- extensionMatches,
-} from '../../Config/file.config';
+ DOCX_TYPES,
+ HTML_TYPES,
+ IMAGE_TYPES,
+ MARKDOWN_TYPES,
+ PDF_TYPES,
+ PLAINTEXT_TYPES,
+ VIDEO_TYPES,
+ XLSX_TYPES,
+ extensionMatches,
+} from "../../Config/file.config";
export interface IPreviewProps {
- filePath: string;
+ filePath: string;
}
const Preview = ({ filePath }: IPreviewProps): JSX.Element => {
- // const dispatch = useDispatch();
- const file = useSelector{JSON.stringify(file)}
;
- }
+ if (extensionMatches(PDF_TYPES, extension)) {
+ return {JSON.stringify(file)}
;
};
export default Preview;
diff --git a/src/Components/Prompt/ask.ts b/src/Components/Prompt/ask.ts
index 1912cb93..61237533 100644
--- a/src/Components/Prompt/ask.ts
+++ b/src/Components/Prompt/ask.ts
@@ -1,8 +1,8 @@
-import dragElement from '../Functions/dragElement';
+import dragElement from "../Functions/dragElement";
interface AskOptions {
- value: string;
- selectFileName?: boolean;
+ value: string;
+ selectFileName?: boolean;
}
/**
* Prompt a dialog to ask something
@@ -12,41 +12,41 @@ interface AskOptions {
* @returns {any}
*/
const Ask = async (title: string, message: string, options?: AskOptions): Promise
+ document.querySelectorAll(".prompt").forEach((el) => el.parentNode.removeChild(el));
+ const promptElement = document.createElement("div");
+ promptElement.className = "prompt";
+ promptElement.innerHTML = `
`;
- promptElement.querySelector('.prompt-exit-btn').addEventListener('click', () => promptElement.parentNode.removeChild(promptElement));
- promptElement.querySelector('.prompt-cancel').addEventListener('click', () => promptElement.parentNode.removeChild(promptElement));
+ promptElement.querySelector(".prompt-exit-btn").addEventListener("click", () => promptElement.parentNode.removeChild(promptElement));
+ promptElement.querySelector(".prompt-cancel").addEventListener("click", () => promptElement.parentNode.removeChild(promptElement));
- dragElement(promptElement.querySelector('.prompt-frame'), promptElement);
- document.body.appendChild(promptElement);
+ dragElement(promptElement.querySelector(".prompt-frame"), promptElement);
+ document.body.appendChild(promptElement);
- const promptInput = promptElement.querySelector('.prompt-input');
- if (options?.selectFileName ?? true) promptInput.setSelectionRange(0, promptInput.value.lastIndexOf('.'));
- else promptInput.setSelectionRange(promptInput.value.length, promptInput.value.length);
- promptInput.focus();
- return new Promise((resolve) => {
- promptElement.querySelector('.prompt-ok').addEventListener('click', () => {
- promptElement.parentNode.removeChild(promptElement);
- resolve(promptInput.value);
- });
- promptInput.onkeydown = (event: KeyboardEvent) => {
- if (event.key === 'Enter') {
- promptElement.parentNode.removeChild(promptElement);
- resolve(promptInput.value);
- }
- };
- });
+ const promptInput = promptElement.querySelector(".prompt-input");
+ if (options?.selectFileName ?? true) promptInput.setSelectionRange(0, promptInput.value.lastIndexOf("."));
+ else promptInput.setSelectionRange(promptInput.value.length, promptInput.value.length);
+ promptInput.focus();
+ return new Promise((resolve) => {
+ promptElement.querySelector(".prompt-ok").addEventListener("click", () => {
+ promptElement.parentNode.removeChild(promptElement);
+ resolve(promptInput.value);
+ });
+ promptInput.onkeydown = (event: KeyboardEvent) => {
+ if (event.key === "Enter") {
+ promptElement.parentNode.removeChild(promptElement);
+ resolve(promptInput.value);
+ }
+ };
+ });
};
export default Ask;
diff --git a/src/Components/Prompt/confirm.ts b/src/Components/Prompt/confirm.ts
index c8f47684..04031f43 100644
--- a/src/Components/Prompt/confirm.ts
+++ b/src/Components/Prompt/confirm.ts
@@ -1,44 +1,44 @@
-import dragElement from '../Functions/dragElement';
-import { pauseEnter } from '../Shortcut/shortcut';
+import dragElement from "../Functions/dragElement";
+import { pauseEnter } from "../Shortcut/shortcut";
-const ConfirmDialog = (title: string, message: string, defaultValue?: 'Yes' | 'No'): Promise => {
- return new Promise((resolve) => {
- document.querySelectorAll('.prompt').forEach((el) => el.parentNode.removeChild(el));
- const promptElement = document.createElement('div');
- promptElement.className = 'prompt';
- promptElement.innerHTML = `
${title}
- ${message ? `` : ''}
-
+ ${message ? `` : ""}
+
+const ConfirmDialog = (title: string, message: string, defaultValue?: "Yes" | "No"): Promise => {
+ return new Promise((resolve) => {
+ document.querySelectorAll(".prompt").forEach((el) => el.parentNode.removeChild(el));
+ const promptElement = document.createElement("div");
+ promptElement.className = "prompt";
+ promptElement.innerHTML = `
`;
- promptElement.querySelector('.prompt-exit-btn').addEventListener('click', () => {
- promptElement.parentNode.removeChild(promptElement);
- resolve(false);
- });
- promptElement.querySelector('.prompt-cancel').addEventListener('click', () => {
- promptElement.parentNode.removeChild(promptElement);
- resolve(false);
- });
- promptElement.querySelector('.prompt-ok').addEventListener('click', () => {
- promptElement.parentNode.removeChild(promptElement);
- resolve(true);
- });
- dragElement(promptElement.querySelector('.prompt-frame'), promptElement);
- const keydownhandler = (event: KeyboardEvent) => {
- if (event.key === 'Enter') {
- pauseEnter();
- promptElement.parentNode.removeChild(promptElement);
- document.removeEventListener('keydown', keydownhandler);
- resolve(defaultValue === 'Yes');
- }
- };
- document.addEventListener('keydown', keydownhandler);
- document.body.appendChild(promptElement);
- });
+ promptElement.querySelector(".prompt-exit-btn").addEventListener("click", () => {
+ promptElement.parentNode.removeChild(promptElement);
+ resolve(false);
+ });
+ promptElement.querySelector(".prompt-cancel").addEventListener("click", () => {
+ promptElement.parentNode.removeChild(promptElement);
+ resolve(false);
+ });
+ promptElement.querySelector(".prompt-ok").addEventListener("click", () => {
+ promptElement.parentNode.removeChild(promptElement);
+ resolve(true);
+ });
+ dragElement(promptElement.querySelector(".prompt-frame"), promptElement);
+ const keydownhandler = (event: KeyboardEvent) => {
+ if (event.key === "Enter") {
+ pauseEnter();
+ promptElement.parentNode.removeChild(promptElement);
+ document.removeEventListener("keydown", keydownhandler);
+ resolve(defaultValue === "Yes");
+ }
+ };
+ document.addEventListener("keydown", keydownhandler);
+ document.body.appendChild(promptElement);
+ });
};
export default ConfirmDialog;
diff --git a/src/Components/Prompt/error.ts b/src/Components/Prompt/error.ts
index 6a7dfec7..f95fc0a5 100644
--- a/src/Components/Prompt/error.ts
+++ b/src/Components/Prompt/error.ts
@@ -1,28 +1,28 @@
-import beep from '../Functions/beep';
-import dragElement from '../Functions/dragElement';
-import { ErrorLog } from '../Functions/log';
+import beep from "../Functions/beep";
+import dragElement from "../Functions/dragElement";
+import { ErrorLog } from "../Functions/log";
const PromptError = (title: string, message: string): void => {
- document.querySelectorAll('.prompt').forEach((el) => el.parentNode.removeChild(el));
- const promptElement = document.createElement('div');
- promptElement.className = 'prompt';
- promptElement.innerHTML = `
${title}
- ${message ? `` : ''}
+ ${message ? `` : ""}
+ document.querySelectorAll(".prompt").forEach((el) => el.parentNode.removeChild(el));
+ const promptElement = document.createElement("div");
+ promptElement.className = "prompt";
+ promptElement.innerHTML = `
`;
- promptElement.querySelector('.prompt-ok').addEventListener('click', () => promptElement.parentNode.removeChild(promptElement));
- document.body.appendChild(promptElement);
- beep();
- dragElement(promptElement.querySelector('.prompt-frame'), promptElement);
- ErrorLog(`[${title}] ${message}`);
- document.addEventListener('keydown', (e) => {
- if (e.key === 'Enter') {
- promptElement.parentNode.removeChild(promptElement);
- }
- });
+ promptElement.querySelector(".prompt-ok").addEventListener("click", () => promptElement.parentNode.removeChild(promptElement));
+ document.body.appendChild(promptElement);
+ beep();
+ dragElement(promptElement.querySelector(".prompt-frame"), promptElement);
+ ErrorLog(`[${title}] ${message}`);
+ document.addEventListener("keydown", (e) => {
+ if (e.key === "Enter") {
+ promptElement.parentNode.removeChild(promptElement);
+ }
+ });
};
export default PromptError;
diff --git a/src/Components/Properties/index.tsx b/src/Components/Properties/index.tsx
index 3abf6147..2f689de4 100644
--- a/src/Components/Properties/index.tsx
+++ b/src/Components/Properties/index.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react";
const Properties = () => (
-
${title}
- ${message ? `` : ''}
+ ${message ? `` : ""}
- } options - File/folder's properties
*/
const RenderProperties = (options: Record) => {
- const PROPERTIES_ELEMENT = document.querySelector('.properties');
- const PROPERTIES_BODY = PROPERTIES_ELEMENT.querySelector('.properties-body');
- PROPERTIES_ELEMENT.querySelector('.properties-heading-exit').addEventListener('click', () => {
- PROPERTIES_ELEMENT.style.animation = 'close-properties 1s forwards';
- });
- PROPERTIES_ELEMENT.style.animation = 'properties 1s forwards';
+ const PROPERTIES_ELEMENT = document.querySelector(".properties");
+ const PROPERTIES_BODY = PROPERTIES_ELEMENT.querySelector(".properties-body");
+ PROPERTIES_ELEMENT.querySelector(".properties-heading-exit").addEventListener("click", () => {
+ PROPERTIES_ELEMENT.style.animation = "close-properties 1s forwards";
+ });
+ PROPERTIES_ELEMENT.style.animation = "properties 1s forwards";
- let table: string;
- table = '';
- Object.keys(options).forEach((key) => {
- if (options[key] !== '') {
- const value =
- options[key] === 'calculating'
- ? `';
+ Object.keys(options).forEach((key) => {
+ if (options[key] !== "") {
+ const value =
+ options[key] === "calculating"
+ ? `
- Properties
- ×
+
);
export default Properties;
diff --git a/src/Components/Properties/properties.ts b/src/Components/Properties/properties.ts
index 09dfafb8..02f06e45 100644
--- a/src/Components/Properties/properties.ts
+++ b/src/Components/Properties/properties.ts
@@ -1,31 +1,31 @@
-import formatBytes from '../Functions/filesize';
-import DirectoryAPI from '../../Service/directory';
-import FileAPI from '../../Service/files';
+import DirectoryAPI from "../../Service/directory";
+import FileAPI from "../../Service/files";
+import formatBytes from "../Functions/filesize";
/**
* Render file/folder properties into HTML
* @param {Record
+
-
-
+ Properties
+ ×
+
+
| Calculating... | ` - : `${options[key]} | `; - table += `
| ${key} | : | ${value}
| Calculating... | ` + : `${options[key]} | `; + table += `
| ${key} | : | ${value}