Refs #35 Image full page preview

static/public/css/style.css

@@ -239,6 +239,7 @@ body.filter-active #pch-navbar .bt-filter-inactive {
 
 #pch-fullPageMedia #pch-fullPagePreviewContainer {
     max-height: 100%;
+    max-width: 100%;
     display: inline-flex;
     flex: 1;
     justify-content: center;
@@ -262,6 +263,9 @@ body.filter-active #pch-navbar .bt-filter-inactive {
     max-height: 100%;
     max-width: 100%;
     object-fit: contain;
+    list-style-type: none;
+    margin: auto;
+    padding: 0;
 }
 
 #pch-fullPageDetail {

static/public/js/uiMediaFullpage.js

@@ -289,21 +289,39 @@ $(() => {
         return bt;
     }
 
+    function displayImg(medias) {
+        if (!Array.isArray(medias))
+            medias = [ medias ];
+        const containerSize = document.getElementById("pch-fullPageMedia").getBoundingClientRect();
+        return Promise.allSettled(medias.map(media => new Promise(ok => {
+            let li = document.createElement("li");
+            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);
+        })));
+    }
+
     function _displayMediaFullPage(media, fileName, imgUrl, metaData, downloadLink, fileIds, writeAccess) {
-        return new Promise(ok => {
-            document.getElementById("pch-fullPagePreviewContainer").classList.add("loading");
-            document.getElementById("pch-fullPageMedia-title").innerText = fileName;
-            document.getElementById("pch-fullPagePreview").onceLoaded = ok;
-            document.getElementById("pch-fullPagePreview").src = imgUrl ?? "";
+        document.getElementById("pch-fullPagePreviewContainer").classList.add("loading");
+        document.getElementById("pch-fullPageMedia-title").innerText = fileName;
 
-            document.getElementById("pch-fullPageDetail").innerText = "";
-            if (downloadLink)
-                document.getElementById("pch-fullPageDetail").appendChild(displayDownloadBt(downloadLink));
-            if (fileIds && writeAccess)
-                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-fullPageDetail").innerText = "";
+        if (downloadLink)
+            document.getElementById("pch-fullPageDetail").appendChild(displayDownloadBt(downloadLink));
+        if (fileIds && writeAccess)
+            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 = "";
+        return displayImg(media, imgUrl);
     }
 
     function LoadPreviousMedia() {
@@ -348,10 +366,6 @@ $(() => {
         document.body.classList.add("overlay-visible");
         if (!mediaItem)
             return _displayMediaFullPage(null, "Error", null, {}, null, null, false);
-        let containerSize = document.getElementById("pch-fullPageMedia").getBoundingClientRect();
-        let requestSize = mediaItem.resize(containerSize.width, containerSize.height);
-        document.getElementById("pch-fullPagePreview").parentNode.style.maxWidth = "100%";
-        document.getElementById("pch-fullPagePreview").parentNode.style.maxHeight = "100%";
         let meta = {
             ...mediaItem.meta,
             date: { type: 'date', value: mediaItem.getDate() } || undefined,
@@ -361,8 +375,7 @@ $(() => {
         };
         if (document.location.hash != `#${mediaItem.fixedSum}`)
             history.pushState({}, '', `#${mediaItem.fixedSum}`);
-        const requestSizeQuery = requestSize ? `&w=${requestSize.width}&h=${requestSize.height}` : "";
-        return _displayMediaFullPage(mediaItem, mediaItem.fileName, `${mediaItem.thumbnail}?q=6${requestSizeQuery}`, meta, `${mediaItem.original}?trim`, [mediaItem.fixedSum], mediaItem.writeAccess);
+        return _displayMediaFullPage(mediaItem, mediaItem.fileName, "", meta, `${mediaItem.original}?trim`, [mediaItem.fixedSum], mediaItem.writeAccess);
     }
 
     function aggregateMetas(medias) {
@@ -388,8 +401,6 @@ $(() => {
         document.getElementById("pch-fullPageMedia").classList.add("multiple");
         document.Title.pushTitle(title);
         document.body.classList.add("overlay-visible");
-        document.getElementById("pch-fullPagePreview").parentNode.style.maxWidth = "100%";
-        document.getElementById("pch-fullPagePreview").parentNode.style.maxHeight = "100%";
         let meta = {
             ...aggregateMetas(medias),
             fixedTags: medias.reduce((acc, x) => { x.fixedTags.forEach(tag => acc.add(tag)) ; return acc; }, new Set()),
@@ -400,12 +411,6 @@ $(() => {
 
     document.getElementById("pch-fullPageMedia-closeBt")
         .addEventListener("click", () => CloseFullpageMedia());
-    document.getElementById("pch-fullPagePreview").addEventListener("load", () => {
-        document.getElementById("pch-fullPagePreviewContainer").classList.remove("loading");
-        let domItem = document.getElementById("pch-fullPagePreview");
-        domItem.onceLoaded && domItem.onceLoaded();
-        domItem.onceLoaded = null;
-    });
     document.addEventListener("keydown", evt => {
         if (!fullPageMediaDisplayed)
             return;

templates/_fullPageMedia.js

@@ -12,7 +12,7 @@ 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>
-                        <img id="pch-fullPagePreview" class="img-fluid"/>
+                        <ul id="pch-fullPagePreview" />
                     </div>
                 </div>
                 <div class="col col-12 col-xl-3"><div id="pch-fullPageDetail" class="container-fluid"></div></div>