webupdate

website/admin/js/settings.js

@@ -1,28 +1,41 @@
 // Settings Management JavaScript
 
 let currentSettings = {};
-let mediaLibraryModal;
+let settingsMediaLibrary = null;
 let currentMediaTarget = null;
-let selectedMediaUrl = null;
-let allMedia = [];
+
+// Initialize settings media library
+function initSettingsMediaLibrary() {
+  if (typeof MediaLibrary !== "undefined" && !settingsMediaLibrary) {
+    settingsMediaLibrary = new MediaLibrary({
+      selectMode: true,
+      multiple: false,
+      onSelect: function (media) {
+        if (!currentMediaTarget) return;
+
+        // Set the selected URL to the target field
+        document.getElementById(currentMediaTarget).value = media.path;
+
+        // Update preview
+        if (currentMediaTarget === "siteLogo") {
+          document.getElementById(
+            "logoPreview"
+          ).innerHTML = `<img src="${media.path}" alt="Logo" />`;
+        } else if (currentMediaTarget === "siteFavicon") {
+          document.getElementById(
+            "faviconPreview"
+          ).innerHTML = `<img src="${media.path}" alt="Favicon" />`;
+        }
+
+        showToast("Image selected successfully", "success");
+      },
+    });
+  }
+}
 
 document.addEventListener("DOMContentLoaded", function () {
-  // Initialize modal
-  const modalElement = document.getElementById("mediaLibraryModal");
-  if (modalElement) {
-    mediaLibraryModal = new bootstrap.Modal(modalElement);
-  }
-
-  // Setup media search
-  const searchInput = document.getElementById("mediaSearch");
-  if (searchInput) {
-    searchInput.addEventListener("input", filterMedia);
-  }
-
-  const typeFilter = document.getElementById("mediaTypeFilter");
-  if (typeFilter) {
-    typeFilter.addEventListener("change", filterMedia);
-  }
+  // Initialize media library
+  initSettingsMediaLibrary();
 
   // Load saved theme
   loadTheme();
@@ -251,153 +264,25 @@ function populateSettings() {
 }
 
 // Media Library Functions - Make global for onclick handlers
-window.openMediaLibrary = async function (targetField) {
+window.openMediaLibrary = function (targetField) {
   console.log("openMediaLibrary called for:", targetField);
   currentMediaTarget = targetField;
-  selectedMediaUrl = null;
 
-  // Load media files
-  try {
-    const response = await fetch("/api/admin/uploads", {
-      credentials: "include",
-    });
-    const data = await response.json();
-    if (data.success) {
-      allMedia = data.files || [];
-      renderMediaGrid(allMedia);
-      mediaLibraryModal.show();
-    } else {
-      showToast(data.message || "Failed to load media library", "error");
-    }
-  } catch (error) {
-    console.error("Failed to load media library:", error);
-    showToast("Failed to load media library. Please try again.", "error");
+  // Initialize if not already
+  initSettingsMediaLibrary();
+
+  if (settingsMediaLibrary) {
+    settingsMediaLibrary.open();
+  } else {
+    showToast("Media library not available", "error");
   }
 };
 
-function renderMediaGrid(media) {
-  const grid = document.getElementById("mediaGrid");
-  if (media.length === 0) {
-    grid.innerHTML = `
-      <div class="text-center py-5" style="grid-column: 1/-1;">
-        <i class="bi bi-inbox fs-1 text-muted"></i>
-        <p class="text-muted">No media files found</p>
-      </div>
-    `;
-    return;
-  }
-
-  grid.innerHTML = media
-    .map(
-      (file) => `
-    <div class="media-item" data-url="${
-      file.path
-    }" style="cursor: pointer; border: 3px solid transparent; border-radius: 8px; overflow: hidden; transition: all 0.3s;">
-      ${
-        file.mimetype?.startsWith("image/")
-          ? `<img src="${file.path}" alt="${
-              file.originalName || file.filename
-            }" style="width: 100%; height: 150px; object-fit: cover;" />`
-          : `<div style="width: 100%; height: 150px; background: #f8f9fa; display: flex; align-items: center; justify-content: center;">
-              <i class="bi bi-file-earmark fs-1 text-muted"></i>
-            </div>`
-      }
-      <div style="padding: 8px; font-size: 12px; text-align: center; background: white;">
-        <div style="font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${
-          file.originalName || file.filename
-        }</div>
-        <div style="color: #6c757d; font-size: 11px;">${formatFileSize(
-          file.size
-        )}</div>
-      </div>
-    </div>
-  `
-    )
-    .join("");
-
-  // Add click listeners to all media items
-  document.querySelectorAll(".media-item").forEach((item) => {
-    item.addEventListener("click", function () {
-      selectMedia(this.dataset.url);
-    });
-  });
-}
-
-function selectMedia(url) {
-  // Remove previous selection
-  document.querySelectorAll(".media-item").forEach((el) => {
-    el.style.border = "3px solid transparent";
-  });
-
-  // Mark current selection - find the clicked item
-  document.querySelectorAll(".media-item").forEach((el) => {
-    if (el.dataset.url === url) {
-      el.style.border = "3px solid #667eea";
-      el.style.background = "#f8f9fa";
-    }
-  });
-
-  selectedMediaUrl = url;
-}
-
 window.selectMediaFile = function () {
-  if (!selectedMediaUrl) {
-    window.showToast("Please select a media file", "warning");
-    return;
-  }
-
-  // Set the selected URL to the target field
-  document.getElementById(currentMediaTarget).value = selectedMediaUrl;
-
-  // Update preview
-  if (currentMediaTarget === "siteLogo") {
-    document.getElementById(
-      "logoPreview"
-    ).innerHTML = `<img src="${selectedMediaUrl}" alt="Logo" />`;
-  } else if (currentMediaTarget === "siteFavicon") {
-    document.getElementById(
-      "faviconPreview"
-    ).innerHTML = `<img src="${selectedMediaUrl}" alt="Favicon" />`;
-  }
-
-  // Close modal
-  mediaLibraryModal.hide();
-  window.showToast("Image selected successfully", "success");
+  // This is now handled by the MediaLibrary component's onSelect callback
+  showToast("Please click on an image to select it", "info");
 };
 
-function filterMedia() {
-  const searchTerm = document.getElementById("mediaSearch").value.toLowerCase();
-  const typeFilter = document.getElementById("mediaTypeFilter").value;
-
-  let filtered = allMedia;
-
-  // Filter by search term
-  if (searchTerm) {
-    filtered = filtered.filter(
-      (file) =>
-        file.filename.toLowerCase().includes(searchTerm) ||
-        file.originalName?.toLowerCase().includes(searchTerm)
-    );
-  }
-
-  // Filter by type
-  if (typeFilter !== "all") {
-    filtered = filtered.filter((file) => {
-      if (typeFilter === "image") return file.mimetype?.startsWith("image/");
-      if (typeFilter === "video") return file.mimetype?.startsWith("video/");
-      if (typeFilter === "document")
-        return (
-          file.mimetype?.includes("pdf") ||
-          file.mimetype?.includes("document") ||
-          file.mimetype?.includes("text")
-        );
-      return true;
-    });
-  }
-
-  renderMediaGrid(filtered);
-}
-
 function formatFileSize(bytes) {
   if (!bytes) return "0 B";
   const k = 1024;