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

Bring back time changing when changing start/stop, improve disable drawing

Browse source
This commit is contained in:
Hans5958 2022-04-14 15:37:29 +07:00
parent ee9edb8031
commit a13b9b2a3a
3 changed files with 26 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
web/_css/style.css
View file

@ -1332,7 +1332,8 @@ .period-group {
background-color: #888;
border: 1px black solid;
padding: 0.5em;
margin-bottom: 0.5em
margin-bottom: 0.5em;
font-size: 0.9em;
}
.period-group[data-active="true"] {

21
web/_js/draw.js
View file

@ -40,6 +40,7 @@ var path = [];
var pathWithPeriods = []
var periodGroupElements = []
var disableDrawingOverride = false
var drawing = true;
function initDraw(){
@ -291,8 +292,9 @@ function initDraw(){
}
function finish(){
drawing = false;
updatePath()
drawing = false;
disableDrawingOverride = true;
objectInfoBox.style.display = "block";
objectDraw.style.display = "none";
hintText.style.display = "none";
@ -308,6 +310,7 @@ function initDraw(){
updatePath([])
undoHistory = [];
drawing = true;
disableDrawingOverride = false;
objectInfoBox.style.display = "none";
objectDraw.style.display = "block";
hintText.style.display = "block";
@ -320,6 +323,7 @@ function initDraw(){
function back(){
drawing = true;
disableDrawingOverride = false;
updatePath()
objectInfoBox.style.display = "none";
objectDraw.style.display = "block";
@ -460,6 +464,7 @@ function initDraw(){
initPeriodGroups()
document.addEventListener('timeupdate', (event) => {
renderBackground()
updatePeriodGroups()
})
@ -505,11 +510,15 @@ function initPeriodGroups() {
endPeriodEl.value = end
endPeriodEl.max = maxPeriod
startPeriodEl.addEventListener('input', () => {
updatePeriodGroups()
startPeriodEl.addEventListener('input', event => {
timelineSlider.value = parseInt(event.target.value)
updateTime(parseInt(event.target.value))
console.log(parseInt(event.target.value))
})
endPeriodEl.addEventListener('input', () => {
updatePeriodGroups()
endPeriodEl.addEventListener('input', event => {
timelineSlider.value = parseInt(event.target.value)
updateTime(parseInt(event.target.value))
console.log(parseInt(event.target.value))
})
periodDeleteEl.addEventListener('click', () => {
if (pathWithPeriods.length === 1) return
@ -594,7 +603,7 @@ function updatePeriodGroups() {
updatePath(pathToActive)
}
drawing = currentActivePathIndex !== undefined
drawing = disableDrawingOverride ? false : currentActivePathIndex !== undefined
}

18
web/_js/time.js
View file

@ -93,7 +93,7 @@ const timeConfig = [
}
];
let slider = document.getElementById("timeControlsSlider");
let timelineSlider = document.getElementById("timeControlsSlider");
let tooltip = document.getElementById("timeControlsTooltip")
let image = document.getElementById("image");
@ -103,13 +103,13 @@ var period = defaultPeriod
window.period = period
// SETUP
slider.max = timeConfig.length - 1;
timelineSlider.max = timeConfig.length - 1;
// document.querySelector('#period-group .period-start').max = defaultPeriod
// document.querySelector('#period-group .period-end').max = defaultPeriod
slider.value = slider.max;
updateTime(slider.value)
timelineSlider.value = timelineSlider.max;
updateTime(timelineSlider.value)
slider.addEventListener("input", (event) => {
timelineSlider.addEventListener("input", (event) => {
updateTime(parseInt(event.target.value))
})
@ -123,7 +123,7 @@ slider.addEventListener("input", (event) => {
// updateTime(parseInt(event.target.value))
// };
const dispatchTimeUpdateEvent = (period = slider.value, atlas = atlas) => {
const dispatchTimeUpdateEvent = (period = timelineSlider.value, atlas = atlas) => {
const timeUpdateEvent = new CustomEvent('timeupdate', {
detail: {
period: period,
@ -168,10 +168,10 @@ async function updateTime(currentPeriod) {
dispatchTimeUpdateEvent(currentPeriod, 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.style.left = (((timelineSlider.offsetWidth)*(timelineSlider.value-1)/(timelineSlider.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")
tooltip.parentElement.addEventListener('mouseenter', () => tooltip.style.left = (((timelineSlider.offsetWidth)*(timelineSlider.value-1)/(timelineSlider.max-1)) - tooltip.offsetWidth/2) + "px")
window.addEventListener('resize', () => tooltip.style.left = (((slider.offsetWidth)*(slider.value-1)/(slider.max-1)) - tooltip.offsetWidth/2) + "px")
window.addEventListener('resize', () => tooltip.style.left = (((timelineSlider.offsetWidth)*(timelineSlider.value-1)/(timelineSlider.max-1)) - tooltip.offsetWidth/2) + "px")