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

Added snapping for time controls slider

Browse source 
The slider should snap to the default period (such as before the whiteout)
This commit is contained in:
mxdanger 2022-05-05 00:20:56 -07:00
parent 30ec554fc7
commit 30f2f77126
3 changed files with 9 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/_css/style.css
View file

@ -144,8 +144,8 @@ #objectsList {
width: 100%;
position: absolute;
right: 0;
top: 3.75rem;
max-height: calc(100% - 3.75rem);
top: 3.7rem;
max-height: calc(100% - 3.7rem);
overflow-y: auto;
z-index: 0;
}

4
web/_js/time.js
View file

@ -65,7 +65,8 @@ for (const variation in variationsConfig) {
}
const timelineSlider = document.getElementById("timeControlsSlider");
const tooltip = document.getElementById("timeControlsTooltip")
const timelineList = document.getElementById("timeControlsList");
const tooltip = document.getElementById("timeControlsTooltip");
const image = document.getElementById("image");
let abortController = new AbortController()
let currentUpdateIndex = 0
@ -82,6 +83,7 @@ window.currentVariation = currentVariation
// SETUP
timelineSlider.max = variationsConfig[currentVariation].versions.length - 1;
timelineSlider.value = currentPeriod;
timelineList.children[0].value = defaultPeriod;
timelineSlider.addEventListener("input", (event) => {
updateTooltip(parseInt(event.target.value), currentVariation)

5
web/index.html
View file

@ -253,7 +253,10 @@ <h5 class="offcanvas-title" id="offcanvasListLabel">Atlas Entries List</h5>
</div>
<div id="timeControls" class="bg-body px-2 py-1 border rounded shadow">
<label for="timeControlsSlider" class="visually-hidden">Time control slider</label>
<input type="range" class="form-range" min="0" max="1" value="1" id="timeControlsSlider" aria-describedby="timeControlsTooltip"></input>
<input type="range" class="form-range" min="0" max="1" value="1" id="timeControlsSlider" list="timeControlsList" aria-describedby="timeControlsTooltip"></input>
<datalist id="timeControlsList">
<option value=""></option>
</datalist>
<div class="tooltip border rounded text-nowrap" role="tooltip" id="timeControlsTooltip"><div class="bg-body rounded p-1">Tooltip</div></div>
</div>
<div id="author" class="bg-body d-flex align-items-center justify-content-center py-1 px-2 rounded shadow" style="--bs-bg-opacity: .9;">