MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-07-21 19:39:12 +02:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1180 from Hans5958/timeline-tooltip

Browse source 
Add tooltip on timeline
This commit is contained in:
Stefano 2022-04-10 15:27:26 +02:00 committed by GitHub
parent 96d3995dc6 1ac4394793
commit c133b43585
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 38 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
web/_css/style.css
View file

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

20
web/_js/time.js
View file

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

3
web/index.html
View file

@ -171,7 +171,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>Time control slider</p></div>
<input type="range" min="1" max="1" value="1" class="slider" id="timeControlsSlider">
</div>
<div id="author">