Release v2.13.2

src/web/public/js/settings/media-library.js

@@ -12,6 +12,7 @@ const loadMoreWrap = gallery && gallery.querySelector('[data-media-gallery-load-
 const loadMoreButton = gallery && gallery.querySelector('[data-media-gallery-load-more]');
 const selectModeButton = gallery && gallery.querySelector('[data-media-gallery-select-mode]');
 const deleteSelectedButton = gallery && gallery.querySelector('[data-media-gallery-delete-selected]');
+const addMediaButton = gallery && gallery.querySelector('[data-media-library-add]');
 let galleryItems = gallery ? Array.from(gallery.querySelectorAll('[data-media-gallery-column]')) : [];
 let visibleRowLimit = 4;
 let galleryOffset = gallery ? Number(gallery.dataset.mediaGalleryOffset || galleryItems.length) : 0;
@@ -24,6 +25,7 @@ const uploadForm = document.querySelector('form[action="/media-library"]');
 const uploadInput = document.querySelector('[data-media-library-upload]');
 const uploadZone = document.querySelector('[data-media-library-upload-zone]');
 const uploadName = document.querySelector('[data-media-library-upload-name]');
+const uploadModal = document.getElementById('media-library-upload-modal');
 const cropModal = document.getElementById('media-library-crop-modal');
 const cropImage = cropModal && cropModal.querySelector('#media-library-crop-image');
 const cropApply = cropModal && cropModal.querySelector('[data-media-library-crop-apply]');
@@ -48,22 +50,28 @@ function showUploadMessage(message) {
   window.alert(message);
 }
 
-function showUploadModal() {
+function showModal(target) {
   if (window.pulseModal && typeof window.pulseModal.show === 'function') {
-    window.pulseModal.show(cropModal);
+    window.pulseModal.show(target);
   } else if (window.bootstrap && window.bootstrap.Modal) {
-    window.bootstrap.Modal.getOrCreateInstance(cropModal).show();
+    window.bootstrap.Modal.getOrCreateInstance(target).show();
   }
 }
 
-function hideUploadModal() {
+function hideModal(target) {
   if (window.pulseModal && typeof window.pulseModal.hide === 'function') {
-    window.pulseModal.hide(cropModal);
+    window.pulseModal.hide(target);
   } else if (window.bootstrap && window.bootstrap.Modal) {
-    window.bootstrap.Modal.getOrCreateInstance(cropModal).hide();
+    window.bootstrap.Modal.getOrCreateInstance(target).hide();
   }
 }
 
+if (addMediaButton && uploadModal) {
+  addMediaButton.addEventListener('click', function () {
+    showModal(uploadModal);
+  });
+}
+
 function clearCropper() {
   if (cropper) {
     cropper.destroy();
@@ -245,7 +253,7 @@ function setUploadFile(file, shouldCrop) {
     cropObjectUrl = URL.createObjectURL(file);
     cropImage.src = cropObjectUrl;
     if (cropFrame) cropFrame.classList.add('is-loading');
-    showUploadModal();
+    showModal(cropModal);
   }
 }
 
@@ -296,7 +304,7 @@ if (uploadZone) {
 if (cropApply) {
   cropApply.addEventListener('click', function () {
     if (!cropper || !cropSourceFile || !uploadInput) {
-      hideUploadModal();
+      hideModal(cropModal);
       return;
     }
     const outputType = cropSourceFile.type === 'image/jpeg' || cropSourceFile.type === 'image/webp' ? cropSourceFile.type : 'image/png';
@@ -309,7 +317,7 @@ if (cropApply) {
       const croppedFile = new File([blob], cropSourceFile.name.replace(/\.[^.]+$/, '') + extension, { type: outputType, lastModified: Date.now() });
       clearCropper();
       setUploadFile(croppedFile, false);
-      hideUploadModal();
+      hideModal(cropModal);
       submitUpload();
     }, outputType, 0.92);
   });
@@ -320,7 +328,7 @@ if (cropCancel) {
     clearCropper();
     if (uploadInput) uploadInput.value = '';
     if (uploadName) uploadName.textContent = 'No file selected';
-    hideUploadModal();
+    hideModal(cropModal);
   });
 }
 
@@ -406,7 +414,7 @@ function updateSearchResults() {
 function updateBulkDeleteActions() {
   if (selectModeButton) {
     selectModeButton.setAttribute('aria-pressed', selectionMode ? 'true' : 'false');
-    selectModeButton.textContent = selectionMode ? 'Done' : 'Select';
+    selectModeButton.textContent = selectionMode ? 'Cancel' : 'Select';
   }
   if (deleteSelectedButton) {
     deleteSelectedButton.hidden = !selectionMode;
@@ -415,7 +423,10 @@ function updateBulkDeleteActions() {
   galleryItems.forEach(function (item) {
     const id = String(item.dataset.mediaId || '');
     const card = item.querySelector('.media-gallery-card');
-    if (card) card.classList.toggle('media-gallery-card-selected', selectionMode && selectedAssetIds.has(id));
+    if (card) {
+      card.classList.toggle('media-gallery-card-selected', selectionMode && selectedAssetIds.has(id));
+      card.classList.toggle('media-gallery-card-selection-disabled', selectionMode && item.dataset.mediaUsed === 'true');
+    }
   });
 }
 
@@ -487,7 +498,10 @@ if (gallery) {
     if (!column || !gallery.contains(column)) return;
     event.preventDefault();
     event.stopPropagation();
-    if (column.dataset.mediaUsed === 'true') return;
+    if (column.dataset.mediaUsed === 'true') {
+      showUploadMessage('This media is in use and cannot be selected.');
+      return;
+    }
     const id = String(column.dataset.mediaId || '');
     if (!id) return;
     if (selectedAssetIds.has(id)) selectedAssetIds.delete(id);
@@ -519,7 +533,7 @@ if (loadMoreButton) {
 }
 updateSearchResults();
 
-function showModal() {
+function showPreviewModal() {
   if (window.pulseModal && typeof window.pulseModal.show === 'function') {
     window.pulseModal.show(modal);
   } else if (window.bootstrap && window.bootstrap.Modal) {
@@ -550,7 +564,7 @@ if (modal && body) {
       media.playsInline = true;
     }
     body.appendChild(media);
-    showModal();
+    showPreviewModal();
   });
 
   modal.addEventListener('hidden.bs.modal', function () {