refactor createElement
This commit is contained in:
parent
b52b15accf
commit
fbaff3bdf3
181
main.js
181
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(`
|
||||
|
||||
Loading…
Reference in New Issue
Block a user