mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-27 12:39:18 +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 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 cancelButton = document.getElementById("cancelButton");
|
||||
|
||||
|
@ -212,8 +216,14 @@ function initDraw(){
|
|||
website: document.getElementById("websiteField").value,
|
||||
subreddit: document.getElementById("subredditField").value,
|
||||
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 textarea = document.getElementById("exportString");
|
||||
jsonString = jsonString.split("\n");
|
||||
|
@ -287,6 +297,11 @@ function initDraw(){
|
|||
objectDraw.style.display = "none";
|
||||
hintText.style.display = "none";
|
||||
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(){
|
||||
|
@ -429,6 +444,14 @@ function initDraw(){
|
|||
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;
|
||||
window.atlas = atlas
|
||||
var atlasAll = null
|
||||
window.atlasAll = atlasAll
|
||||
|
||||
if (document.location.host !== prodDomain) document.body.dataset.dev = ""
|
||||
|
||||
|
@ -85,7 +88,7 @@ async function init(){
|
|||
return 0;
|
||||
});
|
||||
//TEMP FOR TIME TRAVEL
|
||||
atlasBackup = atlas;
|
||||
atlasAll = atlas;
|
||||
|
||||
|
||||
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);
|
||||
|
@ -170,7 +173,7 @@ async function init(){
|
|||
});
|
||||
}
|
||||
//TEMP FOR TIME TRAVEL
|
||||
atlasBackup = atlas;
|
||||
atlasAll = atlas;
|
||||
} catch (error) {
|
||||
console.warn("Diff mode failed to load, reverting to normal view.", error);
|
||||
} finally {
|
||||
|
|
|
@ -96,63 +96,83 @@ const timeConfig = [
|
|||
let slider = document.getElementById("timeControlsSlider");
|
||||
let tooltip = document.getElementById("timeControlsTooltip")
|
||||
let image = document.getElementById("image");
|
||||
let abortController = new AbortController()
|
||||
let currentUpdateIndex = 0
|
||||
let updateTimeout = setTimeout(null, 0)
|
||||
|
||||
let timeCallback = (a) => {};
|
||||
let atlasBackup = [];
|
||||
let defaultPeriod = timeConfig.length
|
||||
var period = defaultPeriod
|
||||
window.period = period
|
||||
|
||||
// SETUP
|
||||
slider.max = timeConfig.length;
|
||||
slider.value = timeConfig.length;
|
||||
slider.max = timeConfig.length - 1;
|
||||
document.querySelector('#startPeriodField').max = defaultPeriod
|
||||
document.querySelector('#endPeriodField').max = defaultPeriod
|
||||
slider.value = slider.max;
|
||||
updateTime(slider.value)
|
||||
|
||||
slider.addEventListener("input", (event) => {
|
||||
updateTooltip(parseInt(event.target.value))
|
||||
clearTimeout(updateTimeout)
|
||||
updateTimeout = setTimeout(() => {
|
||||
updateTime(parseInt(event.target.value))
|
||||
}, 100)
|
||||
})
|
||||
|
||||
async function updateTime(index) {
|
||||
document.body.dataset.canvasLoading = true
|
||||
abortController.abort()
|
||||
abortController = new AbortController()
|
||||
currentUpdateIndex++
|
||||
let myUpdateIndex = currentUpdateIndex
|
||||
let configObject = timeConfig[index-1];
|
||||
document.querySelector('#startPeriodField').oninput = (event) => {
|
||||
slider.value = parseInt(event.target.value)
|
||||
updateTime(parseInt(event.target.value))
|
||||
};
|
||||
|
||||
document.querySelector('#endPeriodField').oninput = (event) => {
|
||||
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) {
|
||||
console.log("fetching");
|
||||
let fetchResult = await fetch(configObject.url, {
|
||||
signal: abortController.signal
|
||||
});
|
||||
if (currentUpdateIndex !== myUpdateIndex) {
|
||||
hideLoading()
|
||||
return
|
||||
}
|
||||
let fetchResult = await fetch(configObject.url);
|
||||
let imageBlob = await fetchResult.blob();
|
||||
configObject.image = URL.createObjectURL(imageBlob);
|
||||
}
|
||||
image.src = configObject.image;
|
||||
// TEMP ATLAS ONLY ON LAST TIMESTAMP
|
||||
if (configObject.showAtlas) {
|
||||
atlas = atlasBackup
|
||||
} else {
|
||||
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)
|
||||
document.body.dataset.canvasLoading = false
|
||||
} else {
|
||||
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()
|
||||
else tooltip.querySelector('p').textContent = configObject.timestamp
|
||||
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){
|
||||
entriesOffset = 0;
|
||||
entriesList.innerHTML = "";
|
||||
entriesList.appendChild(moreEntriesButton);
|
||||
|
||||
if(this.value != "relevant"){
|
||||
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)){
|
||||
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(){
|
||||
|
||||
context.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
@ -728,10 +733,12 @@ function initView(){
|
|||
renderBackground(atlas);
|
||||
render();
|
||||
|
||||
timeCallback = (tempAtlas) => {
|
||||
document.addEventListener('timeupdate', (event) => {
|
||||
sortedAtlas = atlas.concat()
|
||||
resetEntriesList(null, null)
|
||||
renderBackground(tempAtlas);
|
||||
render();
|
||||
}
|
||||
})
|
||||
|
||||
// parse linked atlas entry id from link hash
|
||||
/*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">
|
||||
<label for="subredditField">Subreddit</label>
|
||||
<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">
|
||||
<button id="cancelButton">Back</button>
|
||||
<button id="exportButton">OK</button>
|
||||
|
|
Loading…
Reference in a new issue