Add tooltip on timeline

web/_css/style.css

@@ -732,6 +732,7 @@ #timeControls {
 	font-size: 12px;
 	text-align: center;
 	min-width: 300px;
+	position: relative;
 }
 
 #timeControls input {
@@ -742,6 +743,26 @@ #timeControls input {
     width: 100%;
 }
 
+#timeControlsTooltip {
+	display: none;
+	position: absolute;
+	padding: 0.5em 2em;
+	background: #555;
+	border: 1px #000 solid;
+	justify-content: center;
+	bottom: 40px;
+	white-space: nowrap;
+}
+
+#timeControlsTooltip p {
+	line-height: normal;
+	margin-bottom: 0;
+}
+
+#timeControls:hover #timeControlsTooltip {
+	display: flex;
+}
+
 .slider::-webkit-slider-thumb {
 	-webkit-appearance: none;
 	appearance: none;

web/_js/time.js

@@ -90,10 +90,11 @@ const timeConfig = [
         url: "./_img/place/final.png",
         image: null,
         showAtlas: true,
-    },
+    }
 ];
 
 let slider = document.getElementById("timeControlsSlider");
+let tooltip = document.getElementById("timeControlsTooltip")
 let image = document.getElementById("image");
 
 let timeCallback = (a) => {};
@@ -102,11 +103,11 @@ let atlasBackup = [];
 // SETUP
 slider.max = timeConfig.length;
 slider.value = timeConfig.length;
-updateTime(timeConfig.length)
+updateTime(slider.value)
 
-slider.oninput = (event) => {
+slider.addEventListener("input", (event) => {
     updateTime(parseInt(event.target.value))
-};
+})
 
 async function updateTime(index) {
     let configObject = timeConfig[index-1];
@@ -124,4 +125,13 @@ async function updateTime(index) {
         atlas = []
     }
     timeCallback(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', () => 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"
+)

web/index.html

@@ -156,7 +156,8 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 					<button title="Reset View" id="zoomResetButton"></button>
 					<button title="Zoom Out" id="zoomOutButton"></button>
 				</div>
-					<div id="timeControls">
+				<div id="timeControls">
+					<div id="timeControlsTooltip"><p>Test</p></div>
 					<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
 				</div>
 				<div id="author">