refactor createElement

main.js

@@ -902,23 +902,26 @@
   function makeSwiper(dialog, fileListContainer, src) {
     let files = [...fileListContainer.querySelectorAll(`:is(.preview, .preview-small)`)]
 
-    let swiperDiv = document.createElement("div")
+    let swiperDiv = Tag.div({
-    swiperDiv.classList.add("swiper")
+      classes: "swiper"
+    })
 
-    let swiperWrapper = document.createElement("div")
+    let swiperWrapper = Tag.div({
-    swiperWrapper.classList.add("swiper-wrapper")
+      classes: "swiper-wrapper"
+    })
 
     for (const file of files) {
-      let swiperSlide = document.createElement("div")
+      let swiperSlide = Tag.div({
-      swiperSlide.classList.add("swiper-slide")
+        classes: "swiper-slide",
-
+        children: [
-      let downloadLink = Tag.a({
+          Tag.a({
-        classes: "swiper-download-link",
+            classes: "swiper-download-link",
-        href: file.dataset.origin,
+            href: file.dataset.origin,
-        text: "Скачать",
+            text: "Скачать",
-        target: "_blank"
+            target: "_blank"
+          })
+        ]
       })
-      swiperSlide.append(downloadLink)
 
       let swiperFile = file.cloneNode(true)
       if (swiperFile.dataset.origin)
@@ -930,12 +933,14 @@
 
     swiperDiv.append(swiperWrapper)
 
-    let prevButton = document.createElement("div")
+    let prevButton = Tag.div({
-    prevButton.classList.add("swiper-button-prev")
+      classes: "swiper-button-prev"
+    })
     swiperDiv.append(prevButton)
 
-    let nextButton = document.createElement("div")
+    let nextButton = Tag.div({
-    nextButton.classList.add("swiper-button-next")
+      classes: "swiper-button-next"
+    })
     swiperDiv.append(nextButton)
 
     dialog.append(swiperDiv)
@@ -1502,22 +1507,23 @@
       { index: 56, desc: "" }
     ])
 
-    let hider = document.createElement("div")
+    let hider = Tag.div({
-    let hiderButton = Tag.button({
+      children: [
-      classes: "collapse-button",
+        Tag.button({
-      type: "button",
+          classes: "collapse-button",
-      on: {
+          type: "button",
-        click: event => {
+          on: {
-          let container = document.querySelector('.legend-container')
+            click: event => {
-          container.querySelectorAll(".legend-desc.collapsible").forEach(element => {
+              let container = document.querySelector('.legend-container')
-            element.classList.toggle("collapsed")
+              container.querySelectorAll(".legend-desc.collapsible").forEach(element => {
-          })
+                element.classList.toggle("collapsed")
-        }
+              })
-      }
+            }
+          }
+        })
+      ]
     })
 
-    hider.append(hiderButton)
-
     legendDescContainer.append(legendDescHeader)
     legendDescContainer.append(legendRuDescContainer)
     legendDescContainer.append(legendRuHiddenDescContainer)