From 2e6e65862a15ead6bda46cbc6ef0b1509a86d43f Mon Sep 17 00:00:00 2001
From: Zhora Shalyapin <mr.imagine84@gmail.com>
Date: Mon, 13 Jan 2025 16:10:05 +0000
Subject: [PATCH] add download link

---
 main.js | 37 ++++++++++++++++++++++++++++++++++---
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/main.js b/main.js
index c327d85..bce8de9 100644
--- a/main.js
+++ b/main.js
@@ -474,12 +474,22 @@
     swiperWrapper.classList.add("swiper-wrapper")
 
     for (const file of files) {
+      let swiperSlide = document.createElement("div")
+      swiperSlide.classList.add("swiper-slide")
+
+      let downloadLink = document.createElement("a")
+      downloadLink.classList.add("swiper-download-link")
+      downloadLink.href = file.dataset.origin
+      downloadLink.text = "Скачать"
+      downloadLink.setAttribute("target", "_blank")
+      swiperSlide.appendChild(downloadLink)
+
       let swiperFile = file.cloneNode(true)
       if (swiperFile.dataset.origin)
         swiperFile.src = swiperFile.dataset.origin
 
-      swiperFile.classList.add("swiper-slide")
-      swiperWrapper.appendChild(swiperFile)
+      swiperSlide.appendChild(swiperFile)
+      swiperWrapper.appendChild(swiperSlide)
     }
 
     swiperDiv.appendChild(swiperWrapper)
@@ -812,7 +822,9 @@
     dialog .preview,
     .swiper {
       max-width: 1000px;
+      width: 100%;
       max-height: 500px;
+      height: 100%;
     }
 
     .swiper-button-next,
@@ -825,13 +837,32 @@
       align-items: center;
     }
 
-    .swiper-wrapper > img.swiper-slide {
+    .swiper-wrapper > .swiper-slide {
       width: 100%;
       max-height: 500px;
+      height: 100%;
+    }
+
+    .swiper-slide img {
+      width: 100%;
+      max-height: 500px;
+      height: 100%;
       object-fit: contain;
       object-position: center;
     }
 
+    .swiper-download-link {
+      display: block;
+      position: absolute;
+      top: 0;
+      right: 0;
+      background: white;
+      padding: 5px 10px;
+      margin: 5px;
+      border: 1px solid #ccc;
+      border-radius: 7.5px;
+    }
+
     button.button-delete {
       padding: 0;
       border: 0;