MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-06-16 10:18:47 +02:00
Code Issues Projects Releases Wiki Activity

Add entry periods

Browse source
This commit is contained in:
Hans5958 2022-04-10 16:11:34 +07:00
parent 6faec6f11d
commit 2d20e0931d
5 changed files with 107 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
web/_js/draw.js
View file

@ -30,6 +30,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!"
}
})
}

7
web/_js/main.js
View file

@ -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
web/_js/time.js
View file

@ -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)
updateTime(parseInt(event.target.value))
})
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 = []
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])
}
} else {
var single = period
if (single == currentPeriod) {
return atlas.push(atlasAll[atlasIndex])
}
}
})
}
if (isValid) atlas.push(atlasAll[atlasIndex])
}
timeCallback(atlas)
document.body.dataset.canvasLoading = false
}
function updateTooltip(index) {
var configObject = timeConfig[index-1]
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)))

23
web/_js/view.js
View file

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

5
web/index.html
View file

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