Add caption to output

index.html

@@ -6,8 +6,10 @@
 
 	<style>
 		body {
-			max-width: 70em;
+			max-width: 50em;
+			margin: 1.5em auto;
 		}
+
 		input {
 			margin-left: 1em;
 		}
@@ -22,6 +24,15 @@
 			width: 10em;
 		}
 
+		.vanish {
+			display: none;
+		}
+
+		#print [id^=caption-] {
+			text-align: center;
+			font-family: sans-serif;
+		}
+
 		#print {
 			width: 100%;
 		}
@@ -59,7 +70,8 @@
 			to 3.
 		</p>
 		<p>
-			The target <strong>will not</strong> fit on US letter paper if <em>Actual distance</em> is more than ~35% of <em>Simulated distance</em>.
+			The target <strong>will not</strong> fit on US letter paper if <em>Actual distance</em> is more than ~35% of
+			<em>Simulated distance</em>.
 		</p>
 		<hr>
 		<p>
@@ -68,6 +80,13 @@
 		<p>
 			<label>Actual distance<input id="actual-range" type="number" value="3"></label>
 		</p>
+		<fieldset id="caption-settings">
+			<legend>Caption</legend>
+			<label><input type="radio" name="caption-pos" value="none" checked>None</label>
+			<label><input type="radio" name="caption-pos" value="above">Above</label>
+			<label><input type="radio" name="caption-pos" value="below">Below</label>
+			<p><label>Text<input id="caption-input"></label></p>
+		</fieldset>
 		<fieldset role="radiogroup" id="target-styles">
 			<legend>Target style</legend>
 
@@ -91,8 +110,11 @@
 			<button id="print-button">Print</button>
 		</p>
 	</div>
+
 	<div id="print">
+		<h1 id="caption-above"></h1>
 		<img class="target">
+		<h1 id="caption-below"></h1>
 	</div>
 
 	<script>
@@ -104,7 +126,7 @@
 			const updateScale = () => {
 				let scale = actualRange.value / simulatedRange.value;
 				target.style.width = target.naturalWidth * scale + "mm";
-			}
+			};
 			simulatedRange.addEventListener("change", updateScale);
 			actualRange.addEventListener("change", updateScale);
 			target.addEventListener("load", updateScale);
@@ -117,10 +139,39 @@
 				target.src = src;
 			};
 
-			document.querySelectorAll("#target-styles label").forEach((label) => {
+			document.querySelectorAll("#target-styles label").forEach(label => {
 				label.addEventListener("change", updateTargetStyle);
 			});
 			updateTargetStyle();
+
+			let captionInput = document.getElementById("caption-input");
+			let captionAbove = document.getElementById("caption-above");
+			let captionBelow = document.getElementById("caption-below");
+			const updateCaptionPosition = () => {
+				let value = document.querySelector("#caption-settings input[name=caption-pos]:checked").value;
+				captionInput.disabled = value === "none";
+
+				if (value === "above") {
+					captionAbove.classList.remove("vanish");
+					captionBelow.classList.add("vanish");
+				} else if (value === "below") {
+					captionAbove.classList.add("vanish");
+					captionBelow.classList.remove("vanish");	
+				} else {
+					captionAbove.classList.add("vanish");
+					captionBelow.classList.add("vanish");
+				}
+			};
+			const updateCaptionText = () => {
+				captionAbove.innerText = captionBelow.innerText = captionInput.value;
+			}
+			document.querySelectorAll("#caption-settings input[name=caption-pos]").forEach(radio => {
+				radio.addEventListener("change", updateCaptionPosition);
+			});
+			captionInput.addEventListener("change", updateCaptionText);
+			captionInput.addEventListener("keydown", updateCaptionText);
+			updateCaptionText();
+			updateCaptionPosition();
 		}
 	</script>
 </body>