atlas/web/_js/main/infoblock.js

188 lines
6.8 KiB
JavaScript
Raw Normal View History

/*!
* The 2022 r/place Atlas
* Copyright (c) 2017 Roland Rytz <roland@draemm.li>
* Copyright (c) 2022 Place Atlas contributors
* Licensed under AGPL-3.0 (https://place-atlas.stefanocoding.me/license.txt)
*/
2023-03-19 03:19:37 +01:00
const baseLinkElement = document.createElement("a")
baseLinkElement.className = "btn btn-primary text-truncate"
baseLinkElement.target = "_blank"
baseLinkElement.rel = "noopener noreferrer"
2023-03-19 06:27:16 +01:00
const baseGroupElement = document.createElement("div")
baseGroupElement.className = "btn-group-vertical"
2022-05-11 08:15:42 +02:00
function createLabel(name, value, parent) {
const nameElement = document.createElement("span")
nameElement.className = "fw-bold"
nameElement.textContent = name
const valueElement = document.createElement("span")
valueElement.textContent = value
parent.appendChild(nameElement)
parent.appendChild(valueElement)
return parent
}
2022-05-11 08:15:42 +02:00
function createInfoListItem(name, value) {
const entryInfoListElement = document.createElement("li")
entryInfoListElement.className = "list-group-item"
createLabel(name, value, entryInfoListElement)
return entryInfoListElement
}
function createInfoBlock(entry, isPreview) {
2022-05-06 09:41:22 +02:00
const element = document.createElement("div")
element.className = "card mb-2 overflow-hidden shadow"
2022-05-06 09:41:22 +02:00
const headerElement = document.createElement("h4")
headerElement.className = "card-header"
2022-05-06 09:41:22 +02:00
const linkElement = document.createElement("a")
linkElement.className = "text-decoration-none d-flex justify-content-between text-body"
if (isPreview) linkElement.href = "#"
2023-03-26 13:58:17 +02:00
else {
linkElement.href = formatHash(entry.id)
linkElement.addEventListener('click', e => {
e.preventDefault()
location.hash = formatHash(entry.id)
window.dispatchEvent(new HashChangeEvent("hashchange"))
})
}
2022-05-06 09:41:22 +02:00
const linkNameElement = document.createElement("span")
linkNameElement.className = "flex-grow-1 text-break"
linkNameElement.textContent = entry.name
headerElement.appendChild(linkElement)
linkElement.appendChild(linkNameElement)
linkElement.insertAdjacentHTML("beforeend", '<i class="bi bi-link-45deg align-self-center link-primary" aria-hidden="true"></i>')
2022-05-06 09:41:22 +02:00
element.appendChild(headerElement)
const bodyElement = document.createElement("div")
bodyElement.className = "card-body d-flex flex-column gap-3"
element.appendChild(bodyElement)
if (entry.description) {
2022-05-06 09:41:22 +02:00
const descElement = document.createElement("div")
descElement.id = "objectDescription"
// Formats single line break as br and two line breaks as a new paragraph
2022-05-06 09:41:22 +02:00
let formattedDesc = entry.description.replace(/\n{2}/g, '</p><p>')
formattedDesc = formattedDesc.replace(/\n/g, '<br>')
descElement.innerHTML = '<p>' + formattedDesc + '</p>'
bodyElement.appendChild(descElement)
}
2022-05-06 09:41:22 +02:00
const linkListElement = document.createElement("div")
linkListElement.className = "d-flex flex-column gap-2"
bodyElement.appendChild(linkListElement)
2022-05-06 09:41:22 +02:00
const listElement = document.createElement("ul")
listElement.className = "list-group list-group-flush"
element.appendChild(listElement)
if (entry.diff) {
const diffElement = createInfoListItem("Diff: ", entry.diff)
2023-03-17 18:30:33 +01:00
if (entry.diff === "add") {
2022-05-06 09:41:22 +02:00
diffElement.className = "list-group-item list-group-item-success"
2023-03-17 18:30:33 +01:00
} else if (entry.diff === "edit") {
2022-05-06 09:41:22 +02:00
diffElement.className = "list-group-item list-group-item-warning"
2023-03-17 18:30:33 +01:00
} else if (entry.diff === "delete") {
2022-05-06 09:41:22 +02:00
diffElement.className = "list-group-item list-group-item-danger"
}
2022-05-06 09:41:22 +02:00
listElement.appendChild(diffElement)
}
2023-03-26 13:58:17 +02:00
// Entry data submitted to preview does not include center or path
if (!isPreview) {
2023-03-26 13:58:17 +02:00
const [x, y] = entry?.center
2022-05-06 09:41:22 +02:00
listElement.appendChild(createInfoListItem("Position: ", `${Math.floor(x)}, ${Math.floor(y)}`))
if (entry.path) {
const area = calcPolygonArea(entry.path)
listElement.appendChild(createInfoListItem("Area: ", `${area} pixels`))
}
}
if (entry.links?.subreddit?.length) {
2023-03-19 06:27:16 +01:00
const subredditGroupElement = baseGroupElement.cloneNode()
2022-05-06 09:41:22 +02:00
linkListElement.appendChild(subredditGroupElement)
entry.links.subreddit.forEach(subreddit => {
if (!subreddit) return
subreddit = "r/" + subreddit
const subredditLinkElement = baseLinkElement.cloneNode()
subredditLinkElement.href = "https://reddit.com/" + subreddit
subredditLinkElement.innerHTML = `<i class="bi bi-reddit" aria-hidden="true"></i> ${subreddit}`
subredditGroupElement.appendChild(subredditLinkElement)
2022-05-06 09:41:22 +02:00
})
}
if (entry.links?.website?.length) {
2023-03-19 06:27:16 +01:00
const websiteGroupElement = baseGroupElement.cloneNode()
2022-05-06 09:41:22 +02:00
linkListElement.appendChild(websiteGroupElement)
entry.links.website.forEach(link => {
if (!link) return
const websiteLinkElement = baseLinkElement.cloneNode()
websiteLinkElement.href = link
try {
const urlObject = new URL(link)
websiteLinkElement.innerHTML = `<i class="bi bi-globe" aria-hidden="true"></i> ${urlObject.hostname.replace(/^www./, "")}`
} catch (e) {
websiteLinkElement.innerHTML = `<i class="bi bi-globe" aria-hidden="true"></i> Website`
}
websiteGroupElement.appendChild(websiteLinkElement)
2022-05-06 09:41:22 +02:00
})
}
if (entry.links?.discord?.length) {
2023-03-19 06:27:16 +01:00
const discordGroupElement = baseGroupElement.cloneNode()
2022-05-06 09:41:22 +02:00
linkListElement.appendChild(discordGroupElement)
entry.links.discord.forEach(link => {
if (!link) return
const discordLinkElement = baseLinkElement.cloneNode()
discordLinkElement.href = "https://discord.gg/" + link
discordLinkElement.innerHTML = `<i class="bi bi-discord" aria-hidden="true"></i> ${link}`
discordGroupElement.appendChild(discordLinkElement)
2022-05-06 09:41:22 +02:00
})
}
if (entry.links?.wiki?.length) {
2023-03-19 06:27:16 +01:00
const wikiGroupElement = baseGroupElement.cloneNode()
2022-05-06 09:41:22 +02:00
linkListElement.appendChild(wikiGroupElement)
entry.links.wiki.forEach(link => {
if (!link) return
const wikiLinkElement = baseLinkElement.cloneNode()
wikiLinkElement.href = "https://place-wiki.stefanocoding.me/wiki/" + link.replace(/ /g, '_')
wikiLinkElement.innerHTML = `<i class="bi bi-book" aria-hidden="true"></i>r/place Wiki Article`
wikiGroupElement.appendChild(wikiLinkElement)
2022-05-06 09:41:22 +02:00
})
}
// Adds id footer
2022-05-06 09:41:22 +02:00
const idElement = document.createElement("div")
idElement.className = "py-1"
createLabel("ID: ", entry.id, idElement)
const idElementContainer = document.createElement("div")
idElementContainer.className = "card-footer d-flex justify-content-between align-items-center"
idElementContainer.appendChild(idElement)
element.appendChild(idElementContainer)
// Adds edit button only if element is not deleted
if (!isPreview && (!entry.diff || entry.diff !== "delete")) {
2022-05-06 09:41:22 +02:00
const editElement = document.createElement("a")
editElement.textContent = "Edit"
editElement.className = "btn btn-sm btn-outline-primary"
editElement.href = "./?mode=draw&id=" + entry.id + formatHash(undefined)
2022-05-06 09:41:22 +02:00
editElement.title = "Edit " + entry.name
idElementContainer.appendChild(editElement)
}
// Removes empty elements
2022-05-06 09:41:22 +02:00
if (!bodyElement.hasChildNodes()) bodyElement.remove()
if (!linkListElement.hasChildNodes()) linkListElement.remove()
if (!listElement.hasChildNodes()) listElement.remove()
2022-05-06 09:41:22 +02:00
return element
}