mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-28 21:49:06 +02:00
Add entry periods
This commit is contained in:
parent
6faec6f11d
commit
2d20e0931d
5 changed files with 107 additions and 49 deletions
|
@ -31,6 +31,10 @@ function initDraw(){
|
||||||
var objectInfoBox = document.getElementById("objectInfo");
|
var objectInfoBox = document.getElementById("objectInfo");
|
||||||
var hintText = document.getElementById("hint");
|
var hintText = document.getElementById("hint");
|
||||||
|
|
||||||
|
var startPeriodField = document.getElementById('startPeriodField')
|
||||||
|
var endPeriodField = document.getElementById('endPeriodField')
|
||||||
|
var periodVisbilityInfo = document.getElementById('periodVisbilityInfo')
|
||||||
|
|
||||||
var exportButton = document.getElementById("exportButton");
|
var exportButton = document.getElementById("exportButton");
|
||||||
var cancelButton = document.getElementById("cancelButton");
|
var cancelButton = document.getElementById("cancelButton");
|
||||||
|
|
||||||
|
@ -212,8 +216,14 @@ function initDraw(){
|
||||||
website: document.getElementById("websiteField").value,
|
website: document.getElementById("websiteField").value,
|
||||||
subreddit: document.getElementById("subredditField").value,
|
subreddit: document.getElementById("subredditField").value,
|
||||||
center: calculateCenter(path),
|
center: calculateCenter(path),
|
||||||
path: path
|
path: path,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (startPeriodField.value === endPeriodField.value) {
|
||||||
|
exportObject.period = [startPeriodField.value]
|
||||||
|
} else if (startPeriodField.value * 1 < endPeriodField.value * 1) {
|
||||||
|
exportObject.period = [startPeriodField.value + "-" + endPeriodField.value]
|
||||||
|
}
|
||||||
var jsonString = JSON.stringify(exportObject, null, "\t");
|
var jsonString = JSON.stringify(exportObject, null, "\t");
|
||||||
var textarea = document.getElementById("exportString");
|
var textarea = document.getElementById("exportString");
|
||||||
jsonString = jsonString.split("\n");
|
jsonString = jsonString.split("\n");
|
||||||
|
@ -287,6 +297,11 @@ function initDraw(){
|
||||||
objectDraw.style.display = "none";
|
objectDraw.style.display = "none";
|
||||||
hintText.style.display = "none";
|
hintText.style.display = "none";
|
||||||
document.getElementById("nameField").focus();
|
document.getElementById("nameField").focus();
|
||||||
|
if (period >= startPeriodField.value * 1 && period <= endPeriodField.value * 1) {
|
||||||
|
periodVisbilityInfo.textContent = ""
|
||||||
|
} else {
|
||||||
|
periodVisbilityInfo.textContent = "Not visible during this period!"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function reset(){
|
function reset(){
|
||||||
|
@ -429,6 +444,14 @@ function initDraw(){
|
||||||
applyView();
|
applyView();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.addEventListener('timeupdate', (event) => {
|
||||||
|
if (period >= startPeriodField.value && period <= endPeriodField.value) {
|
||||||
|
periodVisbilityInfo.textContent = ""
|
||||||
|
} else {
|
||||||
|
periodVisbilityInfo.textContent = "Not visible during this period!"
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -64,6 +64,9 @@ function applyView(){
|
||||||
}
|
}
|
||||||
|
|
||||||
var atlas = null;
|
var atlas = null;
|
||||||
|
window.atlas = atlas
|
||||||
|
var atlasAll = null
|
||||||
|
window.atlasAll = atlasAll
|
||||||
|
|
||||||
if (document.location.host !== prodDomain) document.body.dataset.dev = ""
|
if (document.location.host !== prodDomain) document.body.dataset.dev = ""
|
||||||
|
|
||||||
|
@ -85,7 +88,7 @@ async function init(){
|
||||||
return 0;
|
return 0;
|
||||||
});
|
});
|
||||||
//TEMP FOR TIME TRAVEL
|
//TEMP FOR TIME TRAVEL
|
||||||
atlasBackup = atlas;
|
atlasAll = atlas;
|
||||||
|
|
||||||
|
|
||||||
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
||||||
|
@ -170,7 +173,7 @@ async function init(){
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
//TEMP FOR TIME TRAVEL
|
//TEMP FOR TIME TRAVEL
|
||||||
atlasBackup = atlas;
|
atlasAll = atlas;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.warn("Diff mode failed to load, reverting to normal view.", error);
|
console.warn("Diff mode failed to load, reverting to normal view.", error);
|
||||||
} finally {
|
} finally {
|
||||||
|
|
|
@ -96,63 +96,83 @@ const timeConfig = [
|
||||||
let slider = document.getElementById("timeControlsSlider");
|
let slider = document.getElementById("timeControlsSlider");
|
||||||
let tooltip = document.getElementById("timeControlsTooltip")
|
let tooltip = document.getElementById("timeControlsTooltip")
|
||||||
let image = document.getElementById("image");
|
let image = document.getElementById("image");
|
||||||
let abortController = new AbortController()
|
|
||||||
let currentUpdateIndex = 0
|
|
||||||
let updateTimeout = setTimeout(null, 0)
|
|
||||||
|
|
||||||
let timeCallback = (a) => {};
|
let defaultPeriod = timeConfig.length
|
||||||
let atlasBackup = [];
|
var period = defaultPeriod
|
||||||
|
window.period = period
|
||||||
|
|
||||||
// SETUP
|
// SETUP
|
||||||
slider.max = timeConfig.length;
|
slider.max = timeConfig.length - 1;
|
||||||
slider.value = timeConfig.length;
|
document.querySelector('#startPeriodField').max = defaultPeriod
|
||||||
|
document.querySelector('#endPeriodField').max = defaultPeriod
|
||||||
|
slider.value = slider.max;
|
||||||
updateTime(slider.value)
|
updateTime(slider.value)
|
||||||
|
|
||||||
slider.addEventListener("input", (event) => {
|
slider.addEventListener("input", (event) => {
|
||||||
updateTooltip(parseInt(event.target.value))
|
|
||||||
clearTimeout(updateTimeout)
|
|
||||||
updateTimeout = setTimeout(() => {
|
|
||||||
updateTime(parseInt(event.target.value))
|
updateTime(parseInt(event.target.value))
|
||||||
}, 100)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
async function updateTime(index) {
|
document.querySelector('#startPeriodField').oninput = (event) => {
|
||||||
document.body.dataset.canvasLoading = true
|
slider.value = parseInt(event.target.value)
|
||||||
abortController.abort()
|
updateTime(parseInt(event.target.value))
|
||||||
abortController = new AbortController()
|
};
|
||||||
currentUpdateIndex++
|
|
||||||
let myUpdateIndex = currentUpdateIndex
|
document.querySelector('#endPeriodField').oninput = (event) => {
|
||||||
let configObject = timeConfig[index-1];
|
slider.value = parseInt(event.target.value)
|
||||||
|
updateTime(parseInt(event.target.value))
|
||||||
|
};
|
||||||
|
|
||||||
|
const dispatchTimeUpdateEvent = (period = slider.value, atlas = atlas) => {
|
||||||
|
console.log('dispatched!')
|
||||||
|
const timeUpdateEvent = new CustomEvent('timeupdate', {
|
||||||
|
detail: {
|
||||||
|
period: period,
|
||||||
|
atlas: atlas
|
||||||
|
}
|
||||||
|
});
|
||||||
|
document.dispatchEvent(timeUpdateEvent);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function updateTime(currentPeriod) {
|
||||||
|
period = currentPeriod
|
||||||
|
let configObject = timeConfig[currentPeriod];
|
||||||
if (!configObject.image) {
|
if (!configObject.image) {
|
||||||
console.log("fetching");
|
console.log("fetching");
|
||||||
let fetchResult = await fetch(configObject.url, {
|
let fetchResult = await fetch(configObject.url);
|
||||||
signal: abortController.signal
|
|
||||||
});
|
|
||||||
if (currentUpdateIndex !== myUpdateIndex) {
|
|
||||||
hideLoading()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
let imageBlob = await fetchResult.blob();
|
let imageBlob = await fetchResult.blob();
|
||||||
configObject.image = URL.createObjectURL(imageBlob);
|
configObject.image = URL.createObjectURL(imageBlob);
|
||||||
}
|
}
|
||||||
image.src = configObject.image;
|
image.src = configObject.image;
|
||||||
// TEMP ATLAS ONLY ON LAST TIMESTAMP
|
// TEMP ATLAS ONLY ON LAST TIMESTAMP
|
||||||
if (configObject.showAtlas) {
|
|
||||||
atlas = atlasBackup
|
|
||||||
} else {
|
|
||||||
atlas = []
|
atlas = []
|
||||||
|
for ( var atlasIndex in atlasAll ) {
|
||||||
|
var validPeriods = atlasAll[atlasIndex].period
|
||||||
|
var isValid = false
|
||||||
|
if (validPeriods === undefined) validPeriods = defaultPeriod + ""
|
||||||
|
if (typeof validPeriods === "string") {
|
||||||
|
validPeriods.split(', ').some(period => {
|
||||||
|
if (period.search('-') + 1) {
|
||||||
|
var [before, after] = period.split('-')
|
||||||
|
if (currentPeriod >= before && currentPeriod <= after) {
|
||||||
|
return atlas.push(atlasAll[atlasIndex])
|
||||||
}
|
}
|
||||||
timeCallback(atlas)
|
} else {
|
||||||
document.body.dataset.canvasLoading = false
|
var single = period
|
||||||
}
|
if (single == currentPeriod) {
|
||||||
|
return atlas.push(atlasAll[atlasIndex])
|
||||||
function updateTooltip(index) {
|
}
|
||||||
var configObject = timeConfig[index-1]
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
if (isValid) atlas.push(atlasAll[atlasIndex])
|
||||||
|
}
|
||||||
|
dispatchTimeUpdateEvent(currentPeriod, atlas)
|
||||||
if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString()
|
if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString()
|
||||||
else tooltip.querySelector('p').textContent = configObject.timestamp
|
else tooltip.querySelector('p').textContent = configObject.timestamp
|
||||||
tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
|
tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px"
|
||||||
}
|
}
|
||||||
|
|
||||||
tooltip.parentElement.addEventListener('mouseenter', () => updateTooltip(parseInt(slider.value)))
|
tooltip.parentElement.addEventListener('mouseenter', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px")
|
||||||
|
|
||||||
|
window.addEventListener('resize', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px")
|
||||||
|
|
||||||
window.addEventListener('resize', () => updateTooltip(parseInt(slider.value)))
|
|
|
@ -83,15 +83,11 @@ filterInput.addEventListener("input", function(e){
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById("sort").addEventListener("input", function(e){
|
document.getElementById("sort").addEventListener("input", function(e){
|
||||||
entriesOffset = 0;
|
|
||||||
entriesList.innerHTML = "";
|
|
||||||
entriesList.appendChild(moreEntriesButton);
|
|
||||||
|
|
||||||
if(this.value != "relevant"){
|
if(this.value != "relevant"){
|
||||||
defaultSort = this.value;
|
defaultSort = this.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
buildObjectsList(filterInput.value.toLowerCase(), this.value);
|
resetEntriesList(filterInput.value.toLowerCase(), this.value);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -268,7 +264,7 @@ function renderBackground(atlas){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function buildObjectsList(filter, sort){
|
function buildObjectsList(filter = null, sort = null){
|
||||||
|
|
||||||
if(entriesList.contains(moreEntriesButton)){
|
if(entriesList.contains(moreEntriesButton)){
|
||||||
entriesList.removeChild(moreEntriesButton);
|
entriesList.removeChild(moreEntriesButton);
|
||||||
|
@ -506,6 +502,15 @@ function shuffle(){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function resetEntriesList() {
|
||||||
|
entriesOffset = 0;
|
||||||
|
entriesList.innerHTML = "";
|
||||||
|
entriesList.appendChild(moreEntriesButton);
|
||||||
|
|
||||||
|
buildObjectsList(filter = null, sort = null)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
async function render(){
|
async function render(){
|
||||||
|
|
||||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||||
|
@ -728,10 +733,12 @@ function initView(){
|
||||||
renderBackground(atlas);
|
renderBackground(atlas);
|
||||||
render();
|
render();
|
||||||
|
|
||||||
timeCallback = (tempAtlas) => {
|
document.addEventListener('timeupdate', (event) => {
|
||||||
|
sortedAtlas = atlas.concat()
|
||||||
|
resetEntriesList(null, null)
|
||||||
renderBackground(tempAtlas);
|
renderBackground(tempAtlas);
|
||||||
render();
|
render();
|
||||||
}
|
})
|
||||||
|
|
||||||
// parse linked atlas entry id from link hash
|
// parse linked atlas entry id from link hash
|
||||||
/*if (window.location.hash.substring(3)){
|
/*if (window.location.hash.substring(3)){
|
||||||
|
|
|
@ -203,6 +203,11 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
|
||||||
<input id="websiteField" type="text" value="" placeholder="https://example.com">
|
<input id="websiteField" type="text" value="" placeholder="https://example.com">
|
||||||
<label for="subredditField">Subreddit</label>
|
<label for="subredditField">Subreddit</label>
|
||||||
<input id="subredditField" type="text" value="" placeholder="/r/example">
|
<input id="subredditField" type="text" value="" placeholder="/r/example">
|
||||||
|
<label for="websiteField">Start Period</label>
|
||||||
|
<input id="startPeriodField" type="range" min="0">
|
||||||
|
<label for="websiteField">End Period</label>
|
||||||
|
<input id="endPeriodField" type="range" min="0">
|
||||||
|
<p id="periodVisbilityInfo" style="text-align: center">Not visible during this period!</p>
|
||||||
<div id="infoButtons">
|
<div id="infoButtons">
|
||||||
<button id="cancelButton">Back</button>
|
<button id="cancelButton">Back</button>
|
||||||
<button id="exportButton">OK</button>
|
<button id="exportButton">OK</button>
|
||||||
|
|
Loading…
Reference in a new issue