gallery frontend functionality + token in url to get images + thumbna…

…il resize only width keep aspect ratio

api/app/application/files.js

@@ -65,7 +65,7 @@ export async function route(exp) {
     }
   );
   exp.get(
-    "/files/file/:filename",
+    "/files/file/:token/:filename",
     authenticateToken,
     async function (req, res) {
       const file = `/data/fileuploads/${req.user.name}/${req.params.filename}`;
@@ -161,7 +161,10 @@ async function processFile(dir, filename) {
 async function imageThumbs(dir, filename) {
   sharp(dir + filename)
     .webp()
-    .resize(150, 100)
+    .resize({
+      fit: sharp.fit.contain,
+      width: 200
+    })
     .toFile(dir + "thumbnails/" + filename + "0.webp");
 }
 

web/www/assets/js/modules/gallery.js

@@ -5,41 +5,64 @@
 
 import { getFileNames } from "../api.js";
 import { rtk } from "../tasks.js";
+import { prompt } from "../modules/prompt.js";
 
 export async function gallery(endpoint) {
   const response = await getFileNames();
   const files = response.data;
   let container = document.createElement("div");
-  container.className = "gallery";
+  container.className = "gallery grid";
 
-  let workingRow = row(container);
+  let gridSizer = document.createElement("div");
+  gridSizer.className = 'grid-sizer';
+  container.appendChild(gridSizer);
 
   files.forEach(async (file) => {
     let thumb = document.createElement("img");
     thumb.className = "thumbnail";
     const tk = await rtk();
     thumb.src = `${endpoint}/thumb/${tk}/${file}/0`;
-    workingRow = row(container, workingRow);
-    workingRow.appendChild(thumb);
+    let thumbContainer = document.createElement('div');
+    thumbContainer.className = "grid-item";
+    thumbContainer.appendChild(thumb);
+    container.appendChild(thumbContainer);
+
+    thumb.onclick = function(item) {
+      check_detail(endpoint, item)
+    }
   });
 
+
+  let loadMsnry = setInterval(() => {
+    var grid = document.querySelector('.grid');
+    var msnry = new Masonry( grid, {
+      itemSelector: '.grid-item',
+      columnWidth: '.grid-sizer',
+      horizontalOrder: true,
+      gutter: 10
+    });
+
+    imagesLoaded( grid ).on( 'progress', function() {
+      msnry.layout();
+      clearInterval(loadMsnry);
+
+    });
+  }, 200);
+
+
   return container;
 }
 
-function row(container, currentRow) {
-  currentRow = currentRow || null;
-  if (!currentRow) {
-    currentRow = document.createElement("div");
-    currentRow.className = "row";
-    container.appendChild(currentRow);
-  }
-  console.log(container.style.width);
-  const limit = (container.style.width / 180).toFixed(0); // the number here is the total width of the thumbnail + padding (default image width is 150)
-  console.log("Row Limit: " + limit); // debug !!!
-  if (currentRow.children.length >= limit) {
-    currentRow = document.createElement("div");
-    currentRow.className = "row";
-    container.appendChild(currentRow);
-  }
-  return currentRow;
-}
+
+async function check_detail(endpoint, item) {
+  let fileName = item.path[0].src.split('/')[6];
+  const tk = await rtk();
+
+  let fileDetail = `${endpoint}/file/${tk}/${fileName}`;
+
+  let element = document.createElement("img");
+  element.src = fileDetail;
+
+  prompt(fileName, "warn", element);
+
+}

web/www/assets/styles.css

@@ -760,6 +760,9 @@ body .body-section {
   padding: 20px;
   border-radius: 25px;
 }
+.prompt img {
+ max-height: 70vh; 
+}
 .prompt-text {
   color: var(--lighter-blue5);
   font-size: 16px;
@@ -1233,10 +1236,29 @@ p {
 /* Gallery */
 
 .gallery {
-  width: 500px;
-  height: 500px;
+  /* width: 500px; */
+  /* height: 500px; */
+  width: 650px;
+}
+
+.grid-sizer,
+.grid-item {
+  width: 200px;
 }
 
+.grid-item { 
+  float: left;
+}
+
+.grid-item img {
+  border-radius: 15px;
+}
+
+.gallery .thumbnail {
+  cursor: pointer;
+}
+
+
 /*----- Fix For Mobile View -----*/
 @media screen and (prefers-reduced-motion: reduce) {
   html {

web/www/media.php

@@ -18,8 +18,11 @@
     </div>
     <?php include(__DIR__ . '/html/modal-popup.html') ?>
     <?php include(__DIR__ . '/html/popup-message.html') ?>
+    <?php include(__DIR__ . '/html/prompt.html') ?>
   </section>
 
+  <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
+  <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
   <script src="assets/js/media.js" type="module" ></script>
 </body>
 <?php include(__DIR__ . '/html/footer.html') ?>