refactor createElement

main.js

@@ -208,22 +208,28 @@
   }
 
   function addCss(link) {
-    let css = document.createElement("link")
+    document.head.append(
-    css.href = link
+      Tag.make("link", {
-    css.rel = "stylesheet"
+        href: link,
-    document.head.append(css)
+        rel: "stylesheet"
+      })
+    )
   }
 
   function addJs(link) {
-    let script = document.createElement("script")
+    document.head.append(
-    script.src = link
+      Tag.make("script", {
-    document.head.append(script)
+        src: link
+      })
+    )
   }
 
   function addStylesToHead(styles) {
-    let styleSheet = document.createElement("style")
+    document.head.append(
-    styleSheet.textContent = styles
+      Tag.make("style", {
-    document.head.append(styleSheet)
+        textContent: styles
+      })
+    )
   }
 
   const sleep = ms => new Promise(res => setTimeout(res, ms))
@@ -356,7 +362,7 @@
   }
 
   function copyCoordinates() {
-    let copyButton = Tag.button({
+    return Tag.button({
       classes: "copy-button",
       on: {
         click: async event => {
@@ -368,14 +374,13 @@
           const data = new ClipboardItem({ "text/plain": text })
           await navigator.clipboard.write([data])
         }
-      }
+      },
+      children: [
+        Tag.make("img", {
+          src: "https://upload.wikimedia.org/wikipedia/commons/a/aa/Bw_copy_icon_320x320.svg"
+        })
+      ]
     })
-
-    let copyImage = document.createElement("img")
-    copyImage.src = "https://upload.wikimedia.org/wikipedia/commons/a/aa/Bw_copy_icon_320x320.svg"
-    copyButton.append(copyImage)
-
-    return copyButton
   }
 
   function yandexMaps(lat, lon, zoom) {
@@ -395,21 +400,23 @@
   }
 
   function makeRef(linkCallback, iconSrc, zoom) {
-    let ref = document.createElement("a")
+    return Tag.a({
-    ref.href = linkCallback(lat, lon, zoom)
+      href: linkCallback(lat, lon, zoom),
-    ref.setAttribute('target', "_blank")
+      target: "_blank",
-    ref.addEventListener("click", function (e) {
+      on: {
-      let lat = document.querySelector(`input[name="cp[lattitude]"]`).value
+        click: function (e) {
-      let lon = document.querySelector(`input[name="cp[longitude]"]`).value
+          let lat = document.querySelector(`input[name="cp[lattitude]"]`).value
-      this.href = linkCallback(lat, lon, zoom)
+          let lon = document.querySelector(`input[name="cp[longitude]"]`).value
+          this.href = linkCallback(lat, lon, zoom)
+        }
+      },
+      children: [
+        Tag.make("img", {
+          src: iconSrc,
+          classes: "map-icon"
+        })
+      ]
     })
-
-    let icon = document.createElement("img")
-    icon.src = iconSrc
-    icon.classList.add("map-icon")
-    ref.append(icon)
-
-    return ref
   }
 
   let makeCoordinatesLinks = (function () {
@@ -418,27 +425,27 @@
       if (executed) return
       executed = true
 
-      let linksContainer = document.createElement("div")
+      let linksContainer = Tag.div({
-
+        children: [
-      linksContainer.append(copyCoordinates())
+          copyCoordinates(),
-      linksContainer.append(makeRef(yandexMaps, "https://upload.wikimedia.org/wikipedia/commons/7/72/Yandex_Maps_icon.svg", ZOOM))
+          makeRef(yandexMaps, "https://upload.wikimedia.org/wikipedia/commons/7/72/Yandex_Maps_icon.svg", ZOOM),
-      linksContainer.append(makeRef(googleMaps, "https://upload.wikimedia.org/wikipedia/commons/a/aa/Google_Maps_icon_%282020%29.svg", METERS))
+          makeRef(googleMaps, "https://upload.wikimedia.org/wikipedia/commons/a/aa/Google_Maps_icon_%282020%29.svg", METERS),
-      linksContainer.append(makeRef(pastvu, "https://pastvu.com/coast-icon.png", ZOOM))
+          makeRef(pastvu, "https://pastvu.com/coast-icon.png", ZOOM),
-      linksContainer.append(makeRef(twoGis, "https://d-assets.2gis.ru/favicon.png", ZOOM))
+          makeRef(twoGis, "https://d-assets.2gis.ru/favicon.png", ZOOM)
+        ]
+      })
 
       document.querySelector(`div:has(> div > input[name="cp[longitude]"])`).after(linksContainer)
     }
   })()
 
   function makeDownloadLink(name, href = null) {
-    let downloadLink = document.createElement("a")
+    return Tag.a({
-    downloadLink.setAttribute("download", name)
+      download: name,
-    downloadLink.textContent = "Скачать"
+      textContent: "Скачать",
-    downloadLink.setAttribute("target", "_blank")
+      target: "_blank",
-    if (href)
+      href: href
-      downloadLink.href = href
+    })
-
-    return downloadLink
   }
 
   async function sendFileDeleted(inputName, fileInputVariant = null) {
@@ -899,11 +906,12 @@
       let swiperSlide = document.createElement("div")
       swiperSlide.classList.add("swiper-slide")
 
-      let downloadLink = document.createElement("a")
+      let downloadLink = Tag.a({
-      downloadLink.classList.add("swiper-download-link")
+        classes: "swiper-download-link",
-      downloadLink.href = file.dataset.origin
+        href: file.dataset.origin,
-      downloadLink.text = "Скачать"
+        text: "Скачать",
-      downloadLink.setAttribute("target", "_blank")
+        target: "_blank"
+      })
       swiperSlide.append(downloadLink)
 
       let swiperFile = file.cloneNode(true)
@@ -1122,9 +1130,10 @@
 
     for (const [label, href] of Object.entries(links)) {
       let menuItem = document.createElement("li")
-      let link = document.createElement("a")
+      let link = Tag.a({
-      link.href = href
+        href: href,
-      link.innerText = label
+        innerText: label
+      })
 
       if (blanks.includes(label)) {
         link.setAttribute("target", "_blank")
@@ -1261,9 +1270,11 @@
       let constructorLink = linkCell.querySelector(`a[href="${catLinks["Конструктор маршрута"](catId).replace("route_mgmt/", "")}"]`)
 
       if (constructorLink) {
-        let stagesLink = document.createElement("a")
+        let innerText = "Этапы"
-        stagesLink.innerText = "Этапы"
+        let stagesLink = Tag.a({
-        stagesLink.href = catLinks[stagesLink.innerText](catId)
+          innerText: innerText,
+          href: catLinks[innerText](catId)
+        })
 
         constructorLink.after(stagesLink)
         constructorLink.after(". ")
@@ -1312,10 +1323,9 @@
   }
 
   function makeContainer() {
-    let container = document.createElement('div')
+    return Tag.div({
-    container.id = "new"
+      id: "new"
-
+    })
-    return container
   }
 
   function makeHeader(rows) {
@@ -1597,28 +1607,32 @@
   }
 
   function makeDialog() {
-    let dialog = document.createElement("dialog")
+    let dialog = Tag.make("dialog", {
-    dialog.id = "dialog"
+      id: "dialog",
-    document.body.append(dialog)
+      on: {
-
+        click: e => {
-    dialog.addEventListener("click", e => {
+          if (e.target == dialog) {
-      if (e.target == dialog) {
+            e.target.close()
-        e.target.close()
+          }
+        },
+        close: e => {
+          e.target.innerHTML = ""
+        }
       }
     })
-
+    document.body.append(dialog)
-    dialog.addEventListener("close", e => {
-      e.target.innerHTML = ""
-    })
   }
 
   function formatMap() {
     if (map !== undefined && L !== undefined) {
       let content = document.querySelector("#content")
-      let contentWrapper = document.createElement("div")
+      let contentWrapper = Tag.div({
-      contentWrapper.id = "content-wrapper"
+        id: "content-wrapper",
-      contentWrapper.append(document.querySelector("form"))
+        children: [
-      contentWrapper.append(document.querySelector("#map-wrapper"))
+          document.querySelector("form"),
+          document.querySelector("#map-wrapper")
+        ]
+      })
       content.append(contentWrapper)
 
       let panToCenter = Tag.button({
@@ -2259,8 +2273,6 @@
 
   function prettifyRouteEditPage() {
     function createPointsInpit() {
-      let addPointsContainer = document.createElement("div")
-
       let pointInput = Tag.input({
         id: "add-point",
         type: "text",
@@ -2329,10 +2341,13 @@
         }
       })
 
-      addPointsContainer.append(addButton)
+      let addPointsContainer = Tag.div({
-      addPointsContainer.append(pointInput)
+        children: [
-      addPointsContainer.append(removeButton)
+          addButton,
-
+          pointInput,
+          removeButton
+        ]
+      })
       document.querySelector("table tr:nth-child(16) td").prepend(addPointsContainer)
 
       addStylesToHead(`