diff --git a/main.js b/main.js index af6248b..d3fe999 100644 --- a/main.js +++ b/main.js @@ -173,20 +173,37 @@ } toDiv(altName = null, altDesc = null) { - let div = document.createElement('div') let desc = altDesc ?? this.desc - desc = desc ? "
" + - "" + - "
" : "" - div.innerHTML = "" + "
" + (this.content ?? "") + "
" + - 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: "Фото в админке" }