atlas/web/_js/infoblock.js

205 lines
7.8 KiB
JavaScript
Raw Normal View History

/*
========================================================================
2022-04-28 12:41:19 +02:00
The 2022 r/place Atlas
An atlas of Reddit's 2022 r/place, with information to each
artwork of the canvas provided by the community.
Copyright (c) 2017 Roland Rytz <roland@draemm.li>
Copyright (c) 2022 Place Atlas contributors
Licensed under the GNU Affero General Public License Version 3
https://place-atlas.stefanocoding.me/license.txt
========================================================================
*/
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 = "#"
else {
const targetPeriod = formatPeriod(currentPeriod, currentPeriod, currentVariation)
linkElement.href = "#" + entry.id
if (targetPeriod && targetPeriod != defaultPeriod) linkElement.href += "/" + targetPeriod
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)
if (entry.diff == "add") {
2022-05-06 09:41:22 +02:00
diffElement.className = "list-group-item list-group-item-success"
} else if (entry.diff == "edit") {
2022-05-06 09:41:22 +02:00
diffElement.className = "list-group-item list-group-item-warning"
} 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)
}
// Enetry data submitted to preview does not include center or path
if (!isPreview) {
2022-05-06 09:41:22 +02:00
const [x, y] = entry.center
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 === undefined || entry.links.subreddit.length == 0)) {
2022-05-06 09:41:22 +02:00
const subredditGroupElement = document.createElement("div")
subredditGroupElement.className = "btn-group-vertical"
linkListElement.appendChild(subredditGroupElement)
entry.links.subreddit.forEach(subreddit => {
if (subreddit) {
2022-05-06 09:41:22 +02:00
subreddit = "r/" + subreddit
const subredditLinkElement = document.createElement("a")
subredditLinkElement.className = "btn btn-primary text-truncate"
subredditLinkElement.target = "_blank"
subredditLinkElement.rel = "noopener noreferrer"
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 === undefined || entry.links.website.length == 0)) {
2022-05-06 09:41:22 +02:00
const websiteGroupElement = document.createElement("div")
websiteGroupElement.className = "btn-group-vertical"
linkListElement.appendChild(websiteGroupElement)
entry.links.website.forEach(link => {
if (link) {
2022-05-06 09:41:22 +02:00
const websiteLinkElement = document.createElement("a")
websiteLinkElement.className = "btn btn-primary text-truncate"
2022-05-06 09:41:22 +02:00
websiteLinkElement.target = "_blank"
websiteLinkElement.rel = "noopener noreferrer"
websiteLinkElement.href = link
try {
const urlObject = new URL(link)
2022-05-06 09:41:22 +02:00
websiteLinkElement.innerHTML = `<i class="bi bi-globe" aria-hidden="true"></i> ${urlObject.hostname.replace(/^www./, "")}`
} catch (e) {
2022-05-06 09:41:22 +02:00
websiteLinkElement.innerHTML = `<i class="bi bi-globe" aria-hidden="true"></i> Website`
}
2022-05-06 09:41:22 +02:00
websiteGroupElement.appendChild(websiteLinkElement)
}
2022-05-06 09:41:22 +02:00
})
}
if (!(entry.links.discord === undefined || entry.links.discord.length == 0)) {
2022-05-06 09:41:22 +02:00
const discordGroupElement = document.createElement("div")
discordGroupElement.className = "btn-group-vertical"
linkListElement.appendChild(discordGroupElement)
entry.links.discord.forEach(link => {
if (link) {
2022-05-06 09:41:22 +02:00
const discordLinkElement = document.createElement("a")
discordLinkElement.className = "btn btn-primary text-truncate"
2022-05-06 09:41:22 +02:00
discordLinkElement.target = "_blank"
discordLinkElement.rel = "noopener noreferrer"
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 === undefined || entry.links.wiki.length == 0)) {
2022-05-06 09:41:22 +02:00
const wikiGroupElement = document.createElement("div")
wikiGroupElement.className = "btn-group-vertical"
linkListElement.appendChild(wikiGroupElement)
entry.links.wiki.forEach(link => {
if (link) {
2022-05-06 09:41:22 +02:00
const wikiLinkElement = document.createElement("a")
wikiLinkElement.className = "btn btn-primary text-truncate"
2022-05-06 09:41:22 +02:00
wikiLinkElement.target = "_blank"
wikiLinkElement.rel = "noopener noreferrer"
wikiLinkElement.href = "https://place-wiki.stefanocoding.me/wiki/" + link.replace(/ /g, '_')
wikiLinkElement.innerHTML = `<i class="bi bi-book" aria-hidden="true"></i> 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
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
}