MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-12-26 06:23:57 +01:00
Code Issues Projects Releases Wiki Activity

Editing on canvas variations done, rename vars for clarity

Browse source
This commit is contained in:
Hans5958 2022-04-15 23:33:18 +07:00
parent 81ba896e73
commit d676dff31a
5 changed files with 84 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/_css/style.css
View file

@ -1339,6 +1339,10 @@ .period-group {
font-size: 0.9em;
}
.period-group * {
margin-bottom: 0.25em;
}
.period-group[data-status="active"] {
border-color: lime;
}
@ -1347,8 +1351,8 @@ .period-group[data-status="error"] {
border-color: red;
}
.period-group input {
.period-group input,
.period-group select {
width: 100%;
}

102
web/_js/draw.js
View file

@ -432,18 +432,6 @@ function initDraw(){
undoButton.disabled = false;
entryId = params.get('id')
if (typeof entry.period === "string") {
entry.period.split(', ').some(period => {
if (period.search('-') + 1) {
var [before, after] = period.split('-')
startPeriodField.value = before
endPeriodField.value = after
// console.log(before, after)
return
}
})
}
Object.entries(entry.path).forEach(([period, path]) => {
period.split(", ").forEach(period => {
pathWithPeriods.push([period, path])
@ -477,6 +465,7 @@ function initDraw(){
periodsAdd.addEventListener('click', () => {
pathWithPeriods.push([defaultPeriod, []])
console.log(JSON.stringify(pathWithPeriods))
initPeriodGroups()
})
@ -506,11 +495,6 @@ function calculateCenter(path){
return [Math.floor(x / area)+0.5, Math.floor(y / area)+0.5];
}
function isOnPeriod(start = parseInt(startPeriodField.value), end = parseInt(endPeriodField.value), current = period) {
// console.log(start, end, current, current >= start && current <= end)
return current >= start && current <= end
}
function initPeriodGroups() {
periodGroupElements = []
@ -527,14 +511,17 @@ function initPeriodGroups() {
let periodVisibilityEl = periodGroupEl.querySelector('.period-visible')
let periodDeleteEl = periodGroupEl.querySelector('.period-delete')
let periodDuplicateEl = periodGroupEl.querySelector('.period-duplicate')
let periodVariationEl = periodGroupEl.querySelector('.period-variation')
let [start, end] = parsePeriod(period)
let [start, end, variation] = parsePeriod(period)
console.log(period, start, end, variation)
startPeriodEl.id = "periodStart" + index
startPeriodEl.previousSibling.for = startPeriodEl.id
endPeriodEl.id = "periodEnd" + index
endPeriodEl.previousSibling.for = endPeriodEl.id
periodVisibilityEl.id = "periodVisibility" + index
periodVariationEl.id = "periodVariation" + index
startPeriodEl.value = start
startPeriodEl.max = maxPeriod
@ -543,12 +530,12 @@ function initPeriodGroups() {
startPeriodEl.addEventListener('input', event => {
timelineSlider.value = parseInt(event.target.value)
updateTime(parseInt(event.target.value))
updateTime(parseInt(event.target.value), variation)
// console.log(parseInt(event.target.value))
})
endPeriodEl.addEventListener('input', event => {
timelineSlider.value = parseInt(event.target.value)
updateTime(parseInt(event.target.value))
updateTime(parseInt(event.target.value), variation)
// console.log(parseInt(event.target.value))
})
periodDeleteEl.addEventListener('click', () => {
@ -560,13 +547,34 @@ function initPeriodGroups() {
pathWithPeriods.push([pathWithPeriods[index][0], [...pathWithPeriods[index][1]]])
initPeriodGroups()
})
periodVariationEl.addEventListener('input', event => {
let newVariation = event.target.value
let newVariationConfig = variationsConfig[newVariation]
startPeriodEl.value = newVariationConfig.default
startPeriodEl.max = newVariationConfig.versions.length - 1
endPeriodEl.value = newVariationConfig.default
endPeriodEl.max = newVariationConfig.versions.length - 1
updateTime(period, newVariation)
// console.log(parseInt(event.target.value))
})
periodGroups.appendChild(periodGroupEl)
for (let variation in variationsConfig) {
const optionEl = document.createElement('option')
optionEl.value = variation
optionEl.textContent = variationsConfig[variation].name
periodVariationEl.appendChild(optionEl)
}
periodVariationEl.value = variation
periodGroupElements.push({
periodGroupEl,
startPeriodEl,
endPeriodEl,
periodVisibilityEl
periodVisibilityEl,
periodVariationEl
})
})
// console.log(periodGroupTemplate)
@ -587,7 +595,8 @@ function updatePeriodGroups() {
periodGroupEl,
startPeriodEl,
endPeriodEl,
periodVisibilityEl
periodVisibilityEl,
periodVariationEl
} = elements
if (periodGroupEl.dataset.active === "true") lastActivePathIndex = index
@ -596,7 +605,9 @@ function updatePeriodGroups() {
if (isOnPeriod(
parseInt(startPeriodEl.value),
parseInt(endPeriodEl.value),
period
periodVariationEl.value,
currentPeriod,
currentVariation
)) {
pathToActive = pathWithPeriods[index][1]
currentActivePathIndex = index
@ -607,7 +618,7 @@ function updatePeriodGroups() {
pathWithPeriods[index][0] = formatPeriod(
parseInt(startPeriodEl.value),
parseInt(endPeriodEl.value),
period
periodVariationEl.value
)
})
@ -627,10 +638,16 @@ function updatePeriodGroups() {
if (lastActivePathIndex !== undefined) {
if (lastActivePathIndex === currentActivePathIndex) {
// just update the path
let {
startPeriodEl,
endPeriodEl,
periodVariationEl
} = periodGroupElements[currentActivePathIndex]
pathWithPeriods[currentActivePathIndex] = [
formatPeriod(
parseInt(periodGroupElements[currentActivePathIndex].startPeriodEl.value),
parseInt(periodGroupElements[currentActivePathIndex].endPeriodEl.value)
parseInt(startPeriodEl.value),
parseInt(endPeriodEl.value),
periodVariationEl.value,
),
path
]
@ -653,21 +670,12 @@ function updatePeriodGroups() {
}
function parsePeriod(periodString) {
periodString = periodString + ""
// TODO: Support for multiple/alternative types of canvas
if (periodString.search('-') + 1) {
var [start, end] = periodString.split('-').map(i => parseInt(i))
return [start, end]
} else {
let periodNew = parseInt(periodString)
return [periodNew, periodNew]
}
}
function formatPeriod(start, end) {
if (start === end) return start
else return start + "-" + end
function formatPeriod(start, end, variation) {
let periodString
if (start === end) periodString = start
else periodString = start + "-" + end
if (variation !== "default") periodString = variationsConfig[variation].code + ":" + periodString
return periodString
}
function updatePath(newPath) {
@ -704,12 +712,7 @@ function updateErrors() {
periodsStatus.textContent = ``
finishButton.disabled = false
periodGroupElements.forEach((elements, index) => {
let {
periodGroupEl,
startPeriodEl,
endPeriodEl,
periodVisibilityEl
} = elements
let { periodGroupEl } = elements
if (periodGroupEl.dataset.active === "true") periodGroupEl.dataset.status = "active"
else periodGroupEl.dataset.status = ""
})
@ -721,9 +724,10 @@ function getConflicts() {
let conflicts = new Set()
for (let i = pathWithPeriods.length - 1; i > 0; i--) {
let [start1, end1, period1] = parsePeriod(pathWithPeriods[i][0])
for (let j = 0; j < i; j++) {
let [start1, end1] = parsePeriod(pathWithPeriods[i][0])
let [start2, end2] = parsePeriod(pathWithPeriods[j][0])
let [start2, end2, period2] = parsePeriod(pathWithPeriods[j][0])
if (period1 !== period2) continue
if (
(start2 <= start1 && start1 <= end2) ||
(start2 <= end1 && end1 <= end2) ||

2
web/_js/main.js
View file

@ -90,7 +90,7 @@ async function init(){
atlasAll = updateAtlasAll(atlas);
await updateTime(period, variation)
await updateTime(currentPeriod, currentVariation)
//console.log(document.documentElement.clientWidth, document.documentElement.clientHeight);

43
web/_js/time.js
View file

@ -194,21 +194,21 @@ const image = document.getElementById("image");
let defaultPeriod = timeConfig.length - 1
let maxPeriod = timeConfig.length - 1
let period = defaultPeriod
let variation = "default"
window.period = period
window.variation = variation
let currentPeriod = defaultPeriod
let currentVariation = "default"
window.currentPeriod = currentPeriod
window.currentVariation = currentVariation
// SETUP
timelineSlider.max = timeConfig.length - 1;
timelineSlider.value = period;
timelineSlider.value = currentPeriod;
timelineSlider.addEventListener("input", (event) => {
updateTime(parseInt(event.target.value), variation)
updateTime(parseInt(event.target.value), currentVariation)
})
variantsEl.addEventListener("input", (event) => {
updateTime(period, event.target.value)
updateTime(currentPeriod, event.target.value)
})
// document.querySelector('#period-group .period-start').oninput = (event) => {
@ -231,18 +231,18 @@ const dispatchTimeUpdateEvent = (period = timelineSlider.value, atlas = atlas) =
document.dispatchEvent(timeUpdateEvent);
}
async function updateBackground(newPeriod = period, newVariation = variation) {
period = newPeriod
async function updateBackground(newPeriod = currentPeriod, newVariation = currentVariation) {
currentPeriod = newPeriod
console.log(newPeriod, newVariation)
const variationConfig = variationsConfig[newVariation]
if (variation !== newVariation) {
variation = newVariation
if (currentVariation !== newVariation) {
currentVariation = newVariation
timelineSlider.max = variationConfig.versions.length - 1;
period = variationConfig.default;
newPeriod = period
timelineSlider.value = period
currentPeriod = variationConfig.default;
newPeriod = currentPeriod
timelineSlider.value = currentPeriod
}
const configObject = variationConfig.versions[period];
const configObject = variationConfig.versions[currentPeriod];
if (!configObject.image) {
const fetchResult = await fetch(configObject.url);
const imageBlob = await fetchResult.blob();
@ -253,7 +253,7 @@ async function updateBackground(newPeriod = period, newVariation = variation) {
return [configObject, newPeriod, newVariation]
}
async function updateTime(newPeriod = period, newVariation = variation) {
async function updateTime(newPeriod = currentPeriod, newVariation = currentVariation) {
let configObject
[configObject, newPeriod, newVariation] = await updateBackground(newPeriod, newVariation)
@ -263,12 +263,13 @@ async function updateTime(newPeriod = period, newVariation = variation) {
let validPeriods2 = Object.keys(atlasAll[atlasIndex].path)
console.log(chosenIndex)
// console.log(chosenIndex)
for (let i in validPeriods2) {
let validPeriods = validPeriods2[i].split(', ')
for (let j in validPeriods) {
let [start, end, variation] = parsePeriod(validPeriods[j])
// console.log(start, end, variation, newPeriod, newVariation)
if (isOnPeriod(start, end, variation, newPeriod, newVariation)) {
// console.log("match", start, end, variation, newPeriod, newVariation, i)
chosenIndex = i
@ -295,7 +296,7 @@ async function updateTime(newPeriod = period, newVariation = variation) {
center: centerChosen,
})
}
console.log(atlas)
// console.log(atlas)
dispatchTimeUpdateEvent(newPeriod, atlas)
if (typeof configObject.timestamp === "number") tooltip.querySelector('p').textContent = new Date(configObject.timestamp*1000).toUTCString()
@ -312,12 +313,14 @@ function isOnPeriod(start, end, variation, currentPeriod, currentVariation) {
}
function parsePeriod(periodString) {
// console.log(periodString)
let variation = "default"
periodString = periodString + ""
if (periodString.split(':').length > 1) {
variation = periodString.split(':')[0]
let split = periodString.split(':')
variation = codeReference[split[0]]
periodString = split[1]
}
// TODO: Support for multiple/alternative types of canvas
if (periodString.search('-') + 1) {
var [start, end] = periodString.split('-').map(i => parseInt(i))
return [start, end, variation]

1
web/index.html
View file

@ -298,6 +298,7 @@ <h2>Donation Links</h2>
<button class="period-delete">Delete</button>
<button class="period-duplicate">Duplicate</button>
</div>
<select class="period-variation"></select>
</div>
</template>