From fbaff3bdf34dd4c2868487b56cd3f66a6450d8e9 Mon Sep 17 00:00:00 2001 From: Zhora Shalyapin Date: Wed, 26 Mar 2025 07:32:52 +0000 Subject: [PATCH] refactor createElement --- main.js | 181 ++++++++++++++++++++++++++++++-------------------------- 1 file changed, 98 insertions(+), 83 deletions(-) diff --git a/main.js b/main.js index 19fc5d6..abfb105 100644 --- a/main.js +++ b/main.js @@ -208,22 +208,28 @@ } function addCss(link) { - let css = document.createElement("link") - css.href = link - css.rel = "stylesheet" - document.head.append(css) + document.head.append( + Tag.make("link", { + href: link, + rel: "stylesheet" + }) + ) } function addJs(link) { - let script = document.createElement("script") - script.src = link - document.head.append(script) + document.head.append( + Tag.make("script", { + src: link + }) + ) } function addStylesToHead(styles) { - let styleSheet = document.createElement("style") - styleSheet.textContent = styles - document.head.append(styleSheet) + document.head.append( + Tag.make("style", { + 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") - ref.href = linkCallback(lat, lon, zoom) - ref.setAttribute('target', "_blank") - ref.addEventListener("click", function (e) { - let lat = document.querySelector(`input[name="cp[lattitude]"]`).value - let lon = document.querySelector(`input[name="cp[longitude]"]`).value - this.href = linkCallback(lat, lon, zoom) + return Tag.a({ + href: linkCallback(lat, lon, zoom), + target: "_blank", + on: { + click: function (e) { + let lat = document.querySelector(`input[name="cp[lattitude]"]`).value + 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") - - linksContainer.append(copyCoordinates()) - linksContainer.append(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)) - linksContainer.append(makeRef(pastvu, "https://pastvu.com/coast-icon.png", ZOOM)) - linksContainer.append(makeRef(twoGis, "https://d-assets.2gis.ru/favicon.png", ZOOM)) + let linksContainer = Tag.div({ + children: [ + copyCoordinates(), + makeRef(yandexMaps, "https://upload.wikimedia.org/wikipedia/commons/7/72/Yandex_Maps_icon.svg", ZOOM), + makeRef(googleMaps, "https://upload.wikimedia.org/wikipedia/commons/a/aa/Google_Maps_icon_%282020%29.svg", METERS), + makeRef(pastvu, "https://pastvu.com/coast-icon.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") - downloadLink.setAttribute("download", name) - downloadLink.textContent = "Скачать" - downloadLink.setAttribute("target", "_blank") - if (href) - downloadLink.href = href - - return downloadLink + return Tag.a({ + download: name, + textContent: "Скачать", + target: "_blank", + href: href + }) } 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") - downloadLink.classList.add("swiper-download-link") - downloadLink.href = file.dataset.origin - downloadLink.text = "Скачать" - downloadLink.setAttribute("target", "_blank") + let downloadLink = Tag.a({ + classes: "swiper-download-link", + href: file.dataset.origin, + text: "Скачать", + 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") - link.href = href - link.innerText = label + let link = Tag.a({ + href: href, + 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") - stagesLink.innerText = "Этапы" - stagesLink.href = catLinks[stagesLink.innerText](catId) + let innerText = "Этапы" + let stagesLink = Tag.a({ + innerText: innerText, + href: catLinks[innerText](catId) + }) constructorLink.after(stagesLink) constructorLink.after(". ") @@ -1312,10 +1323,9 @@ } function makeContainer() { - let container = document.createElement('div') - container.id = "new" - - return container + return Tag.div({ + id: "new" + }) } function makeHeader(rows) { @@ -1597,28 +1607,32 @@ } function makeDialog() { - let dialog = document.createElement("dialog") - dialog.id = "dialog" - document.body.append(dialog) - - dialog.addEventListener("click", e => { - if (e.target == dialog) { - e.target.close() + let dialog = Tag.make("dialog", { + id: "dialog", + on: { + click: e => { + if (e.target == dialog) { + e.target.close() + } + }, + close: e => { + e.target.innerHTML = "" + } } }) - - dialog.addEventListener("close", e => { - e.target.innerHTML = "" - }) + document.body.append(dialog) } function formatMap() { if (map !== undefined && L !== undefined) { let content = document.querySelector("#content") - let contentWrapper = document.createElement("div") - contentWrapper.id = "content-wrapper" - contentWrapper.append(document.querySelector("form")) - contentWrapper.append(document.querySelector("#map-wrapper")) + let contentWrapper = Tag.div({ + id: "content-wrapper", + children: [ + 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) - addPointsContainer.append(pointInput) - addPointsContainer.append(removeButton) - + let addPointsContainer = Tag.div({ + children: [ + addButton, + pointInput, + removeButton + ] + }) document.querySelector("table tr:nth-child(16) td").prepend(addPointsContainer) addStylesToHead(`