Merge pull request #149 from kimlimjustin/feat/hover

feat: hover effect

src/Components/Constants/fileTypes.ts

@@ -0,0 +1,36 @@
+const IMAGE_TYPES = [
+	'.jpg',
+	'.png',
+	'.gif',
+	'.bmp',
+	'.jpeg',
+	'.jpe',
+	'.jif',
+	'.jfif',
+	'.jfi',
+	'.webp',
+	'.tiff',
+	'.tif',
+	'.ico',
+	'.svg',
+	'.webp',
+];
+const VIDEO_TYPES = [
+	'.mp4',
+	'.webm',
+	'.mpg',
+	'.mp2',
+	'.mpeg',
+	'.mpe',
+	'.mpv',
+	'.ocg',
+	'.m4p',
+	'.m4v',
+	'.avi',
+	'.wmv',
+	'.mov',
+	'.qt',
+	'.flv',
+	'.swf',
+];
+export { IMAGE_TYPES, VIDEO_TYPES };

src/Components/Files/File Preview/preview.ts

@@ -7,13 +7,10 @@ import { URLify, eURLify } from '../../Functions/urlify';
 import hljs from 'highlight.js';
 import marked from 'marked';
 import storage from 'electron-json-storage-sync';
+import { IMAGE_TYPES, VIDEO_TYPES } from '../../Constants/fileTypes';
 
 //prettier-ignore
 const FILE_TYPES_AVAILABLE_FOR_PREVIEW = ['.pdf', '.html', '.docx', '.htm', '.xlsx', '.xls', '.xlsb', 'xls', '.ods', '.fods', '.csv', '.txt', '.py', '.js', '.bat', '.css', '.c++', '.cpp', '.cc', '.c', '.diff', '.patch', '.go', '.java', '.json', '.php', '.ts', '.tsx', '.jsx', '.jpg', '.png', '.gif', '.bmp', '.jpeg', '.jpe', '.jif', '.jfif', '.jfi', '.webp', '.tiff', '.tif', '.ico', '.svg', '.webp', '.mp4', '.webm', '.mpg', '.mp2', '.mpeg', '.mpe', '.mpv', '.ocg', '.m4p', '.m4v', '.avi', '.wmv', '.mov', '.qt', '.flv', '.swf', '.md']
-//prettier-ignore
-const IMAGE_TYPES = ['.jpg', '.png', '.gif', '.bmp', '.jpeg', '.jpe', '.jif', '.jfif', '.jfi', '.webp', '.tiff', '.tif', '.ico', '.svg', '.webp']
-//prettier-ignore
-const VIDEO_TYPES = ['.mp4', '.webm', '.mpg', '.mp2', '.mpeg', '.mpe', '.mpv', '.ocg', '.m4p', '.m4v', '.avi', '.wmv', '.mov', '.qt', '.flv', '.swf']
 
 /**
  * Close the preview file

src/Components/Files/files.scss

@@ -53,6 +53,10 @@
 	}
 }
 
+.hovering .file-grid-filename {
+	-webkit-line-clamp: initial !important;
+}
+
 .detail-view {
 	display: inline-flex;
 	width: -webkit-fill-available;
@@ -132,3 +136,11 @@
 	background: var(--selected-grid-background) !important;
 	color: var(--selected-grid-color) !important;
 }
+
+.hover-preview {
+	position: fixed;
+	width: 300px;
+	img {
+		width: 100%;
+	}
+}

src/Components/Layout/hover.ts

@@ -0,0 +1,63 @@
+import path from 'path';
+import { IMAGE_TYPES } from '../Constants/fileTypes';
+
+/**
+ * Listen to mouse hovering
+ * @returns {void}
+ */
+const Hover = (): void => {
+	let timeOut: number;
+	let displayName: string;
+	let hoveringElement: HTMLElement;
+	const hoverPreviewElement = document.createElement('div');
+
+	document.querySelector('#workspace').addEventListener('mousemove', (e) => {
+		const x = (e as MouseEvent).clientX;
+		const y = (e as MouseEvent).clientY;
+		window.clearTimeout(timeOut);
+		hoverPreviewElement?.parentNode?.removeChild(hoverPreviewElement);
+
+		// Ignore workspace hovering
+		if ((e.target as HTMLElement).id === 'workspace') {
+			if (hoveringElement?.dataset?.path && displayName)
+				hoveringElement.querySelector('.file-grid-filename').innerHTML =
+					displayName;
+			return;
+		}
+		hoveringElement?.classList?.remove('hovering');
+
+		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');
+
+		if (target !== hoveringElement) {
+			displayName = undefined;
+		}
+		hoveringElement = target;
+
+		timeOut = window.setTimeout(() => {
+			displayName = filenameGrid.innerHTML;
+			filenameGrid.innerHTML = path.basename(
+				unescape(target.dataset.path)
+			);
+			target?.classList?.add('hovering');
+
+			if (
+				IMAGE_TYPES.indexOf(path.extname(filenameGrid.innerHTML)) !== -1
+			) {
+				hoverPreviewElement.innerHTML = `<img src="${unescape(
+					target.dataset.path
+				)}">`;
+				hoverPreviewElement.classList.add('hover-preview');
+				hoverPreviewElement.style.top = y + 'px';
+				hoverPreviewElement.style.left = x + 'px';
+				hoverPreviewElement.dataset.path = target.dataset.path;
+				document.body.appendChild(hoverPreviewElement);
+			}
+		}, 500);
+	});
+};
+
+export default Hover;

src/preload.ts

@@ -13,6 +13,7 @@ import { SelectListener } from './Components/Files/File Operation/select';
 import { Shortcut } from './Components/Shortcut/shortcut';
 import path from 'path';
 import fs from 'fs';
+import Hover from './Components/Layout/hover';
 
 const args = ipcRenderer.sendSync('args');
 if (args.listen && args.theme) {
@@ -68,4 +69,6 @@ document.addEventListener('DOMContentLoaded', async () => {
 	ContextMenu(document.getElementById('workspace'));
 	// Initialize shortcut
 	Shortcut();
+	// Initialize hover handler
+	Hover();
 });