Only do final for TFC, hide sliders when only one version is on the variation

tools/migrate_atlas_format.py

@@ -57,7 +57,7 @@ def per_line_entries(entries: list):
     else:
       time_range = INIT_CANVAS_RANGE
 
-    time_key = '%d-%d, T:0-2' % time_range
+    time_key = '%d-%d, T:0' % time_range
 
     new_entry = {
       **new_entry,

web/_css/style.css

@@ -866,6 +866,7 @@ #zoomControls {
 	width: 90px;
 	display: flex;
 	align-self: flex-end;
+	margin-right: auto;
 }
 
 #zoomControls button {
@@ -1382,4 +1383,11 @@ #variantControls {
 
 #variantControls select {
 	height: 30px !important;
-}
+}
+
+#timeControls.no-time-slider,
+.period-group.no-time-slider input,
+.period-group.no-time-slider label {
+	display: none;
+}
+

web/_js/draw.js

@@ -522,6 +522,8 @@ function initPeriodGroups() {
 		endPeriodEl.max = variationsConfig[variation].versions.length - 1
 		startPeriodEl.value = start
 		endPeriodEl.value = end
+		if (startPeriodEl.max == 0) periodGroupEl.classList.add('no-time-slider')
+		else periodGroupEl.classList.remove('no-time-slider')
 
 		startPeriodEl.addEventListener('input', event => {
 			timelineSlider.value = parseInt(event.target.value)
@@ -547,6 +549,8 @@ function initPeriodGroups() {
 			startPeriodEl.max = newVariationConfig.versions.length - 1
 			endPeriodEl.value = newVariationConfig.default
 			endPeriodEl.max = newVariationConfig.versions.length - 1
+			if (startPeriodEl.max == 0) periodGroupEl.classList.add('no-time-slider')
+			else periodGroupEl.classList.remove('no-time-slider')
 			updateTime(newVariationConfig.default, newVariation)
 		})
 

web/_js/time.js

@@ -23,16 +23,8 @@ const variationsConfig = {
 	tfc: {
 		name: "The Final Clean",
 		code: "T",
-		default: 2,
+		default: 0,
 		versions: [
-			{
-				timestamp: "Draft 1",
-				url: "./_img/canvas/tfc/draft1.png",
-			},
-			{
-				timestamp: "Draft 2",
-				url: "./_img/canvas/tfc/draft2.png",
-			},
 			{
 				timestamp: "Final",
 				url: "./_img/canvas/tfc/final.png",
@@ -88,16 +80,6 @@ variantsEl.addEventListener("input", (event) => {
 	updateTime(currentPeriod, event.target.value)
 })
 
-// document.querySelector('#period-group .period-start').oninput = (event) => {
-//     slider.value = parseInt(event.target.value)
-//     updateTime(parseInt(event.target.value))
-// };
-
-// document.querySelector('#period-group .period-end').oninput = (event) => {
-//     slider.value = parseInt(event.target.value)
-//     updateTime(parseInt(event.target.value))
-// };
-
 const dispatchTimeUpdateEvent = (period = timelineSlider.value, atlas = atlas) => {
 	const timeUpdateEvent = new CustomEvent('timeupdate', {
 		detail: {
@@ -120,6 +102,9 @@ async function updateBackground(newPeriod = currentPeriod, newVariation = curren
 		timelineSlider.max = variationConfig.versions.length - 1;
 		currentPeriod = variationConfig.default;
 		newPeriod = currentPeriod
+		if (variationConfig.versions.length === 1) timelineSlider.parentElement.classList.add('no-time-slider')
+		else timelineSlider.parentElement.classList.remove('no-time-slider')
+	
 	}
 	timelineSlider.value = currentPeriod
 	variantsEl.value = currentVariation
@@ -208,6 +193,7 @@ async function updateTime(newPeriod = currentPeriod, newVariation = currentVaria
 			center: centerChosen,
 		})
 	}
+
 	dispatchTimeUpdateEvent(newPeriod, atlas)
 	document.body.dataset.canvasLoading = false
 }