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:
Hans5958 2022-04-15 10:46:27 +07:00
parent 9df8c3dd8a
commit cdc4e4458c
6 changed files with 103 additions and 50 deletions

View file

@ -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;

View file

@ -14,6 +14,7 @@
*/
function createInfoBlock(entry) {
// console.log(entry)
function createInfoParagraph(name, value){
let entryParagraphPositionElement = document.createElement("p");
let nameElement = document.createElement("span");
@ -56,33 +57,41 @@ function createInfoBlock(entry) {
let area = calcPolygonArea(entry.path);
element.appendChild(createInfoParagraph("Area: ", `${area} pixels`));
}
if (entry.website) {
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 = entry.website;
websiteLinkElement.href = link;
websiteLinkElement.innerText = "Website";
element.appendChild(websiteLinkElement);
}
if (entry.subreddit) {
var subreddits = entry.subreddit.split(",");
})
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);
})
for (var i in subreddits) {
var subreddit = subreddits[i].trim();
if (subreddit.substring(0, 2) == "r/") {
subreddit = "/" + subreddit;
} else if (subreddit.substring(0, 1) != "/") {
subreddit = "/r/" + subreddit;
}
let subredditLinkElement = document.createElement("a");
subredditLinkElement.target = "_blank";
subredditLinkElement.href = "https://reddit.com" + subreddit;
subredditLinkElement.innerText = subreddit;
element.appendChild(subredditLinkElement);
}
}
let idElement = createInfoParagraph("ID: ", entry.id);
idElement.style.fontFamily = "Dejavu Sans Mono, sans, Sans-Serif;";
element.appendChild(idElement);
if (!entry.diff || entry.diff !== "delete") {

View file

@ -87,8 +87,45 @@ async function init(){
// a must be equal to b
return 0;
});
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);

View file

@ -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,36 +143,34 @@ 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
var validPeriods2 = Object.keys(atlasAll[atlasIndex].path)
var chosenIndex
for (let i in validPeriods2) {
let validPeriods = validPeriods2[i].split(', ')
for (let j in validPeriods) {
let [start, end] = parsePeriod(validPeriods[j])
if (isOnPeriod(start, end, currentPeriod)) {
chosenIndex = i
break
}
for (let i in validPeriods2) {
let validPeriods = validPeriods2[i].split(', ')
for (let j in validPeriods) {
let [start, end] = parsePeriod(validPeriods[j])
if (isOnPeriod(start, end, currentPeriod)) {
chosenIndex = i
break
}
if (chosenIndex) break
}
if (chosenIndex === undefined) continue
pathChosen = Object.values(atlasAll[atlasIndex].path)[chosenIndex]
centerChosen = Object.values(atlasAll[atlasIndex].center)[chosenIndex]
if (chosenIndex) break
}
if (chosenIndex === undefined) continue
pathChosen = Object.values(atlasAll[atlasIndex].path)[chosenIndex]
centerChosen = Object.values(atlasAll[atlasIndex].center)[chosenIndex]
if (pathChosen === undefined) continue
atlas.push({
@ -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

View file

@ -390,6 +390,7 @@ function buildObjectsList(filter = null, sort = null){
}
// console.log(sortedAtlas[i])
var element = createInfoBlock(sortedAtlas[i]);
element.entry = sortedAtlas[i];

View file

@ -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>