`;
- file.tags.forEach(tag => {
- tagBadgesHTML += `${escapeHTML(tag.name)}`;
- });
- tagBadgesHTML += `
`;
- }
-
- galleryHTML += `
+
+ let tagBadgesHTML = "";
+ if (file.tags && file.tags.length > 0) {
+ tagBadgesHTML = ``;
+ file.tags.forEach(tag => {
+ tagBadgesHTML += `${escapeHTML(tag.name)}`;
+ });
+ tagBadgesHTML += `
`;
+ }
+
+ galleryHTML += `
${thumbnail}
-
- ${escapeHTML(file.name)}
-
+ ${escapeHTML(file.name)}
${tagBadgesHTML}
"; // End gallery container.
-
+
fileListContent.innerHTML = galleryHTML;
- createViewToggleButton();
- updateFileActionButtons();
-
+
+ // Re-apply slider constraints for the newly rendered slider.
+ updateSliderConstraints();
+
// 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);
- if (file) {
- 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";
+ slider.addEventListener("input", function () {
+ const value = this.value;
+ document.getElementById("galleryColumnsValue").textContent = value;
+ window.galleryColumns = value;
+ const galleryContainer = document.querySelector(".gallery-container");
+ if (galleryContainer) {
+ galleryContainer.style.gridTemplateColumns = `repeat(${value}, 1fr)`;
+ }
+ const newMaxHeight = getMaxImageHeight();
+ document.querySelectorAll(".gallery-thumbnail").forEach(img => {
+ img.style.maxHeight = newMaxHeight + "px";
+ });
});
- });
}
- }
+}
+
+// Responsive slider constraints based on screen size.
+function updateSliderConstraints() {
+ const slider = document.getElementById("galleryColumnsSlider");
+ if (!slider) return;
+
+ const width = window.innerWidth;
+ let min = 1, max = 6; // default for larger screens
+
+ if (width < 600) { // phone
+ max = 2;
+ } else if (width < 1024) { // medium screens
+ max = 3;
+ }
+
+ // Adjust current slider value if it exceeds new max.
+ let currentVal = parseInt(slider.value, 10);
+ if (currentVal > max) {
+ currentVal = max;
+ slider.value = max;
+ }
+
+ slider.min = min;
+ slider.max = max;
+ document.getElementById("galleryColumnsValue").textContent = currentVal;
+
+ // Update grid columns with new slider value.
+ const galleryContainer = document.querySelector(".gallery-container");
+ if (galleryContainer) {
+ galleryContainer.style.gridTemplateColumns = `repeat(${currentVal}, 1fr)`;
+ }
+}
+
+window.addEventListener('load', updateSliderConstraints);
+window.addEventListener('resize', updateSliderConstraints);
export function sortFiles(column, folder) {
if (sortOrder.column === column) {