mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-27 20:48:56 +02:00
Implement links object, convert old format to new on init
Co-authored-by: Fabian Wunsch <fabian@uriah.heep.sax.de> Co-authored-by: mxdanger <32040254+mxdanger@users.noreply.github.com>
This commit is contained in:
parent
9df8c3dd8a
commit
cdc4e4458c
6 changed files with 103 additions and 50 deletions
|
@ -224,8 +224,7 @@ function initDraw(){
|
|||
id: entryId,
|
||||
name: document.getElementById("nameField").value,
|
||||
description: document.getElementById("descriptionField").value,
|
||||
website: document.getElementById("websiteField").value,
|
||||
subreddit: document.getElementById("subredditField").value,
|
||||
links: {},
|
||||
center: {},
|
||||
path: {},
|
||||
};
|
||||
|
@ -252,6 +251,12 @@ function initDraw(){
|
|||
exportObject.center[key] = calculateCenter(value)
|
||||
})
|
||||
|
||||
let inputWebsite = document.getElementById("websiteField").value.split('\n').map(line => line.trim()).filter(line => line)
|
||||
let inputSubreddit = document.getElementById("subredditField").value.split('\n').map(line => line.trim().replace(/^\/?r\//, '')).filter(line => line)
|
||||
|
||||
if (inputWebsite.length) exportObject.links.website = inputWebsite
|
||||
if (inputSubreddit.length) exportObject.links.subreddit = inputSubreddit
|
||||
|
||||
var jsonString = JSON.stringify(exportObject, null, "\t");
|
||||
var textarea = document.getElementById("exportString");
|
||||
jsonString = jsonString.split("\n");
|
||||
|
@ -412,8 +417,8 @@ function initDraw(){
|
|||
entry = getEntry(params.get('id'))
|
||||
document.getElementById("nameField").value = entry.name
|
||||
document.getElementById("descriptionField").value = entry.description
|
||||
document.getElementById("websiteField").value = entry.website
|
||||
document.getElementById("subredditField").value = entry.subreddit
|
||||
document.getElementById("websiteField").value = entry.links.website.join('\n')
|
||||
document.getElementById("subredditField").value = entry.links.subreddit.map(sub => '/r/' + sub).join('\n')
|
||||
path = entry.path
|
||||
redoButton.disabled = true;
|
||||
undoButton.disabled = false;
|
||||
|
|
|
@ -14,6 +14,7 @@
|
|||
*/
|
||||
|
||||
function createInfoBlock(entry) {
|
||||
// console.log(entry)
|
||||
function createInfoParagraph(name, value){
|
||||
let entryParagraphPositionElement = document.createElement("p");
|
||||
let nameElement = document.createElement("span");
|
||||
|
@ -57,32 +58,40 @@ function createInfoBlock(entry) {
|
|||
element.appendChild(createInfoParagraph("Area: ", `${area} pixels`));
|
||||
}
|
||||
|
||||
if (entry.website) {
|
||||
let websiteLinkElement = document.createElement("a");
|
||||
websiteLinkElement.target = "_blank";
|
||||
websiteLinkElement.href = entry.website;
|
||||
websiteLinkElement.innerText = "Website";
|
||||
element.appendChild(websiteLinkElement);
|
||||
}
|
||||
if (entry.subreddit) {
|
||||
var subreddits = entry.subreddit.split(",");
|
||||
|
||||
for (var i in subreddits) {
|
||||
var subreddit = subreddits[i].trim();
|
||||
if (subreddit.substring(0, 2) == "r/") {
|
||||
subreddit = "/" + subreddit;
|
||||
} else if (subreddit.substring(0, 1) != "/") {
|
||||
entry.links.subreddit.forEach(subreddit => {
|
||||
subreddit = "/r/" + subreddit;
|
||||
}
|
||||
let subredditLinkElement = document.createElement("a");
|
||||
subredditLinkElement.target = "_blank";
|
||||
subredditLinkElement.href = "https://reddit.com" + subreddit;
|
||||
subredditLinkElement.innerText = subreddit;
|
||||
element.appendChild(subredditLinkElement);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
entry.links.website.forEach(link => {
|
||||
let websiteLinkElement = document.createElement("a");
|
||||
websiteLinkElement.target = "_blank";
|
||||
websiteLinkElement.href = link;
|
||||
websiteLinkElement.innerText = "Website";
|
||||
element.appendChild(websiteLinkElement);
|
||||
})
|
||||
|
||||
entry.links.discord.forEach(link => {
|
||||
let websiteLinkElement = document.createElement("a");
|
||||
websiteLinkElement.target = "_blank";
|
||||
websiteLinkElement.href = link;
|
||||
websiteLinkElement.innerText = "Discord";
|
||||
element.appendChild(websiteLinkElement);
|
||||
})
|
||||
|
||||
entry.links.wiki.forEach(link => {
|
||||
let websiteLinkElement = document.createElement("a");
|
||||
websiteLinkElement.target = "_blank";
|
||||
websiteLinkElement.href = link;
|
||||
websiteLinkElement.innerText = "Wiki Article";
|
||||
element.appendChild(websiteLinkElement);
|
||||
})
|
||||
|
||||
let idElement = createInfoParagraph("ID: ", entry.id);
|
||||
idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;";
|
||||
element.appendChild(idElement);
|
||||
|
||||
if (!entry.diff || entry.diff !== "delete") {
|
||||
|
|
|
@ -89,6 +89,43 @@ async function init(){
|
|||
});
|
||||
|
||||
atlasAll = atlas;
|
||||
|
||||
for (let atlasIndex in atlasAll) {
|
||||
if (Array.isArray(atlasAll[atlasIndex].path)) {
|
||||
let currentPath = atlasAll[atlasIndex].path
|
||||
atlasAll[atlasIndex].path = {}
|
||||
atlasAll[atlasIndex].path[defaultPeriod] = currentPath
|
||||
}
|
||||
if (Array.isArray(atlasAll[atlasIndex].center)) {
|
||||
let currentCenter = atlasAll[atlasIndex].center
|
||||
atlasAll[atlasIndex].center = {}
|
||||
atlasAll[atlasIndex].center[defaultPeriod] = currentCenter
|
||||
}
|
||||
if (atlasAll[atlasIndex].links) {
|
||||
let currentLinks = atlasAll[atlasIndex].links
|
||||
atlasAll[atlasIndex].links = {
|
||||
website: [],
|
||||
subreddit: [],
|
||||
discord: [],
|
||||
wiki: [],
|
||||
...currentLinks
|
||||
}
|
||||
} else {
|
||||
atlasAll[atlasIndex].links = {
|
||||
website: [],
|
||||
subreddit: [],
|
||||
discord: [],
|
||||
wiki: []
|
||||
}
|
||||
|
||||
if (atlasAll[atlasIndex].website) atlasAll[atlasIndex].links.website = [atlasAll[atlasIndex].website]
|
||||
if (atlasAll[atlasIndex].subreddit) atlasAll[atlasIndex].links.subreddit = atlasAll[atlasIndex].subreddit.split(',').map(subreddit => subreddit.trim().replace(/^\/r\//, ''))
|
||||
|
||||
delete atlasAll[atlasIndex].website
|
||||
delete atlasAll[atlasIndex].subreddit
|
||||
}
|
||||
}
|
||||
|
||||
updateTime(period)
|
||||
|
||||
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
||||
|
|
|
@ -108,6 +108,8 @@ timelineSlider.max = timeConfig.length - 1;
|
|||
// document.querySelector('#period-group .period-end').max = defaultPeriod
|
||||
timelineSlider.value = period;
|
||||
|
||||
updateBackground(period)
|
||||
|
||||
timelineSlider.addEventListener("input", (event) => {
|
||||
updateTime(parseInt(event.target.value))
|
||||
})
|
||||
|
@ -132,7 +134,7 @@ const dispatchTimeUpdateEvent = (period = timelineSlider.value, atlas = atlas) =
|
|||
document.dispatchEvent(timeUpdateEvent);
|
||||
}
|
||||
|
||||
async function updateTime(currentPeriod) {
|
||||
async function updateBackground(currentPeriod) {
|
||||
period = currentPeriod
|
||||
let configObject = timeConfig[currentPeriod];
|
||||
if (!configObject.image) {
|
||||
|
@ -141,16 +143,15 @@ async function updateTime(currentPeriod) {
|
|||
configObject.image = URL.createObjectURL(imageBlob);
|
||||
}
|
||||
image.src = configObject.image;
|
||||
// TEMP ATLAS ONLY ON LAST TIMESTAMP
|
||||
|
||||
return configObject
|
||||
}
|
||||
|
||||
async function updateTime(currentPeriod) {
|
||||
atlas = []
|
||||
for ( var atlasIndex in atlasAll ) {
|
||||
var pathChosen, centerChosen
|
||||
|
||||
if (Array.isArray(atlasAll[atlasIndex].path)) {
|
||||
if (currentPeriod !== defaultPeriod) continue
|
||||
pathChosen = atlasAll[atlasIndex].path
|
||||
centerChosen = atlasAll[atlasIndex].center
|
||||
} else {
|
||||
var validPeriods2 = Object.keys(atlasAll[atlasIndex].path)
|
||||
var chosenIndex
|
||||
|
||||
|
@ -169,7 +170,6 @@ async function updateTime(currentPeriod) {
|
|||
if (chosenIndex === undefined) continue
|
||||
pathChosen = Object.values(atlasAll[atlasIndex].path)[chosenIndex]
|
||||
centerChosen = Object.values(atlasAll[atlasIndex].center)[chosenIndex]
|
||||
}
|
||||
|
||||
if (pathChosen === undefined) continue
|
||||
|
||||
|
@ -179,6 +179,7 @@ async function updateTime(currentPeriod) {
|
|||
center: centerChosen,
|
||||
})
|
||||
}
|
||||
let configObject = await updateBackground(currentPeriod)
|
||||
dispatchTimeUpdateEvent(currentPeriod, atlas)
|
||||
if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString()
|
||||
else tooltip.querySelector('p').textContent = configObject.timestamp
|
||||
|
|
|
@ -390,6 +390,7 @@ function buildObjectsList(filter = null, sort = null){
|
|||
}
|
||||
|
||||
|
||||
// console.log(sortedAtlas[i])
|
||||
var element = createInfoBlock(sortedAtlas[i]);
|
||||
|
||||
element.entry = sortedAtlas[i];
|
||||
|
|
|
@ -206,9 +206,9 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
|||
<label for="descriptionField">Description</label>
|
||||
<textarea id="descriptionField" placeholder="A short description to be understood by everyone"></textarea>
|
||||
<label for="websiteField">Website</label>
|
||||
<input id="websiteField" type="text" value="" placeholder="https://example.com">
|
||||
<textarea id="websiteField" placeholder="https://example.com"></textarea>
|
||||
<label for="subredditField">Subreddit</label>
|
||||
<input id="subredditField" type="text" value="" placeholder="/r/example">
|
||||
<textarea id="subredditField" placeholder="/r/example"></textarea>
|
||||
<div id="infoButtons">
|
||||
<button id="cancelButton">Back</button>
|
||||
<button id="exportButton">OK</button>
|
||||
|
|
Loading…
Reference in a new issue