diff --git a/web/_css/style.css b/web/_css/style.css index 5a68b752..3aa4c717 100644 --- a/web/_css/style.css +++ b/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; diff --git a/web/_js/time.js b/web/_js/time.js index 49483cbf..76e23a42 100644 --- a/web/_js/time.js +++ b/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) -} \ No newline at end of file + 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" +) \ No newline at end of file diff --git a/web/index.html b/web/index.html index 3fa03216..b2f5021c 100644 --- a/web/index.html +++ b/web/index.html @@ -171,7 +171,8 @@

The 2022 /r/place Atlas

-
+
+

Time control slider