Fuse.js Integration for Indexed Real-Time Searching & Dependencies added

2025-04-12 12:46:28 -04:00
parent 28ac23c2f6
commit d9f69d7917
5 changed files with 71 additions and 22 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # Changelog

+## Changes 4/12/2025
+
+- **Fuse.js Integration for Indexed Real-Time Searching**
+  - **Added Fuse.js Library:** Included Fuse.js via a CDN `<script>` tag to leverage its client‑side fuzzy search capabilities.
+  - **Created searchFiles Helper Function:** Introduced a new function that uses Fuse.js to build an index and perform fuzzy searches over file properties (file name, uploader, and nested tag names).
+  - **Transformed JSON Object to Array:** Updated the loadFileList() function to convert the returned file data into an array (if it isn’t already) and assign file names from JSON keys.
+  - **Updated Rendering Functions:** Modified both renderFileTable() and renderGalleryView() to use the searchFiles() helper instead of a simple in‑array .filter(). This ensures that every search—real‑time by user input—is powered by Fuse.js’s indexed search.
+  - **Enhanced Search Configuration:** Configured Fuse.js to search across multiple keys (file name, uploader, and tags) so that users can find files based on any of these properties.
+
+---
+
 ## Changes 4/11/2025

 - Fixed fileDragDrop issue from previous update.
--- a/README.md
+++ b/README.md
@@ -177,6 +177,26 @@ Areas where you can help: translations, bug fixes, UI improvements, or building

 ---

+## Dependencies
+
+### PHP Libraries
+
+- **[jumbojett/openid-connect-php](https://github.com/jumbojett/OpenID-Connect-PHP)** (v^1.0.0)
+- **[phpseclib/phpseclib](https://github.com/phpseclib/phpseclib)** (v~3.0.7)
+- **[robthree/twofactorauth](https://github.com/RobThree/TwoFactorAuth)** (v^3.0)
+- **[endroid/qr-code](https://github.com/endroid/qr-code)** (v^5.0)
+
+### Client-Side Libraries
+
+- **Google Fonts** – [Roboto](https://fonts.google.com/specimen/Roboto) and **Material Icons** ([Google Material Icons](https://fonts.google.com/icons))
+- **[Bootstrap](https://getbootstrap.com/)** (v4.5.2)
+- **[CodeMirror](https://codemirror.net/)** (v5.65.5) – For code editing functionality.
+- **[Resumable.js](http://www.resumablejs.com/)** (v1.1.0) – For file uploads.
+- **[DOMPurify](https://github.com/cure53/DOMPurify)** (v2.4.0) – For sanitizing HTML.
+- **[Fuse.js](https://fusejs.io/)** (v6.6.2) – For indexed, fuzzy searching.
+
+---
+
 ## License

 This project is open-source under the MIT License. That means you’re free to use, modify, and distribute **FileRise**, with attribution. We hope you find it useful and contribute back!
--- a/index.html
+++ b/index.html
@@ -41,6 +41,9 @@
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.4.0/purify.min.js"
    integrity="sha384-Tsl3d5pUAO7a13enIvSsL3O0/95nsthPJiPto5NtLuY8w3+LbZOpr3Fl2MNmrh1E"
    crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.min.js"
+     integrity="sha384-zPE55eyESN+FxCWGEnlNxGyAPJud6IZ6TtJmXb56OFRGhxZPN4akj9rjA3gw5Qqa" 
+     crossorigin="anonymous"></script>
  <link rel="stylesheet" href="css/styles.css" />
 </head>

--- a/js/fileListView.js
+++ b/js/fileListView.js
@@ -33,11 +33,8 @@ window.viewMode = localStorage.getItem("viewMode") || "table"; // "table" or "ga
 */
 function parseSizeToBytes(sizeStr) {
    if (!sizeStr) return 0;
-    // Remove any whitespace
    let s = sizeStr.trim();
-    // Extract the numerical part.
    let value = parseFloat(s);
-    // Determine if there is a unit. Convert the unit to uppercase for easier matching.
    let upper = s.toUpperCase();
    if (upper.includes("KB")) {
        value *= 1024;
@@ -50,7 +47,7 @@ function parseSizeToBytes(sizeStr) {
 }

 /**
- * Format the total bytes as a human-readable string, choosing an appropriate unit.
+ * Format the total bytes as a human-readable string.
 */
 function formatSize(totalBytes) {
    if (totalBytes < 1024) {
@@ -66,18 +63,33 @@ function formatSize(totalBytes) {

 /**
 * Build the folder summary HTML using the filtered file list.
- * This function sums the file sizes in bytes correctly, then formats the total.
 */
 function buildFolderSummary(filteredFiles) {
    const totalFiles = filteredFiles.length;
    const totalBytes = filteredFiles.reduce((sum, file) => {
-        // file.size might be something like "456.9KB" or just "1024".
        return sum + parseSizeToBytes(file.size);
    }, 0);
    const sizeStr = formatSize(totalBytes);
    return `<strong>Total Files:</strong> ${totalFiles} &nbsp;|&nbsp; <strong>Total Size:</strong> ${sizeStr}`;
 }

+/**
+ * --- Fuse.js Search Helper ---
+ * Uses Fuse.js to perform a fuzzy search on fileData.
+ * Searches over file name, uploader, and tag names.
+ */
+function searchFiles(searchTerm) {
+    if (!searchTerm) return fileData;
+    // Define search options – adjust threshold as needed.
+    const options = {
+        keys: ['name', 'uploader', 'tags.name'],
+        threshold: 0.3
+    };
+    const fuse = new Fuse(fileData, options);
+    // Fuse returns an array of results where each result has an "item" property.
+    return fuse.search(searchTerm).map(result => result.item);
+}
+
 /**
 * --- VIEW MODE TOGGLE BUTTON & Helpers ---
 */
@@ -134,7 +146,15 @@ export function loadFileList(folderParam) {
        })
        .then(data => {
            fileListContainer.innerHTML = ""; // Clear loading message.
-            if (data.files && data.files.length > 0) {
+            if (data.files && Object.keys(data.files).length > 0) {
+                // In case the returned "files" is an object instead of an array, transform it.
+                if (!Array.isArray(data.files)) {
+                    data.files = Object.entries(data.files).map(([name, meta]) => {
+                        meta.name = name;
+                        return meta;
+                    });
+                }
+                // Process each file – add computed properties.
                data.files = data.files.map(file => {
                    file.fullName = (file.path || file.name).trim().toLowerCase();
                    file.editable = canEditFile(file.name);
@@ -146,7 +166,7 @@ export function loadFileList(folderParam) {
                });
                fileData = data.files;

-                // Update the file list actions area without removing existing buttons.
+                // Update file summary.
                const actionsContainer = document.getElementById("fileListActions");
                if (actionsContainer) {
                    let summaryElem = document.getElementById("fileSummary");
@@ -164,7 +184,7 @@ export function loadFileList(folderParam) {
                    summaryElem.innerHTML = buildFolderSummary(fileData);
                }

-                // Render the view normally.
+                // Render view based on the view mode.
                if (window.viewMode === "gallery") {
                    renderGalleryView(folder);
                } else {
@@ -193,8 +213,7 @@ export function loadFileList(folderParam) {
 }

 /**
- * Update renderFileTable so that it writes its content into the provided container.
- * If no container is provided, it defaults to the element with id "fileList".
+ * Update renderFileTable so it writes its content into the provided container.
 */
 export function renderFileTable(folder, container) {
    const fileListContent = container || document.getElementById("fileList");
@@ -202,11 +221,9 @@ export function renderFileTable(folder, container) {
    const itemsPerPageSetting = parseInt(localStorage.getItem("itemsPerPage") || "10", 10);
    let currentPage = window.currentPage || 1;

-    const filteredFiles = fileData.filter(file => {
-        const nameMatch = file.name.toLowerCase().includes(searchTerm);
-        const tagMatch = file.tags && file.tags.some(tag => tag.name.toLowerCase().includes(searchTerm));
-        return nameMatch || tagMatch;
-    });
+    // Use Fuse.js search via our helper function.
+    const filteredFiles = searchFiles(searchTerm);
+    
    const totalFiles = filteredFiles.length;
    const totalPages = Math.ceil(totalFiles / itemsPerPageSetting);
    if (currentPage > totalPages) {
@@ -257,7 +274,7 @@ export function renderFileTable(folder, container) {

    createViewToggleButton();

-    // Setup event listeners as before...
+    // Setup event listeners.
    const newSearchInput = document.getElementById("searchInput");
    if (newSearchInput) {
        newSearchInput.addEventListener("input", debounce(function () {
@@ -317,10 +334,8 @@ export function renderFileTable(folder, container) {
 export function renderGalleryView(folder, container) {
    const fileListContent = container || document.getElementById("fileList");
    const searchTerm = (window.currentSearchTerm || "").toLowerCase();
-    const filteredFiles = fileData.filter(file => {
-        return file.name.toLowerCase().includes(searchTerm) ||
-            (file.tags && file.tags.some(tag => tag.name.toLowerCase().includes(searchTerm)));
-    });
+    // Use Fuse.js search for gallery view as well.
+    const filteredFiles = searchFiles(searchTerm);
    const folderPath = folder === "root"
        ? "uploads/"
        : "uploads/" + folder.split("/").map(encodeURIComponent).join("/") + "/";
--- a/js/i18n.js
+++ b/js/i18n.js
@@ -5,7 +5,7 @@ const translations = {
      "no_files_selected": "No files selected.",
      "confirm_delete_files": "Are you sure you want to delete {count} selected file(s)?",
      "element_not_found": "Element with id \"{id}\" not found.",
-      "search_placeholder": "Search files or tag...",
+      "search_placeholder": "Search files, tags, or uploader...",
      "file_name": "File Name",
      "date_modified": "Date Modified",
      "upload_date": "Upload Date",