MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-12-26 21:04:24 +01: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; background-color: #888;
border: 1px black solid; border: 1px black solid;
padding: 0.5em; padding: 0.5em;
margin-bottom: 0.5em margin-bottom: 0.5em;
font-size: 0.9em;
} }
.period-group[data-active="true"] { .period-group[data-active="true"] {

21
web/_js/draw.js
View file

@ -40,6 +40,7 @@ var path = [];
var pathWithPeriods = [] var pathWithPeriods = []
var periodGroupElements = [] var periodGroupElements = []
var disableDrawingOverride = false
var drawing = true; var drawing = true;
function initDraw(){ function initDraw(){
@ -291,8 +292,9 @@ function initDraw(){
} }
function finish(){ function finish(){
drawing = false;
updatePath() updatePath()
drawing = false;
disableDrawingOverride = true;
objectInfoBox.style.display = "block"; objectInfoBox.style.display = "block";
objectDraw.style.display = "none"; objectDraw.style.display = "none";
hintText.style.display = "none"; hintText.style.display = "none";
@ -308,6 +310,7 @@ function initDraw(){
updatePath([]) updatePath([])
undoHistory = []; undoHistory = [];
drawing = true; drawing = true;
disableDrawingOverride = false;
objectInfoBox.style.display = "none"; objectInfoBox.style.display = "none";
objectDraw.style.display = "block"; objectDraw.style.display = "block";
hintText.style.display = "block"; hintText.style.display = "block";
@ -320,6 +323,7 @@ function initDraw(){
function back(){ function back(){
drawing = true; drawing = true;
disableDrawingOverride = false;
updatePath() updatePath()
objectInfoBox.style.display = "none"; objectInfoBox.style.display = "none";
objectDraw.style.display = "block"; objectDraw.style.display = "block";
@ -460,6 +464,7 @@ function initDraw(){
initPeriodGroups() initPeriodGroups()
document.addEventListener('timeupdate', (event) => { document.addEventListener('timeupdate', (event) => {
renderBackground()
updatePeriodGroups() updatePeriodGroups()
}) })
@ -505,11 +510,15 @@ function initPeriodGroups() {
endPeriodEl.value = end endPeriodEl.value = end
endPeriodEl.max = maxPeriod endPeriodEl.max = maxPeriod
startPeriodEl.addEventListener('input', () => { startPeriodEl.addEventListener('input', event => {
updatePeriodGroups() timelineSlider.value = parseInt(event.target.value)
updateTime(parseInt(event.target.value))
console.log(parseInt(event.target.value))
}) })
endPeriodEl.addEventListener('input', () => { endPeriodEl.addEventListener('input', event => {
updatePeriodGroups() timelineSlider.value = parseInt(event.target.value)
updateTime(parseInt(event.target.value))
console.log(parseInt(event.target.value))
}) })
periodDeleteEl.addEventListener('click', () => { periodDeleteEl.addEventListener('click', () => {
if (pathWithPeriods.length === 1) return if (pathWithPeriods.length === 1) return
@ -594,7 +603,7 @@ function updatePeriodGroups() {
updatePath(pathToActive) 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 tooltip = document.getElementById("timeControlsTooltip")
let image = document.getElementById("image"); let image = document.getElementById("image");
@ -103,13 +103,13 @@ var period = defaultPeriod
window.period = period window.period = period
// SETUP // SETUP
slider.max = timeConfig.length - 1; timelineSlider.max = timeConfig.length - 1;
// document.querySelector('#period-group .period-start').max = defaultPeriod // document.querySelector('#period-group .period-start').max = defaultPeriod
// document.querySelector('#period-group .period-end').max = defaultPeriod // document.querySelector('#period-group .period-end').max = defaultPeriod
slider.value = slider.max; timelineSlider.value = timelineSlider.max;
updateTime(slider.value) updateTime(timelineSlider.value)
slider.addEventListener("input", (event) => { timelineSlider.addEventListener("input", (event) => {
updateTime(parseInt(event.target.value)) updateTime(parseInt(event.target.value))
}) })
@ -123,7 +123,7 @@ slider.addEventListener("input", (event) => {
// updateTime(parseInt(event.target.value)) // updateTime(parseInt(event.target.value))
// }; // };
const dispatchTimeUpdateEvent = (period = slider.value, atlas = atlas) => { const dispatchTimeUpdateEvent = (period = timelineSlider.value, atlas = atlas) => {
const timeUpdateEvent = new CustomEvent('timeupdate', { const timeUpdateEvent = new CustomEvent('timeupdate', {
detail: { detail: {
period: period, period: period,
@ -168,10 +168,10 @@ async function updateTime(currentPeriod) {
dispatchTimeUpdateEvent(currentPeriod, atlas) dispatchTimeUpdateEvent(currentPeriod, atlas)
if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString() if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString()
else tooltip.querySelector('p').textContent = configObject.timestamp 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")