Make CSS in saved pages prettier than now

src/main/kotlin/logic/document/operations/FormatHtmlOperation.kt

@@ -3,6 +3,9 @@ package logic.document.operations
 import logic.document.AbstractProcessorOperation
 import org.jsoup.Jsoup
 import org.jsoup.nodes.Document
+import org.jsoup.nodes.Element
+import org.jsoup.nodes.Node
+import org.jsoup.parser.Tag
 import ui.viewmodel.SettingsViewModel
 import util.filesystem.readResource
 
@@ -30,12 +33,34 @@ object FormatHtmlOperation : AbstractProcessorOperation() {
                 .first()
         }
 
+        val javascript = withProgressSuspend("Getting JS for wrapper") {
+            readResource("templates/index.js").readText()
+        }
+
+        val css = withProgressSuspend("Getting CSS for wrapper") {
+            readResource("templates/style.css").readText()
+        }
+
+        val galleryModal = withProgressSuspend("Getting gallery module") {
+            val code = readResource("templates/galleryModal.html").readText()
+            Jsoup.parse(code)
+        }
+
         requireNotNull(wrapper) {
             lang.value.noWrapperError
         }
 
-        withProgressSuspend(lang.value.combineDocument) {
-            wrapper.appendChild(document.body())
+        withProgressSuspend("Combining template with document") {
+            wrapper
+                .appendChild(document.body())
+                .appendChild(galleryModal.body())
+                .appendChild(Element("style").also {
+                    it.html(css)
+                })
+                // Important: Add JS as last element
+                .appendChild(Element("script").also {
+                    it.html(javascript)
+                })
         }
 
         return templateDocument

src/main/kotlin/logic/document/operations/media/modules/ImageDownloadModule.kt

@@ -42,13 +42,15 @@ object ImageDownloadModule: IDownloadModule {
         return document.getElementsByClass("gall").mapNotNull { gallery ->
             val dataHolder = gallery.children().firstOrNull { child -> child.attr("name") == "gallery-data-holder" }
 
-
+            // If gallery data exists
             dataHolder?.let { holder ->
+                // Parse it
                 val data = Json.parseToJsonElement(holder.wholeText())
 
                 if (data is JsonArray) {
                     val elements = mutableListOf<Pair<Element, String>>()
 
+                    // Convert data object to images ID
                     data.forEach { element ->
                         try {
                             val id = element.jsonObject["image"]?.jsonObject?.get("data")?.jsonObject?.get("uuid")
@@ -60,24 +62,35 @@ object ImageDownloadModule: IDownloadModule {
                             }
 
                             url?.let {
-                                elements += Element("img") to url
+                                elements += Element("div") to url
                             }
                         } catch (_: Exception) {}
                     }
 
+                    // Limit gallery size in class to maximum of 5 elements
+                    // Required by CSS/JS gallery module:
+                    // https://github.com/sir-coffee-or-tea/darefox-dtf-saver-css
+                    val maxPreviewGallerySize = 5
+                    val gallerySizeClass = "gall--${elements.size.coerceAtMost(maxPreviewGallerySize)}"
+
                     // Replace old gallery elements with new elements
-                    val newGallery = Element("div").addClass("gall")
+                    val newGallery = Element("div").addClass("gall").addClass(gallerySizeClass)
                     gallery.replaceWith(newGallery)
 
-                    elements.forEachIndexed { index, it ->
-                        val img = it.first.also {
-                            // Set css style to img
-                            it.attr("style", "object-fit: contain; width: 100%; height: 100%;")
-                        }
-
-                        val div = Element("div").also {
+                    elements.forEachIndexed { index, pair ->
+                        val div = pair.first.also {
                             it.attr("pos", index.toString())
-                            it.appendChild(img)
+
+                            // On fifth (based on maxPreviewGallerySize) preview element show +n of remaining images
+                            // Ignore if fifth element is the last element in array, to prevent "+0" text on preview
+                            if (index == maxPreviewGallerySize - 1 && elements.size > maxPreviewGallerySize) {
+                                val remainingSize = elements.size - maxPreviewGallerySize
+                                it.attr("data-more", "+$remainingSize")
+                            } else {
+                                // To remove black transparent overlay on last gallery preview element
+                                // data-more attribute should be empty like this: ""
+                                it.attr("data-more", "")
+                            }
                         }
 
                         newGallery.appendChild(div)
@@ -90,11 +103,29 @@ object ImageDownloadModule: IDownloadModule {
             }
         }.flatten()
     }
-
-
     override fun transform(element: Element, relativePath: String) {
-        element.attr("src", relativePath)
+        if (element.tagName() == "div") {
+            element.attr("style", createBackgroundImageStyleValue(relativePath))
+        } else {
+            // Assuming it's img element
+            element.attr("src", relativePath)
+        }
     }
 
     override val downloadingContentType: String = "Image"
+
+    /**
+     * Create background-image value for style tag
+     *
+     * Example:
+     * ```
+     * "background-image: url('[YOUR FILEPATH HERE]')"
+     * ```
+     */
+    private fun createBackgroundImageStyleValue(filePath: String): String {
+        val slashRegex = """\\""".toRegex()
+
+        // replace backslashes to forward slashes
+        return "background-image: url('${filePath.replace(slashRegex, "/")}')"
+    }
 }

src/main/resources/templates/entry.html

@@ -7,20 +7,6 @@
     <meta content="width=device-width, initial-scale=1.0" name="viewport">
     <link href="style.css" rel="stylesheet">
     <title>SaveDTF Page</title>
-    <style>
-        .savedtf-wrapper {
-            width: 50%;
-            margin: 0 auto;
-        }
-
-        * {
-            color: black;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-        }
-
-
-
-    </style>
 </head>
 
 <body>

src/main/resources/templates/galleryModal.html

@@ -0,0 +1,43 @@
+<div class="modal" style="position: fixed;">
+    <div class="modal-bg">
+        <div class="modal-container">
+            <div class="modal-parent-gl">
+                <div class="modal-gl"> <button class="modal-arrow-left modal-button" style="display: block;">
+                    <svg class="icon icon_arrow_left" width="30" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+                        <defs>
+                            <symbol viewBox="0 0 7 11" id="ui_arrow_left">
+                                <path d="M1.11 6.045l4.608 4.73a.737.737 0 001.062 0 .785.785 0 000-1.09L2.702 5.5 6.78 1.316a.785.785 0 000-1.09.737.737 0 00-1.062 0L1.11 4.956a.78.78 0 000 1.088z"></path>
+                            </symbol>
+                        </defs><use xlink:href="#ui_arrow_left" fill="#FFFFFF" style="--darkreader-inline-fill: #181a1b;" data-darkreader-inline-fill=""></use>
+                    </svg> </button> <button class="modal-arrow-right modal-button" style="display: block;">
+                    <svg class="icon icon_arrow_right" width="30" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
+                        <defs>
+                            <symbol viewBox="0 0 7 11" id="ui_arrow_right">
+                                <path fill-rule="evenodd" d="M5.89 4.955L1.283.225a.737.737 0 00-1.062 0 .785.785 0 000 1.09L4.298 5.5.22 9.684a.785.785 0 000 1.09c.294.3.77.3 1.062 0l4.609-4.73a.776.776 0 000-1.088v-.001z"></path>
+                            </symbol>
+                        </defs><use xlink:href="#ui_arrow_right" fill="#FFFFFF" style="--darkreader-inline-fill: #181a1b;" data-darkreader-inline-fill=""></use>
+                    </svg> </button>
+                    <div class="modal-exit-territory">
+                        <svg class="icon icon_close" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="24" width="24">
+                            <defs>
+                                <symbol viewBox="0 0 10 10" id="ui_close">
+                                    <path fill-rule="evenodd" d="M9.096 0L5 4.097.903 0 0 .904 4.096 5 0 9.097.903 10 5 5.904 9.096 10 10 9.097 5.903 5 10 .904z"></path>
+                                </symbol>
+                            </defs><use xlink:href="#ui_close" fill="#FFFFFF" style="--darkreader-inline-fill: #181a1b;" data-darkreader-inline-fill=""></use>
+                        </svg>
+                    </div>
+                    <div class="modal-gl-container">
+                        <div class="gl-image">
+                            <input type="checkbox" id="zoomCheck"> <label for="zoomCheck"> <img class="gl-current-image" src=""> </label>
+                        </div>
+                        <div class="gl-footer" style="display: block;">
+                            <div class="gl-counter">0 из 0</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="modal-instruments">
+    </div>
+</div>

src/main/resources/templates/index.js

@@ -0,0 +1,123 @@
+const modal = document.querySelector(".modal");
+const counter = document.querySelector(".gl-counter");
+const currentimage = document.querySelector(".gl-current-image");
+const galleries = document.querySelectorAll(".gall div");
+const arrowleft = document.querySelector(".modal-arrow-left");
+const arrowright = document.querySelector(".modal-arrow-right");
+const closebtn = document.querySelector(".modal-exit-territory");
+const images = document.querySelectorAll(".andropov_image");
+const glfooter = document.querySelector(".gl-footer");
+let imgsrc = [];
+let glcount = 0;
+let glnum = 0;
+let modalopen = false;
+let galleryopen = false;
+galleries.forEach((gallery) => {
+    gallery.addEventListener("click", (e) => {
+        modal.classList.add("modal--open");
+        modalopen = true;
+        galleryopen = true;
+        glcount = e.target.parentNode.childElementCount;
+        for (var i = 0; i < glcount; i++) {
+          imgsrc.push(e.target.parentNode.children[i].style.backgroundImage.slice(4, -1).replace(/"/g, ""));
+        }
+        glnum = e.target.getAttribute("pos");
+        currentimage.src = imgsrc[glnum];
+        counter.innerHTML = (Number(glnum) + 1) + " из " + glcount;
+    });
+});
+images.forEach((image) => {
+    image.addEventListener("click", (e) => {
+      console.log(e.target.src);
+      modal.classList.add("modal--open");
+      closebtn.classList.add("exit-territory-image");
+      modalopen = true;
+      galleryopen = false;
+      imgsrc.push(e.target.src);
+      glcount = 1;
+      glnum = 0;
+      currentimage.src = imgsrc[glnum];
+      glfooter.style.display = "none";
+      arrowleft.style.display = "none";
+      arrowright.style.display = "none";
+    });
+});
+arrowleft.addEventListener("click", (e) => {
+  glnum--;
+  if(glnum < 0){
+    glnum = glcount - 1;
+  }
+  currentimage.src = imgsrc[glnum];
+  counter.innerHTML = Number(glnum + 1) + " из " + glcount;
+});
+arrowright.addEventListener("click", (e) => {
+  glnum++;
+  if(glnum > (glcount - 1)){
+    glnum = 0;
+  }
+  currentimage.src = imgsrc[glnum];
+  counter.innerHTML = Number(glnum + 1) + " из " + glcount;
+});
+closebtn.addEventListener("click", (e) => {
+  modal.classList.remove("modal--open");
+  currentimage.src = "";
+  glrealnum = 0;
+  glnum = 0;
+  glcount = 0;
+  imgsrc = [];
+  modalopen = false;
+  if(galleryopen){
+    galleryopen = false;
+    counter.innerHTML = "";
+  } else {
+    closebtn.classList.remove("exit-territory-image");
+    glfooter.style.display = "block";
+    arrowleft.style.display = "block";
+    arrowright.style.display = "block";
+  }
+});
+document.onkeydown = checkKey;
+function checkKey(e) {
+  e = e || window.event;
+  if (modalopen == true){
+    if (e.keyCode == '27') {
+      modal.classList.remove("modal--open");
+      currentimage.src = "";
+      glrealnum = 0;
+      glnum = 0;
+      glcount = 0;
+      imgsrc = [];
+      modalopen = false;
+      if(galleryopen){
+        galleryopen = false;
+        counter.innerHTML = "";
+      } else {
+        closebtn.classList.remove("exit-territory-image");
+        glfooter.style.display = "block";
+        arrowleft.style.display = "block";
+        arrowright.style.display = "block";
+      }
+    } 
+    if(galleryopen){
+      if (e.keyCode == '37') {
+        glnum--;
+        if(glnum < 0){
+          glnum = glcount - 1;
+        }
+        currentimage.src = imgsrc[glnum];
+        counter.innerHTML = Number(glnum + 1) + " из " + glcount;
+        modalopen = false;
+        galleryopen = false;
+      } else if (e.keyCode == '39') {
+        glnum++;
+        if(glnum > (glcount - 1)){
+          glnum = 0;
+        }
+        currentimage.src = imgsrc[glnum];
+        counter.innerHTML = Number(glnum + 1) + " из " + glcount;
+        modalopen = false;
+        galleryopen = false;
+      }
+    }
+  }
+}