Fixes #35 Display a carousel when multiple items are selected

static/public/css/style.css

@@ -236,20 +236,18 @@ body.media-selection #pch-navbar .navbar-nav .nav-item > a#pch-navbar-unselectAl
 }
 
 #pch-fullPageMedia .modal-body > .row > .col:first-child {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
+    overflow: hidden;
 }
 
 #pch-fullPageMedia .modal-body > .row > .col {
-    min-height: 100%;
+    height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
 }
 
 #pch-fullPageMedia #pch-fullPagePreviewContainer {
-    max-height: 100%;
-    max-width: 100%;
+    height: 100%;
+    width: 100%;
     display: inline-flex;
     flex: 1;
     justify-content: center;
@@ -272,12 +270,28 @@ body.media-selection #pch-navbar .navbar-nav .nav-item > a#pch-navbar-unselectAl
 #pch-fullPagePreview {
     max-height: 100%;
     max-width: 100%;
-    object-fit: contain;
-    list-style-type: none;
+    height: 100%;
     margin: auto;
     padding: 0;
 }
 
+#pch-fullPagePreview .carousel-inner {
+    display: inline-flex;
+    height: 100%;
+}
+
+#pch-fullPagePreview .carousel-item {
+    height: 100%;
+    align-content: center;
+}
+
+#pch-fullPagePreview .carousel-item img {
+    height: auto;
+    width: auto;
+    max-width: 100%;
+    max-height: 100%;
+}
+
 #pch-fullPageDetail {
     overflow: hidden;
     word-break: break-word;

static/public/js/uiMediaFullpage.js

@@ -292,21 +292,43 @@ $(() => {
     function displayImg(medias) {
         if (!Array.isArray(medias))
             medias = [ medias ];
+        if (medias.length > 1) {
+            $("#pch-fullPagePreview > a").removeClass("hidden");
+            $("#pch-fullPagePreview > .carousel-indicators").removeClass("hidden");
+        } else {
+            $("#pch-fullPagePreview > a").addClass("hidden");
+            $("#pch-fullPagePreview > .carousel-indicators").addClass("hidden");
+        }
         const containerSize = document.getElementById("pch-fullPageMedia").getBoundingClientRect();
-        return Promise.allSettled(medias.map(media => new Promise(ok => {
-            let li = document.createElement("li");
+        let container = document.querySelector("#pch-fullPagePreview .carousel-inner");
+        container.textContent = "";
+        let carouselIndicators = document.querySelector("#pch-fullPagePreview .carousel-indicators");
+        carouselIndicators.textContent = "";
+        return Promise.allSettled(medias.map((media, index) => new Promise(ok => {
+            let item = document.createElement("div");
+            item.className = "carousel-item";
             let img = document.createElement("img");
             let requestSize = media.resize(containerSize.width, containerSize.height);
             const requestSizeQuery = requestSize ? `&w=${requestSize.width}&h=${requestSize.height}` : "";
             img.src = `${media.thumbnail}?q=6${requestSizeQuery}`;
-            img.className = "img-fluid";
-            img.addEventListener("load", () => {
-                document.getElementById("pch-fullPagePreviewContainer").classList.remove("loading");
-                ok();
-            });
-            li.appendChild(img);
-            document.getElementById("pch-fullPagePreview").appendChild(li);
-        })));
+            img.addEventListener("load", () => ok());
+            item.appendChild(img);
+            container.appendChild(item);
+            let carouselIndicator = document.createElement("button");
+            carouselIndicator.type = "button";
+            carouselIndicator.dataset.bsTarget = "#pch-fullPagePreview";
+            carouselIndicator.dataset.bsSlideTo = index;
+            if (!index) {
+                item.classList.add("active");
+                carouselIndicator.classList.add("active");
+            }
+            carouselIndicators.appendChild(carouselIndicator);
+            ++index;
+        }))).finally(() => {
+            document.getElementById("pch-fullPagePreviewContainer").classList.remove("loading");
+            if (medias.length > 1)
+                $(container.parentElement).carousel();
+        });
     }
 
     function _displayMediaFullPage(media, fileName, imgUrl, metaData, downloadLink, fileIds, writeAccess) {
@@ -320,7 +342,8 @@ $(() => {
             document.getElementById("pch-fullPageDetail").appendChild(displayRemoveButton(fileIds));
         document.getElementById("pch-fullPageDetail").appendChild(displayTags(metaData?.fixedTags || [], metaData?.tags || [], writeAccess));
         document.getElementById("pch-fullPageDetail").appendChild(displayMetas(media, Object.assign({}, metaData || {}), !writeAccess));
-        document.getElementById("pch-fullPagePreview").textContent = "";
+        document.querySelector("#pch-fullPagePreview .carousel-inner").textContent = "";
+        $("#pch-fullPagePreview.carousel").carousel("dispose");
         return displayImg(media, imgUrl);
     }
 

templates/_fullPageMedia.js

@@ -12,7 +12,18 @@ module.exports = `
                 <div class="col col-12 col-xl-9">
                     <div id="pch-fullPagePreviewContainer" class="pch-image loading">
                         <div id="pch-fullPagePreviewSpinner" class="spinner"><span class="spinner-grow">&nbsp;</span></div>
-                        <ul id="pch-fullPagePreview" />
+                        <div id="pch-fullPagePreview" class="carousel slide" data-bs-ride="carousel" data-bs-interval="5000">
+                            <ol class="carousel-indicators"></ol>
+                            <div class="carousel-inner"></div>
+                            <a class="carousel-control-prev" href="#" role="button" data-bs-target="#pch-fullPagePreview" data-bs-slide="prev">
+                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+                                <span class="sr-only">Previous</span>
+                            </a>
+                            <a class="carousel-control-next" href="#" role="button" data-bs-target="#pch-fullPagePreview" data-bs-slide="next">
+                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
+                                <span class="sr-only">Next</span>
+                            </a>
+                        </div>
                     </div>
                 </div>
                 <div class="col col-12 col-xl-3"><div id="pch-fullPageDetail" class="container-fluid"></div></div>