diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e6f943..d6a8a2f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,41 @@ - Added translations and data attributes for almost all user-facing text - Extend i18n support: Add new translation keys for Download and Share modals +- **Slider Integration:** + - Added a slider UI (range input, label, and value display) directly above the gallery grid. + - The slider allows users to adjust the number of columns in the gallery from 1 to 6. +- **Dynamic Grid Updates:** + - The gallery grid’s CSS is updated in real time via the slider’s value by setting the grid-template-columns property. + - As the slider value changes, the layout instantly reflects the new column count. +- **Dynamic Image Resizing:** + - Introduced a helper function (getMaxImageHeight) that calculates the maximum image height based on the current column count. + - The max height of each image is updated immediately when the slider is adjusted to create a more dynamic display. +- **Image Caching:** + - Implemented an image caching mechanism using a global window.imageCache object. + - Images are cached on load (via an onload event) to prevent unnecessary reloading, improving performance. +- **Event Handling:** + - The slider’s event listener is set up to update both the gallery grid layout and the dimensions of the thumbnails dynamically. + - Share button event listeners remain attached for proper functionality across the updated gallery view. + +- **Input Validation & Security:** + - Used `filter_input()` to sanitize and validate incoming GET parameters (token, pass, page). + - Validated file system paths using `realpath()` and ensured the shared folder lies within `UPLOAD_DIR`. + - Escaped all dynamic outputs with `htmlspecialchars()` to prevent XSS. +- **Share Link Verification:** + - Loaded and validated share records from the JSON file. + - Handled expiration and password protection (with proper HTTP status codes for errors). +- **Pagination:** + - Implemented pagination by slicing the full file list into a limited number of files per page (default of 10). + - Calculated total pages and current page to create navigation links. +- **View Toggle (List vs. Gallery):** + - Added a toggle button that switches between a traditional list view and a gallery view. + - Maintained two separate view containers (`#listViewContainer` and `#galleryViewContainer`) to support this switching. +- **Gallery View with Image Caching:** + - For the gallery view, implemented a JavaScript function that creates a grid of image thumbnails. + - Each image uses a cache-busting query string on first load and caches its URL in a global `window.imageCache` for subsequent renders. +- **Persistent Pagination Controls:** + - Moved the pagination controls outside the individual view containers so that they remain visible regardless of the selected view. + --- ## Changes 4/12/2025 diff --git a/js/fileListView.js b/js/fileListView.js index ef2032f..3adfb23 100644 --- a/js/fileListView.js +++ b/js/fileListView.js @@ -90,6 +90,13 @@ function toggleAdvancedSearch() { renderFileTable(window.currentFolder); } +window.imageCache = window.imageCache || {}; +function cacheImage(imgElem, key) { + // Save the current src for future renders. + window.imageCache[key] = imgElem.src; +} +window.cacheImage = cacheImage; + /** * --- Fuse.js Search Helper --- * Uses Fuse.js to perform a fuzzy search on fileData. @@ -388,76 +395,142 @@ export function renderFileTable(folder, container) { /** * Similarly, update renderGalleryView to accept an optional container. */ -export function renderGalleryView(folder, container) { +// A helper to compute the max image height based on the current column count. +function getMaxImageHeight() { + // Use the slider value (default to 3 if undefined). + const columns = parseInt(window.galleryColumns || 3, 10); + // Simple scaling: fewer columns yield bigger images. + // For instance, if columns === 6, max-height is 150px, + // and if columns === 1, max-height could be 150 * 6 = 900px. + return 150 * (7 - columns); // adjust the multiplier as needed. + } + + export function renderGalleryView(folder, container) { const fileListContent = container || document.getElementById("fileList"); const searchTerm = (window.currentSearchTerm || "").toLowerCase(); - // Use Fuse.js search for gallery view as well. const filteredFiles = searchFiles(searchTerm); const folderPath = folder === "root" - ? "uploads/" - : "uploads/" + folder.split("/").map(encodeURIComponent).join("/") + "/"; - const gridStyle = "display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 10px;"; - let galleryHTML = `
`; + ? "uploads/" + : "uploads/" + folder.split("/").map(encodeURIComponent).join("/") + "/"; + + // Use the current global column value (default to 3). + const numColumns = window.galleryColumns || 3; + + // --- Insert slider controls --- + // Build the slider HTML. + const sliderHTML = ` +
+ + + ${numColumns} +
+ `; + + // Set up the grid container using the slider's value. + const gridStyle = `display: grid; grid-template-columns: repeat(${numColumns}, 1fr); gap: 10px; padding: 10px;`; + + // Build the gallery container HTML and include the slider above it. + let galleryHTML = sliderHTML; + galleryHTML += `
`; + filteredFiles.forEach((file) => { - let thumbnail; - if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) { - thumbnail = `${escapeHTML(file.name)}`; - } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(file.name)) { - thumbnail = `audiotrack`; + let thumbnail; + if (/\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(file.name)) { + const cacheKey = folderPath + encodeURIComponent(file.name); + if (window.imageCache && window.imageCache[cacheKey]) { + thumbnail = `${escapeHTML(file.name)}`; } else { - thumbnail = `insert_drive_file`; + const imageUrl = folderPath + encodeURIComponent(file.name) + "?t=" + new Date().getTime(); + thumbnail = `${escapeHTML(file.name)}`; } - let tagBadgesHTML = ""; - if (file.tags && file.tags.length > 0) { - tagBadgesHTML = `
`; - file.tags.forEach(tag => { - tagBadgesHTML += `${escapeHTML(tag.name)}`; - }); - tagBadgesHTML += `
`; - } - galleryHTML += `
-
- ${thumbnail} -
-
- ${escapeHTML(file.name)} - ${tagBadgesHTML} -
- - ${file.editable ? ` - - ` : ""} - - + } else if (/\.(mp3|wav|m4a|ogg|flac|aac|wma|opus)$/i.test(file.name)) { + thumbnail = `audiotrack`; + } else { + thumbnail = `insert_drive_file`; + } + + let tagBadgesHTML = ""; + if (file.tags && file.tags.length > 0) { + tagBadgesHTML = `
`; + file.tags.forEach(tag => { + tagBadgesHTML += `${escapeHTML(tag.name)}`; + }); + tagBadgesHTML += `
`; + } + + galleryHTML += ` +
+
+ ${thumbnail}
-
-
`; +
+ + ${escapeHTML(file.name)} + + ${tagBadgesHTML} +
+ + ${file.editable ? ` + + ` : ""} + + +
+
+
`; }); - galleryHTML += "
"; + galleryHTML += "
"; // End gallery container. + fileListContent.innerHTML = galleryHTML; createViewToggleButton(); updateFileActionButtons(); + + // Attach share button event listeners. document.querySelectorAll(".share-btn").forEach(btn => { - btn.addEventListener("click", e => { - e.stopPropagation(); - const fileName = btn.getAttribute("data-file"); - const file = fileData.find(f => f.name === fileName); - import('./filePreview.js').then(module => { - module.openShareModal(file, folder); - }); - }); + btn.addEventListener("click", e => { + e.stopPropagation(); + const fileName = btn.getAttribute("data-file"); + const file = fileData.find(f => f.name === fileName); + if (file) { + import('./filePreview.js').then(module => { + module.openShareModal(file, folder); + }); + } + }); }); -} + + // --- Slider Event Listener --- + const slider = document.getElementById("galleryColumnsSlider"); + if (slider) { + slider.addEventListener("input", function() { + const value = this.value; + // Update the slider display. + document.getElementById("galleryColumnsValue").textContent = value; + // Update global value so new renders use the correct value. + window.galleryColumns = value; + // Update the grid columns. + const galleryContainer = document.querySelector(".gallery-container"); + if (galleryContainer) { + galleryContainer.style.gridTemplateColumns = `repeat(${value}, 1fr)`; + } + // Compute the new max image height. + const newMaxHeight = getMaxImageHeight(); + document.querySelectorAll(".gallery-thumbnail").forEach(img => { + img.style.maxHeight = newMaxHeight + "px"; + }); + }); + } + } export function sortFiles(column, folder) { if (sortOrder.column === column) { diff --git a/js/i18n.js b/js/i18n.js index 3d22eea..d178325 100644 --- a/js/i18n.js +++ b/js/i18n.js @@ -236,7 +236,8 @@ const translations = { "please_save_recovery_code": "Please save this code securely. It will not be shown again and can only be used once.", "ok": "OK", "show": "Show", - "items_per_page": "items per page" + "items_per_page": "items per page", + "columns":"Columns" }, es: { "please_log_in_to_continue": "Por favor, inicie sesión para continuar.", @@ -463,7 +464,8 @@ const translations = { "save_permissions": "Guardar permisos", "your_recovery_code": "Su código de recuperación", "please_save_recovery_code": "Por favor, guarde este código de forma segura. No se mostrará de nuevo y solo podrá usarse una vez.", - "ok": "OK" + "ok": "OK", + "columns": "Columnas" }, fr: { "please_log_in_to_continue": "Veuillez vous connecter pour continuer.", @@ -690,7 +692,8 @@ const translations = { "save_permissions": "Enregistrer les permissions", "your_recovery_code": "Votre code de récupération", "please_save_recovery_code": "Veuillez sauvegarder ce code en toute sécurité. Il ne sera plus affiché et ne pourra être utilisé qu'une seule fois.", - "ok": "OK" + "ok": "OK", + "columns": "Colonnes" }, de: { "please_log_in_to_continue": "Bitte melden Sie sich an, um fortzufahren.", @@ -928,7 +931,8 @@ const translations = { "please_save_recovery_code": "Bitte speichern Sie diesen Code sicher. Er wird nicht erneut angezeigt und kann nur einmal verwendet werden.", "ok": "OK", "show": "Zeige", - "items_per_page": "elemente pro seite" + "items_per_page": "elemente pro seite", + "columns": "Spalten" } }; diff --git a/shareFolder.php b/shareFolder.php index 7d55383..f260f32 100644 --- a/shareFolder.php +++ b/shareFolder.php @@ -17,7 +17,7 @@ if (empty($token)) { exit; } -// Load share folder records. +// Load share folder records securely. $shareFile = META_DIR . "share_folder_links.json"; if (!file_exists($shareFile)) { http_response_code(404); @@ -139,7 +139,7 @@ $allFiles = array_values(array_filter(scandir($realFolderPath), function($item) })); sort($allFiles); -// Pagination variables. +// Pagination variables — limits the number of files (and thus images) per page. $itemsPerPage = 10; $totalFiles = count($allFiles); $totalPages = max(1, ceil($totalFiles / $itemsPerPage)); @@ -195,6 +195,20 @@ function formatBytes($bytes) { padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); } + /* Toggle button */ + .toggle-btn { + margin-bottom: 20px; + padding: 8px 16px; + background: #007BFF; + color: #fff; + border: none; + border-radius: 4px; + cursor: pointer; + } + .toggle-btn:hover { + background: #0056b3; + } + /* List view table styles */ table { width: 100%; border-collapse: collapse; @@ -220,13 +234,12 @@ function formatBytes($bytes) { a:hover { text-decoration: underline; } - /* Simple download icon style */ .download-icon { margin-left: 8px; font-weight: bold; color: #007BFF; } - /* Pagination styles */ + /* Pagination styles - placed outside the view containers. */ .pagination { text-align: center; margin-top: 20px; @@ -242,6 +255,24 @@ function formatBytes($bytes) { .pagination span.current { background: #0056b3; } + /* Gallery view styles */ + .shared-gallery-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 10px; + padding: 10px 0; + } + .shared-gallery-card { + border: 1px solid #ccc; + padding: 5px; + text-align: center; + } + .shared-gallery-card img { + max-width: 100%; + display: block; + margin: 0 auto; + } + /* Upload container */ .upload-container { margin-top: 30px; text-align: center; @@ -279,22 +310,27 @@ function formatBytes($bytes) {

Shared Folder:

- -

This folder is empty.

- - - - - - - - - - + + + +
+ +

This folder is empty.

+ +
FilenameSize
+ + + + + + + + - - -
FilenameSize
@@ -305,37 +341,41 @@ function formatBytes($bytes) {
- - + + + + + + - - + + ">Next + + Next + +
+

Upload File (50mb max size)

@@ -352,5 +392,66 @@ function formatBytes($bytes) {
© FileRise. All rights reserved.
+ + \ No newline at end of file diff --git a/uploadToSharedFolder.php b/uploadToSharedFolder.php index a7513df..d4fd49a 100644 --- a/uploadToSharedFolder.php +++ b/uploadToSharedFolder.php @@ -75,7 +75,7 @@ if ($fileUpload['size'] > $maxSize) { } // Define allowed file extensions. -$allowedExtensions = ['jpg','jpeg','png','gif','pdf','doc','docx','txt','xls','xlsx','ppt','pptx','mp4','webm','mp3']; +$allowedExtensions = ['jpg','jpeg','png','gif','pdf','doc','docx','txt','xls','xlsx','ppt','pptx','mp4','webm','mp3','mkv']; $uploadedName = basename($fileUpload['name']); $ext = strtolower(pathinfo($uploadedName, PATHINFO_EXTENSION)); if (!in_array($ext, $allowedExtensions)) {