refactor createElement
This commit is contained in:
parent
edd7268b7b
commit
4dc432c2f5
132
main.js
132
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 + "'>" +
|
||||
"<img class='desc-icon' src='data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgo8c3ZnIGlkPSJzdmcyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAwIiB3aWR0aD0iMjAwIiB2ZXJzaW9uPSIxLjAiPgogPHBhdGggaWQ9InBhdGgyMzgyIiBkPSJtMTY1LjMzIDExMy40NGExMDMuNjEgMTAzLjYxIDAgMSAxIC0yMDcuMjIgMCAxMDMuNjEgMTAzLjYxIDAgMSAxIDIwNy4yMiAweiIgdHJhbnNmb3JtPSJtYXRyaXgoLjkzNzM5IDAgMCAuOTM3MzkgNDIuMTQzIC02LjMzOTIpIiBzdHJva2Utd2lkdGg9IjAiIGZpbGw9IiNmZmYiLz4KIDxnIGlkPSJsYXllcjEiPgogIDxwYXRoIGlkPSJwYXRoMjQxMyIgZD0ibTEwMCAwYy01NS4yIDAtMTAwIDQ0LjgtMTAwIDEwMC01LjA0OTVlLTE1IDU1LjIgNDQuOCAxMDAgMTAwIDEwMHMxMDAtNDQuOCAxMDAtMTAwLTQ0LjgtMTAwLTEwMC0xMDB6bTAgMTIuODEyYzQ4LjEzIDAgODcuMTkgMzkuMDU4IDg3LjE5IDg3LjE4OHMtMzkuMDYgODcuMTktODcuMTkgODcuMTktODcuMTg4LTM5LjA2LTg3LjE4OC04Ny4xOSAzOS4wNTgtODcuMTg4IDg3LjE4OC04Ny4xODh6bTEuNDcgMjEuMjVjLTUuNDUgMC4wMy0xMC42NTMgMC43MzctMTUuMjgyIDIuMDYzLTQuNjk5IDEuMzQ2LTkuMTI2IDMuNDg0LTEyLjg3NiA2LjIxOS0zLjIzOCAyLjM2Mi02LjMzMyA1LjM5MS04LjY4NyA4LjUzMS00LjE1OSA1LjU0OS02LjQ2MSAxMS42NTEtNy4wNjMgMTguNjg3LTAuMDQgMC40NjgtMC4wNyAwLjg2OC0wLjA2MiAwLjg3NiAwLjAxNiAwLjAxNiAyMS43MDIgMi42ODcgMjEuODEyIDIuNjg3IDAuMDUzIDAgMC4xMTMtMC4yMzQgMC4yODItMC45MzcgMS45NDEtOC4wODUgNS40ODYtMTMuNTIxIDEwLjk2OC0xNi44MTMgNC4zMi0yLjU5NCA5LjgwOC0zLjYxMiAxNS43NzgtMi45NjkgMi43NCAwLjI5NSA1LjIxIDAuOTYgNy4zOCAyIDIuNzEgMS4zMDEgNS4xOCAzLjM2MSA2Ljk0IDUuODEzIDEuNTQgMi4xNTYgMi40NiA0LjU4NCAyLjc1IDcuMzEyIDAuMDggMC43NTkgMC4wNSAyLjQ4LTAuMDMgMy4yMTktMC4yMyAxLjgyNi0wLjcgMy4zNzgtMS41IDQuOTY5LTAuODEgMS41OTctMS40OCAyLjUxNC0yLjc2IDMuODEyLTIuMDMgMi4wNzctNS4xOCA0LjgyOS0xMC43OCA5LjQwNy0zLjYgMi45NDQtNi4wNCA1LjE1Ni04LjEyIDcuMzQzLTQuOTQzIDUuMTc5LTcuMTkxIDkuMDY5LTguNTY0IDE0LjcxOS0wLjkwNSAzLjcyLTEuMjU2IDcuNTUtMS4xNTYgMTMuMTkgMC4wMjUgMS40IDAuMDYyIDIuNzMgMC4wNjIgMi45N3YwLjQzaDIxLjU5OGwwLjAzLTIuNGMwLjAzLTMuMjcgMC4yMS01LjM3IDAuNTYtNy40MSAwLjU3LTMuMjcgMS40My01IDMuOTQtNy44MSAxLjYtMS44IDMuNy0zLjc2IDYuOTMtNi40NyA0Ljc3LTMuOTkxIDguMTEtNi45OSAxMS4yNi0xMC4xMjUgNC45MS00LjkwNyA3LjQ2LTguMjYgOS4yOC0xMi4xODcgMS40My0zLjA5MiAyLjIyLTYuMTY2IDIuNDYtOS41MzIgMC4wNi0wLjgxNiAwLjA3LTMuMDMgMC0zLjk2OC0wLjQ1LTcuMDQzLTMuMS0xMy4yNTMtOC4xNS0xOS4wMzItMC44LTAuOTA5LTIuNzgtMi44ODctMy43Mi0zLjcxOC00Ljk2LTQuMzk0LTEwLjY5LTcuMzUzLTE3LjU2LTkuMDk0LTQuMTktMS4wNjItOC4yMy0xLjYtMTMuMzUtMS43NS0wLjc4LTAuMDIzLTEuNTktMC4wMzYtMi4zNy0wLjAzMnptLTEwLjkwOCAxMDMuNnYyMmgyMS45OTh2LTIyaC0yMS45OTh6Ii8+CiA8L2c+Cjwvc3ZnPgo='/>" +
|
||||
"</div>" : ""
|
||||
div.innerHTML = "<label for=''>" + (altName ?? this.name ?? "") + "</label>" + "<div>" + (this.content ?? "") + "</div>" +
|
||||
desc
|
||||
return div
|
||||
let descTooltip = desc ? Tag.div({
|
||||
classes: 'desc-icon-container',
|
||||
title: desc,
|
||||
children: [
|
||||
Tag.img({
|
||||
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')
|
||||
container.classList.add(...classList.split(" "))
|
||||
let container = Tag.div({
|
||||
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")
|
||||
fileContainer.classList.add("file-container")
|
||||
let fileContainer = Tag.div({
|
||||
classes: "file-container"
|
||||
})
|
||||
|
||||
const displayedFile = document.createElement(type ?? "a")
|
||||
displayedFile.classList.add("preview-small")
|
||||
const displayedFile = Tag.make(type ?? "a", {
|
||||
classes: "preview-small"
|
||||
})
|
||||
|
||||
if (type == "img") {
|
||||
displayedFile.src = preview
|
||||
@ -528,8 +547,9 @@
|
||||
displayedFile.textContent = "Файл"
|
||||
}
|
||||
|
||||
let fileButtonsContainer = document.createElement("div")
|
||||
fileButtonsContainer.classList.add("file-buttons-container")
|
||||
let fileButtonsContainer = Tag.div({
|
||||
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")
|
||||
fileContainer.classList.add("file-container", "file-container-new")
|
||||
let fileContainer = Tag.div({
|
||||
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")
|
||||
fileButtonsContainer.classList.add("file-buttons-container")
|
||||
let fileButtonsContainer = Tag.div({
|
||||
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")
|
||||
menuContainer.classList.add("sticky-menu")
|
||||
let menuContainer = Tag.make("nav", {
|
||||
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")
|
||||
copyLink.innerHTML = new Property(rows[2]).desc
|
||||
let copyLink = Tag.div({
|
||||
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")
|
||||
rowContentWrapper.classList.add("buttons-row__content-wrapper")
|
||||
let rowContentWrapper = Tag.div({
|
||||
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")
|
||||
legendLang.textContent = LEGEND_RU_LABEL
|
||||
|
||||
let legendDescHeader = Tag.div({
|
||||
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)
|
||||
legendDescContainer.append(legendRuDescContainer)
|
||||
legendDescContainer.append(legendRuHiddenDescContainer)
|
||||
legendDescContainer.append(legendEnDescContainer)
|
||||
legendDescContainer.append(legendEnHiddenDescContainer)
|
||||
legendDescContainer.append(hider)
|
||||
let legendDescContainer = Tag.div({
|
||||
classes: "legend-container__desc",
|
||||
children: [
|
||||
legendDescHeader,
|
||||
legendRuDescContainer,
|
||||
legendRuHiddenDescContainer,
|
||||
legendEnDescContainer,
|
||||
legendEnHiddenDescContainer,
|
||||
hider
|
||||
]
|
||||
})
|
||||
|
||||
legendContainer.append(legendDescContainer)
|
||||
|
||||
return legendContainer
|
||||
@ -1542,8 +1572,9 @@
|
||||
}
|
||||
|
||||
function makeLegendFiles(rows) {
|
||||
let legendFilesContainer = document.createElement("div")
|
||||
legendFilesContainer.classList.add("legend-container__files")
|
||||
let legendFilesContainer = Tag.div({
|
||||
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')
|
||||
adminFilesContainer.classList.add('admin-files-container')
|
||||
let adminFilesContainer = Tag.div({
|
||||
classes: 'admin-files-container'
|
||||
})
|
||||
|
||||
let imagesForAdminContainer = createFrom(rows, "files-container admin-photo-container", [
|
||||
{ index: 31, name: "Фото в админке" }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user