Editing on canvas variations done, rename vars for clarity

web/_css/style.css

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

web/_js/draw.js

@@ -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(startPeriodEl.value),
-					parseInt(periodGroupElements[currentActivePathIndex].endPeriodEl.value)
+					parseInt(endPeriodEl.value),
+					periodVariationEl.value,
 				),
 				path
 			]
@@ -653,21 +670,12 @@ function updatePeriodGroups() {
 	
 }
 
-function parsePeriod(periodString) {
+function formatPeriod(start, end, variation) {
-	periodString = periodString + ""
+	let periodString 
-	// TODO: Support for multiple/alternative types of canvas
+	if (start === end) periodString = start
-	if (periodString.search('-') + 1) {
+	else periodString = start + "-" + end
-		var [start, end] = periodString.split('-').map(i => parseInt(i))
+	if (variation !== "default") periodString = variationsConfig[variation].code + ":" + periodString
-		return [start, end]
+	return periodString
-	} else {
-		let periodNew = parseInt(periodString)
-		return [periodNew, periodNew]
-	}
-}
-
-function formatPeriod(start, end) {
-	if (start === end) return start
-	else return start + "-" + end
 }
 
 function updatePath(newPath) {
@@ -704,12 +712,7 @@ function updateErrors() {
 		periodsStatus.textContent = ``
 		finishButton.disabled = false
 		periodGroupElements.forEach((elements, index) => {
-			let {
+			let { periodGroupEl } = elements
-				periodGroupEl,
-				startPeriodEl,
-				endPeriodEl,
-				periodVisibilityEl
-			} = 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, period2] = parsePeriod(pathWithPeriods[j][0])
-			let [start2, end2] = parsePeriod(pathWithPeriods[j][0])
+			if (period1 !== period2) continue
 			if (
 				(start2 <= start1 && start1 <= end2) ||
 				(start2 <= end1 && end1 <= end2) ||

web/_js/main.js

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

web/_js/time.js

@@ -194,21 +194,21 @@ const image = document.getElementById("image");
 
 let defaultPeriod = timeConfig.length - 1
 let maxPeriod = timeConfig.length - 1
-let period = defaultPeriod
+let currentPeriod = defaultPeriod
-let variation = "default"
+let currentVariation = "default"
-window.period = period
+window.currentPeriod = currentPeriod
-window.variation = variation
+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) {
+async function updateBackground(newPeriod = currentPeriod, newVariation = currentVariation) {
-    period = newPeriod
+    currentPeriod = newPeriod
     console.log(newPeriod, newVariation)
     const variationConfig = variationsConfig[newVariation]
-    if (variation !== newVariation) {
+    if (currentVariation !== newVariation) {
-        variation = newVariation
+        currentVariation = newVariation
         timelineSlider.max = variationConfig.versions.length - 1;
-        period = variationConfig.default;
+        currentPeriod = variationConfig.default;
-        newPeriod = period 
+        newPeriod = currentPeriod 
-        timelineSlider.value = period 
+        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]

web/index.html

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