atlas/web/_js/time.js

137 lines
3.7 KiB
JavaScript
Raw Normal View History

/*
========================================================================
The 2022 /r/place Atlas
An Atlas of Reddit's 2022 /r/place, with information to each
artwork of the canvas provided by the community.
Copyright (c) 2017 Roland Rytz <roland@draemm.li>
Copyright (c) 2022 r/placeAtlas2 contributors
Licensed under the GNU Affero General Public License Version 3
https://place-atlas.stefanocoding.me/license.txt
========================================================================
*/
2022-04-05 20:17:39 +02:00
const timeConfig = [
{
2022-04-06 19:04:07 +02:00
timestamp: 1648822500,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1648822500.png",
2022-04-05 20:17:39 +02:00
image: null
},
{
2022-04-06 19:04:07 +02:00
timestamp: 1648847036,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1648847036.png",
2022-04-05 20:17:39 +02:00
image: null
},
{
2022-04-06 19:04:07 +02:00
timestamp: 1648870452,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1648870452.png",
2022-04-06 19:04:07 +02:00
image: null
},
{
timestamp: 1648893666,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1648893666.png",
2022-04-06 19:04:07 +02:00
image: null
},
{
timestamp: 1648917500,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1648917500.png",
2022-04-06 19:04:07 +02:00
image: null
},
{
timestamp: 1648942113,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1648942113.png",
2022-04-06 19:04:07 +02:00
image: null
},
{
timestamp: 1648956234,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1648956234.png",
2022-04-06 19:04:07 +02:00
image: null
},
{
timestamp: 1648968061,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1648968061.png",
2022-04-06 19:04:07 +02:00
image: null
},
{
timestamp: 1648979987,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1648979987.png",
2022-04-06 19:04:07 +02:00
image: null
},
{
timestamp: 1648992274,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1648992274.png",
2022-04-06 19:04:07 +02:00
image: null
},
{
timestamp: 1649012915,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1649012915.png",
2022-04-06 19:04:07 +02:00
image: null
},
{
timestamp: 1649037182,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1649037182.png",
2022-04-06 19:04:07 +02:00
image: null
},
{
timestamp: 1649060793,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1649060793.png",
2022-04-06 19:04:07 +02:00
image: null
},
{
timestamp: 1649084741,
2022-04-08 06:47:59 +02:00
url: "./_img/place/1649084741.png",
2022-04-05 20:17:39 +02:00
image: null
},
2022-04-08 00:06:24 +02:00
{
timestamp: 1649113199,
2022-04-08 06:47:59 +02:00
url: "./_img/place/final.png",
2022-04-08 01:11:29 +02:00
image: null,
showAtlas: true,
2022-04-10 09:03:08 +02:00
}
2022-04-05 20:17:39 +02:00
];
let slider = document.getElementById("timeControlsSlider");
2022-04-10 09:03:08 +02:00
let tooltip = document.getElementById("timeControlsTooltip")
2022-04-05 20:17:39 +02:00
let image = document.getElementById("image");
2022-04-08 01:11:29 +02:00
let timeCallback = (a) => {};
let atlasBackup = [];
2022-04-05 20:17:39 +02:00
// SETUP
slider.max = timeConfig.length;
slider.value = timeConfig.length;
2022-04-10 09:03:08 +02:00
updateTime(slider.value)
2022-04-05 20:17:39 +02:00
2022-04-10 09:03:08 +02:00
slider.addEventListener("input", (event) => {
2022-04-05 20:17:39 +02:00
updateTime(parseInt(event.target.value))
2022-04-10 09:03:08 +02:00
})
2022-04-05 20:17:39 +02:00
async function updateTime(index) {
let configObject = timeConfig[index-1];
if (!configObject.image) {
console.log("fetching");
let fetchResult = await fetch(configObject.url);
let imageBlob = await fetchResult.blob();
configObject.image = URL.createObjectURL(imageBlob);
}
image.src = configObject.image;
2022-04-08 01:11:29 +02:00
// TEMP ATLAS ONLY ON LAST TIMESTAMP
if (configObject.showAtlas) {
atlas = atlasBackup
} else {
atlas = []
}
timeCallback(atlas)
2022-04-10 09:03:08 +02:00
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', () => 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"
)