refactor createElement

main.js

@@ -173,20 +173,37 @@
     }
 
     toDiv(altName = null, altDesc = null) {
-      let div = document.createElement('div')
       let desc = altDesc ?? this.desc
-      desc = desc ? "<div class='desc-icon-container' title='" + desc + "'>" +
+      let descTooltip = desc ? Tag.div({
-        "<img class='desc-icon' src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgo8c3ZnIGlkPSJzdmcyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAwIiB3aWR0aD0iMjAwIiB2ZXJzaW9uPSIxLjAiPgogPHBhdGggaWQ9InBhdGgyMzgyIiBkPSJtMTY1LjMzIDExMy40NGExMDMuNjEgMTAzLjYxIDAgMSAxIC0yMDcuMjIgMCAxMDMuNjEgMTAzLjYxIDAgMSAxIDIwNy4yMiAweiIgdHJhbnNmb3JtPSJtYXRyaXgoLjkzNzM5IDAgMCAuOTM3MzkgNDIuMTQzIC02LjMzOTIpIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiNmZmYiLz4KIDxnIGlkPSJsYXllcjEiPgogIDxwYXRoIGlkPSJwYXRoMjQxMyIgZD0ibTEwMCAwYy01NS4yIDAtMTAwIDQ0LjgtMTAwIDEwMC01LjA0OTVlLTE1IDU1LjIgNDQuOCAxMDAgMTAwIDEwMHMxMDAtNDQuOCAxMDAtMTAwLTQ0LjgtMTAwLTEwMC0xMDB6bTAgMTIuODEyYzQ4LjEzIDAgODcuMTkgMzkuMDU4IDg3LjE5IDg3LjE4OHMtMzkuMDYgODcuMTktODcuMTkgODcuMTktODcuMTg4LTM5LjA2LTg3LjE4OC04Ny4xOSAzOS4wNTgtODcuMTg4IDg3LjE4OC04Ny4xODh6bTEuNDcgMjEuMjVjLTUuNDUgMC4wMy0xMC42NTMgMC43MzctMTUuMjgyIDIuMDYzLTQuNjk5IDEuMzQ2LTkuMTI2IDMuNDg0LTEyLjg3NiA2LjIxOS0zLjIzOCAyLjM2Mi02LjMzMyA1LjM5MS04LjY4NyA4LjUzMS00LjE1OSA1LjU0OS02LjQ2MSAxMS42NTEtNy4wNjMgMTguNjg3LTAuMDQgMC40NjgtMC4wNyAwLjg2OC0wLjA2MiAwLjg3NiAwLjAxNiAwLjAxNiAyMS43MDIgMi42ODcgMjEuODEyIDIuNjg3IDAuMDUzIDAgMC4xMTMtMC4yMzQgMC4yODItMC45MzcgMS45NDEtOC4wODUgNS40ODYtMTMuNTIxIDEwLjk2OC0xNi44MTMgNC4zMi0yLjU5NCA5LjgwOC0zLjYxMiAxNS43NzgtMi45NjkgMi43NCAwLjI5NSA1LjIxIDAuOTYgNy4zOCAyIDIuNzEgMS4zMDEgNS4xOCAzLjM2MSA2Ljk0IDUuODEzIDEuNTQgMi4xNTYgMi40NiA0LjU4NCAyLjc1IDcuMzEyIDAuMDggMC43NTkgMC4wNSAyLjQ4LTAuMDMgMy4yMTktMC4yMyAxLjgyNi0wLjcgMy4zNzgtMS41IDQuOTY5LTAuODEgMS41OTctMS40OCAyLjUxNC0yLjc2IDMuODEyLTIuMDMgMi4wNzctNS4xOCA0LjgyOS0xMC43OCA5LjQwNy0zLjYgMi45NDQtNi4wNCA1LjE1Ni04LjEyIDcuMzQzLTQuOTQzIDUuMTc5LTcuMTkxIDkuMDY5LTguNTY0IDE0LjcxOS0wLjkwNSAzLjcyLTEuMjU2IDcuNTUtMS4xNTYgMTMuMTkgMC4wMjUgMS40IDAuMDYyIDIuNzMgMC4wNjIgMi45N3YwLjQzaDIxLjU5OGwwLjAzLTIuNGMwLjAzLTMuMjcgMC4yMS01LjM3IDAuNTYtNy40MSAwLjU3LTMuMjcgMS40My01IDMuOTQtNy44MSAxLjYtMS44IDMuNy0zLjc2IDYuOTMtNi40NyA0Ljc3LTMuOTkxIDguMTEtNi45OSAxMS4yNi0xMC4xMjUgNC45MS00LjkwNyA3LjQ2LTguMjYgOS4yOC0xMi4xODcgMS40My0zLjA5MiAyLjIyLTYuMTY2IDIuNDYtOS41MzIgMC4wNi0wLjgxNiAwLjA3LTMuMDMgMC0zLjk2OC0wLjQ1LTcuMDQzLTMuMS0xMy4yNTMtOC4xNS0xOS4wMzItMC44LTAuOTA5LTIuNzgtMi44ODctMy43Mi0zLjcxOC00Ljk2LTQuMzk0LTEwLjY5LTcuMzUzLTE3LjU2LTkuMDk0LTQuMTktMS4wNjItOC4yMy0xLjYtMTMuMzUtMS43NS0wLjc4LTAuMDIzLTEuNTktMC4wMzYtMi4zNy0wLjAzMnptLTEwLjkwOCAxMDMuNnYyMmgyMS45OTh2LTIyaC0yMS45OTh6Ii8+CiA8L2c+Cjwvc3ZnPgo='/>" +
+        classes: 'desc-icon-container',
-        "</div>" : ""
+        title: desc,
-      div.innerHTML = "<label for=''>" + (altName ?? this.name ?? "") + "</label>" + "<div>" + (this.content ?? "") + "</div>" +
+        children: [
-        desc
+          Tag.img({
-      return div
+            classes: 'desc-icon',
+            src: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgo8c3ZnIGlkPSJzdmcyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAwIiB3aWR0aD0iMjAwIiB2ZXJzaW9uPSIxLjAiPgogPHBhdGggaWQ9InBhdGgyMzgyIiBkPSJtMTY1LjMzIDExMy40NGExMDMuNjEgMTAzLjYxIDAgMSAxIC0yMDcuMjIgMCAxMDMuNjEgMTAzLjYxIDAgMSAxIDIwNy4yMiAweiIgdHJhbnNmb3JtPSJtYXRyaXgoLjkzNzM5IDAgMCAuOTM3MzkgNDIuMTQzIC02LjMzOTIpIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiNmZmYiLz4KIDxnIGlkPSJsYXllcjEiPgogIDxwYXRoIGlkPSJwYXRoMjQxMyIgZD0ibTEwMCAwYy01NS4yIDAtMTAwIDQ0LjgtMTAwIDEwMC01LjA0OTVlLTE1IDU1LjIgNDQuOCAxMDAgMTAwIDEwMHMxMDAtNDQuOCAxMDAtMTAwLTQ0LjgtMTAwLTEwMC0xMDB6bTAgMTIuODEyYzQ4LjEzIDAgODcuMTkgMzkuMDU4IDg3LjE5IDg3LjE4OHMtMzkuMDYgODcuMTktODcuMTkgODcuMTktODcuMTg4LTM5LjA2LTg3LjE4OC04Ny4xOSAzOS4wNTgtODcuMTg4IDg3LjE4OC04Ny4xODh6bTEuNDcgMjEuMjVjLTUuNDUgMC4wMy0xMC42NTMgMC43MzctMTUuMjgyIDIuMDYzLTQuNjk5IDEuMzQ2LTkuMTI2IDMuNDg0LTEyLjg3NiA2LjIxOS0zLjIzOCAyLjM2Mi02LjMzMyA1LjM5MS04LjY4NyA4LjUzMS00LjE1OSA1LjU0OS02LjQ2MSAxMS42NTEtNy4wNjMgMTguNjg3LTAuMDQgMC40NjgtMC4wNyAwLjg2OC0wLjA2MiAwLjg3NiAwLjAxNiAwLjAxNiAyMS43MDIgMi42ODcgMjEuODEyIDIuNjg3IDAuMDUzIDAgMC4xMTMtMC4yMzQgMC4yODItMC45MzcgMS45NDEtOC4wODUgNS40ODYtMTMuNTIxIDEwLjk2OC0xNi44MTMgNC4zMi0yLjU5NCA5LjgwOC0zLjYxMiAxNS43NzgtMi45NjkgMi43NCAwLjI5NSA1LjIxIDAuOTYgNy4zOCAyIDIuNzEgMS4zMDEgNS4xOCAzLjM2MSA2Ljk0IDUuODEzIDEuNTQgMi4xNTYgMi40NiA0LjU4NCAyLjc1IDcuMzEyIDAuMDggMC43NTkgMC4wNSAyLjQ4LTAuMDMgMy4yMTktMC4yMyAxLjgyNi0wLjcgMy4zNzgtMS41IDQuOTY5LTAuODEgMS41OTctMS40OCAyLjUxNC0yLjc2IDMuODEyLTIuMDMgMi4wNzctNS4xOCA0LjgyOS0xMC43OCA5LjQwNy0zLjYgMi45NDQtNi4wNCA1LjE1Ni04LjEyIDcuMzQzLTQuOTQzIDUuMTc5LTcuMTkxIDkuMDY5LTguNTY0IDE0LjcxOS0wLjkwNSAzLjcyLTEuMjU2IDcuNTUtMS4xNTYgMTMuMTkgMC4wMjUgMS40IDAuMDYyIDIuNzMgMC4wNjIgMi45N3YwLjQzaDIxLjU5OGwwLjAzLTIuNGMwLjAzLTMuMjcgMC4yMS01LjM3IDAuNTYtNy40MSAwLjU3LTMuMjcgMS40My01IDMuOTQtNy44MSAxLjYtMS44IDMuNy0zLjc2IDYuOTMtNi40NyA0Ljc3LTMuOTkxIDguMTEtNi45OSAxMS4yNi0xMC4xMjUgNC45MS00LjkwNyA3LjQ2LTguMjYgOS4yOC0xMi4xODcgMS40My0zLjA5MiAyLjIyLTYuMTY2IDIuNDYtOS41MzIgMC4wNi0wLjgxNiAwLjA3LTMuMDMgMC0zLjk2OC0wLjQ1LTcuMDQzLTMuMS0xMy4yNTMtOC4xNS0xOS4wMzItMC44LTAuOTA5LTIuNzgtMi44ODctMy43Mi0zLjcxOC00Ljk2LTQuMzk0LTEwLjY5LTcuMzUzLTE3LjU2LTkuMDk0LTQuMTktMS4wNjItOC4yMy0xLjYtMTMuMzUtMS43NS0wLjc4LTAuMDIzLTEuNTktMC4wMzYtMi4zNy0wLjAzMnptLTEwLjkwOCAxMDMuNnYyMmgyMS45OTh2LTIyaC0yMS45OTh6Ii8+CiA8L2c+Cjwvc3ZnPgo='
+          })
+        ]
+      }) : ""
+
+      return Tag.div({
+        children: [
+          Tag.make("label", {
+            _for: '',
+            textContent: altName ?? this.name ?? ""
+          }),
+          Tag.div({
+            innerHTML: this.content ?? "",
+          }),
+          descTooltip
+        ]
+      })
     }
   }
 
   function createFrom(rows, classList, data) {
-    let container = document.createElement('div')
+    let container = Tag.div({
-    container.classList.add(...classList.split(" "))
+      classes: classList
+    })
     for (const options of data) {
       let div
       if (options.index != null) {
@@ -504,11 +521,13 @@
 
     let input = document.querySelector(`input[name="${inputName}\[\]"]`)
     fileListContainer ??= input.parentElement.parentElement.querySelector(".file-list-container")
-    let fileContainer = document.createElement("div")
+    let fileContainer = Tag.div({
-    fileContainer.classList.add("file-container")
+      classes: "file-container"
+    })
 
-    const displayedFile = document.createElement(type ?? "a")
+    const displayedFile = Tag.make(type ?? "a", {
-    displayedFile.classList.add("preview-small")
+      classes: "preview-small"
+    })
 
     if (type == "img") {
       displayedFile.src = preview
@@ -528,8 +547,9 @@
       displayedFile.textContent = "Файл"
     }
 
-    let fileButtonsContainer = document.createElement("div")
+    let fileButtonsContainer = Tag.div({
-    fileButtonsContainer.classList.add("file-buttons-container")
+      classes: "file-buttons-container"
+    })
 
     fileButtonsContainer.append(makeDownloadLink(/[^/]*$/.exec(new URL(file).pathname)[0], file))
 
@@ -582,7 +602,7 @@
         break
       }
     }
-    let el = document.createElement(res)
+    let el = Tag.make(res)
     if (res == "audio") {
       el.setAttribute("controls", "")
     }
@@ -639,8 +659,9 @@
           fileListContainer = this.parentElement.parentElement.querySelector(".file-list-container")
         }
 
-        let fileContainer = document.createElement("div")
+        let fileContainer = Tag.div({
-        fileContainer.classList.add("file-container", "file-container-new")
+          classes: "file-container file-container-new"
+        })
 
         const displayedFile = getHtmlElementByFileType(file)
         displayedFile.classList.add("preview")
@@ -651,8 +672,9 @@
           dialog.showModal()
         })
 
-        let fileButtonsContainer = document.createElement("div")
+        let fileButtonsContainer = Tag.div({
-        fileButtonsContainer.classList.add("file-buttons-container")
+          classes: "file-buttons-container"
+        })
 
         let downloadLink = makeDownloadLink(file.name)
         fileButtonsContainer.append(downloadLink)
@@ -1131,17 +1153,17 @@
   }
 
   function createMenuFromLinks(links, blanks = []) {
-    let menu = document.createElement("menu")
+    let menu = Tag.make("menu")
 
     for (const [label, href] of Object.entries(links)) {
-      let menuItem = document.createElement("li")
+      let menuItem = Tag.make("li")
       let link = Tag.a({
         href: href,
         innerText: label
       })
 
       if (blanks.includes(label)) {
-        link.setAttribute("target", "_blank")
+        link.target = "_blank"
       }
 
       menuItem.append(link)
@@ -1155,8 +1177,9 @@
     let competition = getCompetition()
     if (!competition) return
 
-    let menuContainer = document.createElement("nav")
+    let menuContainer = Tag.make("nav", {
-    menuContainer.classList.add("sticky-menu")
+      classes: "sticky-menu"
+    })
 
     let mainLinksFormatted = {}
     for (const [label, href] of Object.entries(links)) {
@@ -1242,7 +1265,7 @@
   }
 
   function addClearBoth() {
-    let clearEl = document.createElement("div")
+    let clearEl = Tag.div()
     clearEl.style.clear = "both"
     document.body.append(clearEl)
   }
@@ -1339,8 +1362,9 @@
       { index: 8, name: "Название" }
     ])
 
-    let copyLink = document.createElement("div")
+    let copyLink = Tag.div({
-    copyLink.innerHTML = new Property(rows[2]).desc
+      innerHTML: new Property(rows[2]).desc
+    })
     headerContainer.append(copyLink)
 
     return headerContainer
@@ -1358,8 +1382,9 @@
     let bottomButtonsContainer = topButtonsContainer.cloneNode(true)
 
     document.querySelectorAll("#props tr:is(:first-child, :last-child) th").forEach((el, index) => {
-      let rowContentWrapper = document.createElement("div")
+      let rowContentWrapper = Tag.div({
-      rowContentWrapper.classList.add("buttons-row__content-wrapper")
+        classes: "buttons-row__content-wrapper"
+      })
       while ([...el.children].length > 0) {
         let child = el.firstChild
         rowContentWrapper.append(child)
@@ -1430,18 +1455,17 @@
 
     /* LEGEND DESC */
 
-    let legendDescContainer = document.createElement("div")
-    legendDescContainer.classList.add("legend-container__desc")
-
-    let legendDescHeader = document.createElement("div")
-    legendDescHeader.classList.add("legend-container__desc-header")
-
-
     const LEGEND_RU_LABEL = "Русский"
     const LEGEND_EN_LABEL = "Английский"
-    let legendLang = document.createElement("div")
+
-    legendLang.classList.add("legend-desc__lang")
+    let legendDescHeader = Tag.div({
-    legendLang.textContent = LEGEND_RU_LABEL
+      classes: "legend-container__desc-header"
+    })
+
+    let legendLang = Tag.div({
+      classes: "legend-desc__lang",
+      textContent: LEGEND_RU_LABEL
+    })
     legendDescHeader.append(legendLang)
 
     let legendEnSwitchContainer = createFrom(rows, "legend-switch-container", [
@@ -1525,12 +1549,18 @@
       ]
     })
 
-    legendDescContainer.append(legendDescHeader)
+    let legendDescContainer = Tag.div({
-    legendDescContainer.append(legendRuDescContainer)
+      classes: "legend-container__desc",
-    legendDescContainer.append(legendRuHiddenDescContainer)
+      children: [
-    legendDescContainer.append(legendEnDescContainer)
+        legendDescHeader,
-    legendDescContainer.append(legendEnHiddenDescContainer)
+        legendRuDescContainer,
-    legendDescContainer.append(hider)
+        legendRuHiddenDescContainer,
+        legendEnDescContainer,
+        legendEnHiddenDescContainer,
+        hider
+      ]
+    })
+
     legendContainer.append(legendDescContainer)
 
     return legendContainer
@@ -1542,8 +1572,9 @@
   }
 
   function makeLegendFiles(rows) {
-    let legendFilesContainer = document.createElement("div")
+    let legendFilesContainer = Tag.div({
-    legendFilesContainer.classList.add("legend-container__files")
+      classes: "legend-container__files"
+    })
 
     let imagesForLegendContainer = createFrom(rows, "files-container", [
       { index: 23, name: "Фото в легенде" }
@@ -1573,8 +1604,9 @@
   }
 
   function makeAdminFiles(rows) {
-    let adminFilesContainer = document.createElement('div')
+    let adminFilesContainer = Tag.div({
-    adminFilesContainer.classList.add('admin-files-container')
+      classes: 'admin-files-container'
+    })
 
     let imagesForAdminContainer = createFrom(rows, "files-container admin-photo-container", [
       { index: 31, name: "Фото в админке" }